浏览器方案(Vue2)

1. 前提条件

页面需要通过企业微信管理端跳转或第三方登录授权进行登录。并且通过上述方法登录跳转的目标域名要和使用通讯录组件的页面域名保持一致。

2. 引入 open-data SDK

/public/index.html 文件中<head>块中加入以下代码

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

sdk 内容是动态返回的，请严格按照上面的方式引入，不要保存到项目本地后打包引入。
referrerpolicy 声明为 origin 是为了让 sdk 能够顺利识别关键域名，不能去掉。

3. 进行 agentConfig 登记第三方应用的身份信息

wx.agentConfig({
    corpid: '', // 必填，企业微信的corpid，必须与当前登录的企业一致
    agentid: '', // 必填，企业微信的应用id （e.g. 1000247）
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录-JS-SDK使用权限签名算法
    jsApiList: ['selectExternalContact'], //必填，传入需要使用的接口名称
	success: function(res) {
        // 回调
    },
    fail: function(res) {
        if(res.errMsg.indexOf('function not exist') > -1){
            alert('版本过低请升级')
        }
    }
});

以上鉴权参数由后端生成，前端需要提供当前网页的地址，地址不包含#及其后面的内容（location.href.split("#")[0]）。

4. 绑定通讯录组件

<!-- 注意：这里的 openid 是 userid 和 departmentid 的统称 -->
<ww-open-data type="userName" openid="{{openid}}"></ww-open-data>
<script>
	WWOpenData.bind(document.querySelector('ww-open-data'))
</script>

页面通过 open-data 元素上的属性控制需要渲染的内容：

属性	类型	必填	说明
type	string	是	开放数据类型
openid	string	是	数据ID，根据type取值而定
corpid	string	否	企业ID，用户所属的企业 corpid

type 的合法值

值	说明
userName	用户名称
departmentName	部门名称

若 type=userName，此时 openid 对应 userid
若 type=departmentName，此时 openid 对应 departmentid
每 20ms 最多绑定 1000 个 open-data 元素，超出的部分将被忽略

5. 封装

通常情况下，一个企业的组织架构以及成员会有很多，也会因为业务原因在应用的各个角落都要显示部门名称成员名称。为此，我们需要对封装。

新建组件WwOpenData

<template>
  <div>
    <ww-open-data :type="type" :openid="openid"></ww-open-data>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    // 若 type=userName，此时 openid 对应 userid
    // 若 type=departmentName，此时 openid 对应 departmentid

    //类型：分为部门和人员姓名
    type: {
      type: String,
      require: true,
      default: undefined
    },
    //id:部门ID或人员
    openid: {
      type: String,
      require: true,
      default: undefined
    }
  },
  created() {
    this.showData();
  },
  methods: {
    showData() {
      WWOpenData.bind(document.querySelector("ww-open-data"));
    }
  }
};
</script>

使用组件

<WwOpenData type="userName" :openid="userid" />
//
<WwOpenData type="departmentName" :openid="departmentid" />

原生小程序方案

1. 前提条件

企业微信APP需 2.8.9 及以上版本
微信上小程序基础库版本需 1.9.6 及以上版本
开发者工具中运行模式设置为企业微信小程序模式

2. 添加通讯录组件

开发者在小程序管理后台申请使用插件，添加路径：设置 ->第三方服务 -> 插件管理 -> 添加插件，搜索并添加插件ID： wx5917c8c26f85c588，无需审核确认。
开发者在小程序app.json 文件中添加对插件的引用

"plugins": {
 	"contactPlugin": {
		"version": "2.1.0",
	  	"provider": "wx5917c8c26f85c588"
	}
}

开发者在具体引用插件的页面文件json文件中，添加对组件的引用，例如：

"usingComponents": {
	"ww-open-data":"plugin://contactPlugin/ww-open-data"
}

在 wxml 中调用 ww-open-data 组件展示用户信息：

<ww-open-data
   type="{{type}}"
   corpid="{{corpid}}"
   openid="{{openid}}"
   bindupdate="onDataUpdate"
/>

参数说明

属性	类型	必填	说明	最低版本
type	string	是	开放数据类型	1.0.0
corpid	string	是	用户所属的企业corpid	1.0.0
openid	string	是	数据ID，根据type取值而定	1.0.0
bindupdate	eventhandle	否	当组件展示的数据发生变更时触发，event.detail = { type, corpid, openid, hasData }	2.1.0

UniApp 方案

uniapp中的使用方法大体上与原生小程序是一样的，实际上使用的也说同一个插件，只是写引入配置的地方略有不同。

1. 引入插件

打开manifest.json文件使用源码视图，找到mp-weixin，写入如下配置

"plugins": {
	"contactPlugin": {
		"version": "2.0.0",
		"provider": "wx5917c8c26f85c588"
	}
},

2. 全局挂载组件

打开pages.json文件使用源码视图，找到globalStyle，写入如下配置

"globalStyle": {
	......
	"usingComponents": {
		"ww-open-data": "plugin://contactPlugin/ww-open-data"
	}
},

3. 使用组件

// 元素属性与原生小程序一致。
<ww-open-data type="userName" :corpid="corpId" :openid="userName" />

Vue Uniapp

如有帮助，点赞鼓励一下吧！

一键登录