⼩程序的基本架构
⼀、⼩程序的基本架构
1.知识点
（1）⼩程序整体配置⽅法。
（2）⼩程序页⾯配置⽅法
2.实现⽅法
2.1全局配置
⼩程序根⽬录下的app.json⽂件夹⽤来对⼩程序进⾏全局配置，⽂件内容作为⼀个JSON对象，主要配置项如下表所⽰。
属性类型必填描述
pages string[]是页⾯路径列表
window object否全局的默认窗⼝表现
tabBar object否底部tab栏的表现
networkTimeout object否⽹络超时时间
debug boolean否是否开启debug模式，默认关闭
permission object否⼩程序接⼝权限相关设置
（1）pages⽤于指定⼩程序由哪些页⾯组成，每⼀项都对应⼀个页⾯的路径（含⽂件名）信息。⽂件名不需要写⽂件扩展名，框架会⾃动去寻对应位置的.json，.js，.wxml，.wxss四个⽂件进⾏处理。数组的第⼀项代表⼩程序的初始页⾯（即⾸页）。⼩程序中新增/减少页⾯，都需要对pages数组进⾏修改。如果开发⽬录如图01所⽰，则需要在app.json中写
{
"pages": [
"pages/index/index",
"pages/logs/logs"
]
}
（2）window⽤于设置⼩程序的状态栏、导航条、标题、窗⼝背景⾊。其中涉及的及格属性如下表所⽰。
属性类型默认值描述
navigationBarBackgroundColor HeColor#000000导航栏背景颜⾊navigationBarTextStyle string white导航栏标题颜⾊，仅⽀持black/white
navigationBarTitleText string导航栏标题⽂字颜⾊
navigationStyle string default导航栏样式
backgroundColor HexColor#ffffff窗⼝的背景⾊
backgroundTextStyle string dark下拉loading的样式，仅⽀持black/white pageOrientation string portrait屏幕旋转设置，⽀持auto/portrait/landscape
（3）tabBar⽤来配置⼩程序底部的tab。如果⼩程序是⼀个多tab应⽤（客户端 窗⼝的底部或顶部有tab栏可以切换页⾯），可以通过tabBar配置项指定tab栏的表现，以及tab切换时现实的对应页⾯。tabBar对象的常⽤属性如下表所⽰。
属性类型必选默认值描述
color HexColor是tab上的⽂字默认颜⾊，仅⽀持⼗六进制颜⾊selectColor HexColor是tab上的⽂字选中时的颜⾊，仅⽀持⼗六进制颜⾊backgroundColor HexColor是tab的背景⾊，仅⽀持⼗六进制颜⾊borderStyle string否black tabBar上边框的颜⾊，仅⽀持black/white list string是tab的列表，详见list属性说明，最少两个，最多五个position string否bottom tabBar的位置，仅⽀持bottom/top
custom boolean否FALSE⾃定义tabBar
其中list接受⼀个数组，只能配置最少两个，最多五个tab。tab按数组的顺序排列，每个项都是⼀个对象，其属性值如下表所⽰。
属性类型必填说明
pagePath string是页⾯路径，必须在pages中定义
text string是tab上按钮⽂字
iconPath string否图⽚路径，icon⼤⼩限制40KB。当position为top时不显⽰icon selectIconPath string否选中时的图⽚路径，icon⼤⼩限制40KB。当position为top时不显⽰icon
2.2页⾯配置
每个⼩程序页⾯也可以使⽤同名.json⽂件来对本页⾯的窗⼝表现进⾏配置，页⾯中配置项会覆盖app.json的window中相同的配置项。
3.案例分析
3.1案例描述
创建⼀个包含：⾸页、教学、科研、资讯和关于我们5个标签的⼩程序，每个标签都有对应的页⾯、图标和标签⽂字，点击某个标签的图标或⽂字都将切换到对应的页⾯，同时该标签的图标和⽂字颜⾊会发⽣相应的变化，页⾯的标题也发⽣相应的变化，⽽其他标签则变为⾮选中状态。
3.2实现效果
3.3案例实现
（1）创建images⽂件夹，准备10个图⽚作为变穷选中和⾮选中状态下的图标，把这些图⽚放在images⽂件夹中，并把images⽂件夹复制到建⽴的⼯程⽂件夹中。
（2）编写app.json⽂件代码，定义五个页⾯：index，jiaoxue，keyan，zixun，guanyu。
{
"pages": [
"pages/index/index",
"pages/jiaoxue/jiaoxue",
"pages/keyan/keyan",
"pages/zixun/zixun",
"pages/guanyu/guanyu"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "xxxx⼤学欢迎您",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#000",
"selectedColor": "#00f",
"list": [
{
"pagePath": "pages/index/index",
"text": "⾸页",
"iconPath": "/images/home.png",
"selectedIconPath": "/images/home-fill.png"
},
{
"pagePath": "pages/jiaoxue/jiaoxue",
"text": "教学",
"iconPath": "/images/all.png",
"selectedIconPath": "/images/all-fill.png"
},
{
"pagePath": "pages/keyan/keyan",
"text": "科研",
"iconPath": "/images/set (1).png",
"selectedIconPath": "/images/set.png"
},
{
"pagePath": "pages/zixun/zixun",
"text": "资讯",
"iconPath": "/images/folder.png",
"selectedIconPath": "/images/folder-fill.png"
},selectediconpath什么意思
{
"pagePath": "pages/guanyu/guanyu",
"text": "关于我们",
"iconPath": "/images/Customer management.png",
"selectedIconPath": "/images/Customer management-fill.png"
}
]
}
}
编写完app.json⽂件保存或编译后，创建的页⾯、导航栏和标签如图02所⽰，创建的⽂件⽬录结构如图03所⽰。
（2）编写.json⽂件代码，以"教学"页⾯为例。
{
"navigationBarBackgroundColor": "#ff0000",          //导航栏背景颜⾊
"navigationBarTextStyle": "white",                  //导航栏标题颜⾊
"navigationBarTitleText": "教学"                    //导航栏标题⽂字内容
}
4.思考
（1）⼀个⼩程序页⾯通常是有哪⼏个⽂件构成？
⼀个⼩程序的页⾯由四个⽂件组成：
index.js 页⾯的逻辑层
index.json 页⾯的配置
index.wxml 就是相当于html页⾯
index.wxss 页⾯的样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。