设备报障使用企业微信扫一扫

1.参照官方文档作为基础了解

使用说明 - 接口文档 - 企业微信开发者中心

2.针对需求

eg：我的项目需求是

3.开发需要配置企业微信管理权限 

需要后端提供接口返回以下数据：

需要提供相关配置：

• 成为管理员，得到CORPID(企业ID，每个企业微信都有一个，企业下的所有应用都是同一个)和CORPSECRET(应用Secret，每个应用都有，各不相同)
• 创建应用---设置主页地址--开发者接口 > 网页授权及JS-SDK，点击 设置可信域名

 目前开发需要准备以下：

拥有该企业的超级管理员或分级管理员权

 获取 AgentID 与 Secret，并保存发送给后台人员，方便后续调用接口获取签名

配置主页 配置鉴权

完成以上步骤就可以正式进入开发

1.参照文档引入文件在html页面上

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2.在使用页面上打印下方代码可以看到

consle.log(wx)

强调：此处不需要我去做网页授权和企业微信的应用添加，只负责前端的逻辑编写

1：判断环境：

  computed:{
       isWxwork:function() {
           var ua = window.navigator.userAgent.toLowerCase();
           return ua.indexOf('wxwork') > -1;
        },
  },

2：根据是否企业微信环境的判断展示设备的两种状态：下拉框（非企业微信环境）&& 按钮（企业微信环境）

 <el-col
      :xs="{ span: 12 }"
      :md="{ span: 24 }"
      :lg="{ span: 22 }"
      style="text-align: left"
    >
      <div style="display:flex;width:35%" v-if="isWxwork"> 
        <el-input
        type="text"
        v-model="DeviceSelectValue"
        class="w-50 m-2"/>
     <el-button  @click="wxisCom">扫一扫</el-button></div>
      <el-select v-model="DeviceSelectValue" placeholder="请选择" size="large" v-else>
        <el-option
          v-for="item in DeviceOptions"
          :key="item.KeyValue"
          :label="item.LabelName"
          :value="item.KeyValue"
        >
        </el-option>
      </el-select>

    </el-col>

Btn的点击事件根据接口返回的数据调取企业微信的Api：

  wxReady: new Promise((resolve, reject) => {
        this.wxisCom(resolve, reject);
    }),   

   wxisCom: function (resolve, reject) {
      let url = window.location.href.split("#")[0];
      this.$axios
        .get(
          "https://qyapi.weixin.qq.com/cgi-bin/user/getuserinfo",
          // decodeuricomponent:js内置方法对url进行编码
          { params: { url: decodeURIComponent(url) } }
        )
        .then((res) => {
          // 引入企业微信 JS-SDK
          wx.config({
            beta: true, // 需要使用企业微信开发者模式
            appId: res.data.corpid, // 必填，企业微信的corpID
            timestamp: res.data.timestamp, //必填，生成签名的时间戳
            nonceStr: res.data.noncestr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: ["scanQRCode"], // 调用扫一扫接口的方法名
          });

          // 等待企业微信 JS-SDK 加载完成
          wx.ready(function () {
            console.log("wx【 JS-SDK 】加载完成");
            resolve();
          });
        });
    },
    // 扫一扫
    wxScanQRCode: function () {
      this.wxReady.then(() => {
        wx.scanQRCode({
          needResult: 1, // 返回扫描结果，即二维码包含的信息
          scanType: ["qrCode", "barCode"], // 可以扫描的码类型
          success: function (res) {
            // 扫描成功后的回调函数
            var result = res.resultStr;
            // 处理扫描结果
            console.log("扫描结果为：" + result);
            // 将扫描结果回填到表单中
            this.DeviceSelectValue = result;
          },
        });
      });
    },

目前的效果图如下