微信小程序使用web-view内嵌H5网页,并调用微信小程序支付

H5网页在调用jsapi进行支付的时候是没有问题的，但是当网页在小程序web-view打开就不能使用jsapi进行支付了，这时候就需要在小程序里面完成支付。
下面的例子使用的是跳转支付页面去支付。
<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <title>微信支付</title>
    <style>
        #container {
            padding: 0 15px;
        }

        .page__title {
            text-align: center;
            padding: 20px 0;
            color: gray;
            font-size: 20px;
        }
    </style>
</head>
<body ontouchstart>
    <script type="text/javascript">
        wx.config({
            debug: false,
            appId: '@ViewBag.wx_appid',
            timestamp: '@ViewBag.wx_timestamp',
            nonceStr: '@ViewBag.wx_nonceStr',
            signature: '@ViewBag.wx_signature',
            jsApiList: [
                'checkJsApi',
                'closeWindow',
                'scanQRCode',
                'chooseWXPay'
            ]
        });
        function isInApplets(){
            wx.miniProgram.getEnv(function (res) {//获取当前环境
                    if(res.miniprogram){ // true 在微信小程序中
                        return 1;
                    }else{// false 在微信公众号里
                        return -1;
                    }
            });
        }

        wx.ready(function () {
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                 wx.miniProgram.getEnv(function (res) {//获取当前环境
                    if(res.miniprogram){ // true 在微信小程序中
                        console.log("在小程序中")
                        wxAppletsPay();
                    }else{// false 在微信公众号里
                       onBridgeReady();
                       console.log("不在小程序中")
                    }
                });

            }
        });

        wx.error(function (res) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            //alert("wx.error" + JSON.stringify(res));
        });

        function onBridgeReady() {
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": "@ViewBag.orderInfo["appId"]",     //公众号名称，由商户传入
                    "timeStamp": "@ViewBag.orderInfo["timeStamp"]",         //时间戳，自1970年以来的秒数
                    "nonceStr": "@ViewBag.orderInfo["nonceStr"]", //随机串
                    "package": "@ViewBag.orderInfo["package"]",
                    "signType": "@ViewBag.orderInfo["signType"]",         //微信签名方式：
                    "paySign": "@ViewBag.orderInfo["paySign"]"//微信签名
                },
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        window.location = '@ViewBag.returnUrl';
                    }
                }
            );
        }
        //微信小程序支付
        function wxAppletsPay(){
            //点击微信支付后，调取统一下单接口生成微信小程序支付需要的支付参数
            var payParam = {
                "appId":  "@ViewBag.orderInfo["appId"]",     //外刊小程序appid
                "timeStamp": "@ViewBag.orderInfo["timeStamp"]",         //时间戳，自1970年以来的秒数
                "nonceStr": "@ViewBag.orderInfo["nonceStr"]", //随机串
                "package": "@ViewBag.orderInfo["package"]",
                "signType": "@ViewBag.orderInfo["signType"]",         //微信签名方式：
                "paySign": "@ViewBag.orderInfo["paySign"]"//微信签名
            };

            //定义path 与小程序的支付页面的路径相对应
            var path = '/pages/pay/main?payParam=' + encodeURIComponent(JSON.stringify(payParam));
            //通过JSSDK的api跳转到指定的小程序页面
            wx.miniProgram.navigateTo({url: path});
        }

        $(function () {
            //微信支付
            $("#btn-open-wx-payment").on("click", function () {
                try {
                    if(isInApplets()){// true 在微信小程序中
                        console.log("在小程序中")
                        wxAppletsPay();
                    }else{// false 在微信公众号里
                        onBridgeReady();
                        console.log("不在小程序中")
                    }

                } catch (e) {
                    console.error(e)
                    onBridgeReady();
                    console.log("不在小程序中")
                }
            });
            $("#btn-goback").on("click", function () {
                javascript: history.go(-1);
            });
        });
    </script>
    <div class="container" id="container">
        <div class="page__hd">
            <h1 class="page__title">使用微信付款</h1>
        </div>
        <div class="weui-panel weui-panel_access">
            <div class="weui-panel__bd">
                <a href="javascript:;" class="weui-btn weui-btn_primary" id="btn-open-wx-payment">打开微信支付</a>
                <a href="javascript:;" class="weui-btn weui-btn_default" id="btn-goback">返回上一页</a>
            </div>
        </div>
    </div>
</body>
</html>