vue开发企业微信通讯录选择

• 1.npm安装相应的依赖，并在main.js中导入对应的包

•   import MintUI from 'mint-ui'
    import 'mint-ui/lib/style.css'
    import axios from 'axios'
    Vue.prototype.$wx = wx
    Vue.prototype.axios = axios
    Vue.use(MintUI)
    Vue.use(wx)
  

• 2.新建initWxConfig.js文件

    /* 企业微信js配置 */
    //注意：如果要在页面调用企业微信内部方法，请现在下面的jsApiList数组中添加方法
    import { Toast } from 'mint-ui'
    import wx from 'weixin-js-sdk'
    export function initWxConfig(vm){
      var that = vm;
      var token = vm.util.getCookie('hbzy-user-token')
      var url = encodeURIComponent(location.href)//经测试发现，hash模式下动态获取url不正确，写项目的入口地址即可，#及后面的部分去掉
      vm.axios({
        url: url
      })
      .then( (response) => {
        if(response.status == 200){
          var timestamp = response.data.timestamp //时间戳
          var nonceStr = response.data.nonceStr //随机字符串
          var signature = response.data.signature //签名
          var appId = response.data.appId //企业id
    
          wx.config({
            beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: appId, // 必填，企业微信的corpID
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: nonceStr, // 必填，生成签名的随机串
            signature: signature,// 必填，签名，见附录1
            jsApiList: ['selectEnterpriseContact'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
          });
          wx.ready(function () {
          });
          wx.error(function(res){
            Toast('initWxConfig:'+JSON.stringify(res))
          });
        }else{
            Toast(response.data.status_msg)
        }
      })
      .catch( (error) => {
        Toast(JSON.stringify(error))
      });
    }
  

• 3.在需要调用企业微信api的页面的入口函数中调用initWxConfig方法

    import { initWxConfig } from '@/pub/js/initWxConfig'
    initWxConfig(this);
  

• 4.点击某个按钮调用选择通讯录人员接口

     selectMeetingUsers () {
            var that = this;
            this.$wx.invoke("selectEnterpriseContact", {
                "fromDepartmentId": -1,// 必填，表示打开的通讯录从指定的部门开始展示，-1表示自己所在部门开始, 0表示从最上层开始
                "mode": "multi",// 必填，选择模式，single表示单选，multi表示多选
                "type": ["department", "user"],// 必填，选择限制类型，指定department、user中的一个或者多个
                "selectedDepartmentIds": [],// 非必填，已选部门ID列表。用于多次选人时可重入，single模式下请勿填入多个id
                "selectedUserIds": []// 非必填，已选用户ID列表。用于多次选人时可重入，single模式下请勿填入多个id
              },function(res){
                if (res.err_msg == "selectEnterpriseContact:ok")
                {
                  if(typeof res.result == 'string')
                  {
                    res.result = JSON.parse(res.result) //由于目前各个终端尚未完全兼容，需要开发者额外判断result类型以保证在各个终端的兼容性
                  }
                  var selectedUserList = res.result.userList; // 已选的成员列表
                }
              }
            );
          },
  

• 5.在企业微信后台管理中新建应用并设置可信域名
  

注意：
1.要使用企业微信api功能，必须生成签名，生成签名的接口步骤
1）通过corpid和corpsecret生成access_token
2）通过access_token生成jsapi_ticket
3）然后通过noncestr，jsapi_ticket，timestamp，url生成签名
2.新建应用后一定要设置可信域名，通过域名访问项目，测试时可以在natapp上买一个通道