当外部业务系统集成到纷享销客时，常见诉求是：

• 从纷享小程序打开第三方 H5 页面时传递参数
• 在第三方 H5 页面完成选择后，将结果回传给小程序

典型场景：

新建对象时，点击查找关联字段，打开第三方 H5 系统选择数据；选择后，将结果回显到当前关联字段。

适用场景

适用于“在小程序表单中调用第三方页面完成选值，再把结果写回当前表单”的场景。

实现方案

技术架构

webviewOpen

webviewOpen 是纷享内置 API，用于打开第三方 H5 页面。

sendNotification

sendNotification 是 JSAPI，用于将消息回传给纷享小程序。

实现流程

1. 用户点击表单中的自定义字段
2. 小程序通过 fsapi.jsapi.webviewOpen 打开第三方 H5 页面
3. H5 页面完成选择逻辑
4. H5 页面将结果回传给小程序
5. 小程序接收回调并通过 context.setData 更新表单字段

核心实现

插件主文件

// plugins/formplugin.js
export default function (context) {
    return {
        // 自定义字段组件配置
        customFieldCom({field}) {
            let comInfo = null;
            if (field && field.api_name === 'field_testplugin__c') {
                comInfo = {
                    name: "cusField", // 对应config.json中的组件key
                    prop: {test: 1}
                }
            }
            return Promise.resolve(comInfo)
        }
    }
}

字段组件

// components/customField/index.js
import fsapi from 'fs-hera-api';
Component({
    ...,
    methods: {
        ...
        openWebview() {
            fsapi.jsapi.webviewOpen({
                url: `https://a9.fspage.com/FSR/uipaas/test/thirdH5Page.html?_v=${+new Date()}`,
                title: '自定义第三方页面标题',
                inputData: {
                    ...
                }, // 可传递参数给H5页面
                onSuccess: (rst) => {
                    console.log('收到成功回调了~~', rst)
                    this.setFromData(rst) // 处理H5回传的数据
                }
            })
        },
        setFromData(data) {
            // 将H5回传的数据设置到表单字段
            this.data.context.setData({
                "field_pwcname__c": data.name,
                "field_pwxtel__c": data.tel,
                "field_pwcregnumber__c": data.regNumber,
                "field_pwcregisteredCapital__c": data.registeredCapital
            });
        }
    }
})

字段基础行为

// fieldbehavior.js
export default Behavior({
    properties:{
        context: { type: Object },    // 表单上下文
        field: { type: Object },      // 字段信息
        value: { type: null },        // 字段值
        is_required: { type: Boolean }, // 是否必填
        is_readonly: { type: Boolean }, // 是否只读
        customProp: { type: null }    // 自定义属性
    },
})

配置文件说明

插件配置

{
    "components": {
        "cusField": "components/customField/index"
    },
    "main": "plugins/formplugin.js"
}

小程序配置

{
    "pages": [],
    "testpages": [
        "components/customField/index"
    ],
    "sitemapLocation": "sitemap.json"
}

关键点说明

customFieldCom

用于根据字段信息返回自定义字段组件配置：

• 命中目标字段时，返回对应组件配置
• 未命中时，返回空值或默认值

fsapi.jsapi.webviewOpen

用于打开 H5 页面并处理数据回传：

• url：H5 页面地址
• title：页面标题
• inputData：传递给 H5 的参数
• onSuccess：接收 H5 回传数据的回调

context.setData

用于将 H5 回传数据写回当前表单字段：

context.setData({
  "field_api_name": value
})

使用流程

1. 字段触发：用户点击自定义字段
2. 打开 H5：调用 fsapi.jsapi.webviewOpen
3. 完成选择：用户在 H5 页面中选择数据
4. 回传结果：H5 页面将结果回传给小程序
5. 写回字段：小程序接收数据并更新表单字段

常见问题

Q：为什么代码不生效？

A：需要按照以下内容进行排查：

1. 字段 API 名称：确保字段的 api_name 与插件配置匹配
2. 数据格式：确保 H5 回传的数据格式与字段类型匹配
3. H5 页面回调：确认 H5 页面已实现回传逻辑
4. JSAPI 初始化：确认相关 JSAPI 初始化成功

Q：什么时候适合用这种方案？

适合以下情况：

• 小程序表单自身不适合直接完成复杂选值
• 第三方系统已有成熟选择页面
• 需要在跨系统之间做轻量参数传递和结果回填

通过以上方案，可以实现“小程序打开第三方 H5 → H5 完成选择 → 回填到当前表单”的跨端数据交互能力。