微信小程序框架简介 时间：2017-05-18     来源：移动互联网学院

1什么是微信小程序

首先来看看张小龙同学是怎么说的：

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。

微信小程序被认为是“跨平台的操作系统”，行业内反应热烈，更多的担心在于诸多App(移动端应用)将面临冲击。

2微信小程序项目结构

1、 app.js

app.js是整个程序的入口js文件。

App函数是用来注册的，传入参数生成一个主程序，它定义了整个程序相关的一些生命周期，传入json对象作为参数。

App生成的对象是全局的，可以通过var appInstance = getApp();来拿到app实例。globalData是App里定义的全局都可以使用的数据对象。App函数在全局只能调用一次，而且必须在app.js中调用。

注意：onLaunch只是数据的初始化，还没有页面生成，所以这个函数里不要去调用getCurrentPage函数。

2、 app.json

app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释

我们使用app.json文件来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

属性 类型     必填 描述

pages String Array  是         设置页面路径

window Object     否         设置默认页面的窗口表现

tabBar Object     否         设置底部 tab 的表现

debug Boolean     否         设置是否开启 debug 模式

1.pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

2.window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性                  类型 默认值 描述

navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如"#000000"

navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white

navigationBarTitleText String 导航栏标题文字内容

backgroundColor          HexColor #ffffff 窗口的背景色

backgroundTextStyle          String dark 仅支持 dark/light

enablePullDownRefresh Boolean false 是否开启下拉刷新

3. tabBar

如果我们的小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），那么我们可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性         类型 必填 默认值 描述

color            HexColor 是 tab 上的文字默认颜色

selectedColor HexColor 是 tab 上的文字选中时的颜色

backgroundColor HexColor 是 tab 的背景色

borderStyle            String 否 black 边框的颜色仅支持 black/white

list            Array 是 tab 的列表，少2个、多5个 tab

position            String 否 bottom 可选值 bottom、top

其中 list 接受一个数组，数组中的每个项都是一个对象，其属性值如下：

属性         类型 必填 说明

pagePath     String 是 页面路径，必须在 pages 中先定义

text           String 是 tab 上按钮文字

iconPath     String 是 图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px

selectedIconPath String 是 选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px

4. debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。

3、 app.wxss

wxss文件就相当于css文件，用来定义一些页面的样式。理解这一点，再来看app.wxss就可以知道，它定义的应该是一些整个app的页面中，共同用到的一些样式。

3页面配置

一个框架页面由四个文件组成，分别是js、wxml、wxss、json，它们主要分为四层。

js主要用来实现程序的逻辑层和数据层

wxml和wxss用来实现程序的view视图层

json就是用来写一些配置信息

它们的关系是，逻辑层处理数据后，返回到视图层显示出来，而视图层的用户操作事件反馈回逻辑层。虽然有这么多文件，但后程序发布的时候，所有的文件都会被编译成js文件，并合并到同一个js文件里面、压缩。需要注意的是，要跟平时做h5开发区别开发，虽然js语法相通，但像document，window这些浏览器的全局对象是用不了的，这一点要特别注意。但有很多用wx来引用的接口，这些接口目测就是微信从底层暴露出来给微信小程序调用的吧。

页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

页面的.json只能设置 window 相关的配置项，以决定本页面的窗口表现，所以无需写 window 这个键

其中，wxml和wxss类似于HTML5中的html文件和css文件。这里只说明一下json文件里的一些常用的配置。

属性                     类型 默认值 描述

navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如"#000000"

navigationBarTextStyle String white 导航栏标题颜色，仅支持 black/white

navigationBarTitleText String 导航栏标题文字内容

backgroundColor         HexColor #ffffff 窗口的背景色

backgroundTextStyle           String dark 下拉背景字体、loading 图的样式，仅支持 dark/light

enablePullDownRefresh Boolean false 是否开启下拉刷新，详见页面相关事件处理函数。

disableScroll           Boolean false 设置为 true 则页面整体不能上下滚动；只在 page.json 中有效，无法在 app.json 中设置该项

4其他文件

Pages（开发者自行创建）目录是你的页面目录，但不是一定需要叫Pages

Utils （开发者自行创建）在本例中是工具类库目录，不是一定需要存在

在开发过程中好遵循以上目录结构，特别Pages，没个页面独立一个文件夹，因为每个页面有自己独立的样式或者Js。未来方便管理。 但是，如果有公共样式的存在，请写在app.wxss