@lexiang/ww-open-data v0.7.0

乐享通讯录显示插件 OpenDataPlugin

OpenDataPlugin是以Vue插件形式对企业微信WWOpenData能力的封装，用于显示企业微信的用户名/部门名等信息

引入

在引入插件后，插件初始化需要两个必要步骤（顺序无关）：

• 当WWOpenData全局可用时，调用OpenDataPlugin.setReady(true)，

如果ready状态需要异步得到，可以传入Promise<boolean>: OpenDataPlugin.setReady(Promise.resolve(true))， 当promise状态为pending的时候，内容会显示为占位符（目前为空白），以避免内容切换造成的闪烁

• 调用OpenDataPlugin.setConfig(option: OpenDataPluginConfig)，配置成员数据请求方法

option参数包含两个必要属性:

-- getStaffIdMapping：用于获取成员id对应的企业微信id（corp_staff_id）

-- getStaffDepartmentMapping：用于获取成员id对应的部门id

import Vue from 'vue';
import OpenDataPlugin from '@lexiang/ww-open-data';

interface OpenDataPluginConfig {
  staticStaffIdStaffNameMapping?: Record<string, string>;
  getStaffIdMapping(staffIds: string[]): Promise<StaffIdMapping>;
  getStaffDepartmentMapping(staffIds: string[]): Promise<StaffIdMapping>;
}

async function getStaffIdMapping(staffIds: string[]) {
  return {
    'staff_id_1': 'corp_staff_id_1',
    'staff_id_2': 'corp_staff_id_2',
  };
}

async function getStaffDepartmentMapping(staffIds: string[]) {
  return {
    'staff_id_1': 'staff_department_id_1',
    'staff_id_2': 'staff_department_id_2',
  };
}

(async () => {
  await wechatSdk.init();
  OpenDataPlugin.setConfig({
    getStaffIdMapping,
    getStaffDepartmentMapping,
  } as OpenDataPluginConfig);
  OpenDataPlugin.setReady(true);
})();

在少数情况下可能需要成员id与名称的直接映射，这种情况下可以通过setConfig传入一个静态映射对象：

const idToName = {
  'system-bot': '小秘书',
  'special_staff_id': 'special_staff_name',
};

OpenDataPlugin.setConfig({
  staticStaffIdStaffNameMapping: idToName,
  getStaffIdMapping,
  getStaffDepartmentMapping,
} as OpenDataPluginConfig);

使用

按需引入两个组件staff-info和department-info

staff-info

department-info

<script>
import { staffInfo, departmentInfo } from '@lexiang/ww-open-data';
export default {
  components: {
    staffInfo,
    departmentInfo,
  }
};
</script>
<template>
  <div>
    <staff-info :defaultName="'userName'" :staffId="'xxx'" />
    <staff-info :defaultName="'departmentName'" :staffId="'xxx'" type="departmentName"/>
    <department-info :defaultName="'departmentName'" :departmentId="'xxx'" />
  </div>
</template>