小程序页面参数表

Mr.Hope ... 小程序 大约 12 分钟

版本: V3

# 总体结构

参数 必填 值类型 内容 备注
title string 导航栏标题 一般不超过八个字,六字及以下为佳
desc string 页面描述 会显示在页脚
author string 页面的作者 会显示在页脚
time string 页面更新时间 会显示在页脚
action string | false 左上角按钮函数名 填入按钮触发的函数名称,不填时执行返回,设置为 false 会隐藏按钮
grey boolean 使用灰色背景 默认为白色背景
content ComponentConfig[] 页面的内容 数组的每个对象会最终渲染为一个组件
footer boolean 是否显示页脚 默认为 true
hidden boolean 隐藏导航栏 默认显示导航栏
from string 左上角返回按钮文字 设置左上角文字,默认为上一级页面标题,一般不用填写
shareable boolean 是否可被分享 是否可以使用小程序的界面分享,默认为 false
contact boolean “联系开发者”按钮 是否在分享弹出菜单中显示,默认为 true
feedback boolean “意见反馈”按钮 是否在分享弹出菜单中显示,默认为 true

# content 格式

content 的每个元素都为一个 Object,该 Object 有一个固定的键 tag 来标识该组件的内容,有效的 tag 值如下:

  • title: 标题
  • text: 文字(可选择带标题的普通段落、有序列表、无序列表和自定义文字)
  • list: 列表(可附带普通文字描述、跳转组件),当首字母大写时为增强型列表(可包含按钮、选择器、开关和滑块)
  • img: 图片(可附带图片说明)
  • doc: 文档(支持 Office 文档、pdf、图片等)
  • phone: 电话(用于电话展示、快速保存联系人或拨打电话)
  • grid: 九宫格(分类展示)
  • swiper: 滑块视图容器(可以制作图片轮播图)
  • media: 媒体组件(页面音频视频播放)
  • card: 卡片跳转组件(卡片形式,可跳转到指定页面或打开网页)
  • copy: 复制组件(快速复制指定文字)
  • intro: 介绍组件(多用于媒体或个人的 logo 与描述展示)

# title 参数

标题

参数 必填 值类型 内容
text string 大标题文字
style string | Record<string, string> 标题 css 样式

# text 参数

生成文字块

参数 必填 值类型 内容 备注
heading string | boolean 标题
type 'ul' | 'ol' | 'p' 文字类型 不填为自定义文字,可自由排版
text string | string[] 文字内容
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 对应界面的路径(不带后缀名)
  • 指向自定义页面页面

    参数 必填 值类型 内容
    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 联系人电话号码
header string 组件标题
fName string 联系人的名
lName string 填入联系人的姓
org string 联系人所在公司
remark string 联系人的备注
workNum string 联系人的工作电话
nickName string 联系人的昵称
head string 联系人头像图片路径(仅限本地路径)
wechat string 联系人的微信号
province string 联系人的地址省份
city string 联系人的地址城市
street string 联系人的地址街道
postCode string 联系人的地址邮政编码
title string 联系人的职位
hostNum string 联系人的公司电话
website string 联系人的网站
email string 联系人的电子邮件
homeNum string 联系人的住宅电话

# grid 参数

九宫格组件。

参数 必填 值类型 内容
header string 九宫格的标题文字
footer string 九宫格的尾部文字
content Grid[] 该 array 的每个 element 是九宫格的每个格子内容

# Grid 参数

参数 必填 值类型 内容
icon String 九宫格的图标的在线路径或本地路径
text String 九宫格文字
color 'blue' | 'orange' | 'red' | 'purple' | 'cyan' | 'olive' | 'mauve' Android 主题下的颜色
name String 对应的英文文字
path String 对应界面的 json 文件路径
url String 九宫格指向的界面路径

# swiper 参数

轮播图组件。

参数 必填 值类型 内容 备注
url string[] swiper 展示的图片的在线网址或本地路径 将所有图片按顺序填入该 array 的每个 element
fill boolean 是否填充整个屏幕宽度 默认为 false
Class string swiper 的类名 默认为 width:100%;height:400rpx;
style string swiper 的样式 填入 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 swiper 改变时触发的函数名称 默认不触发函数
animation string swiper 动画结束时触发的函数名称 默认不触发函数
imgClass string swiper 中图片的类名 默认为 width:100%!important;height:100%!important;
imgMode string swiper 中图片的显示模式 默认为 aspectFill

注: swiper 默认高度为 400rpx,可以通过 style 属性调节

# 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 是否显示弹幕按钮 只在初始化有效

# card 参数

卡片组件,可展示卡片,点击卡片时可跳转小程序的指定页面或使用 <web-view /> 打开指定网址。

参数 必填 值类型 内容
type 'page' | 'web' 跳转到小程序页面还是指定网址
url string 跳转的路径
src string 卡片图片地址
title string 卡片标题
desc string 卡片描述
logo string 卡片 logo 地址
name string 卡片 logo 名称

# copy 参数

复制组件,允许用户快速复制文字

参数 必填 值类型 内容
text string 需要复制的文字
header string 可选的组件标题

# intro 参数

介绍组件,用于对个人、组织、机构的简单介绍。

参数 必填 值类型 内容
name string 主体名称
logo string 头像图标在线地址
desc string 主体描述

# advanced-list 参数

生成一个带有跳转功能、可包含图标、滑块、开关、选择器、自定义按钮功能、微信原生功能的高级列表

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

# AdvancedList 参数

高级列表每一项参数

# AdvancedList 通用参数

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

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

# 跳转列表

  • 指向动态页面
参数 必填 值类型 内容
aim string 对应界面的 json 文件名
  • 指向自定义页面页面
参数 必填 值类型 内容
url string 列表指向的界面路径或短名称

# 原生能力

使用微信 navigator 的原生能力。

参数 必填 值类型 内容 备注
navigate boolean 设置 true 使用 navigator 组件 默认为 false
openType string 小程序提供的开放能力 仅 navigate 为 true 时有效
target string 跳转目标 仅 navigate 为 true 时有效

# 开关

渲染一个开关。目前 Switch 函数无法在动态页面中定义。

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

# 选择器

渲染一个选择器。目前 Switch 函数无法在动态页面中定义。

参数 必填 值类型 内容 备注
pickerValue string 选择器中包含的值 使用变量表示时不支持简单界面
key string 选择器所改变的变量在本地存储中的名称
single boolean 设置 true 时为单列选择器 默认为多列选择器
inlay boolean 设置 true 时为嵌入式 picker 默认为弹出式 picker
picker string picker 选择器对应的函数名称 不填仅改变界面显示值与 storage 中 key 的值

# 按钮

渲染一个自定义按钮,目前 button 函数无法在动态页面中定义。

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

# 滑块

渲染一个自定义滑块,目前 slider 函数无法在动态页面中定义。

参数 必填 值类型 内容 备注
sliKey string 滑块 Key 值 滑块所控变量在 storage 中的 key 值
slider 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
cancel boolean 设置为 false 来隐藏取消按钮
confirmText string 确定按钮文字,默认为 '确定'
cancelText string 取消按钮文字,默认为 '取消'