app的页面配置
app的窗口配置
app的tabBar配置
网络超时配置及debug开启配置
页面配置
配置·小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
app的页面配置
新建一个小程序项目,打开app.json
![19956127-0c5fff3f074a5e65.png](https://img-blog.csdnimg.cn/img_convert/b2bb3603dc641ef0404ac5b126500c1e.png)
注意页面不需添加后缀名,第一个页面就是程序启动的页面,下面来新建一个页面测试一下。
![19956127-2c7439228a5ea147.png](https://img-blog.csdnimg.cn/img_convert/30cad4fd979ffc00b10bae9ad185240b.png)
将app.json内的pages进行更改:
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
保存并编译,程序启动的初始页面现在是这个样子:
![19956127-c6f2cf0f1c104b5c.png](https://img-blog.csdnimg.cn/img_convert/e5a755866d7525e213842191f66c21da.png)
app的窗口配置
官方文档给出的窗口配置有以下内容:
![19956127-7329f2a465b1ab06.png](https://img-blog.csdnimg.cn/img_convert/bb3e4e8cec58182bea33ccc87aecae89.png)
窗口的初始样式如下:
![19956127-434afb8d02260900.png](https://img-blog.csdnimg.cn/img_convert/50841ac67ac70e1c8dc76434a328d647.png)
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
下面对app.json中的window进行简单修改。
"backgroundTextStyle":"dark", // 仅支持light和dark
"navigationBarBackgroundColor": "#abc",
"navigationBarTitleText": "窗口配置",
"navigationBarTextStyle":"white" // 仅支持black和white
}
![19956127-44485071a4aacaf6.png](https://img-blog.csdnimg.cn/img_convert/1ba1ec6599619a0fbf8389a4d28a2f80.png)
app的tabBar配置
将官方文档tabBar的示例代码放进我们的小程序中。
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
}, {
"pagePath": "pages/logs/logs",
"text": "日志"
}]
},
![19956127-66e9564ed8c292ae.png](https://img-blog.csdnimg.cn/img_convert/92e9b17737e3c2d8491630ff8e95b837.png)
注意tabBar中的两个页面其中必须有一个是启动页面。
![19956127-4bfd40bf24004e36.png](https://img-blog.csdnimg.cn/img_convert/b10748fe5d6f5d3c12bfcff89a2415b4.png)
下面尝试给tabBar添加一些图片,可以找自己喜欢的图片,放在项目的文件夹中。
![19956127-bb3e749392999dce.png](https://img-blog.csdnimg.cn/img_convert/1a1018059a68c57b2cc3db72e796193d.png)
"color" : "#7F7",
"borderStyle" : "white", // 仅支持white和black
![19956127-71e8eb64f5876107.png](https://img-blog.csdnimg.cn/img_convert/6d5fada1d44d47308c42f6b36b2a0665.png)
网络超时配置及debug开启配置
网络超时的示例代码:
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true // 只有开启与关闭
![19956127-8fee848e992784ef.png](https://img-blog.csdnimg.cn/img_convert/1865d8aa4ed72f00ddd41b904712e85e.png)
开启了debug后,程序启动后控制台会有如下输出日志:
![19956127-83cf26cb6e35262d.png](https://img-blog.csdnimg.cn/img_convert/ff6eb0a88f43247a9716803cb3ba5f29.png)
页面配置
我们可以在任何一个页面的文件夹下新建一个json问价,在此json中写入的配置会覆盖app.json中window·内的同名配置。
![19956127-d7e65dd95e3081af.png](https://img-blog.csdnimg.cn/img_convert/0e8aab07a8099d7971a735589235bc91.png)
![19956127-40093683ace833b3.png](https://img-blog.csdnimg.cn/img_convert/f03f1e554c007258e80add5febfc3c87.png)
每个页面单独的wxss也是可以覆盖app.wxss中的内容。
原文作者:beashaper_
原文链接:https://blog.csdn.net/beashaper_/article/details/79964684