微信小程序开发手册 - 02JSON 配置
JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色
配置项细节可参考文档 app.json配置
全局配置
app.json 是当前小程序的全局配置,包含小程序的所有页面路径、界面表现、网络超时时间、底部tab等
pages
指定小程序由那些页面组成
文件名不需要写文件后缀,框架会自动去寻找对应位置的.js, .json, .wxml, .wxss 四个文件进行处理
在未设置 entryPagePath 时,默认加载数组第一项的页面路径为首页
PS:小程序中新增/减少页面时,都需要对pages数组进行修改
如开发目录为
├── app.js
├── app.json
├── app.wxss
├── pages
│ │── index
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs
│ ├── index.wxml
│ ├── index.js
│ ├── index.json
│ └── index.wxss
则需要在app.json中写
{"pages": ["pages/index/index", "pages/logs/logs"]
}
window
定义小程序所有页面的顶部背景颜色、文字颜色定义等
以下列了一些常用的属性,完整配置项请参考小程序window配置
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如 #000000 |
navigationBarTextStyle | string | white | 导航栏标题颜色,仅支持 black / white |
navigationBarTitleText | string | ||
导航栏标题文字内容 | |||
navigationStyle | string | default | 导航栏样式,仅支持以下值: |
default 默认样式 | |||
custom 自定义导航栏,只保留右上角胶囊按钮 | |||
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
tabBar
可以通过 tabBar 设置一个多tab栏应用小程序
PS:tab栏最少两个,最多五个
属性 | 类型 | 是否必填 | 默认值 | 描述 |
---|---|---|---|---|
color | HexColor | ✔️ | ||
tab 上的文字默认颜色,仅支持十六进制颜色 | ||||
selectedColor | HexColor | ✔️ | ||
tab 上的文字选中时的颜色,仅支持十六进制颜色 | ||||
backgroundColor | HexColor | ✔️ | ||
tab 的背景色,仅支持十六进制颜色 | ||||
borderStyle | string | ❌ | black | tabbar 上边框的颜色, 仅支持 black / white |
list | Array | ✔️ | ||
tab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab | ||||
position | string | ❌ | bottom | tabBar 的位置,仅支持 bottom / top |
custom | boolean | ❌ | false | 自定义 tabBar |
更多完整版 tabBar 配置请参考小程序 tabBar 配置
networkTimeout 各类网络请求的超时时间
networkTimeout配置项
subpackages 启用分包加载
subpackages配置项
页面配置
每一个小程序页面也可以使用同名,.json 文件来对页面的窗口表现进行配置,页面中配置项会覆盖app.json 的 window 中相同的配置项
更多完整版页面配置请参考小程序页面配置
语法注意
1)JSON 文件内容都是包裹在 {} 中,并以 key: value 的形式展示。需注意 key 一定要上双引号,没加引号或加单引号都会报错
2)JSON 的值仅支持以下数据类型,其它格式都会报错
数字,包含浮点数和整数
字符串,需要包裹在双引号中
Boolean值,ture / false
数组,需要包裹在 [] 中
对象,需要包裹中 {} 中
Null
3)JSON文件中无法使用注释
微信小程序开发手册 - 02JSON 配置相关推荐
- 微信小程序开发手册离线版本-下载
微信小程序 微信官方日前发布了关于小程序的帮助手册,起地址为: https://mp.weixin.qq.com/debug/wxadoc/dev/ 如果需要最新离线版,可以打开 https://we ...
- 微信小程序开发的全局配置和局部配置(逆战)
全局配置 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置. 全局配置 页面配置 每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置.页面中配置项在当前页面会 ...
- 微信小程序开发手册 - 03WXML与WXSS
WXML WXML(WeiXin Markup Language)是微信框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. 我们在写HTML时,会习惯用 div 标签进行整体布局, ...
- 微信小程序开发-模板与配置
- 微信小程序开发学习笔记一
微信小程序学习笔记(一) 环境使用及创建项目 文件目录设置 JS文件 环境使用及创建项目 环境使用:微信开发者工具 一个微信号只能开发一个微信小程序. 在微信小程序开发手册下载最新版本,学习不要bet ...
- natapp 配置微信小程序开发需要的网络环境
注:这里是需要花钱的...都是泪(10+rmb) natapp主页:natapp.cn 1.首先需要注册->登录->购买隧道->VIP_1型->付款->二级域名-> ...
- 微信小程序开发消息推送配置教程
微信小程序开发消息推送配置教程 微信小程序开发消息推送配置这一块网上都是PHP居多,由于用egg.js写了一套验证方法. 第一步:填写服务器配置 登录微信小程序官网后,在小程序官网的"设置- ...
- 微信小程序开发入门(连载)—— 微信公众平台配置
上一篇:微信小程序开发入门(连载)-- 开发前的准备工作 登录微信公众平台(https://mp.weixin.qq.com),点击左侧导航栏中的"开发",点击"开发设置 ...
- 微信小程序开发教程手册文档
微信小程序开发教程文档 微信小程序是什么?微信小程序如何开发?微信小程序开发教程有哪些?本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程 ...
最新文章
- linux防火墙伦堂,「linux专栏」自从看了这篇文章,我彻底搞懂了selinux和防火墙...
- 设计模式学习笔记(八:迭代器模式)
- LeetCode() Largest Number
- VMware View 5.0从菜鸟到高手系列 3 -安装View Composer组件篇
- 计组—存储以及字、位扩展
- 文件的复制、移动、压缩等对SELinux属性关系详解
- lisp提取长方形坐标_用 Python 对图片主体轮廓进行提取、颜色标记、并计算区域面积...
- c语言字符串汇编,C语言调用汇编实现字符串对换
- Puppet 笔记 package file services
- 计算机开机显示花屏,win7电脑开机过程中出现花屏怎么办
- 28个数控编程代码大全,众多程序员呕心沥血的私货
- 【新手教程】从零搭建php动态网站
- ICT通信运营企业的重建之服务升级(二)----ICT技术及产品种类
- 朋友圈集赞万能截图生成器微信小程序源码
- Java //PP2.14 按照以下要求修改程序Snowman: ·在其身上添加两个红色按钮。·将雪人的表情由笑脸变成皱眉。·把太阳移动到图片的右上角。·在图片左上角显示你的名字。。。
- php魔方阵,利用C语言玩转魔方阵实例教程
- 注册表写入二进制数据
- ファイルダウンロード
- 如何使用IOS自动化测试工具UIAutomation
- 上海二胎办理户口登记资料