uniapp开发H5移动端微信公众号跳转原生扫码失效的解决方案

原创已于 2024-10-18 10:07:31 修改 · 598 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #微信

于 2024-10-18 10:05:55 首次发布

先说一下前因后果

因为项目大多数客户在国外，所以很少有用微信的就抛弃了微信小程序的开发转用了uniapp开发安卓和IOS。然而后续要求又要微信公众号去跳转到H5与安卓IOS同样的功能，打包测试后发现原生的uniapp扫码功能并不好用。
解决思路：调用微信的JSSDK扫码功能，但有个前提，得有域名并且域名备案过来配置JS接口安全域名

遇到的问题

我们的服务器是本地服务器，用docker搭的，是不能调用微信签名接口的。

解决方式

刚好有一个闲置的阿里云服务器，配了一下NGINX SSL，然后新写了一个后端，专门去访问微信的接口，然后返回给前端，前端配置通过后再调用本机服务器的接口进行扫码后的操作。

微信签名API

  #参考以下文档获取access_token（有效期7200秒，开发者必须在自己的服务全局缓存access_token）
https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
  #用第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒，开发者必须在自己的服务全局缓存jsapi_ticket）
https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

前端

			let redirect_uri = location.href.split('#')[0]
			uni.request({
				url: 'https://xxxxxx/api/weChat/initWXJSSDKConfigInfo', // 你写的调用微信API的接口
				method: 'GET',
				data: {
					url: redirect_uri
				},
				header: {
					'Content-Type': 'application/json' // 设置请求头类型
				},
				success(res) {
					_this.wxConfig(res.data.data)
				}
			})
			wxConfig(data) {
				wx.config({
					debug: false,
					appId: data.appId,
					timestamp: data.timestamp,
					nonceStr: data.nonceStr,
					signature: data.signature,
					jsApiList: ['onMenuShareAppMessage', 'scanQRCode']
				});
				wx.ready(() => {
					console.log('成功')
				})
				wx.error(function(res) {
					console.log('出错了：' + res.errMsg); 
				});

			},

配置完后使用的时候直接调用

					wx.scanQRCode({
					needResult: 1, // 注意 0是扫描结果由微信处理 1是自己处理
					scanType: ['qrCode', 'barCode'],
					success: function(res) {
						const siteInfoCode = res.resultStr //siteInfoCode 就是扫码的结果
						}
					})