热门课程 UI设计PHPJAVA小程序人工智能和大数据
中原洛科 >> 课程新闻

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

发布者:admin 发布时间:2019-03-19 阅读:388次 分享到:

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

1
<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

1
2
3
4
5
6
//事件处理函数
  toWebview:function(){
    wx.navigateTo({
      url: '/pages/webview/webview',
    })
  },

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//小程序和公众号跳转不同页面
      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.支付完成,处理相关逻辑。


© 2009-2019 By chinalooke.com 洛阳科洛信息技术有限公司 All Rights Reserved. 法律顾问:董朝阳律师