借鉴文章:
uniapp 开发过程中 遇到的微信支付调用失败 payment微信:-1]General errors","errCode":-100,"code":-100 解决办法
一、公众号H5支付
1.实现技术:概述 | 微信开放文档 说明公众H5需要引入工具包去实现,将文件引入到项目后我们可以详细阅读该文档,粗略的知道它的使用方式。
2.实现代码:
//在H5状态下编译即可
//#ifndef H5
var jweixin = require('../../util/jweixin.js');
//#endif
//通常你会调用后端一个接口,用来获得
this.$http.post('pay/pay',this.order).then(res=>{
if(res.code==1){
this.wxjsPay(res.data)
}})
后台返回参数如下:appid跟你公众号里面的一样。
继续往下写一个方法,把上面返回的结果传入
// H5微信支付
wxjsPay(data){
jweixin.config({
debug: true, //调试时候打开提示,初始化失败或者支付接口调用失败或者取消支付都有弹框提示。
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timeStamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.paySign, // 必填,签名
jsApiList: ['chooseWXPay'] // 必填,需要使用的JS接口列表
});
jweixin.ready(() => {
history.pushState(null,null,"/#/");
jweixin.chooseWXPay({
appId:data.appId,
timestamp: data.timeStamp,
nonceStr: data.nonceStr, // 支付签名随机串,不长于 32 位
package: data.package, // 统一支付接口返回的prepay_id参数值
signType: data.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
paySign: data.paySign, // 支付签名
success: function(res) { //支付成功回调
uni.showToast({
title: '支付成功',
icon:"success",
duration:2000
});
//成功后跳转到
setTimeout(function() {
uni.navigateTo({
url: './order?tab=2'
});
}, 2000)
},
fail: function(res) {
uni.showToast({
title: '支付失败',
icon:"error",
duration:2000
});
}
});
});
},
3.特别提示:history.pushState(null,null,"/#/"); 的使用,当你的缺少这段代码的时候真机调试的时候会遇到当前页面未注册https://www.xxx.xxxx这样的提示。vue单页面程序,如果不刷新页面的话,例如你是从页面(/pages/index/index)开始浏览,使用了uni.redirect转向到支付页面,在不刷新的情况下,当调用微信支付的时候,依然识别为/pages/index/index 页面 相关引用文章。这个history.pushState亲测有效。在微信开发工具里面测试H5的时候遇到一下情况:
放轻松,只要以上步骤书写正确,就可以直接发布在手机上测试了。
---------------------------------------------------------这是一段补充------------------------------------------------------
PS:这是2021年10月18日做的补充,测试人员说明苹果手机上的H5支付有问题报错提示如下:
说明history.pushState在ios上并不奏效,这回我是仔细的看了一下这个提示,原来我脑子里面一直默认的发布后的项目是https,所以配置的都是Https开头路径,人家既然提示了当前页面是http://www.jusmd.com/ 那为什么不直接在商户平台配置这个呢,按照网上说的配置过后都会匹配默认该路径下的。所以我就在微信商户平台上
---------------------------------------------------------这是一段补充-----------------------------------------------------
4.有关H5支付需要进行的配置:
4.1扫描公众平台进入公众号中获取appid ,具体操作指南AppID及其主体信息查询指引
以上步骤你你找到了公众号的appid后,去微信商户平台进行绑定。
4.2借鉴文档:账号关联(AppID绑定),仔细浏览文档之后,就明白了是从微信公众平台的公众号里面获取appid,放到微信商户平台里面去添加appid关联申请,然后需要再跑到公众平台的公众号通过。我这个项目使用到uniapp开发、要求实现小程序、app、H5多端的。所以我关联的AppID账号就有这么多。
并且要说一句的的就是,这里面绑定的appid是需要跟你调用pay/pay接口返回appid一样
4.3产品中心-开发配置-支付配置(配置支付页面的路径,路径要以"/"结尾,会匹配当前路径下的所有支付页面)
二、手机app支付(调用微信app支付)
这回咱们把配置相关放到前面先说。
1.从微信开放平台创建应用(获取appid)到微信商户平台中绑定appid提交交过绑定申请后,需要回到微信开放平台中进行通过。
(关联提交绑定申请)
(查看通过申请)
以上步骤就是把你的app配置好并开通了支付功能。接下来就是对项目进行配置了这里咱们可以直接借鉴uniapp官方提供的查看uniapp项目中app支付配置。由于版本不同的原因你的配置文件manifest.json的结构跟官方提示配置的不太相同。无关紧要,看下面的就行了:
注意这里的appid跟微信开放平台申请的是一样的,这里配置好了,微信支付权限也就开通了。
要实现的页面
编写代码
//获取orderinfo
this.$http.post('card/recharge', {
money: this.amount,
type: this.type,
openid: this.openid,//app环境下不传也可以
way:this.way
})
.then(res => {
if (res.code == 1) {
// #ifdef MP-WEIXIN||APP-PLUS
console.log("进入微信支付")
this.payMent(this.provider,res.data)
// #endif
} else {
uni.showToast({
title: res.msg,
icon: 'none',
duration:2000
})
}
})
获得结果res
调起微信支付
payMent(provider, orderInfo) {
console.log("传入",orderInfo)
//唤起支付
uni.requestPayment({
provider: provider, //服务提供商微信(wxpay)或支付宝(alipay)
orderInfo: orderInfo,
success: (res) => {
uni.showToast({
title: '支付成功',
icon:"success",
duration:2000
});
//成功后跳转到
setTimeout(function() {
uni.navigateTo({
url:'./gongyika'
});
}, 2000)
},
fail: (err) => {
if (err.errMsg.indexOf('cancel') > -1) {
uni.showToast({
title: '取消支付',
icon: 'none'
})
} else {
uni.showToast({
title: JSON.stringify(err),
icon: 'none'
})
}
}
});
},
这一需要注意的是orderInfo类型,当微信支付的时候要求orderInfo传入Object,当要求支付宝支付的时候则是String类型,orderInfo里面包括了哪些东西可以借鉴微信支付文档
运行到模拟器如果出现”客户端未安装“字样,说明微信支付已经调用成功了。直接打包apk真机测试就没问题了,
如果出现错误码-1可以根据下表去排查:
当你遇到了errMsg:requestPayment service fail not found,这个问题为啥要标红,因为网上一大堆人遇到了,你猜我是咋回事,快把自己蠢死了。我调起requestPayment忘记传入provider(就是初始化的时候没有给值wxpay)才报了这个错。
三、小程序支付
小程序跟app支付都调用uni,requestPayment接口,不一样的是,传入的参数是不一样的,大家可以直接在uniapp开发文档中看出来区别
所以跟上面写的app代码结合一下使用,使用es6的解构直接判断环境来给参数类型。
payMent(provider, orderInfo) {
//唤起支付
uni.requestPayment({
provider: provider, //服务提供商微信或支付宝
// #ifdef APP-PLUS
orderInfo: orderInfo,
// #endif
// #ifdef MP-WEIXIN
...orderInfo,
// #endif
success: (res) => {
uni.showToast({
title: '支付成功',
success: () => {
uni.showToast({
title: '支付成功',
icon:"success",
duration:2000
});
//成功后跳转到
setTimeout(function() {
uni.navigateTo({
url: './order?tab=2'
});
}, 2000)
}
});
},
fail: (err) => {
if (err.errMsg.indexOf('cancel') > -1) {
uni.showToast({
title: '取消支付',
icon: 'none'
})
} else {
uni.showToast({
title: JSON.stringify(err),
icon: 'none'
})
}
}
});
},
如果不做上面代码参数判断就会出现这个报错:(多看官方文档真香)
如有错误,欢迎指正!
有问题评论交流