h5嵌入微信小程序app，无法唤起微信支付

最新推荐文章于 2024-10-25 13:30:11 发布

原创最新推荐文章于 2024-10-25 13:30:11 发布 · 3.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #微信 #vue #前端

本文分享了在H5页面中通过多种方法尝试唤起小程序进行支付的经验，最终提出一种有效方案解决了偶尔无法唤起的问题。

项目背景：我们要做投保的页面，点击保存时要调用小程序的支付页面，通过小程序去支付

H5使用的技术框架： VUE+Mint-UI 小程序使用框架：UNIAPP，唤起微信支付

第一种方案是引入微信的jsdk

通过 wx.miniProgram.navigateTo({
　　url: strGoPath
})

发现偶尔会失效

第二种方案是引入uni.webview.1.5.2.js

uni.navigateTo({
　　url: strGoPath,
　　success: function(res) {
　　　　console.log("调用第三方支付成功！")
　　},
　　fail: function(res) {
　　　　console.log("调用第三方支失败付！", res)
　　}
})

此种方法也会偶尔失效，调用不到小程序的支付，通过百度说是可能缺少complete方法，于是

uni.navigateTo({
　　url:  strGoPath,
　　success: function(res) {
　　　　console.log("调用第三方支付成功！")
　　},
　　fail: function(res) {
　　　　console.log("调用第三方支失败付！", res)
　　},
　　complete: function(res) {
　　　　console.log(res)
　　}
})

此种方法也会有偶尔换不起。

第三种方案，增加延时方法用redirectTo，发现还是有1%的时候，换不起支付

setTimeout(function() {
　　uni.redirectTo({
　　　　url: strGoPath,
　　　　success: function(res) {
　　　　　　console.log("调用第三方支付成功！")
　　　　},
　　　　fail: function(res) {
　　　　　　console.log("调用第三方支失败付！", res)
　　　　},
　　　　complete: function(res) {
　　　　　　console.log(res)
　　　　}
　　})
}, 500)

在尝试了三种方式后，心态已崩溃，百度万全找不到可以实际奏效的方案

于是抱着试一试的心态，把申明不在放在created/mountef中，直接提到secipt标签之下

然后保存后调用openWx

openWx(pageUrl){
　　let This = this;
　　// 若没有唤起支付，关闭弹框
　　setTimeout(function() {
　　　　console.log("唤起支付失败！已超过3s");
　　　　This.$indicator.close();
　　}, 3000);

　　if(!wxR){
　　　　console.info('wx.miniProgram.redirectTo 加载失败');
　　}

　　setTimeout(()=>{
　　　　wxR({
　　　　　　url: pageUrl,
　　　　　　success: function(res) {
　　　　　　　　console.info("调用第三方支付成功！pageUrl="+pageUrl)
　　　　　　},
　　　　　　fail: function(res) {
　　　　　　　　console.info("调用第三方支付失败！", res+pageUrl)
　　　　　　},
　　　　　　complete: function(res) {
　　　　　　　　try{
　　　　　　　　　　This.strGoPath = ""
　　　　　　　　　　console.log("打开页面完成complete", e)
　　　　　　　　　　This.$indicator.close();
　　　　　　　　}catch(e){
　　　　　　　　　　This.strGoPath = ""
　　　　　　　　　　console.log("打开页面完成complete报错", e)
　　　　　　}
　　　　}
　　　});
　　},300);
},

用了这种方案之后，发现再没有出现支付换不起的情况！解决了一大问题，瞬间心情很好。哈哈哈

希望可以帮到各位看官，如有疑问请联系我~

祝大家新春快乐！