微信小程序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支付源碼下載，微信小程序支付開發教程