微信小程序内嵌h5，h5调用小程序支付功能解决方案

今天我们来实现一个小功能，就是，微信小程序内嵌了一个h5，然后h5调用小程序的支付功能。

在开始之前先要了解几个小知识点：

1. 小程序内嵌的h5的域名，需要在小程序管理后台配置业务域名，这个是必须的！很重要！！！

2. 小程序内嵌的h5，如果需要调用小程序的一些功能，h5里面需要加载JSSDK 1.3.2

3. jssdk可以调用哪些sdk：

OK，了解以上知识点后，我们可以开始我们的表演：

表演之前，我默认你已经在小程序管理后台配置了业务域名，也在h5项目里面添加了jssdk。

【h5端】

1. 在h5页面里面需要支付的地方或者方法里面，请求后端接口，拿到支付相关参数。

2. 然后调用jssdk的方法

wx.miniProgram.navigateTo({
	url: `/pages/h5pay/index?timeStamp=${timeStamp}&nonceStr=${nonceStr}&package=${package}&signType=${signType}&paySign=${paySign}`
})

【小程序端】

在小程序端准备一个单独的支付页面，用来接受h5传过来的参数，在小程序的js文件里面的onLoad周期函数里面拿到参数

1. 准备一个单独的页面，用来处理h5支付的逻辑，比如 pages/h5pay/index，这个页面要和h5端跳转的页面保持一致

onLoad (options) {
  // options 里面可以拿到h5传递过来的参数
  // 调起支付
  wx.requestPayment({
    ...options,
    success(res) {
      // 支付成功后，设置一个全局变量，然后返回到那个vwebview页面
      wx.$payResult = {...res, paycode: 1};
      wx.navigateBack();
    },
    fail() {
      // 支付失败，同样设置一个全局变量，然后返回到那个vwebview页面
      wx.$payResult = {paycode: 0};
      wx.navigateBack();
    },
  });
}  

2. 在webview页面的onShow周期函数，获取支付结果，改变url，通知h5支付结果

onShow() {
  if(wx.$payResult && wx.$payResult.paycode) {
    // 这里只是伪代码，具体根据业务需求自行更改
    this.setData({url: 'https://www.h5.com/xxx/xxx?payresult=' + JSON.stringify(wx.$payResult)});
    // 这里再置空
    wx.$payResult = null;
  }
}

3. 在h5页面的支付结果页面里面，通过url的参数来显示提示结果，或者其他内容

let url = new URL(window.location.href);
// 这里就根据具体的业务返货的参数来处理
url.searchParams.get('xxx')

OK，通过以上步骤，就可以完美实现微信小程序内嵌h5调用小程序支付了。