uni-app实现微信H5扫码
在uni-app官网上发现uni-app不支持H5扫码功能,但是下面的提示说明可以通过微信的JS-SDK实现扫码功能,下面这篇文章主要给大家介绍了关于uniapp实现微信H5扫码功能的完整步骤,需要的朋友可以参考下
页面如下:
首先打开uniapp官网,发现uni-app不支持H5扫码 。
uni.scanCode(OBJECT)
but,继续往下看:引用微信的SDK去实现扫码
第一步:引入SDK 文档
1.下载js文件,直接引入到项目里 下载地址
<script>
import wx from '/common/jweixin.js';
export default{
...
}
</script>
2.通过npm安装,按需引入
npm install weixin-js-sdk --save
<script>
import wx from 'weixin-js-sdk';
export default{
...
}
</script>
第二步:配置微信config信息
onLoad: function () {
this.getCofig();
},
methods: {
getCofig() {
uni.request({
url: '/Common/In?action=get_wxconfig',
method: 'post',
success: (res) => {
if (res) {
wx.config({
debug: true, // 开启调试模式,
appId: res.appId, // 必填,企业号的唯一标识
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature, // 必填,签名
jsApiList: ['scanQRCode', 'checkJsApi','chooseImage'], // 必填,需使用的JS接口列表
});
wx.ready(() => {
console.log('配置完成,扫码前准备完成')
});
wx.error(function (res) {
//wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
console.log('出错了:' res.errMsg);
});
} else {
console.log('获取配置信息返回为空');
}
},
fail: error => {
console.log(error, '请求获取微信配置失败');
},
});
},
}
第三步:触发事件
// 点击扫码 区分普通扫码和H5扫码
scan() {
// #ifndef H5
uni.scanCode({
success: function (res) {
console.log("进来了1")
console.log('条码res:' res);
console.log('条码类型:' res.scanType);
console.log('条码内容:' res.result);
},
fail: error => {
console.log("暂不支持1")
}
});
// #endif
// #ifdef H5
// this.log("暂不支持H5扫码 走onScan这个方法")
this.onScan()
// #endif
},
// h5扫描二维码并解析
onScan() {
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]; // 获取数组最后一个元素,也就是最终的内容
},
fail: function (response) {
console.log("调用wx.scanQRCode扫码失败");
},
});
},
二维码:
一维码/条形码:
借鉴:https://www.jb51.net/article/267540.htm
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgabceg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24