组件结构

把一组内置组件打包成可复用块。JSON 必须写 "component": true。脚本用 Component({})，生命周期和页面的 onLoad / onShow 不是一套。

页面仍用 Page({}) 打开；组件写在页面 body 里，不进返回栈。要打开新页面用页面跳转。

何时创建、插入、卸下：组件生命周期
和父页怎么传数据、抛事件：父页交互

自定义组件

{
  "component": true,
  "id": "choose",
  "body": [
    {
      "type": "notice",
      "text": "点快捷标签，或自己输入后再确定。"
    },
    {
      "type": "row",
      "style": {
        "gap": 8
      },
      "children": [
        {
          "type": "tag",
          "text": "美食",
          "onTap": "pickFood",
          "style": {
            "background": "{{foodBg}}",
            "color": "{{foodColor}}"
          }
        },
        {
          "type": "tag",
          "text": "探店",
          "onTap": "pickShop",
          "style": {
            "background": "{{shopBg}}",
            "color": "{{shopColor}}"
          }
        },
        {
          "type": "tag",
          "text": "直播",
          "onTap": "pickLive",
          "style": {
            "background": "{{liveBg}}",
            "color": "{{liveColor}}"
          }
        }
      ]
    },
    {
      "type": "input",
      "name": "keyword",
      "label": "关键词",
      "hint": "例如：美食"
    },
    {
      "type": "button",
      "text": "确定选用",
      "onTap": "onOk"
    }
  ]
}

当前页面

{
  "title": {
    "text": "自定义组件",
    "fontSize": 18,
    "color": "#FFFFFF",
    "background": "#006A65"
  },
  "style": {
    "background": "#F5F5F5",
    "padding": 12
  },
  "body": [
    {
      "type": "choose",
      "id": "inline",
      "onConfirm": "onPicked"
    },
    {
      "type": "space",
      "height": 8
    },
    {
      "type": "card",
      "children": [
        {
          "type": "text",
          "text": "当前选用",
          "style": {
            "fontWeight": "bold"
          }
        },
        {
          "type": "title",
          "text": "{{picked}}"
        },
        {
          "type": "row",
          "style": {
            "gap": 8
          },
          "children": [
            {
              "type": "tag",
              "text": "{{picked}}",
              "style": {
                "background": "#E6F4F1",
                "color": "#006A65"
              }
            },
            {
              "type": "tag",
              "text": "可复用",
              "style": {
                "background": "#FFF4E5",
                "color": "#B25E09"
              }
            }
          ]
        }
      ]
    }
  ]
}

组件

9:41100%

点快捷标签，或自己输入后再确定。

美食探店直播

关键词

当前选用

未选

未选可复用

文件

components/choose/component.json
components/choose/component.js

入口 deekeScript.json 可注册别名，不写则按 components/<id> 找目录：

json

{
  "components": [
    { "id": "choose", "file": "components/choose" }
  ]
}

JSON 标识

必须有 "component": true。没有这个字段的 JSON 不能当组件加载。嵌入时只用 body，忽略 title / statusBar / popups。

json

{
  "component": true,
  "id": "choose",
  "body": [
    { "type": "notice", "text": "点快捷标签，或自己输入后再确定。" },
    {
      "type": "row",
      "children": [
        { "type": "tag", "text": "美食", "onTap": "pickFood", "style": { "background": "{{foodBg}}", "color": "{{foodColor}}" } },
        { "type": "tag", "text": "探店", "onTap": "pickShop", "style": { "background": "{{shopBg}}", "color": "{{shopColor}}" } }
      ]
    },
    { "type": "input", "name": "keyword", "label": "关键词" },
    { "type": "button", "text": "确定选用", "onTap": "onOk" }
  ]
}

参数名	类型	说明
component	Boolean	必填，`true` 表示为自定义组件
id	String	组件名。页面里可写 `"type": "choose"`
body	Array	内部用内置组件拼起来
js	String	默认同目录 `component.js`

body 里可以是文案、表单、列表、卡片等任意内置组件，也可以再嵌其它自定义组件（成环会拒绝）。

引用

页面引入

页面或其它组件的 JSON 里，把 type 写成组件 id。父页 body 里直接写这一段：

json

{
  "title": "自定义组件",
  "body": [
    {
      "type": "choose",
      "id": "inline",
      "onConfirm": "onPicked"
    }
  ]
}

也可显式写路径：

json

{ "type": "component", "src": "components/choose", "id": "inline", "onConfirm": "onPicked" }

弹窗引入

外壳（遮罩、标题、取消）仍由 popup 负责，组件写在弹层 body 里。完整预览见组件 · Popup。

json

{
  "popups": [{
    "title": "选关键词",
    "showIf": "open",
    "position": "bottom",
    "body": [
      { "type": "choose", "id": "picker", "onConfirm": "onPicked" }
    ]
  }]
}

参数名	类型	说明
type / src	String	组件 id 或 `components/choose`
id	String	给 `selectComponent` 用。不写则用组件 id
params	Object	传给 `created(props)`，字符串会做 `{{path}}` 替换
onXxx	String	组件 `triggerEvent('xxx')` 时调用的父级方法

右侧预览：上面是 choose 组件的 JSON / JS，下面是当前页的 page.json / page.js。父页 body 里有 { "type": "choose" }。点快捷标签或输入后再确定，父页会收到 confirm。

组件结构 ​

文件 ​

JSON 标识 ​

引用 ​

页面引入 ​

弹窗引入 ​

组件结构

文件

JSON 标识

引用

页面引入

弹窗引入