配置小程序页面要清楚小程序由哪些部分组成,每部分都是用来做什么的。这部分微信的API开发文档写的很清楚,例子都是从API上截取的。
Json:配置页面入口
Wxml:配置UI视图界面
Wxss:配置页面渲染,页面样式
Js:前后台数据交互,逻辑处理
一、页面全局配置:
app.json文件用来对微信小程序进行全局配置,决定页面文件的路径(pages)、窗口表现(window)、设置网络超时时间(networkTimeout)、设置多tab(tabbar)等。
1、Pages:
一个数组,每一项都是用来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息,文件名不需要写文件后缀,数组的第一项代表小程序的初始页面。小程序中新增/减少页面,都需要对 pages 数组进行修改。
2、Window:
用于设置小程序的状态栏、导航条、标题、窗口背景色。有如下几个属性:
3、Tabbar(页面切换):
通过 tabBar 配置项指定tab栏的表现,以及tab切换时显示的对应页面。只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
注意:如果pages的第一项加载的初始页面不是首页,tabbar不显示。当设置 position 为top 时,将不会显示icon
4、networkTimeout:
设置各种网络请求的超时时间。
5、Debug:
可以在开发者工具中开启 debug 模式,在开发者工具的控制台面板,调试信息以info的形式给出,其信息有Page的注册,页面路由,数据更新,事件触发 。
二、局部页面设置
每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。
页面的配置比app.json全局配置简单得多,只是设置 app.json 中的window配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。页面的.json只能设置window相关的配置项,以决定本页面的窗口表现,所以无需写 window 这个键,如: