前要：微信端调用微信的扫一扫和企业微信端调用企业微信的扫一扫获取订单码查询！！
一、微信端扫一扫
这里使用的是uniapp框架调用微信的内置sdk扫码防伪溯源！http引入或者npm安装模块：
//public/index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'
})
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
<script type="text/javascript">
const wxShareJs = wx;
</script>
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
npm install weixin-js-sdk
import 'wxShareJs ' from 'weixin-js-sdk'
引入sdk成功后就可以配置扫码触发：
getSignaTure() {
var ua = navigator.userAgent.toLowerCase()
var isWeixin = ua.indexOf('micromessenger') !== -1
if (!isWeixin) {
alert('请用微信打开连接，才可使用扫一扫')
return;
}
uni.showLoading({
title: '加载中',
mask: true
});
let webUrl = window.location.href.split("#")[0];
let data = {
key: this.system,
webUrl: webUrl,
};
this.$callApi(
this.$method.COMMON_MALL_NOSESSION_URL,
this.$method.METHOD_API_MALL_GONGZHONGHAO_SIGNATURE_GET,
"GET",
data,
(result) => {
if (result.code == 0) {
var timestamp = result.data.timestamp;
var noncestr = result.data.noncestr;
var signature = result.data.signature;
var appId = result.data.app_id;
wxShareJs.config({
debug : false,
appId: appId,
timestamp: timestamp,
nonceStr: noncestr,
signature: signature,
jsApiList: ["checkJsApi", "scanQRCode","chooseWXPay"],
});
uni.hideLoading();
wxShareJs.error(function(res) {
alert("出错了：" + res.errMsg);
});
wxShareJs.ready(function() {
wxShareJs.checkJsApi({
jsApiList: ["scanQRCode"],
success: function(res1) {
wxShareJs.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode","barCode","datamatrix"], // 可以指定扫二维码还是一维码，默认二者都有
success: function(res) {
var result = res.resultStr;
var result2 = "";
if (result.indexOf("DATA_MATRIX") != -1 || result.indexOf("CODE_128") != -1) {
result2 = result.substring(result.indexOf(",") + 1);
}
if(!!result.phone){
uni.navigateTo({
url: `/pages/sendLogisticsList/sendLogisticsList?phone=${
result.phone}&system=${
this.system}`
})
}else{
uni.navigateTo({
url: `/pages/sendLogisticsList/sendLogisticsList?longNumber=${
result2}&system=${
this.system}`
})
}
},
error: function(res) {
alert("出错了", +res);
console.log(res);
},
});
},
});
});
} else {
uni.showToast({
icon: "none",
title: '获取签名失败',
});
}
}
);
}
注释： 1、 要唤起微信sdk的扫码必须要调取后端接口（配置公众号），所以我这里有不同系统的使用，多个公众号！并且还有手机号码验证码登录，所以配置后台密钥的时候要根据不同系统标识this.system来换取密钥！2、 扫码成功回调的时候跳转可能存在多种码类，所以配置scanType！3、 由于datamatrix类码回调时带有DATA_MATRIX标识！所以需要截取掉！4、 具体看官网
二、企业微信端扫一扫
其实企业微信和微信端差不多的！但是遇到一些问题：
1、 data数据改变，视图不更新的问题：降低嵌套层数，但是数据结构就是这样的！从上一个页面跳进来的数据第一次可以更新页面渲染！但是进来后本页面也有一个扫码的进口！可以获取到订单号，但是更新了data里面的数据后页面的数据没有更新，还是上一个页面进来的订单号获取的渲染数据！
解决方法：
1.降低嵌套层数，数据结构就这样了，没办法！
2.使用 this.forceUpdate() 方法强制刷新，就是data数据一跟新就调用一下这强制更新一下视图就ok!
补充：forceUpdata()、set()和 nextTick() 的区别：
1、forceUpdata()、$set()都用于更新视图
2、nextTick()并不是更新视图，而是等数据视图更新之后再执行某些操作