小程序页面参数表
2022年11月16日
总体结构
| 参数 | 必填 | 值类型 | 内容 | 备注 | | --------- | :--: | :-----------------: | ------------------ | ----------------------------------------------- | ----------------------------------------- | | title | 是 | string | 导航栏标题 | 一般不超过八个字，六字及以下为佳 | | desc | 否 | string | 页面描述 | 会显示在页脚 | | author | 否 | string | 页面的作者 | 会显示在页脚 | | time | 否 | string | 页面更新时间 | 会显示在页脚 | | grey | 否 | boolean | 使用灰色背景 | 默认为白色背景 | | action | 否 | string | false | 左上角按钮触发函数 | 不填时执行返回，设置为 false 会隐藏按钮 | | content | 否 | ComponentConfig[] | 页面的内容 | 数组的每个对象会最终渲染为一个组件 | | footer | 否 | boolean | 是否显示页脚 | 默认为 true | | hidden | 否 | boolean | 隐藏导航栏 | 默认显示导航栏 | | from | 否 | string | 左上角返回按钮文字 | 设置左上角文字，默认为上一级页面标题 | | outdated | 否 | boolean | 是否已过时 | 可展示一条“页面过时”提示 | | shareable | 否 | boolean | 是否可被分享 | 是否可以使用小程序的界面分享，默认为 false | | contact | 否 | boolean | “联系开发者”按钮 | 是否在分享菜单中显示“联系开发者”，默认为 true |
支持的组件
content 的每个元素都为一个对象，该对象会最终渲染为一个组件。
每个配置对象有一个固定的键 tag 来决定渲染的组件。有效的 tag 值及对应的渲染结果如下:
- title: 标题
- text: 文字 (可设置标题与样式)
- p: 段落 (可设置标题与样式)
- ol: 有序列表 (可设置标题与样式)
- ul: 无序列表 (可设置标题与样式)
- list: 带有跳转功能的列表 (列表项可包含文字、图标、描述)
- img: 图片组件 (可附带说明，点击可预览，支持放大与下载)
- doc: 文档组件 (常见文档的查看与下载)
- phone: 电话组件 (支持拨打电话与快速保存联系人)
- copy: 复制组件 (快速复制指定文字)
- account: 账号组件 (用于主体 Logo、网址、媒体号、口号展示)
- location: 地理位置组件 (用于在地图上展示地点，提供地点详情与导航)
- carousel: 图片轮播图
- card: 卡片组件 (卡片形式，可跳转到指定页面、打开公众号图文或复制链接)
- grid: 九宫格 (分类展示与跳转)
- media: 媒体组件 (展示音频和视频)
- functional-list: 功能列表 (可展示滑块、开关、选择器、按钮，可调用自定义函数、微信原生功能)
title
标题
| 参数 | 必填 | 值类型 | 内容 |
|---|---|---|---|
| text | 是 | string | 大标题文字 |
| style | 否 | string | Record<string, string> | 标题 css 样式 |
text
文字块，可设置标题与样式
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| heading | 否 | string | boolean | 标题 | |
| text | 是 | string | string[] | 文字内容 | |
| type | 否 | 'tip' | 'warn' | 'danger' | 'info'| 'none' | 文字块样式 | 默认为 'none' |
| align | 否 | 'left' | 'right' | 'center' | 'justify' | 段落对齐方式 | 默认为 'justify' |
| style | 否 | string | Record<string, string> | 段落文字样式 | 填入 css 样式，会对段落的默认样式进行覆盖，该样式不会影响到标题 |
p
段落，可设置标题与样式
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| heading | 否 | string | boolean | 标题 | |
| text | 是 | string | string[] | 段落文字内容 | |
| type | 否 | 'tip' | 'warn' | 'danger' | 'info' | 文字块样式 | 不填无额外样式 |
| align | 否 | 'left' | 'right' | 'center' | 'justify' | 段落对齐方式 | 默认为 'justify' |
| style | 否 | string | Record<string, string> | 段落文字样式 | 填入 css 样式，会对段落的默认样式进行覆盖，该样式不会影响到标题 |
ul
无序列表，可设置标题与样式
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| heading | 否 | string | boolean | 标题 | |
| text | 是 | string | string[] | 无序列表项文字内容 | |
| type | 否 | 'tip' | 'warn' | 'danger' | 'info' | 文字块样式 | 不填无额外样式 |
| align | 否 | 'left' | 'right' | 'center' | 'justify' | 段落对齐方式 | 默认为 'justify' |
| style | 否 | string | Record<string, string> | 段落文字样式 | 填入 css 样式，会对段落的默认样式进行覆盖，该样式不会影响到标题 |
ol
有序列表，可设置标题与样式
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| heading | 否 | string | boolean | 标题 | |
| text | 是 | string | string[] | 有序列表项文字内容 | |
| type | 否 | 'tip' | 'warn' | 'danger' | 'info' | 文字块样式 | 不填无额外样式 |
| align | 否 | 'left' | 'right' | 'center' | 'justify' | 段落对齐方式 | 默认为 'justify' |
| style | 否 | string | Record<string, string> | 段落文字样式 | 填入 css 样式，会对段落的默认样式进行覆盖，该样式不会影响到标题 |
list
带有跳转功能的列表，列表项可包含文字、图标、描述
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| header | 否 | string | boolean | 头部标题 | 不填会在标题所在处留空占位，设置为 false 来取消留空占位 |
| footer | 否 | string | 尾部标题 | |
| content | 是 | SimpleList[] | 列表内容 |
列表每一项参数如下:
通用参数
| 参数 | 必填 | 值类型 | 内容 |
|---|---|---|---|
| icon | 否 | string | 列表图标的简称或在线网址 |
| text | 是 | string | 列表项文字 |
| desc | 否 | string | 列表项描述，显示在尾部 |
| hidden | 否 | boolean | 设置为 true 时隐藏该列表项 |
指向配置文件页面
参数 必填 值类型 内容 path 否 string对应配置文件的相对或绝对路径(不带后缀名)，以 /结尾默认为index指向程序内页面
参数 必填 值类型 内容 url 否 string列表指向的界面路径或短名称，可带参数
img
图片组件，可附带说明。点击可预览、支持放大与下载。
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| src | 是 | string | 图片地址 | |
| res | 否 | string | 图片预览地址 | 需要高清图片的时候使用 |
| lazy | 否 | boolean | 图片懒加载 | 默认执行，设置 false 取消 |
| desc | 否 | string | 图片的描述文字 | 填入后会自动最前加入一个三角号，不填则没有描述文字 |
| imgmode | 否 | string | 图片显示模式 | 默认为 'widthFix' |
Tips: 图片懒加载是指只有图片滚动到页面显示区域才开始加载图片。
doc
文档组件，支持查看与下载
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| name | 是 | string | 文档名称 | |
| url | 是 | string | 文档在线路径 | |
| header | 否 | string | 组件标题 | |
| downloadable | 否 | boolean | 该文档是否可下载 | 默认为 true |
支持情况
仅支持 doc、docx、ppt、pptx、xls、xlsx、pdf、jpg、jpeg、png、gif。
phone
电话组件，支持拨打电话与快速保存联系人。
| 参数 | 必填 | 值类型 | 内容 |
|---|---|---|---|
| num | 是 | string | number | 联系人电话号码 |
| header | 否 | string | 组件标题 |
| fName | 是 | string | 联系人的名 |
| lName | 否 | string | 联系人的姓 |
| org | 否 | string | 联系人所在公司 |
| remark | 否 | string | 联系人的备注 |
| workNum | 否 | string | number | 联系人的工作电话 |
| nickName | 否 | string | 联系人的昵称 |
| 否 | string | 联系人的微信号 | |
| province | 否 | string | 联系人的地址省份 |
| city | 否 | string | 联系人的地址城市 |
| street | 否 | string | 联系人的地址街道 |
| postCode | 否 | string | number | 联系人的地址邮政编码 |
| title | 否 | string | 联系人的职位 |
| hostNum | 否 | string | number | 联系人的公司电话 |
| site | 否 | string | 联系人的网站 |
| 否 | string | 联系人的电子邮件 | |
| homeNum | 否 | string | number | 联系人的住宅电话 |
| avatar | 否 | string | 联系人头像图片路径(仅限本地路径) |
copy
复制组件，允许快速复制指定文字
| 参数 | 必填 | 值类型 | 内容 |
|---|---|---|---|
| text | 是 | string | 需要复制的文字 |
| header | 否 | string | 可选的组件标题 |
account
介绍组件，用于主体 Logo、网址、媒体号、口号展示。
| 参数 | 必填 | 值类型 | 内容 |
|---|---|---|---|
| name | 是 | string | 主体名称 |
| logo | 是 | string | 头像图标在线地址 |
| detail | 否 | string | 主体的全称 |
| desc | 否 | string | 主体描述 |
| 否 | number | 主体的 QQ 号 | |
| qqid | 否 | string | 主体的 QQ Openid |
| qqcode | 否 | string | 主体的 QQ 二维码地址 |
| wxid | 否 | string | 主体的微信公众号 ID |
| wxcode | 否 | string | 主体的微信二维码地址 |
| account | 否 | string | 主体的微信公众号配置文件 ID |
| location | 否 | LocationConfig | 主体的地址 |
| site | 否 | string | 主体的网站地址 |
LocationConfig
地点配置
| 参数 | 必填 | 值类型 | 内容 |
|---|---|---|---|
| longtidude | 是 | number | 经度 |
| latitude | 是 | number | 维度 |
location
位置组件，用于在地图上显示位置并允许详情与导航。
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| title | 是 | string | 位置展示的内容 | |
| points | 是 | Point[] | 数组的每个元素对应一个地点 | |
| navigate | 否 | false | 是否允许导航 | 仅在微信小程序上可用 |
Point
点位配置
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| longtidude | 是 | number | 经度 | |
| latitude | 是 | number | 维度 | |
| name | 否 | string | 点位名称 | 默认同 title |
| detail | 否 | string | 点位名称 | 默认为 详情 |
| path | 否 | string | 地点详情路径 | 基于 function/map |
carousel
轮播图
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| images | 是 | string[] | 展示的图片地址 | 将所有图片按顺序设置为数组元素 |
| fill | 否 | boolean | 组件是否填满屏幕宽度 | 默认为 false |
| class | 否 | string | carousel 项目的类名 | 默认为 width:100%;height:400rpx; |
| style | 否 | string | carousel 项目的样式 | 填入 css 样式 |
| indicatorDots | 否 | boolean | 面板指示点 | 默认显示，设置 false 取消 |
| dotColor | 否 | string | 指示点颜色 | 默认为#ffffff88 |
| autoplay | 否 | boolean | 设置为 false 取消自动切换 | 默认开启 |
| interval | 否 | number | 自动切换时间间隔 | 默认为 5000 |
| duration | 否 | number | 滑动动画时长 | 默认为 500 |
| circular | 否 | boolean | 设置为 false 不采用衔接滑动 | 默认开启 |
| vertical | 否 | boolean | 设置 true 滑动方向为纵向 | 默认为横向 |
| preMargin | 否 | string | 前一项露出边距 | 默认为 0px，接受 px 和 rpx 值 |
| nextMargin | 否 | string | 后一项露出边距 | 默认为 0px，接受 px 和 rpx 值 |
| change | 否 | string | carousel 改变时触发的函数名称 | 默认不触发函数 |
| animation | 否 | string | carousel 动画结束时触发的函数名称 | 默认不触发函数 |
| imgClass | 否 | string | carousel 中图片的类名 | 默认为 width:100%!important;height:100%!important; |
| imgmode | 否 | string | carousel 中图片的显示模式 | 默认为 aspectFill |
相关信息
carousel 组件默认高度为 400rpx，可以通过 style 属性调节
card
卡片组件，可跳转到指定页面、打开公众号图文或复制链接
| 参数 | 必填 | 值类型 | 内容 |
|---|---|---|---|
| type | 是 | 'page' | 'web' | 跳转到小程序页面还是指定网址 |
| url | 是 | string | 跳转的路径 |
| src | 是 | string | 卡片图片地址 |
| title | 是 | string | 卡片标题 |
| desc | 否 | string | 卡片描述 |
| logo | 否 | string | 卡片 logo 地址 |
| name | 否 | string | 卡片 logo 名称 |
grid
九宫格组件，用于分类展示与跳转
| 参数 | 必填 | 值类型 | 内容 |
|---|---|---|---|
| header | 否 | string | 九宫格的标题文字 |
| footer | 否 | string | 九宫格的尾部文字 |
| content | 是 | GridItem[] | 该数组的每个元素均为一个格子内容 |
GridItem
九宫格项目配置
| 参数 | 必填 | 值类型 | 内容 |
|---|---|---|---|
| icon | 是 | string | 九宫格的图标的简称或在线网址 |
| text | 是 | string | 九宫格文字 |
| color | 是 | 'blue' | 'orange' | 'red' | 'purple' | 'cyan' | 'olive' | 'mauve' | Android 主题下的颜色 |
| name | 是 | string | 对应的英文文字 |
| path | 否 | string | 对应配置文件的相对或绝对路径(不带后缀名)，以 / 结尾默认为 index |
| url | 否 | string | 列表指向的界面路径或短名称，可带参数 |
media
媒体组件，可展示音频和视频。
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| type | 是 | 'audio' | 'video' | 媒体类型 | |
| src | 是 | string | 媒体文件地址 | |
| loop | 否 | boolean | 是否循环播放 | 默认为 false |
| controls | 否 | boolean | 设置 false 来取消显示默认控件 | 默认显示 |
audio
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| name | 否 | String | 音频名字 | controls 为 false 时无效 |
| author | 否 | String | 音频作者 | controls 为 false 时无效 |
video
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| poster | 否 | string | 视频封面的图片网络资源地址 | controls 为 false 时无效 |
| autoplay | 否 | boolean | 是否自动播放 | 默认为 false |
| startTime | 否 | number | 视频初始播放位置 | |
| danmu-list | 否 | Object Array | 弹幕列表 | |
| danmu-btn | 否 | boolean | 是否显示弹幕按钮 | 只在初始化有效 |
functional-list
生成一个功能列表，可展示滑块、开关、选择器、按钮，可调用自定义函数、微信原生功能。
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| header | 否 | string | boolean | 头部标题 | 不填会在标题所在处留空占位，设置为 false 来取消留空占位 |
| footer | 否 | string | 结尾标题 | |
| content | 是 | FunctionalList[] | 列表内容 |
FunctionalList
功能列表每一项参数
AdvancedList 通用参数
下面参数是通用于每一个选项的参数。
| 参数 | 必填 | 值类型 | 内容 |
|---|---|---|---|
| icon | 否 | string | 列表图标的本地路径或在线网址 |
| text | 是 | string | 列表单元的显示文字 |
| hidden | 否 | boolean | 设置为 true 时隐藏该列表项 |
| desc | 否 | string | 列表内容的描述 |
跳转列表
- 指向资源页面
| 参数 | 必填 | 值类型 | 内容 |
|---|---|---|---|
| path | 否 | string | 对应页面的路径 |
- 指向小程序页面
| 参数 | 必填 | 值类型 | 内容 |
|---|---|---|---|
| url | 否 | string | 列表指向的页面路径或短名称 |
原生能力
设置 type 为 'navigator' 使用微信 navigator 的原生能力。
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| openType | 否 | string | 小程序提供的开放能力 | 仅 navigate 为 true 时有效 |
| target | 否 | string | 跳转目标 | 仅 navigate 为 true 时有效 |
开关
设置 type 为 'switch' 渲染一个开关。
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| key | 是 | string | 所控变量在 storage 中的 key 值 | |
| handler | 否 | string | 开关对应的函数名称 | 不填仅改变 storage 中 swiKey 的值 |
| color | 否 | string | 开关颜色 | 同 css 的 color 填入 rgb 代码 |
选择器
设置 type 为 'picker' 渲染一个选择器。
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| select | 是 | Value[] | 选择器中包含的值 | |
| key | 是 | string | 选择器所改变的变量在本地存储中的名称 | |
| handler | 否 | string | picker 选择器对应的函数名称 | 不填仅改变界面显示值与 storage 中 key 的值 |
| single | 否 | boolean | 设置 true 时为单列选择器 | 默认为多列选择器 |
| inlay | 否 | boolean | 设置 true 时为嵌入式 picker | 默认为弹出式 picker |
按钮
设置 type 为 'button' 渲染一个自定义按钮。
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| handler | 是 | string | 按钮函数名 | 填入按钮点击后触发的函数名 |
| disabled | 否 | boolean | 是否禁用按钮 | 默认为 false(不禁用)，一般仅供开发界面时使用 |
滑块
设置 type 为 'slider' 渲染一个自定义滑块。
| 参数 | 必填 | 值类型 | 内容 | 备注 |
|---|---|---|---|---|
| key | 是 | string | 滑块 Key 值 | 滑块所控变量在 storage 中的 key 值 |
| handler | 否 | string | 滑块对应的的函数名称 | 不填仅改变界面显示值与 storage 中 key 的值 |
| min | 否 | number | 滑块的最小值 | 默认为 0 |
| max | 否 | number | 滑块的最大值 | 默认为 100 |
| step | 否 | number | 滑块的步长 | 默认为 1 |
其他参数
imgmode
- widthFix: 宽度不变，高度自动变化，保持原图宽高比不变;
- scaleToFill: 保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素；
- aspectFit: 保持纵横比缩放图片，使图片的长边能完全显示出来；
- aspectFill: 保持纵横比缩放图片，只保证图片的短边能完全显示出来；
- top: 不缩放图片，只显示图片的顶部区域；
- bottom: 不缩放图片，只显示图片的底部区域；
- center: 不缩放图片，只显示图片的中间区域；
- left: 不缩放图片，只显示图片的左边区域；
- right: 不缩放图片，只显示图片的右边区域；
- top left: 不缩放图片，只显示图片的左上边区域；
- top right: 不缩放图片，只显示图片的右上边区域；
- bottom left: 不缩放图片，只显示图片的左下边区域；
- bottom right: 不缩放图片，只显示图片的右下边区域；
popup
| 参数 | 必填 | 值类型 | 内容 |
|---|---|---|---|
| title | 是 | string | 主标题 |
| subtitle | 是 | string | 副标题 |
| text | 是 | string | 弹窗文字 |
| desc | 否 | string | 弹窗文字解释 |
| more | 否 | boolean | 是否显示更多按钮，默认为 false |
| confirm | 否 | string | 确定按钮文字，默认为 '确定' |
| cancel | 否 | boolean | string | 取消按钮文字，默认为 '取消'，设置为 false 来隐藏取消按钮 |
Loading...