- head:小程序界面的头部,包括标题和navigationBar
- title:大标题
- p:段落(可附带段落标题和段落图片)
- list:列表(可附带普通文字描述、跳转组件、按钮、选择器、开关和滑块等)
- img:图片(可附带图片说明)
- doc:文档(支持office与pdf文件)
- phone:电话(用于电话展示、快速保存联系人或拨打电话)
- grid:九宫格(展示格子)
- swiper:滑块视图容器(可以制作图片轮播图)
- media:媒体(页面音频视频播放)
- gzh:公众号跳转组件(仅支持跳转绑定公众号图文)
- foot:界面的页脚(页脚信息展示)
生成导航栏。必填,仅用一次填在第一个。
参数 | 必填 | 值类型 | 内容 | 备注 |
---|---|---|---|---|
title | 是 | String | 导航栏标题 | 一般不超过八个字,六字以下为佳 |
desc | 否 | String | 标题描述文字 | 该描述文字仅在特定主题下展示,所以仅供补充界面主题,不可放置重要信息 |
action | 否 | String | Boolean | 左上角按钮函数名 | 填入按钮点击时所触发的函数名称,不填时默认执行返回,设置为true来隐藏默认的返回按钮 |
grey | 否 | Boolean | 使用灰色背景 | 默认为白色背景 |
hidden | 否 | Boolean | 隐藏head | 默认显示head |
leftText | 否 | String | 左上角按钮文字 | 设置左上角文字,默认为上一级页面标题,一般不用填写 |
生成右下角的分享按钮,页面自动包含,填写在head
选项中
参数 | 必填 | 值类型 | 内容 | 备注 |
---|---|---|---|---|
shareable | 否 | Boolean | 可被分享 | 是否可以使用小程序的界面分享,默认为false |
contact | 否 | Boolean | “联系开发者”按钮 | 是否在分享弹出菜单中显示,默认为true |
feedback | 否 | Boolean | “意见反馈”按钮 | 是否在分享弹出菜单中显示,默认为true |
文字标题
参数 | 必填 | 值类型 | 内容 |
---|---|---|---|
text | 是 | String | 大标题文字 |
style | 否 | String | 标题css样式 |
生成段落文字
参数 | 必填 | 值类型 | 内容 | 备注 |
---|---|---|---|---|
head | 否 | String | Boolean | 段落标题 | 填入true会留空占位 |
text | 是 | String | String[] | 段落文字 | 测试中,如为数组则视每个元素为一个段落 |
align | 否 | Enum | 段落对齐方式 | 仅支持'left' (默认)、'right' 、'center' 、'justify' |
src | 否 | String | 图片路径 | 会在段落文字底部展示所选图片,本地在线路径均可 |
desc | 否 | String | 图片描述文字 | 填入后会自动最前加入一个三角号,不填则没有描述文字 |
res | 否 | String | 图片高清地址 | 需要高清图片时设置 |
imgmode | 否 | Enum | 图片显示模式 | 默认为widthFix,具体选项见本页底部 |
style | 否 | String | 段落文字样式 | 填入css样式,会对段落的默认样式进行覆盖 |
生成一个带有跳转功能、可包含图标的列表
参数 | 必填 | 值类型 | 内容 | 备注 |
---|---|---|---|---|
head | 否 | String | Boolean | 头部标题 | 不填会在标题所在处留空占位,设置为false来取消留空占位 |
foot | 否 | String | 结尾标题 | |
content | 是 | SimpleList[] | 列表内容 |
列表每一项参数
参数 | 必填 | 值类型 | 内容 |
---|---|---|---|
icon | 否 | String | 列表图标的本地路径或在线网址 |
text | 是 | String | 列表单元的显示文字 |
hidden | 否 | Boolean | 设置为true 时隐藏该列表项 |
desc | 否 | String | 列表内容的描述 |
- 指向动态页面
参数 | 必填 | 值类型 | 内容 |
---|---|---|---|
aim | 否 | String | 对应界面的json文件名 |
- 指向自定义页面页面
参数 | 必填 | 值类型 | 内容 |
---|---|---|---|
url | 否 | String | 列表指向的界面路径或短名称 |
生成一个带有跳转功能、可包含图标、滑块、开关、选择器、自定义按钮功能、微信原生功能的高级列表
参数 | 必填 | 值类型 | 内容 | 备注 |
---|---|---|---|---|
head | 否 | String | Boolean | 头部标题 | 不填会在标题所在处留空占位,设置为false来取消留空占位 |
foot | 否 | String | 结尾标题 | |
content | 是 | 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 |
图片组件。
参数 | 必填 | 值类型 | 内容 | 备注 |
---|---|---|---|---|
src | 是 | String | 图片的本地路径或在线网址 | |
res | 否 | String | 图片在服务器上的网址 | 需要高清图片的时候使用 |
lazy | 否 | Boolean | 图片懒加载 | 默认执行lazyload,设置false取消 |
desc | 否 | String | 图片的描述文字 | 填入后会自动最前加入一个三角号,不填则没有描述文字 |
imgmode | 否 | String | 图片显示模式 | 默认为widthFix |
Tips: 图片懒加载是指只有图片滚动到页面显示区域才开始加载图片。
文档组件。
参数 | 必填 | 值类型 | 内容 |
---|---|---|---|
docName | 是 | String | 文档名称,需要使用文件名.后缀 的格式 |
url | 是 | String | 文档在线路径 |
downloadable | 否 | Boolean | 是否显示下载按钮 |
文档类别仅支持doc、docx、ppt、pptx、xls、xlsx、pdf、jpg、jpeg、png、gif。
文档名称务必加入文件后缀名,文件名称中不要加入其他的
.
避免造成解析错误。
电话组件。
参数 | 必填 | 值类型 | 内容 |
---|---|---|---|
num | 是 | String | 联系人电话号码 |
fName | 是 | String | 联系人的名 |
lName | 否 | String | 填入联系人的姓 |
org | 否 | String | 联系人所在公司 |
remark | 否 | String | 联系人的备注 |
workNum | 否 | String | 联系人的工作电话 |
nickName | 否 | String | 联系人的昵称 |
head | 否 | String | 联系人头像图片路径(仅限本地路径) |
否 | String | 联系人的微信号 | |
province | 否 | String | 联系人的地址省份 |
city | 否 | String | 联系人的地址城市 |
street | 否 | String | 联系人的地址街道 |
postCode | 否 | String | 联系人的地址邮政编码 |
title | 否 | String | 联系人的职位 |
hostNum | 否 | String | 联系人的公司电话 |
website | 否 | String | 联系人的网站 |
否 | String | 联系人的电子邮件 | |
homeNum | 否 | String | 联系人的住宅电话 |
九宫格组件。
参数 | 必填 | 值类型 | 内容 |
---|---|---|---|
head | 否 | String | 九宫格的标题文字 |
foot | 否 | String | 九宫格的尾部文字 |
content | 是 | Grid[] | 该array的每个element是九宫格的每个格子内容 |
参数 | 必填 | 值类型 | 内容 | 备注 |
---|---|---|---|---|
icon | 否 | String | 九宫格的图标的在线路径或本地路径 | |
text | 否 | String | 九宫格文字 | |
aim | 否 | String | 对应界面的json文件名 | 当指向简单界面时填写 |
url | 否 | String | 九宫格指向的界面路径 | 当指向复杂界面时填写 |
轮播图组件。
参数 | 必填 | 值类型 | 内容 | 备注 |
---|---|---|---|---|
url | 是 | string[] | swiper展示的图片的在线网址或本地路径 | 将所有图片按顺序填入该array的每个element |
Class | 否 | String | swiper的类名 | 默认为width:100%;height:400rpx; |
style | 否 | String | swiper的样式 | 填入css样式 |
indicatorDots | 否 | Boolean | 面板指示点 | 默认显示,设置false取消 |
dotColor | 否 | String | 指示点颜色 | 默认为#ffffff88 |
dotActiveColor | 否 | String | 当前选中的指示点颜色 | 默认为#fff |
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属性调节
媒体组件,可用作插入视频和音频。
参数 | 必填 | 值类型 | 内容 | 备注 |
---|---|---|---|---|
type | 是 | 'audio' | 'video' | 媒体种类 | |
src | 是 | String | 媒体文件的在线网址或本地路径 | |
loop | 否 | Boolean | 是否循环播放 | 默认为false |
controls | 否 | Boolean | 设置false来取消显示默认控件 | 默认显示 |
参数 | 必填 | 值类型 | 内容 | 备注 |
---|---|---|---|---|
name | 否 | String | 音频名字 | controls为false时无效 |
author | 否 | String | 音频作者 | controls为false时无效 |
参数 | 必填 | 值类型 | 内容 | 备注 |
---|---|---|---|---|
poster | 否 | String | 视频封面的图片网络资源地址 | controls为false时无效 |
autoplay | 否 | Boolean | 是否自动播放 | 默认为false |
startTime | 否 | Number | 视频初始播放位置 | |
danmu-list | 否 | Object Array | 弹幕列表 | |
danmu-btn | 否 | Boolean | 是否显示弹幕按钮 | 只在初始化有效 |
公众号组件,可在有能力使用web-view的小程序上直接跳转到公众号文章。
参数 | 必填 | 值类型 | 内容 | 备注 |
---|---|---|---|---|
url | 是 | String | 跳转的图文链接 | |
src | 是 | String | 封面图片在线地址 | |
title | 是 | String | 图文标题 | |
desc | 是 | String | 图文描述 | |
icon | 否 | String | 公众号的头像在线地址 | |
gzhName | 否 | String | 公众号名称 |
介绍组件,用于对个人、组织、机构的简单介绍。
参数 | 必填 | 值类型 | 内容 |
---|---|---|---|
name | 是 | String | 主体名称 |
src | 是 | String | 头像图标在线地址 |
desc | 是 | String | 主体描述 |
页脚组件。
参数 | 必填 | 值类型 | 内容 |
---|---|---|---|
desc | 否 | String | 页脚的额外描述文字 |
author | 否 | String | 编辑人,默认为Mr.Hope ,设置'' 来隐藏编辑人 |
time | 否 | String | 编辑时间 |
- 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 | 否 | Booelean | 是否显示更多按钮,默认为false |
cancel | 否 | Booelean | 设置为false 来隐藏取消按钮 |
confirmText | 否 | String | 确定按钮文字,默认为'确定' |
cancelText | 否 | String | 取消按钮文字,默认为'取消' |