小程序内嵌webview实现支付

点击上方“青年码农”关注

回复“特效源码”可获取各种资料

目前的一个小程序项目需要把客户之前的h5页面嵌入到现在的小程序中，并且之前的支付功能要正常。小程序提供了webview开放能力供我们使用，但是不允许在webview直接调起微信支付。因此只能另辟蹊径。我们今天来讲一讲。在小程序的webview里实现微信支付功能。

在webview中不能支付，那只能把webview嵌入h5页面的支付挪到小程序中，也就是把支付时的参数传给小程序，小程序调起原生支付，这里面有两种情况，一种是同一主体的，另外一种是非同主体。

1.同主体

适用场景：同一主体下H5页面

前置条件：商户号已和小程序绑定

流程：H5内获取支付必须参数，传递给小程序，小程序内调用支付

[外链图片转存中…(img-ChUDSlgl-1652856799027)]

2.非同一主体

适用场景：第三方商品

前置条件：商户号已和小程序绑定

原理：由于第三方商品是内嵌第三方页面，需要传递当前小程序appid，结合第三方商户号等信息，调用微信统一下单接口，返回支付必须参数。小程序内发起支付。

[外链图片转存中…(img-aN8hjqcz-1652856799028)]

接下来就是代码实现，webview中src中配置网页链接，参数的话，通过get方式传递

<web-view src="xxx.com?name='zhangsan'"></web-view>


  

 

  
1
  
2
 

h5页面可以直接在url中获取到，这里就不过多解释。拿到参数后可以处理其他逻辑，重点（需要后端配合），生成的支付参数要用小程序的方式，参数格式如下

timeStamp: '',
nonceStr: '',
package: '',
signType: 'MD5',
paySign: '',


  

 

  
1
  
2
  
3
  
4
  
5
  
6
 

拿到参数后，只需要在重新打开小程序页面即可，打开方式

[外链图片转存中…(img-pa6Uh0GW-1652856799028)]

let url = "../payPage/index?payParam="encodeURIComponent(JSON.stringify(payParam));
wx.miniProgram.navigateTo({
  url: url
});


  

 

  
1
  
2
  
3
  
4
  
5
 

保险一点，我们用 encodeURIComponent 函数编码，通过这种方式，可以打开小程序，只需要在小程序对应页面中，接收参数，调用支付即可。

注意：记得在小程序页面用 decodeURIComponent 解码

非同一主体流程一样，只不过在用webview的时候，把当前小程序的appid一同传过去，生成的支付参数要用传递过去的appid生成，这样才能在当前小程序支付。其他的也不多说，这都是一步一步调通并上线的项目，如果有不懂的可以留言。

文章来源: blog.csdn.net，作者：NMGWAP，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/NMGWAP/article/details/124842365