微信小程序开发
北方工业大学
案例
小程序的基本架构
案例描述
创建一个包含：首页、教学、科研、资讯和
关于我们5个标签的小程序，每个标签都有对应的
页面、图标和标签文字，点击某个标签将切换到对应
的页面，同时该标签的图标和文字颜色都会发生变化，
页面的标题也发生相应的变化，而其他标签则变为
非选中状态。
实现效果
手机录屏
案例实现
电脑录屏
知识要点
利用app.json文件对小程序进行全局配置
利用同名.json文件对本页面窗口表现进行配置
全局配置
app.json文件属性
属性类型必填描述
pagesstring[]是页面路径列表
windowObject否全局的默认窗口表现
tabBarObject否底部tab栏的表现
networkTi
Object否网络超时时间
meout
是否开启debug模式，默
debugboolean否
认关闭
permissionObject否小程序接口权限相关设置
Pages配置
pages用于指定小程序由哪些页面组成，每一项
都对应一个页面的路径（含文件名）信息。文件名
不需要写文件后缀，框架会自动去寻找对应位置
的.json,.js,.wxml,.wxss四个文件进行处理。数组的
第一项代表小程序的初始页面（首页）。小程序中
新增/减少页面，都需要对pages数组进行修改。
Window配置
属性类型描述
navigationBarBackground导航栏背景颜色，如
HexColor
Color#000000
导航栏标题颜色，仅
navigationBarTextStylestring
支持black/white
navigationBarTitleTextstring导航栏标题文字内容
backgroundColorHexColor窗口的背景色
下拉loading的样式，
backgroundTextStylestring
仅支持dark/light
屏幕旋转设置，支持
pageOrientationstring
auto/portrait/landscape
tabBar配置
属性