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

拼搏现实的明天。 2023-02-21 09:23 25阅读 0赞

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

微信登陆  
1、通过获取微信对code,得到oppid…［明天继续更新… ］

微信公众号支付调起方法

1.  在实战项目中，如何调起微信公众号支付界面，面对小白是一头雾水，面对大佬是游刃有余，调起支付接口免不了遇见各种坑，今天我将遇见所有的坑和大家分享一下，废话不多说，先看一段代码：
    
    官方文档：  
    ![H5调起支付界面][H5]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3MzgzMQ_size_16_color_FFFFFF_t_70]  
    这样大家能看懂吗，当然还是会有点懵，刚接触确实上手有点难，全看文档是解决不了我们工作中的项目问题；当然，一定要去读懂文档中参数的含义；

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、签名失败问题  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3MzgzMQ_size_16_color_FFFFFF_t_70 1]  
更新中… ］  
3、微信调起支付URL未注册  
在这里对URL未注册，是说明后台没有配置对应对http域名链接，要在微信后台对商户中心中，把域名添加进去，就可以了。

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3MzgzMQ_size_16_color_FFFFFF_t_70 2]  
6、后附有代码即提供参考：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3MzgzMQ_size_16_color_FFFFFF_t_70 3]  
**明天继续更新。。。。。**

[H5]: https://img-blog.csdnimg.cn/2020063000464271.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3MzgzMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3MzgzMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200630004959345.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3MzgzMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3MzgzMQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200701005810830.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3MzgzMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3MzgzMQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200703002537403.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3MzgzMQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3MzgzMQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200703002314449.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg3MzgzMQ==,size_16,color_FFFFFF,t_70