uniapp实现微信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 H5uni.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

uniapp实现微信H5扫码相关推荐

【uniapp】H5扫码方案，解决uni.scanCode不支持H5的问题
1. 背景 uniapp 中自带的 uni.scanCode 只能应用于非H5,在H5上是没有提供该类扫码功能. 在参考了前辈的文章后(在此特别感谢 uniapp H5扫码实现提供的方案和 ...
微信和支付宝H5扫码支付开发记录
微信和支付宝H5扫码支付开发记录微信支付支付宝支付简单前端实现的一下方法,服务端方法未记录: 微信支付微信流程步骤简介 1.获取用户code 2.拉起微信支付支付宝支付支付宝流程步骤简介: ...
Win10环境前后端分离项目基于Vue.js+Django+Python3实现微信(wechat)扫码支付流程(2021年最新攻略)
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_182 之前的一篇文章:mpvue1.0+python3.7+Django2.0.4实现微信小程序的支付功能,主要介绍了微信小程序内 ...
Win10环境前后端分离项目基于Vue.js+Tornado+Python3实现微信(wechat)扫码支付流程
在生活具有广泛性.高效性.使用方便性的支付方式是扫码支付,扫码的优点在于推广成本低,上至钓鱼台国宾馆,下至发廊地摊都能用,打印出来就完事了,而相比其他支付方式,现金的找零及假钞问题,信用卡的办理门槛. ...
微信网页扫码支付(公众号)JAVA实现
今天我们来说说微信网页扫码支付,这个支付的步骤和微信公众号网页是差不多的,也和微信小程序的步骤是一致的,不过appid是微信公众号的,我自己收集的微信开发文档希望对大家有用: https://blog ...
淘宝和微信的扫码登录实现原理
目录基本技术原理扫码登录功能到底是什么样的? 扫码登录功能的完整技术逻辑 1)网页端与服务器的配合逻辑: 2)手机端与服务器的配合逻辑: 3)登录成功时的逻辑: 4)详细的技术原理总结如下图所示: ...
微信授权扫码点餐-新特性React16
首先,需要对静态方法做一个理解.static静态方法,在es5中怎么实现呢?网易云课堂微信授权扫码点餐-新特性React16 function Person() {} Person.getCount ...
微信网页扫码登录与微信公众号授权登录的区别
最近着手开发了微信网页扫码登录和公众号授权登录收获颇丰,两者的开发很类似.以下是我个人摸索过程中发现的两者的异同: 两者都可以通过微信客户端扫码授权的方式,让第三方页面获得微信用户的一些基本信息(昵称 ...
苹果+android+扫码支付,苹果iOS12捷径扫码付款怎么设置微信支付宝扫码二合一支付捷径...
苹果iOS12捷径扫码付款怎么设置微信支付宝扫码二合一支付捷径.捷径是苹果手机一个比较实用的功能,如今手机扫码支付非常流行,因此在苹果手机中安装一个支付捷径,还是非常方便的.下面小编就来分享一个微信 ...

uniapp实现微信H5扫码

uniapp实现微信H5扫码相关推荐

最新文章

热门文章