小程序页面参数表

Mr.Song2020年10月9日...大约 14 分钟

总体结构

参数	必填	值类型	内容	备注
title	是	`string`	导航栏标题	一般不超过八个字，六字及以下为佳
desc	否	`string`	页面描述	会显示在页脚
author	否	`string`	页面的作者	会显示在页脚
time	否	`string`	页面更新时间	会显示在页脚
grey	否	`boolean`	使用灰色背景	默认为白色背景
cite	否	`string \| string[]`	页面引用链接
content	否	`ComponentConfig[]`	页面的内容	数组的每个对象会最终渲染为一个组件
from	否	`string`	左上角返回按钮文字	设置左上角文字，默认为上一级页面标题
outdated	否	`boolean`	是否已过时	可展示一条“页面过时”提示
shareable	否	`boolean`	是否可被分享	是否可以使用小程序的界面分享，默认为 `false`
contact	否	`boolean`	“联系开发者”按钮	是否在分享菜单中显示“联系开发者”，默认为 `true`

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

支持的组件

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

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

title: 标题
text: 文字 (可设置标题与样式)
p: 段落 (可设置标题与样式)
ol: 有序列表 (可设置标题与样式)
ul: 无序列表 (可设置标题与样式)
list: 带有跳转功能的列表 (列表项可包含文字、图标、描述)
img: 图片组件 (可附带说明，点击可预览，支持放大与下载)
doc: 文档组件 (常见文档的查看与下载)
phone: 电话组件 (支持拨打电话与快速保存联系人)
action: 操作 (快速复制指定文字或打开网址)
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'`	文字块样式	不填无额外样式
path	否	`string`	对应页面的路径	仅设置 `type` 时可用
align	否	`'left' \| 'right' \| 'center' \| 'justify'`	段落对齐方式	默认为 `'justify'`

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

ul

无序列表，可设置标题与样式

参数	必填	值类型	内容	备注
heading	否	`string \| boolean`	标题
text	是	`string \| string[]`	无序列表项文字内容
type	否	`'tip' \| 'warn' \| 'danger' \| 'info'`	文字块样式	不填无额外样式
path	否	`string`	对应页面的路径	仅设置 `type` 时可用
align	否	`'left' \| 'right' \| 'center' \| 'justify'`	段落对齐方式	默认为 `'justify'`

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

ol

有序列表，可设置标题与样式

参数	必填	值类型	内容	备注
heading	否	`string \| boolean`	标题
text	是	`string \| string[]`	有序列表项文字内容
type	否	`'tip' \| 'warn' \| 'danger' \| 'info'`	文字块样式	不填无额外样式
path	否	`string`	对应页面的路径	仅设置 `type` 时可用
align	否	`'left' \| 'right' \| 'center' \| 'justify'`	段落对齐方式	默认为 `'justify'`

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

list

带有跳转功能的列表，列表项可包含文字、图标、描述

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

列表每一项参数如下:

通用参数

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

指向配置文件页面
参数必填值类型内容
path 否 string 对应配置文件的相对或绝对路径(不带后缀名)，以 / 结尾默认为 index
指向程序内页面
参数必填值类型内容
url 否 string 列表指向的界面路径或短名称，可带参数

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

参数	必填	值类型	内容
url	否	`string`	列表指向的界面路径或短名称，可带参数

img

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

参数	必填	值类型	内容	备注
src	是	`string`	图片地址
res	否	`string`	图片预览地址	预览时需要高清图片的时候使用
lazy	否	`boolean`	图片懒加载	默认执行，设置 `false` 取消
desc	否	`string`	图片的描述文字	填入后会自动最前加入一个三角号，不填则没有描述文字
imgmode	否	`string`	图片显示模式	默认为 `'widthFix'`

注

图片懒加载是指只有图片滚动到页面显示区域才开始加载图片。

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`	联系人的工作电话
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
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`
indicatorDots	否	`boolean`	是否显示面板指示点	默认显示，设置 `false` 取消
dotColor	否	`string`	指示点颜色	默认为`#ffffff88`
autoplay	否	`boolean`	自动切换	默认为 `true`
interval	否	`number`	自动切换时间间隔	默认为 `5000`
duration	否	`number`	滑动动画时长	默认为 `500`
circular	否	`boolean`	是否衔接滑动	默认为 `true`
vertical	否	`boolean`	滑动方向是否纵向	默认为 `false`
imgmode	否	`string`	carousel 中图片的显示模式	默认为 `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

卡片组件，可跳转到指定页面、打开公众号图文或复制链接

参数	必填	值类型	内容
url	是	`string`	跳转的路径
src	否	`string`	卡片图片地址
type	否	`'page' \| 'web'`	卡片类型
title	是	`string`	卡片标题
desc	否	`string`	卡片描述
logo	否	`string`	卡片 logo 地址
name	否	`string`	卡片 logo 名称
options	否	`string`	小程序卡片选项

grid

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

参数	必填	值类型	内容
header	否	`string`	九宫格的标题文字
footer	否	`string`	九宫格的尾部文字
items	是	`GridItem[]`	该数组的每个元素均为一个格子内容

GridItem

九宫格项目配置

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

media

媒体组件，可展示音频和视频。

参数	必填	值类型	内容	备注
type	是	`'audio' \| 'video'`	媒体类型
src	是	`string`	媒体文件地址
loop	否	`boolean`	是否循环播放	默认为 `false`
controls	否	`boolean`	显示默认控件	默认为 `true`

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`	小程序提供的开放能力
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`

其他参数

imgmode

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

参数	必填	值类型	内容
title	是	`string`	主标题
subtitle	是	`string`	副标题
text	是	`string`	弹窗文字
desc	否	`string`	弹窗文字解释
more	否	`boolean`	是否显示更多按钮，默认为 `false`
confirm	否	`string`	确定按钮文字，默认为 `'确定'`
cancel	否	`boolean \| string`	取消按钮文字，默认为 `'取消'`，设置为 `false` 来隐藏取消按钮