小程序页面参数表

Mr.Hope
  • 小程序
大约 14 分钟

版本: V5

总体结构

参数必填值类型内容备注
titlestring导航栏标题一般不超过八个字,六字及以下为佳
descstring页面描述会显示在页脚
authorstring页面的作者会显示在页脚
timestring页面更新时间会显示在页脚
greyboolean使用灰色背景默认为白色背景
citestring | string[]页面引用链接
contentComponentConfig[]页面的内容数组的每个对象会最终渲染为一个组件
fromstring左上角返回按钮文字设置左上角文字,默认为上一级页面标题
outdatedboolean是否已过时可展示一条“页面过时”提示
shareableboolean是否可被分享是否可以使用小程序的界面分享,默认为 false
contactboolean“联系开发者”按钮是否在分享菜单中显示“联系开发者”,默认为 true
高级参数必填值类型内容备注
actionstring | false左上角按钮触发函数不填时执行返回,设置为 false 会隐藏按钮
hiddenboolean隐藏导航栏默认显示导航栏
footerboolean是否显示页脚默认为 true

支持的组件

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

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

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

title

标题

参数必填值类型内容
textstring大标题文字
高级参数必填值类型内容备注
stylestring | Record<string, string>标题 css 样式

text

文字块,可设置标题与样式

参数必填值类型内容备注
headingstring | boolean标题
textstring | string[]文字内容
type'tip' | 'warn' | 'danger' | 'info' | 'none'文字块样式默认为 'none'
align'left' | 'right' | 'center' | 'justify'段落对齐方式默认为 'justify'
高级参数必填值类型内容备注
stylestring | Record<string, string>段落文字样式填入 css 样式,会对段落的默认样式进行覆盖,该样式不会影响到标题

p

段落,可设置标题与样式

参数必填值类型内容备注
headingstring | boolean标题
textstring | string[]段落文字内容
type'tip' | 'warn' | 'danger' | 'info'文字块样式不填无额外样式
pathstring对应页面的路径仅设置 type 时可用
align'left' | 'right' | 'center' | 'justify'段落对齐方式默认为 'justify'
高级参数必填值类型内容备注
stylestring | Record<string, string>段落文字样式填入 css 样式,会对段落的默认样式进行覆盖,该样式不会影响到标题

ul

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

参数必填值类型内容备注
headingstring | boolean标题
textstring | string[]无序列表项文字内容
type'tip' | 'warn' | 'danger' | 'info'文字块样式不填无额外样式
pathstring对应页面的路径仅设置 type 时可用
align'left' | 'right' | 'center' | 'justify'段落对齐方式默认为 'justify'
高级参数必填值类型内容备注
stylestring | Record<string, string>段落文字样式填入 css 样式,会对段落的默认样式进行覆盖,该样式不会影响到标题

ol

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

参数必填值类型内容备注
headingstring | boolean标题
textstring | string[]有序列表项文字内容
type'tip' | 'warn' | 'danger' | 'info'文字块样式不填无额外样式
pathstring对应页面的路径仅设置 type 时可用
align'left' | 'right' | 'center' | 'justify'段落对齐方式默认为 'justify'
高级参数必填值类型内容备注
stylestring | Record<string, string>段落文字样式填入 css 样式,会对段落的默认样式进行覆盖,该样式不会影响到标题

list

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

参数必填值类型内容备注
headerstring | boolean头部标题不填会在标题所在处留空占位,设置为 false 来取消留空占位
footerstring尾部标题
itemsSimpleList[]列表内容

列表每一项参数如下:

通用参数

参数必填值类型内容
iconstring列表图标的简称或在线网址
textstring列表项文字
descstring列表项描述,显示在尾部
  • 指向配置文件页面

    参数必填值类型内容
    pathstring对应配置文件的相对或绝对路径(不带后缀名),以 / 结尾默认为 index
  • 指向程序内页面

    参数必填值类型内容
    urlstring列表指向的界面路径或短名称,可带参数

img

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

参数必填值类型内容备注
srcstring图片地址
resstring图片预览地址预览时需要高清图片的时候使用
lazyboolean图片懒加载默认执行,设置 false 取消
descstring图片的描述文字填入后会自动最前加入一个三角号,不填则没有描述文字
imgmodestring图片显示模式默认为 'widthFix'

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

doc

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

参数必填值类型内容备注
namestring文档名称
urlstring文档在线路径
headerstring组件标题
downloadableboolean该文档是否可下载默认为 true

支持情况

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

phone

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

参数必填值类型内容
numstring | number联系人电话号码
headerstring组件标题
fNamestring联系人的名
lNamestring联系人的姓
orgstring联系人所在公司
remarkstring联系人的备注
workNumstring | number联系人的工作电话
hostNumstring | number联系人的公司电话
homeNumstring | number联系人的住宅电话
nickstring联系人的昵称
avatarstring联系人头像图片路径(仅限本地路径)
titlestring联系人的职位
sitestring联系人的网站
mailstring联系人的电子邮件
wechatstring联系人的微信号
provincestring联系人的地址省份
citystring联系人的地址城市
streetstring联系人的地址街道
postCodestring | number联系人的地址邮政编码

action

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

参数必填值类型内容
contentstring动作内容
headerstring可选的组件标题

account

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

参数必填值类型内容
namestring主体名称
logostring头像图标在线地址
detailstring主体的全称
descstring主体描述
qqnumber主体的 QQ 号
qqidstring主体的 QQ Openid
qqcodestring主体的 QQ 二维码地址
wxidstring主体的微信公众号 ID
wxcodestring主体的微信二维码地址
accountstring主体的微信公众号配置文件 ID
locationLocationConfig主体的地址
sitestring主体的网站地址

LocationConfig

地点配置

参数必填值类型内容
longtidudenumber经度
latitudenumber维度

location

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

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

Point

点位配置

参数必填值类型内容备注
longtidudenumber经度
latitudenumber维度
namestring点位名称默认同 title
detailstring点位详情文字默认为 详情
pathstring地点详情路径基于 function/map

轮播图

参数必填值类型内容备注
imagesstring[]展示的图片地址将所有图片按顺序设置为数组元素
fillboolean组件是否填满屏幕宽度默认为 false
indicatorDotsboolean是否显示面板指示点默认显示,设置 false 取消
dotColorstring指示点颜色默认为#ffffff88
autoplayboolean自动切换默认为 true
intervalnumber自动切换时间间隔默认为 5000
durationnumber滑动动画时长默认为 500
circularboolean是否衔接滑动默认为 true
verticalboolean滑动方向是否纵向默认为 false
imgmodestringcarousel 中图片的显示模式默认为 aspectFill
高级参数必填值类型内容备注
classstringcarousel 项目的类名默认为 width:100%;height:400rpx;
stylestringcarousel 项目的样式填入 css 样式
imgClassstringcarousel 中图片的类名默认为 width:100%!important;height:100%!important;
preMarginstring前一项露出边距默认为 0px,接受 px 和 rpx 值
nextMarginstring后一项露出边距默认为 0px,接受 px 和 rpx 值
changestringcarousel 改变时触发的函数名称默认不触发函数
animationstringcarousel 动画结束时触发的函数名称默认不触发函数

相关信息

carousel 组件默认高度为 400rpx,可以通过 style 属性调节

card

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

参数必填值类型内容
urlstring跳转的路径
srcstring卡片图片地址
type'page' | 'web'卡片类型
titlestring卡片标题
descstring卡片描述
logostring卡片 logo 地址
namestring卡片 logo 名称
optionsstring小程序卡片选项

grid

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

参数必填值类型内容
headerstring九宫格的标题文字
footerstring九宫格的尾部文字
itemsGridItem[]该数组的每个元素均为一个格子内容

GridItem

九宫格项目配置

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

media

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

参数必填值类型内容备注
type'audio' | 'video'媒体类型
srcstring媒体文件地址
loopboolean是否循环播放默认为 false
controlsboolean显示默认控件默认为 true

audio

参数必填值类型内容备注
namestring音频名字controls 为 false 时无效
authorstring音频作者controls 为 false 时无效

video

参数必填值类型内容备注
posterstring视频封面的图片网络资源地址controls 为 false 时无效
autoplayboolean是否自动播放默认为 false
startTimenumber视频初始播放位置
高级参数必填值类型内容备注
danmu-listObject Array弹幕列表
danmu-btnboolean是否显示弹幕按钮只在初始化有效

functional-list

生成一个功能列表,可展示滑块、开关、选择器、按钮,可调用自定义函数、微信原生功能。

参数必填值类型内容备注
headerstring | boolean头部标题不填会在标题所在处留空占位,设置为 false 来取消留空占位
footerstring结尾标题
contentFunctionalList[]列表内容

FunctionalList

功能列表每一项参数

AdvancedList 通用参数

下面参数是通用于每一个选项的参数。

参数必填值类型内容
iconstring列表图标的本地路径或在线网址
textstring列表单元的显示文字
hiddenboolean设置为 true 时隐藏该列表项
descstring列表内容的描述

跳转列表

  • 指向资源页面
参数必填值类型内容
pathstring对应页面的路径
  • 指向小程序页面
参数必填值类型内容
urlstring列表指向的页面路径或短名称

原生能力

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

参数必填值类型内容
openTypestring小程序提供的开放能力
targetstring跳转目标

开关

设置 type'switch' 渲染一个开关。

参数必填值类型内容备注
keystring所控变量在 storage 中的 key 值
handlerstring开关对应的函数名称不填仅改变 storage 中 swiKey 的值
colorstring开关颜色同 css 的 color 填入 rgb 代码

选择器

设置 type'picker' 渲染一个选择器。

参数必填值类型内容备注
selectValue[]选择器中包含的值
keystring选择器所改变的变量在本地存储中的名称
handlerstringpicker 选择器对应的函数名称不填仅改变界面显示值与 storage 中 key 的值
singleboolean设置 true 时为单列选择器默认为多列选择器
inlayboolean是否为嵌入式 picker默认为 false,弹出式 picker

按钮

设置 type'button' 渲染一个自定义按钮。

参数必填值类型内容备注
handlerstring按钮函数名填入按钮点击后触发的函数名
disabledboolean是否禁用按钮默认为 false (不禁用),一般仅供开发界面时使用

滑块

设置 type'slider' 渲染一个自定义滑块。

参数必填值类型内容备注
keystring滑块 Key 值滑块所控变量在 storage 中的 key 值
handlerstring滑块对应的的函数名称不填仅改变界面显示值与 storage 中 key 的值
minnumber滑块的最小值默认为 0
maxnumber滑块的最大值默认为 100
stepnumber滑块的步长默认为 1

其他参数

imgmode

  • widthFix: 宽度不变,高度自动变化,保持原图宽高比不变;
  • scaleToFill: 保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素;
  • aspectFit: 保持纵横比缩放图片,使图片的长边能完全显示出来;
  • aspectFill: 保持纵横比缩放图片,只保证图片的短边能完全显示出来;
  • top: 不缩放图片,只显示图片的顶部区域;
  • bottom: 不缩放图片,只显示图片的底部区域;
  • center: 不缩放图片,只显示图片的中间区域;
  • left: 不缩放图片,只显示图片的左边区域;
  • right: 不缩放图片,只显示图片的右边区域;
  • top left: 不缩放图片,只显示图片的左上边区域;
  • top right: 不缩放图片,只显示图片的右上边区域;
  • bottom left: 不缩放图片,只显示图片的左下边区域;
  • bottom right: 不缩放图片,只显示图片的右下边区域;
参数必填值类型内容
titlestring主标题
subtitlestring副标题
textstring弹窗文字
descstring弹窗文字解释
moreboolean是否显示更多按钮,默认为 false
confirmstring确定按钮文字,默认为 '确定'
cancelboolean | string取消按钮文字,默认为 '取消',设置为 false 来隐藏取消按钮
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.14.1