企业微信-审批控件中的外部选项的应用全流程完美解决方案

前言

• 安卓端可以使用，苹果和PC端使用不了，这是个困扰了我很久的问题，在全网查找的时候发现，这个15年就有人陆续提出了这个问题，但是一直没有解决方案，企业微信侧也没有给出明确的解释，直到我在腾讯拉了企微的开发过来，才发现就是个10年都没去优化的陷阱。。。
• 解决方案见下方步骤四

背景

• 企业微信审批和dcops工单平台的互联
• 在企业微信的审批应用的一些审批模版里添加一个控件，这个控件可以获取到dcops的工单号

实现方案

查阅文档和页面

• 在企微审批应用后台模版里添加一个 多选或者单选的控件，这个控件的"选项来源"选择"关联外部选项"，就会出现一个填外部选项页面地址的输入框
  

  • 我们需要获取到用户身份，用该用户身份登录和划定可选工单号的范围，就需要完成 带登录态跳转移动端页面
  • 根据文档 构造网页授权链接
    • 注意必须使用urlencode对链接进行处理 然后再赋值给redirect_uri，urlencode是指对URL 中的某些字符，如空格、问号、等号等，转换为特定编码格式
      

• 查看 审批控件中的外部选项接口文档 发现调用该接口需要先完成两件事情

  • 先调用 wx,agentConfig配置
  • 获取到这个控件添加到url里的key，下面调用接口时会用到
    

配置实现

一、引入js

<!-- <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->
 <script src="https://res.wx.qq.com/wwopen/js/jsapi/jweixin-1.0.0.js"></script>
 <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>

二、通过config接口注入权限验证配置

  window.wx.config({
          beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
          debug: true, // 在测试没问题之后，关闭debug模式，防止弹窗
          appId: 'xxxx', // 必填，企业微信的corpID
          timestamp: this.timestamp, // 必填，生成签名的时间戳
          nonceStr: 'xxxx', // 必填，生成签名的随机串
          signature: this.signatrue, // 必填，签名，见 附录-JS-SDK使用权限签名算法
          jsApiList: ['agentConfig','saveApprovalSelectedItems','g