2-3 原生小程序 - 项目app.json配置 - JavaScript

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

App.json它其实有四五个配置，但是最重要的是pages、windows和tabbar。tabbar是做导航的处理的。

官方推荐的入门配置之一：

app.json

它其实有一些字段是限制了这个格式和限制了字段的。pages目录其实就是页面，小程序到底有几个页面。

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

app.json

{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}

第一个就是我们的首页index。如果把logs放到第一个。

{
"pages":[
"pages/logs/logs",
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}

刷新之后就会知道跳到启动日志。

pages不用管太多了，后面Vue.js那个库里面会自动帮我们生成。这是page目录，后面讲到我们使用的框架的时候会继续介绍。

window要配置的地方就比较多了。window主要就是用来设置我们小程序全局的状态栏，导航条，它的标题啊以及窗口的背景色。

"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}

扫码预览可以在手机里看到小程序简单的一个样式了。

backgroundColor和navigationBarBackgroundColor到底是什么关系？以及底下这个

backgroundColorBottomString#ffffff底部窗口的背景色，仅 iOS 支持微信版本 6.5

又是什么意思呢？

修改一下navigationBarBackgroundColor试试

"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#d22222",

修改一下字体

"navigationBarTitleText": "imooc",
"navigationBarTextStyle":"light"
}

设置一下下拉刷新为true。露出来的可以认为是窗口的背景色。

"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#d22222",
"navigationBarTitleText": "imooc",
"navigationBarTextStyle":"light",
"enablePullDownRefresh":true
}

把backgroundColor也设置成这个颜色。注意到下拉刷新整个出来的样式也是红色的。

"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#d22222",
"navigationBarTitleText": "imooc",
"navigationBarTextStyle":"light",
"enablePullDownRefresh":true,
"backgroundColor":"#d22222"
}

tabbar就是设置底下的导航。