6. 发布到移动端
移动端 renderer 读取与 web designer 相同的 Model 和页面元数据,但以触控优先的布局呈现。本章把 CRM 暴露到 iOS 与 Android 应用上。
预计耗时:20 分钟。
6.1 为移动端启用 model
打开 Mobile → Object visibility 并打开以下开关:
crm_lead—— 列表 + 详情 + 表单crm_account—— 列表 + 详情(移动端无表单)crm_opportunity—— 列表 + 详情 + 表单
Renderer 会从 model 派生 field 集合。如某些 field 不应出现在小屏上(例如 notes 过长),用 mobile.disabled = true 对单个 field 进行 override。
6.2 定制 renderer
打开 Designer → crm_opportunity_list(移动端 renderer 复用同一份列表页 schema):
- 列表列 —— 名称
crm_opp_name、关联客户crm_opp_account_id、阶段crm_opp_stage、预期金额crm_opp_expected_amount - 行内操作 —— 调命令
crm:advance_opp_to_proposal推进阶段 - 标签页筛选 —— 按
crm_opp_stage(全部 / 进行中 / 赢单 / 输单)
列表页用标准页面 schema(kind: "list"、schemaVersion: 4、blocks);同一份 schema 同时服务 web 与移动端 renderer:
{
"pageKey": "crm_opportunity_list",
"modelCode": "crm_opportunity",
"kind": "list",
"schemaVersion": 4,
"layout": { "type": "stack" },
"blocks": [
{
"id": "crm_opportunity_table",
"blockType": "table",
"columns": [
{ "field": "crm_opp_name", "width": 200, "sortable": true },
{ "field": "crm_opp_account_id", "width": 160 },
{ "field": "crm_opp_stage", "width": 120, "renderType": "tag", "dictCode": "crm_opp_stage" },
{ "field": "crm_opp_expected_amount", "width": 140, "sortable": true }
],
"searchFields": ["crm_opp_name", "crm_opp_code"]
}
]
}移动端列表布局复用同一份页面 schema;截图待移动端 demo 构建就绪后补齐。
6.3 Picker 与二级入口
对商机表单上的 crm_opp_account_id 引用字段(referenceModelCode: crm_account,显示字段 crm_acc_name),配置一个 Picker 进行搜索选择。移动端的必填引用 field 必须使用 Picker;允许自由文本输入是红线(参见 移动端 UX 规则)。
6.4 验证
- 安装测试 app,以同一用户登录
- 三个 model 都出现在导航中
- 在移动端创建一条 Lead → web 列表上能看到该行
- 在 opportunity 上执行推进命令(
crm:advance_opp_to_proposal)→crm_opp_stage改变;web 详情同步更新 - 从移动端尝试资格化 —— 必填字段校验显示字段级错误,而非泛化 toast
声称本章完成前,请按 移动端低代码 UX 规则 走完完整的验证清单。