uni-h5项目解决扫码功能_uniapp h5扫码

1、首先介绍一下使用uni-app去开发h5肯定是需要用到uni官网的一些api的，于是就去找uni里面的方法，找到之后如图所示，不支持，继续找，往下翻！

第二张找到了解决办法，当然，只支持微信内置浏览器打开，如果要从浏览器中打开就需要其他办法了。

2、找到这里之后开始进行实际操作

点开图片2中的详见，链接是https://ask.dcloud.net.cn/article/35380这个，在这个里面可以看到需要配置一些东西，你用npm的方法安装或者引入js都可以。我目前是引入js的方法，下载地址：https://unpkg.com/jweixin-module@1.6.0/lib/index.js可以直接复制到自己的js文件中进行操作的

3、js已经引入后，开始全局注册引用

在main.js中引入，并且全局注册方便引用

import wx from '@/utils/common/jweixin';

Vue.prototype.wx = wx
1
2
3

4、在使用之前要完成一些配置工作，微信公众号绑定h5，设置测试路径的域名，把配置文件给后端放到服务器中，进行配置，然后才可以识别，最后得到正确的签名。

5、开始在请求文件中去请求后端接口返回给你相应的数据信息

import wx from '@/utils/common/jweixin';

export async function wxConfig(type=1) {
	try {
		let signLink = location.href
		// 这个语句是为了判断当前设备是否为苹果设备，且系统为 iOS。
		if (navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
			signLink = location.href.split('#')[0]
		} else {
			signLink = location.href
		}
		// 这个地方的url由你们自己的后端提供给你们
		return await Request({
			url:'',
			method: 'post',
			noCheck: true,
			data: {
				url: signLink,
			}
		}).then(res => {
			if (res.code === 200) {
				const config = res.data
				wx.config({
					debug: false,
					appId: config.appId,
					timestamp: '' + config.timestamp,
					nonceStr: config.nonceStr,
					signature: config.signature,
					jsApiList: ['checkJsApi','scanQRCode']
				})
			}
		})
	} catch (e) {
		// alert(e)
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在这个地方，会出现很多很多问题，我在这里把我的问题一一举例出来

1、签名不对，未发布测试环境，在本地测试时导致的，可以用这个网站证明你生成的签名是否正确https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

2、报错千奇百怪，安卓可以之后，ios并不行，看报错，这时需要debug为true才能看到报错。查看报错原因。这里提醒一下，ios的手机需要注意签名问题，从登录页面跳转的时候不能使用navigateTo方法进行跳转以下就是说明原因了。

navigateTo： 是一种在单页面应用框架中，通过切换组件或页面来实现导航的方法，不会导致整个页面的刷新。
location.href 是一种传统的页面跳转方式，会触发整个页面的刷新，导致当前页面的状态丢失。
1
2

3、注意的点登录页面跳转方式改为

window.location.href = window.location.origin+'你自己发布所需要的路径以及要跳转后的页面'+ '自己需要的参数'

1
2

6、页面中的使用方式

1、需要在mounted中调用一次wxConfig的方法、然后就是点击里面调用改方法

<template>
	<view>
		<button class="submit" size="default" @click="getConfig">退出</button>
	</view>
</template>
<script>
	import { wxConfig } from '@/utils/request/index.js';
	export default {
		async mounted() {
			await wxConfig()//获取微信签名，注入权限验证配置
		},
		getConfig() {
			wxConfig().then(()=>{
				const that = this
				that.wx.scanQRCode({
					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
					scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
					success: function (res) { 
						var result = res.resultStr; // 当 needResult 为 1 时，扫码返回的结果
						var resultArr = result.split(','); // 扫描结果以逗号分割数组
						var codeContent = resultArr[resultArr.length - 1]; // 获取数组最后一个元素，也就是最终的内容
						// 在这个里面你得到了想要的数据，可以进行相应的操作
						 }).catch((err)=>{
						 	console.log('err',err)
						 })
					},
				});
			})
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

这就是以上的完整的使用方法，有疑问欢迎一起讨论！