项目实战之微信公众号登陆和支付
微信登陆 1、通过获取微信对code,得到oppid...........［明天继续更新..... ］
微信公众号支付调起方法
-
在实战项目中，如何调起微信公众号支付界面，面对小白是一头雾水，面对大佬是游刃有余，调起支付接口免不了遇见各种坑，今天我将遇见所有的坑和大家分享一下，废话不多说，先看一段代码：
官方文档：
1.1、 判断设备和浏览器
通过 navigator.userAgent.toLowerCase()
const vx = navigator.userAgent.toLowerCase() // 首先声明
javascript的navigator对象 navigator为Window对象的一个属性，指向了一个包含浏览器相关信息的对象。navigatot中包含了一些常用到的属性，如
navigator.appVersion 浏览器的版本号 navigator.appName 浏览器的名称 navigator.language 浏览器使用的语言 navigator.platform 浏览器使用的平台 navigator.userAgent 浏览器的user-agent信息
1.2、通过v-if判断当前状态
if (vx.match(/MicroMessenger/i) == 'micromessenger') {
return xxx
} else {
return xxx
}
在v-if中判断 去执行return 中对模块
1.3、只需这一段代码调起微信支付
在这里插入代码片
getWeiXinPay(data) {
let vm = this
function onBridgeReady() {
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
{
appId: data.appId, //公众号名称，由商户传入
timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: data.nonceStr, //随机串
package: data.package,
signType: data.signType, //微信签名方式
paySign: data.paySign //微信签名
},
function(res) {
if (res.err_msg == 'get_brand_wcpay_request:ok') {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
console.log('res 成功 :', res)
vm.goRetur()
}
if (res.err_msg == 'get_brand_wcpay_request:cancel'){
vm.$toast('用户已取消')
console.log('res 支付过程中用户取消 :', res)
}
if (res.err_msg == 'get_brand_wcpay_request:fail'){
vm.$toast('支付失败')
console.log('res 支付失败 :', res)
}
}
)
}
if (typeof WeixinJSBridge == 'undefined') {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
}
} else {
onBridgeReady()
}
},
微信调起成功或失败 get_brand_wcpay_request:ok // 成功后对回调地址 get_brand_wcpay_request:cancel // 支付过程中用户取消 get_brand_wcpay_request:fail // 错误回调支付失败
项目说明在实际项目开发中，这里的appId、时间戳、随机串、微信签名都是由后端提供，前端做处理。
appId: data.appId, //公众号名称，由商户传入
timeStamp: data.timeStamp, //时间戳，自1970年以来的秒数
nonceStr: data.nonceStr, //随机串
package: data.package,
signType: data.signType, //微信签名方式
paySign: data.paySign //微信签名
2、签名失败问题
4、出现＝> 调用支付JSAPI缺少参数：total_fee
原因可能是以下几点：（个人遇见对问题总结）
1、订单编号重复
2、订单编号为空
3、金额为“空”或“NULL”
以上3点是我遇见对坑，简直太痛苦了，这不是重点，重点是。。。答案来了！
4、后端签名错误❌：这个问题怎么看，首先将参数都确保全部传对给后端，前端如果还是调不起支付页面，问题就出现在后端了，这个时候要敢于大胆对站出来说出问题，要让后端去查，，，，总之，这个坑我算是遇见了、经历了
5、支付成功时，终于结束了，，， 当然不是 ！！ 成功调用支付界面：
