1、判断平台
判断不同平台并使用不同的扫码插件
2、钉钉扫码
安装:npm install dingtalk-jsapi
使用:import * as dd from "dingtalk-jsapi";
判断钉钉平台:dd.env.platform !== "notInDingTalk
主要代码:
dd.ready(function() {
dd.biz.util.scan({
type: "all", //(如果只写"qr",ios上会不生效)
onSuccess: function(data) {
console.log("扫码结果", data);
},
onFail: function(err) {
if (Number(err.errorCode) === 10) {
//如果用户取消操作的话则
} else {
//否则
}
},
3、微信扫码
判断微信平台:navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1
引入:在index.html里面写入
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
主要代码:
appId, timestamp, nonceStr, signature都由后端接口获得
wx.config({
debug: false, // 是否开启调试模式
appId, // 必填,公众号的唯一标识
timestamp, // 必填,生成签名的时间戳
nonceStr, // 必填,生成签名的随机串
signature, // 必填,签名
jsApiList: ["scanQRCode"] // 必填,需要使用的JS接口列表
});
wx.ready(() => {
//调起微信扫一扫接口
wx.checkJsApi({
jsApiList: ["scanQRCode"], // 需要检测的JS接口列表,
success: function(res) {
console.log("检测JS接口结果:", res);
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function(res) {
console.log("扫描单号", res.resultStr);
let result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
_this.$router.push({
name: "EditableDetail",
query: { result, editable: false }
});
},
cancel: function(res) {
//用户点击"X"取消操作
console.log("cancel", res);
}
});
}
});
});
wx.error(function(resE) {
console.log("wx.error", resE);
});
4、welink扫码
判断welink平台:navigator.userAgent.toLowerCase().navigatorInfo.includes("welink") || navigatorInfo.includes("cloudlink")
准备:在index.html里面写入
<script src="https://open.welink.huaweicloud.com/wecode/docs/jsapi/2.0.0/hwh5-cloudonline.js"></script>
主要代码:
HWH5.scanCode({ needResult: 1 }) .then(res => {
console.log(res);
}).catch(err => {
console.log(err)
});
4、桥接扫码
ScanBridge().then(res => {
console.log('扫码结果', res)
}).catch(err => {
console.log('err', err)
});
js文件
//扫码插件
export const ScanBridge = () => {
return new Promise((resolve, reject)=>{
window.onSuccess = function (message) {
console.log('onSuccess', message)
resolve(message)
}
window.onError = function (message) {
console.log('onError', message)
reject(message)
}
let argument = {
className: "ScanBridge",
function: "scanner",
successCallBack: "onSuccess",
failCallBack: "onError",
}
HandBridge.postMessage(JSON.stringify(argument));
})
}