前言本文介绍如何在小程序中嵌入H5，完成整个微信支付流程的闭环。我们知道微信H5支付会生成一个特定的支付链接，跳转到这个链接完成支付操作。但是在微信小程序中，对内嵌页面的域名有白名单限制。如果支付链接是第三方的，则无法加入白名单。这个时候，我们就得换个思路了。我们该如何解决呢？我们往下看。实现流程小程序入口在微信小程序中新建一个页面，使用web-view组件作为内嵌H5的入口，因为后续支付需要用到appId和openId信息，所以需要对url进行带参数处理//页。wxmlurl处理逻辑：Page({data:{url:''},onLoad:function(options){wx.showLoading()wx.login({成功:res=>{constcode=res.codeapi.getUserOpenId({code},data=>{constopenId=data.beanconstparams={wxAppletId:'你的appId',wxAppletOpenId:openId,...options//小程序启动路径的参数}this.setData({url:this.stringifyUrlArgs('yourh5url',params)})wx.hideLoading()})}})},stringifyUrlArgs(url,params)=>{url+=(/\?/).test(url)?'&':'?'url+=Object.keys(params).map(key=>`${key}=${params[key]}`).join('&')returnurl}})页面onload时，调用APIwx.login获取code，传给后台换取用户的openId，再传appId、openId和激活动态路径参数拼接到你的H5url中。后面的url可以是一个短链接，方便后续修改而不用重新提交小程序代码审核，缩短发布时间。只需要修改短链接对应的H5链接即可。H5页面处理我们处理完小程序入口处的url后，我们就通过web-view组件访问H5链接。这时，链接中携带了支付所必需的参数。上面我们提到，如果此时仍然调用H5页面生成H5支付链接，就会出现页面白名单限制，导致第三方支付链接页面无法访问。这时候我们就可以绕过这一点，其实是在小程序内部，我们是不是可以用小程序来支付呢？答案当然是肯定的！处理流程：H5页面请求后端支付接口获取微信小程序支付所需的参数。这个时候appId和openId都是必须的，其他信息看具体需要。//微信小程序支付参数interfaceappletPayParams{timeStamp:'string',//时间戳，从1970年1月1日00:00:00到现在的秒数，即当前时间nonceStr:'string',//随机字符串，长度小于32个字符package:'string',//统一下单接口返回的prepay_id参数值，提交格式如下：prepay_id=***signType?:'string',//签名算法，应该和后台下单时的值保持一致从后台成功获取支付所需的，需要通过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){constpayData=decodeURIComponent(options.payData)//支付参数让pageSuccessUrl='../pay-success/pay-success'//成功页面letpageFailUrl='./insure-repay/insure-repay'//失败页面，repaywx.requestPayment({...JSON.parse(payData),success(res){wx.redirectTo({url:pageSuccessUrl,})},fail(err){console.log(err)wx.redirectTo({url:`${pageFailUrl}?payData=${选项.payData}`,})}})}})进入支付页面时，会通过wx.requestPayment调用支付，输出链接上的参数decodeURIComponent传入API。回调函数success和fail监听成功和失败，跳转到不同的处理页面。总结一下大概的流程可以概括为：在微信小程序中创建一个入口页面，通过web-view嵌入H5，在页面onload时获取用户的openId和appId携带到H5链接中获取在H5链接中携带的appId和openId请求后端获取小程序支付所需的参数，通过wx.miniProgram.redirectTo从web-view重定向到小程序支付页面。获取小程序支付页面链接携带的支付参数，通过wx.requestPaymen调用支付，处理成功和失败逻辑。
