微信小程序day01-JSON配置
微信小程序
小程序代码构成
JSON配置
WXML模板
WXSS样式
JS逻辑
1、JSON配置
小程序配置 app.json
app.json: 是当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
pages字段
用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息,这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段
用于设置小程序的状态栏、导航条、标题、窗口背景色。定义小程序所有页面的顶部背景颜色,文字颜色定义等。
tabBar字段
客用于定义户端窗口的底部或顶部有 tab 栏可以切换页面,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象
代码:
{
"pages":[
"pages/aboutme/aboutme",
"pages/index/index",
"pages/logs/logs"
//路径先后顺序决定页面先后顺序
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#ccc",
"navigationBarTitleText": "微信",
"navigationBarTextStyle":"white"
},
"tabBar": {
"color":"#fff",
"selectedColor":"#fff",
"backgroundColor":"#ccc",
"borderStyle":"black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
}
工具配置 project.config.json
通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。
考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置,其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
JSON 语法
这里说一下小程序里JSON配置的一些注意事项。
JSON文件都是被包裹在一个大括号中 {},通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中,在实践中,编写 JSON 的时候,忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如 JavaScript 中的 undefined。
- 数字,包含浮点数和整数
- 字符串,需要包裹在双引号中
- Bool值,true 或者 false
- 数组,需要包裹在方括号中 []
- 对象,需要包裹在大括号中 {}
- Null
还需要注意的是 JSON 文件中无法使用注释,试图添加注释将会引发报错。
微信小程序day01-JSON配置的更多相关文章
- 微信小程序 app.json 配置
我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了所有配置选项的简单配置app.json : { " ...
- 微信小程序 | app.json配置属性
app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. widows: 用于设置小程序的状态栏.导航条.标题.窗口背景色. navig ...
- 微信小程序app.json配置
找到app.json文件,找到window配置项 1.windows选项下导航栏样式 "navigationBarBackgroundColor":#F6F6F6 // 导航栏的背 ...
- 微信小程序 - app.json配置解析
{ "pages": [ "pages/index/index", "pages/logs/logs", "pages/login ...
- 微信小程序:页面配置 page.json
微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...
- 微信小程序:工具配置 project.config.json
微信小程序:工具配置 project.config.json 一.项目配置文件project.config.json 小程序开发者工具在每个项目的根目录都会生成一个 project.config.js ...
- 微信小程序:全局配置app.json
微信小程序:全局配置app.json 一.全局配置app.json app.json文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包 ...
- 微信小程序app.json文件常用全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. JOSN文件不允许注释,下面为了学习加上注释,粘贴需要的片段 ...
- 微信小程序 (全局配置和页面配置)
全局配置 app.json 文件用来对微信小程序进行全局配置. 一.配置页面路径 二.window 配置全局默认的窗口 navigationBarTextStyle:导航栏的标题颜色 navigati ...
- 微信小程序——2、配置json文件
配置文件详解 主配置文件app.json 主配置文件位于主目录中,用于进行全局配置.包括页面文件的路径.窗口表现.设置网络超时时间.设置多tab等 下面通过微信最初自带小程序来学习 { "p ...
随机推荐
- PHP递归获取二维数组中指定key的值
$data = [ "resulterrorCode" => 0, "resultraw" => [ "result" => ...
- MYSQL根据节点向上和向下查询所有节点
WITH cte AS ( SELECT * ,UnitID AS level FROM UnitTable WHERE UnitID=2 UNION ALL SELECT g.*,level+1 F ...
- 关于jQuery的append方法不能多次添加同一个DOM元素的解决方法
资料来自:https://segmentfault.com/q/1010000007677851?_ea=1419689 append()方法在jQuery中是使用appendChild()实现的,实 ...
- RabbitMQ原理图
一.RabbitMQ 原理图 二.Rabbit 交换器讲解 1 Direct 交换器(发布与订阅 完全匹配) 1.2搭建环境 1 ...
- docker-compose模板文件参数说明
working_dir:一般这个参数用在应用程序Services下,我们指定应用程序所在的目录为当前目录,类似linux中的cd working_dir.其余的参数,例如command等就是基于此参数 ...
- 2018-2019-2 网络对抗技术 20162329 Exp2 后门原理与实践
目录 1.实践基础 1.1.什么是后门 1.2.基础问题 2.实践内容 2.1.使用netcat获取主机操作Shell,cron启动 2.2.使用socat获取主机操作Shell, 任务计划启动 2. ...
- Java 平时作业四
编写一个Java程序实现返回指定目录及其子目录下扩展名为*.pdf的所有文件名. 扩展: isFile public boolean isFile() 测试此抽象路径名表示的文件是否为普通文件. 如果 ...
- ubuntu系统下matplotlib中文乱码问题
参考 [ubuntu系统下matplotlib中文乱码问题 - CSDN博客](https://blog.csdn.net/jeff_liu_sky_/article/details/54023745 ...
- CentOS 7.3/Linux .net core sdk 安装
执行下列命令,安装.NET Core SDK(微软官方教程地址 https://www.microsoft.com/net/learn/get-started/linuxcentos) 点开链接,选择 ...
- 2.9 linux学习(1)
2019-2-9 16:07:44 学一下Linux,多学一点东西 新认识个老师,超哥 很牛逼感觉! https://www.cnblogs.com/pyyu/p/9276851.html 这是入门参 ...