1.在企业微信的工作台新建应用。打开应用管理。
点击修改，设置打开该应用跳转的网页（该网页所属项目需要部署到服务器，url地址应为测试服或正式服地址）
2.点击如图红框位置，启用网页授权及JS-SDK（图示是已经启用过的）
3.可信域名为当前应用跳转页面的url地址解析出来的域名（找后端的同学解析一下）。然后将该域名发给管理员申请备案验证域名归属（公司的企业微信找领导。领导有管理员权限），如图3-2，官方文档有说明。之后点击申请校验域名
图 3-1
图 3-2
按照提示操作，先下载密钥文件，将文件放在代码入口文件的平级（后端同学将代码部署到服务器可能跟前端入口文件不太一样，可以将文件发给后端同学，让他放在入口文件平级的地方），放好之后测试一下是否可以访问，访问域名地址+文件名（图 3-4），可以访问则将最后一条勾选，点击确认。
图 3-3
图 3-4
显示已验证，则启用成功：
4.按照JS-SDK官方文档操作（如果是低版本企业微信则将js文件版本号改为1.0.0）
官方文档：使用说明 - 接口文档 - 企业微信开发者中心 (qq.com)
https://developer.work.weixin.qq.com/document/path/90514
4.1 引入JS文件：
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>4.2 通过config接口注入权限验证配置
wx.config({
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: '', // 必填，企业微信的corpID
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名，见 附录-JS-SDK使用权限签名算法
jsApiList: [] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});这几个必填的参数需要从后端的接口获取，appId从管理员获取(是唯一的）
生成签名的算法：（可以在后端处理，也可以让后端返回jsapi_ticket，timestamp和nonceStr来自己根据算法生成签名）建议后端处理好直接生成签名和这些参数一起返回到前端。
JS-SDK使用权限签名算法 - 接口文档 - 企业微信开发者中心 (qq.com)https://developer.work.weixin.qq.com/document/path/90506 4.3 通过ready接口处理成功验证
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});4.4 通过error接口处理失败验证
wx.error(function(res){
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});4.5 调用成功也会有弹窗的问题
官方文档最下边有这样的提示：
以上几个函数都带有一个参数，类型为对象，其中除了每个接口本身返回的数据之外，还有一个通用属性err_msg，其值格式如下：
- 调用成功时："xxx:ok" ，其中xxx为调用的接口名
- 用户取消时："xxx:cancel"，其中xxx为调用的接口名
- 调用失败时：其值为具体错误信息
也就是说，调用成功与失败都会返回一个err_msg的属性，在手机端会作为弹窗弹出，因此在确保调用成功之后可以将config中的debug设为false。
5.调用企业微信的扫一扫接口，按照官方文档操作：
企业微信扫一扫 - 接口文档 - 企业微信开发者中心 (qq.com)https://developer.work.weixin.qq.com/document/path/90492直接使用接口代码即可：
wx.scanQRCode({
desc: 'scanQRCode desc',
needResult: 0, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有
success: function(res) {
// 回调
var result = res.resultStr;//当needResult为1时返回处理结果
},
error: function(res) {
if (res.errMsg.indexOf('function_not_exist') > 0) {
alert('版本过低请升级')
}
}
});
needResult为0时，扫描结果由企业微信处理，因此success函数内无需写操作步骤；若需要自己处理，则将needResult设为1，在success内写具体的操作步骤（一般为调用接口，后端接口内做逻辑处理）
6.整体代码：（我直接使用wx报错，网上搜索导入包依然报错，因此我使用的window.wx）
6.1 <template>模板内的内容：
放了一个按钮，点击按钮触发scanCode方法，在方法内部进行调用操作
<template>
<el-button type="danger" @click="scanCode">el-button</el-button>
</div>
</template>6.2 js部分：（注意看注释）
async function scanCode(){
try{
//动态获取当前页面的url地址
const url= window.location.href.split('#')[0]
//将url作为参数传入接口，将接口数据解构出来用data对象接受
const {data} = await getParams(url)
//可以将接口中数据打印出来看
console.log("data",data)
window.wx.config({
beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: false, // 在测试没问题之后，关闭debug模式，防止弹窗
appId: data.data.appId, // 必填，企业微信的corpID
timestamp: data.data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
signature: data.data.signature,// 必填，签名，见 附录-JS-SDK使用权限签名算法
jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
})
}catch(error){
console.log(error)
}
window.wx.ready(function () {
// 调用企业微信扫一扫接口
window.wx.scanQRCode({
desc: "scanQRCode desc",
needResult: 0, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有
success: res => {
// 回调
// 当needResult 为 1 时，扫码返回的结果
//我的vscode开启了eslint校验，定义变量而不使用会报错，在报错代码行后面跟上如下注释即可解决报错
var result = res.resultStr// eslint-disable-line no-unused-vars
},
fail: function (err) {
console.log(err)
}
})
})
window.wx.error(function(res){
//config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
var result = res.resultStr// eslint-disable-line no-unused-vars
console.log("ready失败！")
})
}6.3 index.js中的内容（定义接口方法）：
// 导入post请求
import { get } from "@/utiles/request.js"
// 获取企业微信扫一扫参数的接口
export const getParams = (url) => {
return get(`http://aaa.bbb.ccc.ddd/api/getxxx?url=${url}`)
}