今天我们来实现一个小功能，就是，微信小程序内嵌了一个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调用小程序支付了。