小程序包含一个描述整体程序的 app (
所有全局的配置会写在app.json文件中,例如:决定页面文件的路径、窗口表现、设置网络超时时间、设置 tabbar等) 和 多个描述各自页面的 page。
一.目录结构####
全局配置app中由三个文件
| 文件 | 作用 | 备注 |
|---|---|---|
| app.js | 逻辑部分 | 1.注册一个小程序.2.接受一个 object 参数，3.其指定小程序的生命周期函数等. |
| app.json | 全局 配置部分 | app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等. |
| app.wxss | 全局样式部分 | WXSS 用来决定 WXML 的组件应该怎么显示. |
自定义页面由四个部分组成
| 文件 | 作用 | 备注 |
|---|---|---|
| js | 逻辑部分 | 在这里写逻辑代码,跟app.js类似 |
| json | 配置部分 | 与app.json类似用于配置 |
| wxss | 样式 | 决定组件的显示样式 |
| wxml | 组件 | 决定页面结构 |
二.全局配置####
在app.json中来对微信小程序进行全局配置.在这里可配置的大体有pages,window,tabBar,debug 这四样.
1.pages(页面显示路径配置)#####
(接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。
"pages":[
"pages/index/index",//第一项为默认初始页面显示路径
"pages/test/test",//添加一个自定义页面
"pages/logs/logs"
]
2.window(用于设置小程序的状态栏、导航条、标题、窗口背景色。)
"window":{
"backgroundTextStyle":"light", //导航栏标题颜色,仅支持 black/white
"navigationBarBackgroundColor": "green",//导航栏背景颜色
"navigationBarTitleText": "这里改变导航文字",//导航栏标题
"navigationBarTextStyle":"white",//导航栏背景颜色
"enablePullDownRefresh":true,//下拉设置
"backgroundColor":"white"//窗口背景颜色
},
3.tabBar#####
如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
*tabBar 的 tab 的列表,最少2个、最多5个 tab 每个tab用list表示
"tabBar": {
"selectedColor": "red",//被选中颜色
"backgroundColor":"yellow",//背景颜色
"borderStyle":"black",//边框颜色
"position":"bottom",//tabbar显示在上面还是下面
"list": [{
"pagePath": "pages/index/index",//关联页面路径
"text": "首页",//tab标题
"iconPath": "pages/images/RedCalendar.png//tab图片
"selectedIconPath": "pages/images/RedCalendar.png"//被选择tab图片
},
{
"pagePath": "pages/test/test",
"text": "测试",
"iconPath": "pages/images/RedFriends@3x.png",
"selectedIconPath": "pages/images/RedFriends@3x.png"
}]
},
配置完成显示页面####
显示结果
网友评论