微信小程序webview网页调起小程序微信支付

之前有一套程序是写的网页版，用webview套的微信小程序，现在需要加一个微信支付，于是就犯难了，难道要重写一套小程序界面？迫于无奈，搜了下webview能否发起微信小程序的支付，还真找到一些，不过并不详实，有的还有些问题，于是整理总结下，以免以后忘记。

判断访问网页的是web访问还是小程序webview访问

由于原来的页面是直接发起公众号jsapi支付，要提前加一个桥页，进行判断，是哪种方式访问

我后端的代码是统一下单，大部分代码相同，传参进行不同的处理

1
// 判断是否小程序访问
2
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
3
<script type="text/javascript">
4
  window.onload = function(){
5
    var url = 'http://xxx.com/xxx'
6
    var isWxMini = window.__wxjs_environment === 'miniprogram'
7
    if (isWxMini) {
8
      window.location.href=url+'?type=miniprogram'
9
    } else {
10
      window.location.href=url+'?type=web'
11
    }
12
  };
13
</script>

这里后端(即上文的 url )判断后，是web访问就正常发起公众号jsapi支付，不是的话，传订单号至小程序的支付页面

webview网页跳转至微信小程序页面

1
// 上下文省略,仅展示webview网页跳转至微信小程序页面的能力
2
// ...
3
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
4
<script type="text/javascript">
5
  wx.miniProgram.navigateTo({
6
    url: "/pages/wxPay/index?order_id="+order_id
7
  })
8
</script>
9
// ...

微信小程序获取小程序的openid

1
// ...
2
onLoad: function (options) {
3
  this.setData({
4
      order_id: options.order_id
5
  });
6
  this.getTempcode();
7
},
8
getTempcode: function () {
9
  var self = this;
10
  wx.login({
11
    success: res => {
12
      // 获取到 res.code
13
      // 发送 res.code 到后台换取 openId, sessionKey, unionId
14
      wx.request({
17 collapsed lines
15
        url: 'http://xxx.com/xxx/'+res.code,
16
        data: {
17
        },
18
        method: 'GET',
19
        success: function (res) {
20
          // console.log(res)
21
          self.setData({
22
            user:res.data.user
23
          })
24
        // 获取支付信息
25
          self.getPayinfo();
26
        }
27
      })
28

29
    }
30
  })
31
}

获取支付信息并调起支付

支付成功后，从小程序跳转回webview，并指定网址

1
//...
2
getPayinfo: function () {
3
  var self = this;
4
  wx.request({
5
    //后台接口地址
6
    url: 'http://xxx.com/xx/'+self.data.order_id+'/'+self.data.user.openid,
7
    data: {
8
    },
9
    method: 'GET',
10
    success: function (res) {
11
      self.setData({
12
          jsapi: res.data.data.jsapi,// 支付信息
13
          view_url: res.data.data.view_url// 支付后跳转回的网页url
14
      });
24 collapsed lines
15
      // 调起支付
16
      wx.requestPayment({
17
        'timeStamp': self.data.jsapi.timeStamp,// 为字符串，否则报错
18
        'nonceStr': self.data.jsapi.nonceStr,
19
        'package': self.data.jsapi.package,
20
        'signType': 'MD5',
21
        'paySign': self.data.jsapi.paySign,
22
        'success': function (res) {
23
          console.log('=======支付成功==========');
24
          wx.navigateTo({
25
              url: `/pages/index/index?view_url=${self.data.view_url}`
26
          })
27
        },
28
        'fail': function (res) {
29
          console.log(res)
30
          console.log('=======支付失败==========')
31
          wx.navigateBack({
32
              delta: 1//返回1个页面
33
          })
34
        }
35
      })
36
    }
37
  })
38
}

原写死的webview首页需修改下:

1
// ...
2
data: {
3
  view_url: 'http://xxx.com'
4
},
5
onLoad(options) {
6
  if(options.view_url){
7
    this.setData({
8
      view_url:options.view_url // 传过来的url如果带url参数的话有可能丢失，未细测
9
    })
10
  }
11
},
12
// ...

1
<view class="container">
2
  <web-view src="{{view_url}}"></web-view>
3
</view>

这样整套下来，处理好后端支付回调，就可以了

文中删了一些业务代码，有些地方对不上实属正常，理解代码即可

参考:

http://t.zoukankan.com/zlfProgrammer-p-9376821.html

https://www.jb51.net/article/162672.htm