我們項(xiàng)目已在公眾號(hào)上線，目前開(kāi)發(fā)小程序，目標(biāo)是直接采用webview，不需要再開(kāi)發(fā)一次，但是小程序的webview不支持微信支付，只能通過(guò)跳回小程序調(diào)用小程序支付的API,我寫了demo。

具體項(xiàng)目結(jié)構(gòu)如下：

項(xiàng)目結(jié)構(gòu).png

1.首先在vue項(xiàng)目(其他用jQuery也類似)引入jssdk,這樣可以調(diào)用wx.miniProgram的相關(guān)接口

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

說(shuō)明一下，src中不引用http域名是我們項(xiàng)目環(huán)境有http和https兩種方式，這樣寫可以根據(jù)服務(wù)器域名動(dòng)態(tài)更改
相關(guān)官網(wǎng)文檔說(shuō)明:

webview接口.png

2.小程序加入webview組件，調(diào)用接口跳轉(zhuǎn)到相關(guān)webview

//事件處理函數(shù)
  toWebview:function(){
    wx.navigateTo({
      url: '/pages/webview/webview',
    })
  },

3.webview處理完相關(guān)業(yè)務(wù)邏輯，需要跳回小程序，攜帶后臺(tái)返回的支付必要的參數(shù)

  //小程序和公眾號(hào)跳轉(zhuǎn)不同頁(yè)面
        navigateToPay: function() {
            if (this.isMiniProgram === true) {
                // alert('小程序')
                //由后臺(tái)協(xié)商好返回的數(shù)據(jù)格式，該代碼僅供參考，不能實(shí)際使用
              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('公眾號(hào)');
                //原先支付邏輯不用修改;
            }
        }

4.調(diào)用小程序的wx.requestPayment喚起支付，如果不需要顯示頁(yè)面可以寫個(gè)空白頁(yè)面
5.支付完成，處理相關(guān)邏輯。
具體demo點(diǎn)這里