微信小程序开发二：框架

2.1 文件结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成，必须放在项目的根目录，文件列表如表21-1所示：

表21-1 小程序文件列表
一个小程序页面由四个文件组成，文件列表如表21-2所示：

表21-2小程序页面文件列表

2.2配置

微信小程序使用app.json文件来进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
以下是一个包含了所有配置选项的简单配置app.json ：

{
    "pages":[
        "pages/index/index",
        "pages/list/list",
        "pages/item/item",
        "pages/search/search",
        "pages/profile/profile"
    ],
    "window":{
        "navigationBarBackgroundColor":"#35495e",
        "navigationBarTextStyle":"white",
        "navigationBarTitleText":"电影",
        "backgroundColor":"#000000",
        "backgroundTextStyle":"light",
        "enablePullDownRefresh":false
    },
    "tabBar":{
        "color":"#999999",
        "selectedColor":"#35495e",
        "backgroundColor":"#f5f5f5",
        "borderStyle":"white",
        "list":[
            {
                "text":"首页",
                "pagePath":"pages/index/index",
                "iconPath":"images/index.png",
                "selectedIconPath":"images/index-actived.png"
            },
            {
                "text":"搜索",
                "pagePath":"pages/search/search",
                "iconPath":"images/search.png",
                "selectedIconPath":"images/search-actived.png"
            },
            {
                "text":"我的",
                "pagePath":"pages/profile/profile",
                "iconPath":"images/profile.png",
                "selectedIconPath":"images/profile-actived.png"
            }
        ],
        "position":"bottom"
    },
    "networkTimeout":{
        "request":10000,
        "connectSocket":10000,
        "uploadFile":10000,
        "downloadFile":10000
    },
    "debug":true
}

上述配置项的配置说明如表21-3所示。

表21-3小程序配置选项属性说明
Pages配置项用于接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。
Window配置项用于设置小程序的状态栏、导航条、标题、窗口背景色。可设置的属性说明如表21-4所示。

表21-4Windows属性说明
如果开发的小程序是一个多 tab 应用（客户端窗口的底部有tab栏可以切换页面），那么可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。tabBar 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。tabBar的属性说明如表21-5所示。

表21-5tabBar属性说明
networkTimeout属性可以设置各种网络请求的超时时间。说明如表21-6所示。

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

2.3逻辑层

小程序开发框架的逻辑层是由JavaScript编写。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
注册程序
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。App()注册程序的定义及成员函数实现示例如下所示。

App({
  onLaunch: function() { 
    // Do something initial when launch.
  },
  onShow: function() {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  globalData: 'I am global data'
})

成员函数属性描述如表21-7所示。

表21-7 app成员函数属性说明
注册页面
Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。Page()函数的定义及成员函数实现示例如下所示。

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

成员函数属性描述如表21-8所示。

表21-8 page成员函数属性说明
模块化
对于一些公共的代码，可以将其抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。例如下述js文件。

// common.js
function sayHello(name) {
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

在需要使用这些模块的文件中，使用 require(path) 将公共代码引入，示例代码如下所示。

var common = require('common.js')
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

2.4视图层

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。框架将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。各个部分的功能说明如下。
 WXML(WeiXin Markup language)用于描述页面的结构。类似于HTML。
 WXSS(WeiXin Style Sheet)用于描述页面的样式。类似于CSS。
 组件(Component)是视图的基本组成单元。
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。WXML 具有下述能力：数据绑定、列表渲染、条件渲染、模板、事件、引用。以下wxml文件代码展示了这些能力的使用方式。

<!--wxml-->
<view> {{message}} </view>

<view wx:for="{{array}}"> {{item}} </view>

<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

<view bindtap="add"> {{count}} </view>

相应的页面数据如下所示。

// page.js
Page({
  data: {
    message: 'Hello MINA!'
    array: [1, 2, 3, 4, 5]
    view: 'MINA'
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。WXSS 具有 CSS 大部分特性，同时也进行了尺寸单位和样式导入的扩充及修改。