Uniapp 实现APP扫码和微信H5扫码

318 阅读3分钟

只获取openID的话, 不需要用户点同意

image.png

developers.weixin.qq.com/doc/offiacc…

CSDN相关文章

blog.csdn.net/gududedabai…

image.png

扫码问题解决

A1.the permission value is offline verifying 问题

developers.weixin.qq.com/doc/offiacc…

image.png

A2.签名问题 (不过签名报错是在A1后, 所以不确定是不是A1导致的)

  1. invalid signature签名错误。建议按如下顺序检查:

    1. 确认签名算法正确,可用mp.weixin.qq.com/debug/cgi-b… 页面工具进行校验。

    2. 确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。

    3. 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)://'部分,以及'?'后面的GET参数部分,但不包括'#'hash后面的部分。

    4. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

    5. 确保一定缓存access_token和jsapi_ticket。

    6. 确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去'#'hash部分的链接(可用location.href.split('#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

image.png

一.APP扫码(H5好像不行)

扫码, 需要引用一个js

www.jb51.net/article/267…

另外一个:

ask.dcloud.net.cn/article/368…

成功

使用安卓手机, 然后开启安卓手机的USB调试模式(一般是系统设置中, 连续点击5次版本号)

参考

https://blog.csdn.net/weixin_44763569/article/details/107189937

链接手机后, 手机上选择传输方式为传输文件和XX

  • 然后在Hbuidx中打开, 然后在手机上会自动安装这个软件, 给它全部权限

image.png

17:01:10.751 条码类型:QR_CODE at pages/machine/add.vue:39
17:01:10.752 条码内容:123456789 at pages/machine/add.vue:40

相关代码如下

<u-icon name="scan" size="25" color="#2979ff"></u-icon>
<script>
  methods: {
	Scan() {
		uni.scanCode({
			onlyFromCamera: true,
			success: function (res) {
				console.log('条码类型:' + res.scanType);
				console.log('条码内容:' + res.result);
				
			}
		});
	},
</script>

二.微信公众号H5扫码(注意Uniapp本身无法实现, 用的是微信官方的sdk)

blog.csdn.net/qq_40476712…

  • 另外一个

blog.csdn.net/Mister_why/…

<!--引入微信sdk-->
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

clickScanCode() {
			let url = window.location.href.split('#')[0];
			newApi.getSignature({ url }).then(res => {
				if (res.code == 0) {
					this.sdk.config({
						beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
						appId: res.data.appId, // 必填,公众号的唯一标识
						timestamp: res.data.timestamp, // 必填,生成签名的时间戳
						nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
						signature: res.data.signature,// 必填,签名
						jsApiList: ["scanQRCode"] // 必填,需要使用的JS接口列表
					});
					this.sdk.ready(() => {
						// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
						this.sdk.checkJsApi({
							jsApiList: [
								'scanQRCode',
							],
							success: (res) => {
								console.log("jweixin.ready", res)
								if (res.checkResult.getLocation == false) {
									console.log('微信版本低')
									return;
								}
							}
						});
						this.sdk.error((err) => {
							this.sdk.error("接口调取失败", err)
						});
						this.sdk.scanQRCode({
							desc: 'scanQRCode desc',
							needResult: 1, // 默认为0,扫描结果由企业微信处理,1则直接返回扫描结果,
							scanType: ["qrCode"], // 可以指定扫二维码还是条形码(一维码),默认二者都有
							success: (r) => {
								window.location.href = r.resultStr
							},
							error: function (error) {
								if (error.errMsg.indexOf('function_not_exist') > 0) {
									alert('版本过低请升级')
								}
							}
						});
					});
				}
			})
		}