前端扫一扫功能
body里面的点击事件调用的函数,点击触发扫一扫功能。第三步:在body中写一个点击事件的元素。今天做的一个功能是企业微信扫一扫功能。大概功能就是扫描二维码,即完成这项功能。第二步:在main.js文件中引入。第四步:在script中写入。getCofig()函数。
·
今天做的一个功能是企业微信扫一扫功能。
大概功能就是扫描二维码,即完成这项功能
第一步:安装包
npm install weixin-js-sdk --save
第二步:在main.js文件中引入
import wx from 'weixin-js-sdk'
Vue.prototype.$wx = wx
第三步:在body中写一个点击事件的元素
<view>
<button type="default" @click="getCick">巡检扫码</button>
</view>
第四步:在script中写入
onload函数里
在onload函数里
// 最好是在onLoad中调用
onLoad: function () {
// 初始化时就要运行的函数,提前配置好扫一扫功能
this.getCofig();
},
getCofig()函数
// 配置信息
getCofig() {
const that = this;
// 获取当前地址
let url = window.location.href.split('#')[0];
let params={'url':url}
// 调用后端接口,得到Appid,签名这一系列参数
getJsapiSignature(params).then(res => {
const result = res;
if (res) {
that.wxConfig(
result.appId,
result.timestamp,
result.nonceStr,
result.signature
);
} else {
alert('获取配置信息返回为空');
}
})
},
//wx.config的配置
wxConfig(appId, timestamp, nonceStr, signature) {
this.$wx.config({
debug: true, // 开启调试模式,
appId: appId, // 必填,企业号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名
jsApiList:
[
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'scanQRCode',
'checkJsApi'
], // 必填,需要使用的JS接口列表
});
this.$wx.ready(() => {
this.$wx.checkJsApi({ //判断当前客户端版本是否支持指定JS接口
jsApiList: [
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'scanQRCode',
],
success: function (res) {// 以键值对的形式返回,可用true,不可用false。如:{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
this.$modal.msgSuccess(res.checkResult)
if(res.checkResult.scanQRCode != true){
this.$modal.msgSuccess('抱歉,当前客户端版本不支持扫一扫')
}
},
fail: function (res) { //检测getNetworkType该功能失败时处理
this.$modal.msgSuccess(res)
alert('checkJsApi error');
}
});
console.log("wxConfig配置完成,扫码前准备完成");
this.$modal.msgSuccess("wxConfig配置完成,扫码前准备完成")
})
this.$wx.error(function (res) {
this.$modal.msgSuccess('wxConfig出错了:' + res.errMsg)
console.log('wxConfig出错了:' + res.errMsg);
//wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
});
},
body里面的点击事件调用的函数,点击触发扫一扫功能
getClick(){
this.onH5Scan()
},
onH5Scan(){
const that = this;
this.$modal.msgSuccess("onH5Scan进来了");
console.log('onH5Scan进来了');
this.$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]; // 获取数组最后一个元素,也就是最终的内容
console.log('onH5Scan——success');
that.Info.qrcode=codeContent;
console.log("onH5Scan"+result+"==="+resultArr+"==="+codeContent);
},
fail: function (response) {
if(res.errMsg.indexOf('function_not_exist') > 0){
console.log('onH5Scan版本过低请升级');
}
uni.showToast({
icon: "none",
title: "onH5Scan——调用扫码失败"+response.errMsg
})
},
});
},
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)