uni-app h5 扫一扫

超、凢脫俗 2024-04-17 06:26 73阅读 0赞

在使用uni-app开发微信公众号（H5）时，基本上都需要用到微信的JSSDK。

首先，先下载js，地址： [https://unpkg.com/jweixin-module@1.4.1/out/index.js][https_unpkg.com_jweixin-module_1.4.1_out_index.js]

然后在项目根目录新建一个jweixin文件夹，把下载下来的js放到此文件夹下面。

接着就是使用了，在你需要使用的页面中引入：

const jweixin = require('../../jweixin')

使用微信 js-sdk 的时候，都需要通过config接口注入权限验证配置。所以需要先调用后台接口获取config配置：

async getConfig() {
    				let [error, res] = await uni.request({
    					url: '/api/api/WXJSSDK/GetConfig',
    					method: 'GET',
    					data: {
    						url: location.href
    					}
    				})
    				let s = res.data
    				jweixin.config({
    					debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    					appId: s.appId, // 必填，公众号的唯一标识
    					timestamp: s.timestamp, // 必填，生成签名的时间戳
    					nonceStr: s.nonceStr, // 必填，生成签名的随机串
    					signature: s.signature, // 必填，签名
    					jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "scanQRCode"] // 必填，需要使用的JS接口列表
    				});
    			},

然后再onLoad中调用：

async onLoad() {
    			await this.getConfig()
    		},

最后给扫一扫添加点击事件：

scan() {
    				const _this = this
    				jweixin.scanQRCode({
    					needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
    					scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
    					success: function (res) {
    						let str = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
    						console.log(str)
    					}
    				});
    			}

[https_unpkg.com_jweixin-module_1.4.1_out_index.js]: https://unpkg.com/jweixin-module@1.4.1/out/index.js