微信小程序框架详解

小程序包含一个描述整体程序的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是否开启当前页面下拉刷新。