简体中文
小程序与H5跨端数据交互
约 992 字大约 3 分钟
2025-08-09
当外部业务系统集成到纷享销客时,常见诉求是:
- 从纷享小程序打开第三方 H5 页面时传递参数
- 在第三方 H5 页面完成选择后,将结果回传给小程序
典型场景:
新建对象时,点击查找关联字段,打开第三方 H5 系统选择数据;选择后,将结果回显到当前关联字段。
适用场景
适用于“在小程序表单中调用第三方页面完成选值,再把结果写回当前表单”的场景。
实现方案
技术架构
webviewOpen
webviewOpen 是纷享内置 API,用于打开第三方 H5 页面。
sendNotification
sendNotification 是 JSAPI,用于将消息回传给纷享小程序。
实现流程
- 用户点击表单中的自定义字段
- 小程序通过
fsapi.jsapi.webviewOpen打开第三方 H5 页面 - H5 页面完成选择逻辑
- H5 页面将结果回传给小程序
- 小程序接收回调并通过
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
})使用流程
- 字段触发:用户点击自定义字段
- 打开 H5:调用
fsapi.jsapi.webviewOpen - 完成选择:用户在 H5 页面中选择数据
- 回传结果:H5 页面将结果回传给小程序
- 写回字段:小程序接收数据并更新表单字段
常见问题
Q:为什么代码不生效?
A:需要按照以下内容进行排查:
- 字段 API 名称:确保字段的
api_name与插件配置匹配 - 数据格式:确保 H5 回传的数据格式与字段类型匹配
- H5 页面回调:确认 H5 页面已实现回传逻辑
- JSAPI 初始化:确认相关 JSAPI 初始化成功
Q:什么时候适合用这种方案?
适合以下情况:
- 小程序表单自身不适合直接完成复杂选值
- 第三方系统已有成熟选择页面
- 需要在跨系统之间做轻量参数传递和结果回填
通过以上方案,可以实现“小程序打开第三方 H5 → H5 完成选择 → 回填到当前表单”的跨端数据交互能力。
