微信小程序框架详解
小程序包含一个描述整体程序的app实例和多个描述页面的page。其中app由三个文件构成:公共配置app.json、公共样式app.wxss、主体逻辑app.js。每个page最多由四个文件构成:页面配置page.json、页面结构page.wxml、页面样式page.wxss、页面主体逻辑page.js。微信小程序的主体部分由3个文件组成,且必须放在项目的主目录中,名称也是固定的文件名和作用如下:app.js:主逻辑文件,用于监听并处理小程序的生命周期函数、声明全局变量、调用框架提供的丰富的API等。app.json:主配置文件,对整个小程序的全局配置,配置小程序是由哪些页面组成,配置小程序的窗口背景色等。注意 app.json不可添加任何注释。app.wxss:主样式表文件,主样式表文件中设置的样式,在其他页面文件中也可以共享。小程序页面是由同路径下同名但不同后缀的2~4个文件组成:.js后缀的文件是脚本文件。.json后缀的文件是配置文件。.wxss后缀的是样式表文件。.wxml后缀的文件是页面结构文件。其中.js与.wxml文件是必需的。小程序配置全局配置小程序根目录下的app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。{ "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/index", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true, "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, }主要配置如下:1.配置页面路径(pages)这是一个数组属性。在微信小程序中要使用到的页面都必须在app.json中进行配置,将其添加到pages数组中。在pages数组中的每一项都是一个字符串,用来指定小程序由哪些页面组成。每一项代表对应页面的[路径+文件名]信息,文件名不需要写后缀,因为框架会自动寻找路径.json,.js,.wxml,.wxss的4个文件进行编译组合。位于pages数组中的第一项表示小程序的初始页面,即启动小程序时将运行显示的页面。小程序中新增/减少页面,都需要对pages数组进行修改。如果没有将页面的路径添加到pages数组中,即使小程序中的代码导航到该页面,仍然不能打开该页面,并且控制台不会显示任何提示信息,因此,在调试时如果打不开页面,首先应检查是否将页面添加到pages数组属性中。2.配置窗口状态(window)这是一个JSON对象属性,包含以下属性,可用来设置窗口的名称、导航栏等。backgroundColor,用来设置窗口的背景色,与HTML中的颜色设置相同,使用十六进制的RGB方式设置颜色。这个属性的默认值为#fffff(即白色)。backgroundTextStyle,用来设置下拉背景字体、loading 图的样式,目前只支持设置为“dark”或“light”这两个值,默认值为“dark”enablePullDownRefresh,用来设置是否开启下拉刷新,默认值为false。navigationBarBackgroundColor,用来设置导航栏背景颜色,默认值为"#000000",即黑色。navigationBarTextStyle,设置导航栏标题颜色,目前只支持"black"和"white”这两个值,默认值为“white”。navigationBarTitleText,设置导航栏标题文字内容。3.配置底部tab栏(tabBar)微信小程序只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象color:设置tab 上的文字默认颜色,仅支持十六进制颜色 selectedColor:设置 tab 上的文字选中时的颜色,仅支持十六进制颜色 backgroundColor:设置 tab 的背景色,仅支持十六进制颜色 borderStyle:设置 tabbar 上边框的颜色, 仅支持 black / white list:设置tab 的列表,最少 2 个、最多 5 个 tab对于list这个数组属性,其中每一项又是一个对象,又可以设置4个属性值:text:设置tab上显示的文字,如果为tab设置了图标,则文字位于图标下方。如果未设置图标,则只显示文字。iconPath:设置tab处于未激活状态时显示的图片路径,icon图片大小限制为40KB.selectedIconPath:设置tab处于激活状态时的图片路径,同样,icon图片大小限制为40KB。pagePath:设置触按该tab时跳转的页面路径,这里设置的页面路径必须在pages中进行了配置。4.其他配置在微信小程序中有多种网络连接API,例如request连接、socket 网络连接、上传文件、下载文件等网络操作的 API。在主配置文件app.json 中可通过参数networkTimeout设置各种网络请求的超时时间。这是一个JSON对象属性,可通过以下各属性进行相关超时设置。connectSocket,设置wx.connectSocket接口网络请求的超时时间。downloadFile,设置wx.downloadFile 下载文件接口的超时时间。uploadFile,设置wx.uploadFile上传文件接口的超时时间。request,设置wx.request 网络请求接口的超时时间。以上的超时时间设置的单位都是毫秒。另外,在全局配置文件app.json中还有一个名为debug的属性,可以在开发者工具中开启debug模式,在开发者工具的控制台面板,调试信息以info的形式给出,其信息有Page 的注册、页面路由、数据更新和事件触发,可以帮助开发者快速定位一些常见的问题。页面配置每一个小程序页面也可以使用同名.json文件来对本页面的窗口表现进行配置,页面中配置项会覆盖app.json的window中相同的配置项。{ "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "微信接口功能演示", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light" }属性类型默认值描述最低版本navigationBarBackgroundColorHexColor#000000导航栏背景颜色,如#000000navigationBarTextStylestringwhite导航栏标题、状态栏颜色,仅支持black/whitenavigationBarTitleTextstring导航栏标题文字内容navigationStylestringdefault导航栏样式,仅支持以下值:default默认样式custom自定义导航栏,只保留右上角胶囊按钮。iOS/Android 微信客户端 7.0.0,Windows/Mac 端基础库 = v3.6.1homeButtonbooleanfalse在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键微信客户端 8.0.24backgroundColorHexColor#ffffff窗口的背景色backgroundColorContentHexColor#RRGGBBAA页面容器背景色,backgroundTextStylestringdark下拉 loading 的样式,仅支持dark/lightbackgroundColorTopstring#ffffff顶部窗口的背景色,仅 iOS 支持微信客户端 6.5.16backgroundColorBottomstring#ffffff底部窗口的背景色,仅 iOS 支持微信客户端 6.5.16enablePullDownRefreshbooleanfalse是否开启当前页面下拉刷新。