html5 支付宝 微信支付,h5微信支付,前端发起支付
前言
在开发微信微信官方账号的活动中，由于之前没有接触过微信相关的开发，导致掉坑爬坑，但也大大增加了我对微信公众号和微信官方文档的熟悉程度。
爬坑之路
爬一：单页SPA和后端路由的问题
这个我单独总结了一下：https:///article/144341.htm
爬坑二：安卓大概率调整微信支付失败(引入微信的js-sdk包失败)
微信官方文档中：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?章节=7 _ 7索引=6
有这样一个演示：
函数bridge ready(){ weixinsbridge。invoke (getbrandwcpayrequest ，{appid: wx2421b1c4370ec443b ，//微信官方账号名称，由商家 timeStamp 导入： 1395712654 ，//timestamp，自1970年以来的秒数 nonce str : e 61463 F8 fefa 94090 B1 f 366 ccccf BBB 444 ，//随机字符串 package : prepay _ id=u 802345 jgfjs} });} if(type of weixinsbridge== undefined ){ if(document . addevent listener){ document . addevent listener( weixinsbridgeready ，onBridgeReady，false)；} else if(document . attach event){ document . attach event( weixinsbridgeready ，onBridgeReady)；document . attach event( onweixinsbridgeready ，onBridgeReady)；} } else { onBridgeReady()；}后台同事授权成功后，将这段代码引入活动页面，乐此不疲。构建提交测试。嗯，苹果没问题，安卓好像也没问题。但是鹅安卓有时候支付不起，开始以为是微信版的，等等。但是调准成功的概率太低，10次只能调准一次。一定是密码的问题。改变它。
解决思路：
打开微信开发者工具，键入log，最后在这一步找到if(type of weixinsbridge== undefined )。
1.ios可以调优微信浏览器的js-sdk。
2.大部分Android都进入了未定义状态。
其实我也不知道这里的原因。个人认为是微信Android内置浏览器版本和这个WeixinJSBridge方法的问题。(希望有大神解答)
既然js-sdk无法调整，那就手动介绍一下配置吧。//所以有时候偷懒比较麻烦，吸取教训。
if(type of weixinsbridge== undefined ){ console . log(weixinsbridge)；if(document . addevent listener){ document . addevent listener( weixinsbridgeready ，onBridgeReady，false)；} else if(document . attach event){ document . attach event( weixinsbridgeready ，onBridgeReady)；document . attach event( onweixinsbridgeready ，onBridgeReady)；} } else { onBridgeReady()；}Vue引入微信js-sdk包
NPI-sweixin-js-SDK在需要介绍的页面中介绍了模块。
从 weixin-js-sdk 配置导入wx(参考微信官方文档：https://mp.weixin.qq.com/wiki? t=resource/RES _ mainid=MP 1421141115):
Wx.config({ debug: true，//打开调试模式，所有api调用的返回值都会在客户端告警出来。要查看传入参数，可以在pc端打开，参数信息会通过log录入，只在pc端打印。AppId: ，//必选，微信官方账号时间戳的唯一标识符：//必选，生成签名nonceStr的时间戳： ，//必选，生成签名signature的随机字符串： ，//必选，签名jsApiList: [] //必选，要使用的JS接口列表，比如我要调用支付接口，那么就是[此处选择，时间戳小写，s小写，数据类型int。
接下来，既然配置成功，继续看官方文档。
官方文件上说有现成的方法。配置验证成功后，将接口放入其中以确保执行。
wx . ready(function(){//ready方法将在验证config的信息后执行。所有的接口调用必须在获得配置接口的结果后进行。Config是客户端的异步操作，所以如果需要在页面加载时调用相关接口，必须在ready函数中调用相关接口，以保证正确执行。对于只在用户触发时调用的接口，可以直接调用，不需要放在ready函数中。});ready中引入参数(注意数据类型，与后端同事配合好-)
Wx.chooseWXPay({timestamp: 0，//支付签名时间戳。注意，微信jssdk中所有使用的时间戳字段都是小写的。但是最新版本的支付后台中用于生成签名的时间戳字段名需要大写S字符nonceStr: 、//支付签名的随机字符串，长度不超过32位包： 、//统一支付接口返回的prepay_id参数值。提交格式如下：prepay _ id=\ * \ *) signtype: ，//签名方法，默认为 SHA1 ，使用新支付时要传入 MD5 paysign: 。//支付签名成功：function (res) {//支付成功后回调函数} })；附上本人的demo
在使用Vue data in ready中的数据时，不小心掉进了这个所指的坑里。如果不添加bind，参数bind，wx.chooseWXPay不会从后端获取请求的数据。这里的this没有指向VueComponent，所以自然地，在请求之后，我不能获得我分配给这个数组对象this.wx_config的数据。
getconfig(){ wx . config({ debug:this . wx _ config . debug，//开启调试模式，所有被调用API的返回值都会在客户端进行告警。要查看传入参数，可以在pc端打开，参数信息会通过log录入，只在pc端打印。AppId: this.wx_config.appId，//必选，微信官方账号时间戳的唯一标识符：this.wx _ config.timestamp，//必选，签名生成noncestr的时间戳：this . wx _ config . non centr，//必选，生成的随机字符串签名：this.wx _ config.signature，//必选，签名JSAPI列表：this.wx _ config.jsAPI列表//必选，要使用的JS接口列表})；//微信支付wx . ready(function(){//console . log(this . jsapi call())；wx . choosewxpay({ timestamp:this . we chat _ code . timestamp，non centr:this . we chat _ code . non centr，package:this . we chat _ code . package，Sign type:this . we chat _ code . paysign，success:function(){//支付成功后的回调函数alert(支付成功)；window . location . href=/HD/become VIP ；}，cancel: function() {alert(支付失败)；} });}.绑定(这个))；},总结：
踩坑，总结，怕麻烦不做正确的事总是难免的~
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。