小程序webview支付

我们项目已在公众号上线，目前开发小程序，目标是直接采用webview，不需要再开发一次，但是小程序的webview不支持微信支付，只能通过跳回小程序调用小程序支付的API,我写了demo。

具体项目结构如下：

项目结构.png

1.首先在vue项目(其他用jQuery也类似)引入jssdk,这样可以调用wx.miniProgram的相关接口

<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

说明一下，src中不引用http域名是我们项目环境有http和https两种方式，这样写可以根据服务器域名动态更改
相关官网文档说明:

webview接口.png

2.小程序加入webview组件，调用接口跳转到相关webview

//事件处理函数
  toWebview:function(){
    wx.navigateTo({
      url: '/pages/webview/webview',
    })
  },

3.webview处理完相关业务逻辑，需要跳回小程序，携带后台返回的支付必要的参数

  //小程序和公众号跳转不同页面
        navigateToPay: function() {
            if (this.isMiniProgram === true) {
                // alert('小程序')
                //由后台协商好返回的数据格式，该代码仅供参考，不能实际使用
              const    payParam = {
                    appId: "wxd678efh567hg6787",
                    nonceStr: "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
                    package: "prepay_id=wx2017033010242291fcfe0db70013231072",
                    signType: "MD5",
                    timeStamp: "1490840662",
                    paySign:"BB2B9BD3F2F8A1CB270C6ACE3D7BDB9"
                };
                // alert(payParam);
                this.navigateToMiniProgram(JSON.stringify(payParam));
            } else {
                alert('公众号');
                //原先支付逻辑不用修改;
            }
        }

4.调用小程序的wx.requestPayment唤起支付，如果不需要显示页面可以写个空白页面
5.支付完成，处理相关逻辑。
具体demo点这里