H5端调起微信扫一扫的功能

微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验

微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#2

H5端调起微信扫一扫的功能_第1张图片

1、这里使用npm 引入

npm install jweixin-module --save

2、在页面引入

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

3、将url动态得传给后台,需要后台返回标识

H5端调起微信扫一扫的功能_第2张图片 

 返回结果:

H5端调起微信扫一扫的功能_第3张图片

将返回结果填入配置:

 jweixin.config({
     // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的         参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
     appId: 'wx446b2d301a9e7ddc', // 必填,公众号的唯一标识
     timestamp: res.data.body.paramsMap.timestamp, // 必填,生成签名的时间戳
     nonceStr: res.data.body.paramsMap.noncestr, // 必填,生成签名的随机串
     // package: res.data.data.package,
     signature: res.data.body.paramsMap.signature,
     sApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表
});

H5端调起微信扫一扫的功能_第4张图片

 4、调用扫一扫

jweixin.ready(res => {
    uni.hideLoading();
   //需在用户可能点击分享按钮前就先调用
     jweixin.scanQRCode({
     needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
    scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
     success: res => { cosole.log(res)}

})

})

H5端调起微信扫一扫的功能_第5张图片

 

你可能感兴趣的:(小程序,微信,html5,uni-app)