2.pages.json

globalStyle

在pages.json中可以通过globalStyle设置包括导航条、下拉背景颜色等样式：

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色
navigationBarTextStyle	String	white	导航栏标题文字颜色，仅支持white/black
navigationBarTitleText	String	导航栏标题文字内容
backgroundColor	HexColor	#ffffff	下拉时loading页面的背景颜色
backgroundTextStyle	String	dark	下拉loading样式，仅支持white/black
enablePullDownRefresh	Boolean	false	是否开启下拉刷新
onReachBottomDistance	Number	50	上拉刷新触发时与页底的距离，仅支持px

注意：HexColor必须是十六进制的值，不能是black、white这种字符串颜色

示例：

"globalStyle": {

"navigationBarTextStyle": "white",

"navigationBarTitleText": "Fuck you",

"navigationBarBackgroundColor": "#7FFF00",

"backgroundColor": "black",

"backgroundTextStyle": "light",

"enablePuxllDownRefresh": true

}

pages

1. 创建新页面

在pages目录下新建一个message/message.vue，注意，每个vue页面外面最好多建一层文件夹，因为转化成微信小程序项目之后，vue会被拆分成wxml、js、json三个文件，如果混在一起看起来会很杂乱。

代码为：

<template>

<view>hello message</view>

</template>

2. 修改启动页

在pages.json中，谁是pages数组的第一项，那它就是启动页

pages: [

{

"path": "pages/message/message" //后缀.vue可以省略掉

"style": {

......

}

}

]

注意：pages前面不能有斜杠

3. 修改新页面样式

"style": {

"navigationBarBackgroundColor": "#EE5C42",

"navigationBarTitleText": "信息页",

"h5": { //还有在h5平台生效

"pullToRefresh": {

"color": "#9F79EE" // 下拉刷新的加载圈变紫色

}

}

}

注意：只有在pages中指定路径，微信小程序才会生成相应的wxml页面，json配置数据，js代码

具体样式参考：pages样式

tabbar

在uni-app中，可以通过在pages.json中配置tabbar项目，来轻松展现tabbar，具体配置参数可以参考：tabbar配置项

我们首先需要创建一个contact/contace.vue页面，内容跟message差不多

接着在pages.json中增加路由：

{

"path": "pages/contact/contact"

}

最后就可配置tabbar：

tabBar: {

list: [

{

"text": "主页",

"pagePath": "pages/index/index",

"iconPath": "static/tabs/home.png",

"selectedIconPath": "static/tabs/home-active.png"

},

{

"text": "信息",

"pagePath": "pages/message/message",

"iconPath": "static/tabs/message.png",

"selectedIconPath": "static/tabs/message-active.png"

},

{

"text": "我的",

"pagePath": "pages/contact/contact",

"iconPath": "static/tabs/contact.png",

"selectedIconPath": "static/tabs/contact-active.png"

}

]

}

tabbar的其他配置：

“color”: “red”, // 文字默认颜色

“selectedColor”: “orange”, // 选中文字的颜色

“backgroundColor”: “blue”, // tabbar的背景颜色

“borderStyle”: “black”, // 边框颜色

“position”: “top” // 置顶tabbar，只支持微信小程序

condition

condition是调试用的，用于直接展示相关组件。出现这个配置项是因为在浏览器上，开发者可以通过修改网址来访问目标页面。但手机上的应用不行，需要展示相关组件就不得不破坏原有的路由指向。

具体使用方法如下：

1. 新建detail/detail.vue

<template>

<view>详情页</view>

</template>

2. 配置路由

"path": "pages/detail/detail"

3. 配置condition

"condition": {

current: 0,

list: [

{

"path": "pages/detail/detail",

"name": "详情页",

"query": "id=80"

}

]

}

配置完了之后，在微信开发工具的编译项会多出来一个”详情页”，点击直接跳转到详情页上。

而手机则会在启动的时候直接进入详情页。

参考：

04-globalStyle全局外观设置

05-创建新页面和页面配置

06-配置基本的tabbar

07-tabbar的其他属性配置

08-condition启动模式配置