页面结构

每个页面一个目录：page.json 描述长什么样，同目录 page.js 用 Page({}) 填数据、响应操作。

建议先把 JSON 结构搭出来，再写生命周期和页面事件。组件清单见组件。

	只展示固定内容	数据会变
文案	直接写在 `page.json`	写成 `{{hello}}` / `bind`，在 `onLoad` 里 `this.setData`
`page.js`	`Page({})` 即可	`Page({ data })`；也可 `Http.get` 后再 `setData`
适用	关于、说明、固定入口	表单回填、列表、统计

入口 homePage 为首页目录，例如 pages/home。page.js 可用 require 引入其他 JS，路径规则见 require。

页面字段

参数名	类型	必填	说明
id	String	否	页面标记。跳转可写文件夹，或入口 `pages` 中的 id
title	String / Object	否	导航栏。不写则不显示。字符串为标题；对象见下表
style	Object	否	内容区样式：`padding` / `margin` / `background` 等。未写 padding 时为 16
statusBar	String / Object	否	顶部状态栏。字符串为背景色；对象为 `background` + `color`（`light` / `dark`）
js	String	否	默认加载同目录 `page.js`。见页面生命周期、页面事件
enablePullDownRefresh	Boolean	否	打开整页下拉。见下拉刷新
body	Array	是	组件列表
popups	Array	否	弹层。显示隐藏用 `showIf`。要嵌自定义组件，在弹层 `body` 里写 `{ "type": "choose" }`，见组件结构、组件 · Popup。动作面板、图片查看器写在 `body` 里，同样用 `showIf`，见 ActionSheet、ImageViewer

以上字段会覆盖 deekeScript.json 里 window 参数的同名配置。先加载 deekeScript.json 的 window，再加载当前页面。

title 为对象时：

参数名	类型	说明
text	String	标题文案
hidden	Boolean	true 则隐藏导航栏
fontSize	Number	字号，单位 sp
color	String	文字颜色
background	String	导航栏背景色
fontWeight	String	`bold`
align	String	`left` / `center` / `right`
style	Object	也可把 fontSize / color 等写在 `style` 里

json

{
  "title": {
    "text": "工作台",
    "fontSize": 18,
    "color": "#FFFFFF",
    "background": "#006A65"
  }
}

json

{ "title": { "text": "关于", "hidden": true } }

内容区写在 style 里，覆盖全局 window.style：

json

{
  "style": { "padding": 16, "margin": 0, "background": "#F5F5F5" },
  "statusBar": { "background": "#006A65", "color": "light" },
  "body": []
}

组件字段见组件。把一组内置组件打包复用，见自定义组件。事件和数据见父页交互。

固定内容

结构和文案都写在 JSON 里，page.js 用空的 Page({}) 即可。

{
  "title": {
    "text": "关于",
    "fontSize": 18,
    "color": "#FFFFFF",
    "background": "#006A65"
  },
  "style": {
    "background": "#F5F5F5"
  },
  "body": [
    {
      "type": "title",
      "text": "DeekeScript"
    },
    {
      "type": "text",
      "text": "用 JSON 描述页面。"
    },
    {
      "type": "notice",
      "text": "当前版本 2.0.0"
    },
    {
      "type": "divider"
    },
    {
      "type": "card",
      "children": [
        {
          "type": "text",
          "text": "页面",
          "style": {
            "fontWeight": "bold"
          }
        },
        {
          "type": "notice",
          "text": "JSON 描述结构，JS 填充数据"
        }
      ]
    },
    {
      "type": "card",
      "children": [
        {
          "type": "text",
          "text": "数据",
          "style": {
            "fontWeight": "bold"
          }
        },
        {
          "type": "notice",
          "text": "模板占位符，onLoad 中 setData"
        }
      ]
    },
    {
      "type": "button",
      "text": "打开官网",
      "action": {
        "type": "openUrl",
        "url": "https://deeke.cn"
      }
    }
  ]
}

9:41100%

DeekeScript

用 JSON 描述页面。

当前版本 2.0.0

页面

JSON 描述结构，JS 填充数据

数据

模板占位符，onLoad 中 setData

数据会变

文案写成 {{hello}}，表单用 name 对应 data 里的键。初始值放 Page({ data })，接口数据在 onLoad 里 this.setData。列表、触底加载见组件。

{
  "title": {
    "text": "设置",
    "fontSize": 18,
    "color": "#FFFFFF",
    "background": "#006A65"
  },
  "style": {
    "background": "#F5F5F5",
    "padding": 10
  },
  "body": [
    {
      "type": "card",
      "children": [
        {
          "type": "input",
          "id": "task_name",
          "name": "task_name",
          "label": "任务名",
          "hint": "请输入"
        },
        {
          "type": "input",
          "id": "nickname",
          "name": "nickname",
          "label": "账号备注",
          "hint": "选填"
        },
        {
          "type": "textarea",
          "id": "remark",
          "name": "remark",
          "label": "备注",
          "minLines": 3
        },
        {
          "type": "select",
          "id": "platform",
          "name": "platform",
          "label": "平台",
          "options": [
            {
              "label": "抖音",
              "value": "dy"
            },
            {
              "label": "小红书",
              "value": "xhs"
            },
            {
              "label": "快手",
              "value": "ks"
            }
          ]
        },
        {
          "type": "switch",
          "id": "auto_start",
          "name": "auto_start",
          "label": "自动开始",
          "value": false
        },
        {
          "type": "switch",
          "id": "notify",
          "name": "notify",
          "label": "完成通知",
          "value": true
        },
        {
          "type": "range",
          "label": "关注数量",
          "separator": "~",
          "inputType": "number",
          "start": {
            "name": "follow_min",
            "hint": "最小"
          },
          "end": {
            "name": "follow_max",
            "hint": "最大"
          }
        },
        {
          "type": "progress",
          "name": "speed",
          "label": "运行速度",
          "value": 50,
          "min": 0,
          "max": 100,
          "unit": "%"
        }
      ]
    },
    {
      "type": "space",
      "height": 8
    },
    {
      "type": "button",
      "text": "保存",
      "onTap": "onSave",
      "action": {
        "type": "save"
      }
    }
  ]
}

9:41100%

任务名账号备注备注平台自动开始完成通知关注数量

运行速度

50%

模板 `{{path}}`

写法	含义
`{{hello}}`	`data` 中的字段
`{{data.hello}}`	同上
`{{item.title}}`	列表当前项
`{{index}}`	列表下标，从 0 开始
`{{params.id}}`	跳转参数
`{{storage.task_name}}`	本地 Storage
`{{item.tags.0}}`	数组下标

路径不存在时替换为空字符串。点击、显示条件等写在组件上，见组件 · 通用字段。

页面结构 ​

页面字段 ​

固定内容 ​

数据会变 ​

模板 {{path}} ​

页面结构

页面字段

固定内容

数据会变

模板 `{{path}}`