项目实战之微信、微信公众号登陆和支付调起

项目实战之微信、微信公众号登陆和支付

微信登陆
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、签名失败问题

更新中… ］
3、微信调起支付URL未注册
在这里对URL未注册，是说明后台没有配置对应对http域名链接，要在微信后台对商户中心中，把域名添加进去，就可以了。

4、出现＝> 调用支付JSAPI缺少参数：total_fee
原因可能是以下几点：（个人遇见对问题总结）
1、订单编号重复
2、订单编号为空
3、金额为“空”或“NULL”
以上3点是我遇见对坑，简直太痛苦了，这不是重点，重点是。。。答案来了！
4、后端签名错误❌：这个问题怎么看，首先将参数都确保全部传对给后端，前端如果还是调不起支付页面，问题就出现在后端了，这个时候要敢于大胆对站出来说出问题，要让后端去查，，，，总之，这个坑我算是遇见了、经历了

5、支付成功时，终于结束了，，，当然不是！！
成功调用支付界面：

6、后附有代码即提供参考：

明天继续更新。。。。。

项目实战之微信、微信公众号登陆和支付调起相关推荐

uniapp微信H5公众号授权与支付
目录前言准备工作配置回调域名授权方式参数完整代码前言网页授权微信官方文档:网页授权 | 微信开放文档如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基 ...
微信登录并拿手机号码（实战）目前仅公众号及小程序登录
公众号.小程序内用户登录(拿不到手机号码,官方没文档)以及Uni-app小程序内用户授权手机号码 1.公众号.小程序内用户登录公众号登录重定向跨域问题工具类 Java代码演示公众号小程序 2 ...
PHP 支付PC端扫码支付、APP接口调起支付宝支付、微信公众号接入支付宝支付
第一:第三方支付原理第二:支付接口申请流程地址:https://docs.open.alipay.com/270/105899/ : 参考地址:https://blog.csdn.net/nove ...
根据微信的公众号获取公众号的二维码根据公众号获得二维码的图片
最近在维护一个老项目,就是根据微信的公众号,也就是英文数字那串的公众号来获得公众号的二维码的,我看了下,之前的代码是用的这个网址 http://open.weixin.qq.com/qr/code/ ...
微信jsapi支付获取code_微信JSAPI公众号支付在部分机型上出现appid参数错误的解决办法 - YangJunwei...
都说微信支付的坑比较多,老杨感觉还行,就是开始周期和调试过程比较费时费力-_-! 今儿在调试一个基于微信JSAPI公众号的支付项目时发现,部分机型(比如iphone7/vivo-x6d)中微信支付获取 ...
微信测试公众号使用Python发送卡片
环境准备: 1.天气接口:https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecr ...
微信在公众号增开了新广告位这次是在图文消息头部
自上次微信推广功能在图文消息底部投放图片和文字链两种广告后,近日微信在公众号增开了新广告位,这次是在图文消息的头部,支持APP下载类营销推广. 微信广告平台发布了三大产品功能,全面支持APP下载类营销 ...
福音！微信个人公众号可以改名了！
微信个人公众号可以改名了!!!今年,我们学校从景德镇陶瓷学院更名为景德镇陶瓷大学,但苦于微信限制,很多微信公众号无法更名. 很多组织社团就放弃了原先的关注量,重新申请注册账号.当前我们的订阅号也在想是 ...
最新在线客服系统php代码微信软件公众号小程序app二维码聊天网站源码
最新在线客服系统php代码微信软件公众号小程序app二维码聊天网站源码管理界面独家长期更新日志(欢迎反馈BUG) 1.添加手机端前后台声音提示 2.添加后台客户管理显示在线离线 3.添加清空当前对 ...
【产品经理】产品经理进阶之路（十一）：怎么看微信的公众号和百度的直达号，哪个更有优势
1.What:分析目标决策支持,分析哪个更有优势 2.Who:分析对象微信服务号与百度直达号微信的公众号分为"订阅号"及"服务号"两类,服务号的功能更强大 ...

项目实战之微信、微信公众号登陆和支付调起

项目实战之微信、微信公众号登陆和支付

项目实战之微信、微信公众号登陆和支付调起相关推荐

最新文章

热门文章