小程序页面简易参数表

大约 15 分钟约 4374 字

总体结构

参数	必填	值类型	内容	备注
title	是	`string`	导航栏标题	一般不超过八个字，六字及以下为佳
icon	是	`string`	页面图标	会显示在网站、搜索等位置
desc	否	`string`	页面描述	会显示在页脚
author	否	`string[] \| string`	页面的作者	会显示在页脚
tags	是	`string[]`	页面的标签，	需要限制为一系列主要标签，主要用于 AI，当 `aiIgnore: true` 时目前可忽略
time	否	`Date`	页面更新时间	会显示在页脚
grey	否	`boolean`	使用灰色背景	默认为白色背景
content	否	`ComponentConfig[]`	页面的内容	数组的每个对象会最终渲染为一个组件
cite	否	`string \| string[]`	页面引用链接
outdated	否	`boolean`	是否已过时	可展示一条“页面过时”提示
shareable	否	`boolean`	是否可被分享	是否可以使用小程序的界面分享，默认为 `false`
aiIgnore	否	`boolean`	是否被 AI 忽略	是否是需要被 AI 忽略的历史内容，默认为 `false`

高级参数

高级参数	必填	值类型	内容	备注
action	否	`string \| false`	左上角按钮触发函数	不填时执行返回，设置为 `false` 会隐藏按钮
hidden	否	`boolean`	隐藏导航栏	默认显示导航栏
footer	否	`boolean`	是否显示页脚	默认为 `true`

支持的组件

content 的每个元素都为一个对象，该对象会最终渲染为一个组件。

每个配置对象有一个固定的键 tag 来决定渲染的组件。有效的 tag 值及对应的渲染结果如下:

title: 标题
text: 文字 (可设置标题与样式)
p: 段落 (可设置标题与样式)
ol: 有序列表 (可设置标题与样式)
ul: 无序列表 (可设置标题与样式)
list: 带有跳转功能的列表 (列表项可包含文字、图标、描述)
img: 图片组件 (可附带说明，点击可预览，支持放大与下载)
doc: 文档组件 (常见文档的查看与下载)
phone: 电话组件 (支持拨打电话与快速保存联系人)
table: 表格组件
action: 动作组件 (快速跳转链接或复制指定文字)
account: 账号组件 (用于主体 Logo、网址、媒体号、口号展示)
location: 地理位置组件 (用于在地图上展示地点，提供地点详情与导航)
carousel: 图片轮播图
card: 卡片组件 (卡片形式，可跳转到指定页面、打开公众号图文或复制链接)
grid: 九宫格 (分类展示与跳转)
audio: 音频组件
video: 视频组件
functional-list: 功能列表 (可展示滑块、开关、选择器、按钮，可调用自定义函数、微信原生功能)

title

标题

参数	必填	值类型	内容
text	是	`string`	大标题文字

高级参数

高级参数	必填	值类型	内容	备注
style	否	`string \| Record<string, string>`	标题 css 样式

text

文字块，支持所有的跳转参数。

参数	必填	值类型	内容	备注
header	否	`string \| false`	标题	填 `false` 会取消具有样式时的默认标题
text	是	`string \| string[]`	文字内容
type	否	`'tip' \| 'warn' \| 'danger' \| 'info' \| 'none'`	文字块样式	默认为 `'none'`
align	否	`'left' \| 'right' \| 'center' \| 'justify'`	段落对齐方式	默认为 `'justify'`

高级参数

高级参数	必填	值类型	内容	备注
style	否	`string \| Record<string, string>`	文字样式	填入 css 样式，会对段落的默认样式进行覆盖，该样式不会影响到标题

p

段落，支持所有的跳转参数。

参数	必填	值类型	内容	备注
header	否	`string \| false`	标题	填 `false` 会取消具有样式时的默认标题
text	是	`string \| string[]`	段落文字内容
type	否	`'tip' \| 'warn' \| 'danger' \| 'info' \| 'note'`	文字块样式	不填无额外样式
align	否	`'left' \| 'right' \| 'center' \| 'justify'`	段落对齐方式	默认为 `'justify'`

当设置 type 时，可以跳转，详见跳转参数。

高级参数

高级参数	必填	值类型	内容	备注
style	否	`string \| Record<string, string>`	段落文字样式	填入 css 样式，会对段落的默认样式进行覆盖，该样式不会影响到标题

ul

无序列表，支持所有的跳转参数。

参数	必填	值类型	内容	备注
header	否	`string \| false`	标题	填 `false` 会取消具有样式时的默认标题
text	是	`string \| string[]`	无序列表项文字内容
type	否	`'tip' \| 'warn' \| 'danger' \| 'info' \| 'note'`	文字块样式	不填无额外样式

当设置 type 时，可以跳转，详见跳转参数。

高级参数

高级参数	必填	值类型	内容	备注
style	否	`string \| Record<string, string>`	列表文字样式	填入 css 样式，会对段落的默认样式进行覆盖，该样式不会影响到标题

ol

有序列表，支持所有的跳转参数。

参数	必填	值类型	内容	备注
header	否	`string \| false`	标题	填 `false` 会取消具有样式时的默认标题
text	是	`string \| string[]`	有序列表项文字内容
type	否	`'tip' \| 'warn' \| 'danger' \| 'info' \| 'note'`	文字块样式	不填无额外样式

当设置 type 时，可以跳转，详见跳转参数。

高级参数

高级参数	必填	值类型	内容	备注
style	否	`string \| Record<string, string>`	列表文字样式	填入 css 样式，会对段落的默认样式进行覆盖，该样式不会影响到标题

list

带有图标、文字、描述的列表。

参数	必填	值类型	内容	备注
header	否	`string \| false`	头部标题	不填会在标题所在处留空占位，设置为 `false` 来取消留空占位
footer	否	`string`	尾部标题
items	是	`SimpleList[]`	列表内容

SimpleList

列表项，支持所有的跳转参数:

参数	必填	值类型	内容
icon	否	`string`	列表图标的简称或在线网址
text	是	`string`	列表项文字
desc	否	`string`	列表项描述，显示在尾部

img

图片组件，可附带说明。点击可预览、支持放大与下载。

参数	必填	值类型	内容	备注
src	是	`string`	图片地址
desc	否	`string`	图片的描述文字	填入后会自动最前加入一个三角号，不填则没有描述文字

高级参数

高级参数	必填	值类型	内容	备注
lazy	否	`boolean`	图片懒加载	默认执行，设置 `false` 取消
imgmode	否	`string`	图片显示模式，详见图片模式	默认为 `'widthFix'`

table

表格组件

参数	必填	值类型	内容
header	是	`string[]`	表头
body	是	`string[][]`	表格内容
caption	否	`string`	表格标题

doc

文档组件，支持查看与下载

参数	必填	值类型	内容
name	是	`string`	文档名称
url	是	`string`	文档在线路径
header	否	`string`	组件标题

支持情况

仅支持 doc、docx、ppt、pptx、xls、xlsx、pdf、jpg、jpeg、png、gif。

高级参数

高级参数	必填	值类型	内容	备注
downloadable	否	`boolean`	该文档是否可下载	默认为 `true`

phone

电话组件，支持拨打电话与快速保存联系人。

参数	必填	值类型	内容
num	是	`string \| number`	联系人电话号码
header	否	`string`	组件标题
fName	是	`string`	联系人的名
lName	否	`string`	联系人的姓
org	否	`string`	联系人所在公司
remark	否	`string`	联系人的备注
workNum	否	`string \| number`	联系人的工作电话
hostNum	否	`string \| number`	联系人的公司电话
homeNum	否	`string \| number`	联系人的住宅电话
nick	否	`string`	联系人的昵称
avatar	否	`string`	联系人头像图片路径(仅限本地路径)
title	否	`string`	联系人的职位
site	否	`string`	联系人的网站
mail	否	`string`	联系人的电子邮件
wechat	否	`string`	联系人的微信号
province	否	`string`	联系人的地址省份
city	否	`string`	联系人的地址城市
street	否	`string`	联系人的地址街道
postCode	否	`string \| number`	联系人的地址邮政编码

action

动作组件，允许快速复制文字或跳转网页

参数	必填	值类型	内容
content	是	`string`	动作内容
header	否	`string`	可选的组件标题

account

介绍组件，用于主体 Logo、网址、媒体号、口号展示。

参数	必填	值类型	内容	备注
name	是	`string`	主体名称
logo	是	`string`	头像图标在线地址
detail	否	`string`	主体的全称
desc	否	`string`	主体描述
qq	否	`number`	主体的 QQ 号
qqid	否	`string`	主体的 QQ Openid
qqcode	否	`string`	主体的 QQ 二维码地址
wxid	否	`string`	主体的微信公众号 ID
account	否	`string`	主体的微信公众号配置文件 ID
loc	是	`${number},${number}`	位置信息	`latitude,longitude` 格式
mail	否	`string`	主体的邮箱地址
site	否	`string`	主体的网站地址

location

位置组件，用于在地图上显示位置并允许详情与导航。

参数	必填	值类型	内容	备注
header	是	`string`	位置标题
points	是	`Point[]`	展示地点	数组的每个元素对应一个地点
navigate	否	`false`	是否允许导航	仅在企业主体微信小程序上可用

Point

点位配置

参数	必填	值类型	内容	备注
loc	是	`${number},${number}`	位置信息	`latitude,longitude` 格式
name	否	`string`	点位名称	默认同 `title`
detail	否	`string`	点位详情文字	默认为 `详情`
path	否	`string`	地点详情路径	基于地图页面文件夹

carousel

轮播图

参数	必填	值类型	内容	备注
images	是	`string[]`	展示的图片地址	将所有图片按顺序设置为数组元素
fill	否	`boolean`	组件是否填满屏幕宽度	默认为 `false`
indicatorDots	否	`boolean`	是否显示面板指示点	默认显示，设置 `false` 取消
dotColor	否	`string`	指示点颜色	默认为`#ffffff88`
autoplay	否	`boolean`	自动切换	默认为 `true`
interval	否	`number`	自动切换时间间隔	默认为 `5000`
duration	否	`number`	滑动动画时长	默认为 `500`
circular	否	`boolean`	是否衔接滑动	默认为 `true`
vertical	否	`boolean`	滑动方向是否纵向	默认为 `false`
imgmode	否	`string`	详见图片模式	默认为 `aspectFill`

高级参数

高级参数	必填	值类型	内容	备注
class	否	`string`	carousel 项目的类名	默认为 `width:100%;height:400rpx;`
style	否	`string`	carousel 项目的样式	填入 css 样式
imgClass	否	`string`	carousel 中图片的类名	默认为 `width:100%!important;height:100%!important;`
preMargin	否	`string`	前一项露出边距	默认为 `0px`，接受 px 和 rpx 值
nextMargin	否	`string`	后一项露出边距	默认为 `0px`，接受 px 和 rpx 值
change	否	`string`	carousel 改变时触发的函数名称	默认不触发函数
animation	否	`string`	carousel 动画结束时触发的函数名称	默认不触发函数

card

卡片组件，支持所有的跳转参数

参数	必填	值类型	内容
src	否	`string`	卡片图片地址
type	否	`'page' \| 'web'`	卡片类型
title	是	`string`	卡片标题
desc	否	`string`	卡片描述
logo	否	`string`	卡片 logo 地址
name	否	`string`	卡片 logo 名称

grid

九宫格组件，用于分类展示与跳转

参数	必填	值类型	内容
header	否	`string \| false`	九宫格的标题文字，设置 `false` 可取消留空占位
footer	否	`string`	九宫格的尾部文字
items	是	`GridItem[]`	该数组的每个元素均为一个格子内容

GridItem

九宫格项，支持所有的跳转参数

参数	必填	值类型	内容
icon	是	`string`	九宫格的图标的简称或在线网址
text	是	`string`	九宫格文字
color	是	`'blue' \| 'orange' \| 'red' \| 'purple' \| 'cyan' \| 'olive' \| 'mauve' \| 'grey'`	Android 主题下的颜色
name	是	`string`	对应的英文文字
path	否	`string`	对应配置文件的相对或绝对路径(不带后缀名)，以 `/` 结尾默认为 `index`

audio

参数	必填	值类型	内容
src	是	`string`	媒体文件地址
name	否	`string`	音频名字
author	否	`string`	音频作者
poster	否	`string`	音频封面

高级参数

高级参数	必填	值类型	内容
autoplay	否	`string`	是否自动播放，默认为 `false`
loop	否	`boolean`	是否循环播放

video

参数	必填	值类型	内容	备注
src	是	`string`	媒体文件地址
poster	否	`string`	视频封面的图片网络资源地址	controls 为 `false` 时无效

高级参数

高级参数	必填	值类型	内容	备注
controls	否	`boolean`	是否显示默认控件
loop	否	`boolean`	是否循环播放	controls 为 `false` 时无效
danmu-list	否	`Object Array`	弹幕列表
danmu-btn	否	`boolean`	是否显示弹幕按钮	只在初始化有效

functional-list

带有更多功能的列表

参数	必填	值类型	内容	备注
header	否	`string \| false`	头部标题	不填会在标题所在处留空占位，设置为 `false` 来取消留空占位
footer	否	`string`	尾部标题
items	是	`AdvancedList[]`	列表内容

AdvancedList 通用参数

下面参数是通用于每一个选项的参数，同时每个选项支持所有的跳转参数

参数	必填	值类型	内容
icon	否	`string`	列表图标的本地路径或在线网址
text	是	`string`	列表单元的显示文字
hidden	否	`boolean`	设置为 `true` 时隐藏该列表项
desc	否	`string`	列表内容的描述

原生能力

设置 type 为 'navigator' 使用微信 navigator 的原生能力。

参数	必填	值类型	内容
openType	否	`string`	小程序提供的开放能力
target	否	`string`	跳转目标

开关

设置 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`	是否为嵌入式 picker	默认为 `false`，弹出式 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`

其他参数

跳转参数

指向配置文件页面
参数必填值类型内容
path 是 string 对应配置文件的相对或绝对路径(不带后缀名)，以 / 结尾默认为 index
指向程序内页面 (高级)
参数必填值类型内容
url 是 string 指向的小程序页面短名称或完整路径，可带参数
公众号档案
参数必填值类型内容
action 是 "official" 动作行为，限填 "official"
username 是 string 公众号 ID
公众号文章
参数必填值类型内容
action 是 "article" 动作行为，限填 "article"
url 是 string 公众号文章链接
视频号主页
参数必填值类型内容
action 是 "channel" 动作行为，限填 "channel"
id 是 string 视频号 ID
视频号视频
参数必填值类型内容
action 是 "video" 动作行为，限填 "video"
id 是 string 视频号 ID
feedId 是 string 视频号 Feed ID
nonceId 是 string 视频号 Nonce ID

参数	必填	值类型	内容
path	是	`string`	对应配置文件的相对或绝对路径(不带后缀名)，以 `/` 结尾默认为 `index`

参数	必填	值类型	内容
url	是	`string`	指向的小程序页面短名称或完整路径，可带参数

参数	必填	值类型	内容
action	是	`"official"`	动作行为，限填 `"official"`
username	是	`string`	公众号 ID

参数	必填	值类型	内容
action	是	`"article"`	动作行为，限填 `"article"`
url	是	`string`	公众号文章链接

参数	必填	值类型	内容
action	是	`"channel"`	动作行为，限填 `"channel"`
id	是	`string`	视频号 ID

参数	必填	值类型	内容
action	是	`"video"`	动作行为，限填 `"video"`
id	是	`string`	视频号 ID
feedId	是	`string`	视频号 Feed ID
nonceId	是	`string`	视频号 Nonce ID

指向其他小程序（路径）

参数	必填	值类型	内容
action	是	`"miniProgram"`	动作行为，限填 `"miniProgram"`
appId	是	`string`	需要跳转的小程序 ID
path	否	`string`	跳转到的小程序页面路径 (可带参数)，不填则默认跳转到首页

指向其他小程序（页面链接
参数必填值类型内容
action 是 "miniProgram" 动作行为，限填 "miniProgram"
shortLink 是 string 页面短链接

图片模式

widthFix: 宽度不变，高度自动变化，保持原图宽高比不变;
scaleToFill: 保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素；
aspectFit: 保持纵横比缩放图片，使图片的长边能完全显示出来；
aspectFill: 保持纵横比缩放图片，只保证图片的短边能完全显示出来；
top: 不缩放图片，只显示图片的顶部区域；
bottom: 不缩放图片，只显示图片的底部区域；
center: 不缩放图片，只显示图片的中间区域；
left: 不缩放图片，只显示图片的左边区域；
right: 不缩放图片，只显示图片的右边区域；
top left: 不缩放图片，只显示图片的左上边区域；
top right: 不缩放图片，只显示图片的右上边区域；
bottom left: 不缩放图片，只显示图片的左下边区域；
bottom right: 不缩放图片，只显示图片的右下边区域；