开放组件 - 文档 - 企业微信开发者中心

准备好一个外部服务应用，应用保证 agentConfig 签名可以正常工作；
在非企业微信内置浏览器中使用时，页面需要使用 Web 登录组件进行登录，必须使用企业微信登录组件方式（非构造登录链接），且使用会话展示组件的域名必须与嵌入 Web 登录组件的域名完全一致；
前端项目引入 sdk：@wecom/jssdk；
页面 html 引入：https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js

2.3 开始使用

在初始化阶段，页面需要调用 @wecom/jssdk 提供的 ww.register 接口初始化应用信息：

ww.register({
  corpId, // 必填，企业微信的corpid，必须与当前登录的企业一致
  agentId, // 必填，自建应用id 或 企业授权了第三方应用或代开发应用后的应用id （e.g. 1000247）
  jsApiList,
  async getAgentConfigSignature() {
    // 获取并返回 agentConfig 签名信息
  }
})

// 企业信息组件需要确保 WWOpenData 初始化成功
await ww.initOpenData();

初始化完成后，创建“展示组件工厂”对象备用：

const factory = ww.createOpenDataFrameFactory()

在需要展示企业数据时，调用 factory.createOpenDataFrame 函数创建展示组件，下面以会话展示组件为例：

const msgList = [
  {
    msgid,    // 消息 ID
    secretKey // 消息密钥
  }
]

const instance = factory.createOpenDataFrame({
  el: containerElement, // “容器”元素，用于挂载展示组件
  template: `
    <view class="content">
      <ww-open-app-manage-button
        class="app-manage-button"
        page="{{data.pageType}}"
        binderror="onOpenError"
      >
        点击打开应用管理详情页
      </ww-open-app-manage-button>
    </view>
  `,
  style: `
    .content {
      height: 100%;
      overflow: auto;
    }
  `,
  data: {
    msgList
  },
  methods: {
    onOpenError(err) {
      console.error(err)
    }
  }
})

3. API 说明

1.1 `createOpenDataFrame` 参数说明

el?: HTMLElement | string

组件容器，可以是实际的 DOM 元素或 CSS 选择器字符串。

data?: unknown

组件自定义数据，可以在模板中访问。

template: string

组件模板，用于自定义组件内的展示内容。语法参考 WXML。目前支持以下组件：

block
view
scroll-view
span
image
checkbox
ww-open-app-manage-button

style?: string

组件模板样式表，语法是 CSS 的子集，目前仅支持以下语法：

Class Selector
Pseudo
@media
@supports
@font-face
@page
@keyframes
@counter-style

其他限制

以 ww- 开头的类名为企业微信预留，无法修改样式
一个选择器组内需要至少包含一个类选择器，如 span.example

1.2 回调方法

error(error: unknown)

错误回调。

handleModal(event: { modalUrl, modalSize }): boolean | Promise<boolean>

调起模态框回调，当用户点击需要预览的消息时触发。开发者可以根据场景手动创建预览 iframe 展示消息内容。

在企业微信内置浏览器环境下，展示组件默认会打开新窗口展示消息内容。

参数

modalUrl: string
预览 URL，在 iframe 中加载可以展示预览内容。
modalSize?: { width: number; height: number; }
@wecom/jssdk 版本要求：2.2.5 及以上版本。
预览窗口的建议尺寸，映射的是点击预览内容的原始尺寸，开发者可以根据用户点击的不同内容动态配置预览窗口的大小。

当返回 false 时表示阻止展示组件处理预览事件。

示例代码

/**
 * 创建 modal iframe、设置 src 并添加到 document.body
 */
handleModal({ modalUrl, modalSize }) {
  const iframe = document.createElement('iframe')
  iframe.src = modalUrl
  iframe.className = 'modal'
  if (modalSize?.width &amp;&amp; modalSize?.height) {
    // 按需动态设置预览窗口的大小
    iframe.style.width = `${width}px`
    iframe.style.height = `${height}px`
  }
  document.body.appendChild(iframe)
}

handleMounted(): void

视图挂载成功后的回调。

handleUpdated(): void

视图更新成功后的回调。

1.3 组件方法

setData(data: unknown)

更新组件自定义数据，支持通过对象路径设置深层数据：

instance.setData({
  key: 'value',
  'data.path["computed member"][1]': 'deepValue'
})
/**
 * result:
 *
 * {
 *   key: 'value',
 *   data: {
 *     path: {
 *       'computed member': [
 *         ,
 *         'deepValue'
 *       ]
 *     }
 *   }
 * }
 */

1.4 模板组件

`ww-open-app-manage-button`

支持跳转应用及权限详情页

仅支持外部服务应用类型调用
用户必须是应用管理员或者超管，数据与智能专区权限二次授权页需要超管
@wecom/jssdk 版本要求：2.1.0 及以上版本。

参数说明

参数	类型	默认值	必填	说明
page	string	`app_detail`	否	`app_detail`: 应用管理详情页; `permission`: 应用权限详情页; `datazone_permission`: 数据与智能专区权限二次授权页; `customer_acquisition_permission`: 获客接口权限二次授权页;

模板示例

<ww-open-app-manage-button
  class="app-manage-button"
  page="{{data.pageType}}"
  binderror="onOpenError"
>
  点击打开应用管理详情页
</ww-open-app-manage-button>

1.6 模板组件错误事件

模板组件有统一的错误事件回调方式 binderror，通过监听错误事件，开发者可以判断组件的工作状态。

示例代码

<ww-open-app-manage-button binderror="onOpenError" />

factory.createOpenDataFrame({
  ...
  methods: {
    ...
    onOpenError(event) {
      console.warn('open message error: ', event);
    },
  },
});

1.7 Context

ScrollViewContext

增强 scroll-view 实例，可以通过 ww.createScrollViewContext 接口获取。

方法

ScrollViewContext.scrollTo(options: { top?: number; left?: number })

滚动至指定位置。

options 参数说明：
top：垂直位置，单位：像素；
left：水平位置，单位：像素；

ScrollViewContext.scrollIntoView(selector: string, options?: { block?: string; inline?: string })

滚动至指定位置。

1. 背景介绍

2. 使用方法

2.1 环境要求

注意事项

2.2 准备工作