乐趣区

关于前端:微信小程序内嵌H5页面完成微信支付闭环

jiezi

前言

本文介绍如何在小程序中内嵌 H5，并实现微信领取的整个流程闭环。咱们晓得微信 H5 领取是通过生成特定的领取链接，并跳转到这个链接去实现领取操作的。但在微信小程序中对于内嵌的页面域名具备白名单限度，如果领取链接是第三方的无奈做加白解决。

这个时候咱们就得换个思路了，该怎么解决呢？咱们往下看。

实现过程

小程序入口

在微信小程序中新建一个页面，应用 web-view 组件作为内嵌 H5 的入口，因为后续领取须要用到 appId 以及 openId 信息，因而须要对 url 做带参做解决

// page.wxml
<web-view src="{{url}}"></web-view>

url 解决逻辑：

Page({
    data: {url: ''},
  onLoad: function (options) {wx.showLoading()
    wx.login({
      success: res => {
        const code = res.code
        api.getUserOpenId({code}, data => {
          const openId = data.bean
          const params = {
            wxAppletId: 'your appId',
            wxAppletOpenId: openId,
            ...options // 小程序启动门路的参数
          }
          this.setData({url: this.stringifyUrlArgs('your h5 url', params)
          })
          wx.hideLoading()})
      }
    })
  },
  stringifyUrlArgs(url, params) => {url += (/\?/).test(url) ? '&' : '?'
    url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
    return url
  }
})

在页面 onload 的时候，调用 APIwx.login获取 code，传递给后端换取该用户的openId，而后将 appId、openId、以及启动门路参数拼接到你的 H5 url 前面。这个 url 能够是个短链，不便后续批改不须要从新提交小程序代码审核，缩短发版的工夫。只须要去批改该短链对应的 H5 链接即可。

H5 页面解决

当咱们在小程序入口解决好 url 后，会通过 web-view 组件进行拜访 H5 链接，这个时候链接上携带了领取所必须的参数，咱们下面提到如果这时候 H5 页面依然还是调用生成 H5 领取链接的形式的话，会有页面白名单限度，导致第三方领取链接页面无法访问的状况。

这个时候咱们能够绕开这个点，居然是在小程序外部，咱们可不可以应用 小程序领取 呢？答案当然是能够！

解决的过程：

H5 页面申请后端领取接口获取微信小程序领取所必须的参数，这个时候 appId 和 openId 都是必要的，其余的信息则依据具体需要而定。

// 微信小程序领取参数
interface appletPayParams {
    timeStamp: 'string', // 工夫戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即以后的工夫
    nonceStr: 'string', // 随机字符串，长度为 32 个字符以下
    package: 'string', // 对立下单接口返回的 prepay_id 参数值，提交格局如：prepay_id=***
    signType?: 'string', // 签名算法，应与后盾下单时的值统一
    paySign: 'string' // 签名，具体见微信领取文档
}

因为 H5 是内嵌在小程序的 web-view 外面，当胜利从后端获取到领取所需的参数后，须要通过 web-view 跳到外部小程序的形式，跳转到对应的小程序领取页面进行领取操作，这个时候得应用 wx.miniProgram.redirectTo 进行解决，将获取到的领取参数 encodeURIComponent 一下再拼接到链接上。留神 url 是一个相对路径，如下：

wx.miniProgram.redirectTo({url: `../insure-pay/insure-pay?payData=${encodeURIComponent(JSON.stringify(bean.applet))}` })

小程序领取页

新建一个领取页面，当从 web-view 内嵌 H5 页面跳转到领取页的时候，解决领取的逻辑解决，如下：

Page({onLoad: function (options) {const payData = decodeURIComponent(options.payData) // 领取参数
    let pageSuccessUrl = '../pay-success/pay-success' // 胜利页
    let pageFailUrl = './insure-repay/insure-repay' // 失败页，从新领取
    wx.requestPayment({...JSON.parse(payData),
      success(res) {
        wx.redirectTo({url: pageSuccessUrl,})
      },
      fail(err) {console.log(err)
        wx.redirectTo({url: `${pageFailUrl}?payData=${options.payData}`,
        })
      }
    })
  }
})

进入到领取页，会通过 wx.requestPayment 调起领取，将链接上的参数 decodeURIComponent 进去，传入 API 中，可通过回调函数 success 和 fail 监听胜利和失败，并跳转到不同的解决页面。

总结

大抵的流程能够总结为一下几点：

  • 在微信小程序建设一个入口页面，通过 web-view 内嵌 H5，在这个页面 onload 的时候获取用户的 openId 以及 appId 并携带到 H5 链接上
  • 在 H5 中获取链接携带的 appId 和 openId，申请后端获取小程序领取所需的参数，并通过 wx.miniProgram.redirectTo，从 web-view 重定向到小程序领取页。
  • 在小程序领取页获取链接上携带的领取参数，通过 wx.requestPaymen 唤起领取，并解决胜利和失败的逻辑。
退出移动版