动态页面
本篇只讲自定义界面。界面用 JSON 描述，用 page.js 填数据、对接接口，因此也可以让 AI 生成，见 用 AI 写 UI。只跑无障碍脚本、不需要界面，见 快速开始。
建议按侧栏从上往下看：先配置和页面 JSON，再看内置组件和自定义组件，然后是页面生命周期、事件，以及能力（下拉刷新、底部菜单、悬浮球）。
工程目录
入口是项目根目录的 deekeScript.json。每个页面一个文件夹，里面是 page.json + page.js：
your-project/
deekeScript.json
pages/
home/
page.json
page.js
records/
page.json
page.js
components/
choose/
component.json
component.js
common/
hello.js
tasks/
xxx.js必须有入口文件
项目根目录必须有 deekeScript.json，否则无法使用 VSCode 中的 DeekeScript 插件（无法同步代码、无法在 VSCode 上运行 JS）。
进入页面时先套用 deekeScript.json 里的 window 参数，再用当前目录的 page.json 覆盖同名字段。
name、host、packageName 等打包字段可写在入口文件。页面请求在 JS 里用 Http.get。入口与 pages/ 下的 JSON 打包时同样加密。
先看效果
右侧是一个带底栏的完整示例。点「常用功能」里的入口会打开任务设置页，点最近记录会打开详情。
| 你看到的 | 对应写法 |
|---|---|
| 页面长什么样 | 各页的 page.json（可让 AI 生成） |
| 文案、列表数据 | Page({ data }) 和 this.setData |
| 底栏三个入口 | 入口文件的 bottomMenus |
| 点按钮跳转 / 提示 | JSON 的 action，或 this.navigate / this.toast |
{
"title": {
"text": "工作台",
"fontSize": 18,
"color": "#FFFFFF",
"background": "#006A65"
},
"style": {
"padding": 10,
"background": "#F5F5F5"
},
"body": [
{
"type": "card",
"style": {
"padding": 0,
"gap": 0
},
"children": [
{
"type": "image",
"src": "img/banner.svg",
"fit": "cover",
"style": {
"height": 88,
"radius": 0,
"width": "match"
}
},
{
"type": "column",
"style": {
"padding": 12,
"gap": 8
},
"children": [
{
"type": "text",
"text": "{{hello}}",
"style": {
"fontWeight": "bold",
"fontSize": 16
}
},
{
"type": "notice",
"text": "今日脚本已就绪，可以开始运行"
},
{
"type": "button",
"text": "开始运行",
"size": "中",
"action": {
"type": "navigate",
"page": "task",
"params": {
"id": "dy"
}
}
}
]
}
]
},
{
"type": "space",
"height": 8
},
{
"type": "grid",
"bind": "metrics",
"columns": 2,
"item": {
"type": "card",
"style": {
"padding": 12,
"gap": 4
},
"children": [
{
"type": "notice",
"text": "{{item.label}}"
},
{
"type": "title",
"text": "{{item.value}}",
"style": {
"color": "#006A65"
}
}
]
}
},
{
"type": "text",
"text": "常用功能",
"style": {
"fontWeight": "bold"
}
},
{
"type": "grid",
"bind": "apps",
"columns": 3,
"item": {
"type": "card",
"action": {
"type": "navigate",
"page": "task",
"params": {
"id": "{{item.id}}"
}
},
"style": {
"padding": 8,
"gap": 8
},
"children": [
{
"type": "image",
"src": "{{item.icon}}",
"style": {
"width": "50%"
}
},
{
"type": "text",
"text": "{{item.name}}",
"style": {
"fontSize": 11,
"align": "center"
}
}
]
}
},
{
"type": "card",
"children": [
{
"type": "column",
"style": {
"gap": 6
},
"children": [
{
"type": "text",
"text": "今日安排",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "先跑主任务，再处理子脚本"
}
]
},
{
"type": "list",
"bind": "tags",
"direction": "row",
"item": {
"type": "tag",
"text": "{{item.label}}",
"action": {
"type": "toast",
"text": "{{item.label}}"
}
}
}
]
},
{
"type": "text",
"text": "最近记录",
"style": {
"fontWeight": "bold"
}
},
{
"type": "list",
"bind": "logs",
"item": {
"type": "card",
"action": {
"type": "navigate",
"page": "detail",
"params": {
"id": "{{item.id}}"
}
},
"children": [
{
"type": "row",
"style": {
"gap": 10
},
"children": [
{
"type": "image",
"src": "{{item.icon}}",
"style": {
"width": 36,
"height": 36,
"radius": 8
}
},
{
"type": "column",
"style": {
"weight": 1,
"gap": 4
},
"children": [
{
"type": "text",
"text": "{{item.title}}",
"style": {
"fontWeight": "bold"
}
},
{
"type": "notice",
"text": "{{item.time}}"
}
]
},
{
"type": "tag",
"text": "{{item.status}}",
"style": {
"background": "#E6F4F1",
"color": "#006A65"
}
}
]
}
]
}
},
{
"type": "loading",
"text": "加载中",
"showIf": "loading"
},
{
"type": "text",
"text": "{{footer}}",
"showIf": "noMore",
"style": {
"align": "center",
"color": "#9AA8A6",
"fontSize": 12
}
}
]
}UI
你好，Pro
今日脚本已就绪，可以开始运行
运行中
3
已完成
128
排队
8
失败
2
常用功能
点击控件
图色查找
循环任务
今日安排
先跑主任务，再处理子脚本
脚本无障碍图色悬浮球
最近记录
点击控件
10:21
图色查找
10:40
循环任务
09:12
定时执行
08:55
日志回传
08:30
接下来读
| 顺序 | 文档 | 解决什么 |
|---|---|---|
| 1 | 配置 | 入口文件、全局窗口、底栏 |
| 2 | 页面结构 | 一个页面的 page.json 怎么写 |
| 3 | 组件 | 按基础 / 表单 / 导航 / 展示 / 反馈 / 布局挑选积木 |
| 4 | 自定义组件 | 文件、JSON、页面 / 弹窗里 type 引用 |
| 5 | 组件生命周期 | created / attached / detached |
| 6 | 父页交互 | triggerEvent / selectComponent |
| 7 | 页面生命周期 | onLoad 何时调用 |
| 8 | 页面事件 | 滚动、点击、this.toast / setTitle |
| 9 | 下拉刷新 | enablePullDownRefresh + onPullDownRefresh |
| 10 | 底部菜单 | setTabBar 创建/恢复，setTabBarItem / setTabBarStyle |
| 11 | 悬浮球 | 项目悬浮窗：点球展开停止、跳过等图标 |
| 12 | require | 把公共 JS 拆出去 |
| 13 | 页面跳转 | this.navigate / back / switchTab |