微信小程序web-view支付开发说明，附支付demo

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

发起微信支付：wx.requestPayment(OBJECT)

示例代码：

wx.requestPayment({
   'timeStamp': '',
   'nonceStr': '',
   'package': '',
   'signType': 'MD5',
   'paySign': '',
   'success':function(res){
   },
   'fail':function(res){
   }
})

 

官方开发者文档：https://developers.weixin.qq.com ... equestpaymentobject

本具体项目结构如下：

 
项目结构.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下载：微信小程序webview支付源码下载，微信小程序支付开发教程