小程序简易参数表

Mr.Hope ... 2021-11-15 小程序 大约 7 分钟

版本: V4

此版本只包含了较为基础常用的配置项。

# 总体结构

参数 必填 值类型 内容 备注
title string 导航栏标题 一般不超过八个字,六字及以下为佳
desc string 页面描述 会显示在页脚
author string 页面的作者 会显示在页脚
time string 页面更新时间 会显示在页脚
grey boolean 使用灰色背景 默认为白色背景
content ComponentConfig[] 页面的内容 数组的每个对象会最终渲染为一个组件
shareable boolean 是否可被分享 是否可以使用小程序的界面分享,默认为 false

# 支持的组件

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

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

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

# title

标题

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

# text

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

参数 必填 值类型 内容 备注
heading string | boolean 标题
text string | string[] 文字内容
type 'tip' | 'warn' | 'danger' | 'info' 文字块样式 不填无额外样式
align 'left' | 'right' | 'center' | 'justify' 段落对齐方式 默认为 'justify'

# p

段落,可设置标题与样式

参数 必填 值类型 内容 备注
heading string | boolean 标题
text string | string[] 段落文字内容
type 'tip' | 'warn' | 'danger' | 'info' 文字块样式 不填无额外样式
align 'left' | 'right' | 'center' | 'justify' 段落对齐方式 默认为 'justify'

# ul

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

参数 必填 值类型 内容 备注
heading string | boolean 标题
text string | string[] 无序列表项文字内容
type 'tip' | 'warn' | 'danger' | 'info' 文字块样式 不填无额外样式
align 'left' | 'right' | 'center' | 'justify' 段落对齐方式 默认为 'justify'

# ol

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

参数 必填 值类型 内容 备注
heading string | boolean 标题
text string | string[] 有序列表项文字内容
type 'tip' | 'warn' | 'danger' | 'info'| 'none' 文字块样式 默认为 'none'
align 'left' | 'right' | 'center' | 'justify' 段落对齐方式 默认为 'justify'

# list

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

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

列表每一项参数如下:

# 通用参数

参数 必填 值类型 内容
icon string 列表图标的简称或在线网址
text string 列表项文字
desc string 列表项描述,显示在尾部
path string 对应配置文件的相对或绝对路径(不带后缀名),以 / 结尾默认为 index

# img

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

参数 必填 值类型 内容 备注
src string 图片地址
res string 图片预览地址 需要高清图片的时候使用
desc string 图片的描述文字 填入后会自动最前加入一个三角号,不填则没有描述文字

# 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 联系人的工作电话
nickName string 联系人的昵称
wechat string 联系人的微信号
province string 联系人的地址省份
city string 联系人的地址城市
street string 联系人的地址街道
postCode string | number 联系人的地址邮政编码
title string 联系人的职位
hostNum string | number 联系人的公司电话
site string 联系人的网站
mail string 联系人的电子邮件
homeNum string | number 联系人的住宅电话

# copy

复制组件,允许快速复制指定文字

参数 必填 值类型 内容
text 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

轮播图

参数 必填 值类型 内容 备注
images string[] 展示的图片地址 将所有图片按顺序设置为数组元素
fill boolean 组件是否填满屏幕宽度 默认为 false

# card

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

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

# grid

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

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

# GridItem

九宫格项目配置

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

# media

媒体组件,可用作插入视频和音频。

参数 必填 值类型 内容
type 'audio' | 'video' 媒体类型
src string 媒体文件地址

# audio

参数 必填 值类型 内容
name String 音频名字
author String 音频作者

# video

参数 必填 值类型 内容
poster string 视频封面的图片网络资源地址