1.配置文件

page.json來(lái)決定

初始化項(xiàng)目的時(shí)候，文件自動(dòng)生成app.json來(lái)對(duì)小程序進(jìn)行全局配置。

2.邏輯層（App Server）

小程序開(kāi)發(fā)框架的邏輯層是由JavaScript編寫(xiě)。

邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。 在 JavaScript的基礎(chǔ)上，做了一些修改，以方便地開(kāi)發(fā)小程序。

1)增加 App 和 Page方法，進(jìn)行程序和頁(yè)面的注冊(cè)。

App（）函數(shù)用來(lái)注冊(cè)一個(gè)小程序。接受一個(gè) object 參數(shù)，其指定小程序的生命周期函數(shù)等。

App.prototype.getCurrentPage()
getCurrentPage() 函數(shù)用戶獲取當(dāng)前頁(yè)面的實(shí)例。

var appInstance = getApp()
console.log(appInstance.globalData) // I am global data

2）App()叫做注冊(cè)程序，Page()叫做注冊(cè)頁(yè)面

Page（）接受一個(gè) object參數(shù),
指定頁(yè)面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等

3）初始化數(shù)據(jù)

初始化數(shù)據(jù)將作為頁(yè)面的第一次渲染。
data將會(huì)以 JSON 的形式由邏輯層傳至渲染層，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成JSON的格式：字符串，數(shù)字，布爾值，對(duì)象，數(shù)組。

渲染層可以通過(guò)WXML 對(duì)數(shù)據(jù)進(jìn)行綁定。
eg:下面這個(gè)是一段wxml的代碼

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

下面這個(gè)是一段.js代碼，data是初始化頁(yè)面數(shù)據(jù)

Page({
   data: {
   text: 'init data',
   array: [{msg: '1'}, {msg: '2'}]
   }
})

4）頁(yè)面的生命周期函數(shù)

a)onLoad: 頁(yè)面加載
一個(gè)頁(yè)面只會(huì)調(diào)用一次。
參數(shù)可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。這個(gè)是什么意思呢？

onLoad:function(options){
    // options 就是參數(shù)
    // options.redirect
}

b)onShow: 頁(yè)面顯示

每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次。

c)onReady: 頁(yè)面初次渲染完成

一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互

對(duì)界面的設(shè)置如wx.setNavigationBarTitle請(qǐng)?jiān)趏nReady之后設(shè)置

d)onHide: 頁(yè)面隱藏

當(dāng)navigateTo或底部tab切換時(shí)調(diào)用。

e)onUnload: 頁(yè)面卸載

當(dāng)redirectTo或navigateBack的時(shí)候調(diào)用。

5)頁(yè)面相關(guān)事件處理函數(shù)

onPullDownRefresh: 下拉刷新

監(jiān)聽(tīng)用戶下拉刷新事件。
需要在config的window選項(xiàng)中開(kāi)啟enablePullDownRefresh。

6)事件處理函數(shù)

除了初始化數(shù)據(jù)和生命周期函數(shù)，Page 中還可以定義一些特殊的函數(shù)：事件處理函數(shù)。在渲染層可以在組件中加入事件綁定，當(dāng)達(dá)到觸發(fā)事件時(shí)，就會(huì)執(zhí)行Page 中定義的事件處理函數(shù)。

eg:

// .wxml
<view bindtap="tap_view"> click me!</view>

// .js
Page({
    tap_view:function(){
        console.log('view taped!');
    }
})

7)Page.prototype.setData()

setData函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層，同時(shí)改變對(duì)應(yīng)的this.data的值。

注意：
1.直接修改 this.data無(wú)效，無(wú)法改變頁(yè)面的狀態(tài)，還會(huì)造成數(shù)據(jù)不一致。
2.單次設(shè)置的數(shù)據(jù)不能超過(guò)1024kB，請(qǐng)盡量避免一次設(shè)置過(guò)多的數(shù)據(jù)。

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

//index.js
Page({
  data: {
    text: 'init data',
    array: [{text: 'init data'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function() {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
  changeItemInArray: function() {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[0].text':'changed data'
    })
  },
  changeItemInObject: function(){
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function() {
    this.setData({
      'newField.text': 'new data'
    })
  }
})

這里的this指的是.js文件

8）.頁(yè)面的路由

小程序中所有頁(yè)面的路由全部由框架進(jìn)行管理
路由方式：

a.初始化
打開(kāi)新頁(yè)面：調(diào)用 API wx.navigateTo 或使用組件<navigator />（節(jié)點(diǎn)方式）

b.打開(kāi)新頁(yè)面,相當(dāng)于iOS中的nav的push
調(diào)用 API wx.navigateTo 或使用組件 <navigator />，調(diào)用后路由前頁(yè)面函數(shù)：onHide

c.頁(yè)面重定向
調(diào)用 API wx.redirectTo 或使用組件 <navigator />,調(diào)用后路由前頁(yè)面函數(shù)：onUnload

d.頁(yè)面返回
調(diào)用 API wx.navigateBack或用戶按左上角返回按鈕

e.Tab切換

多Tab模式下用戶切換Tab

9）文件作用域

在 JavaScript 文件中聲明的變量和函數(shù)只在該文件中有效；不同的文件中可以聲明相同名字的變量和函數(shù)，不會(huì)互相影響。

通過(guò)全局函數(shù) getApp() 可以獲取全局的應(yīng)用實(shí)例，如果需要全局的數(shù)據(jù)可以在 App() 中設(shè)置

10)模塊化

我們可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的js 文件，作為一個(gè)模塊。模塊只有通過(guò) module.exports
才能對(duì)外暴露接口。

module.exports = {
    sayHello: sayHello
}
function sayHello(name){
    console.log('Hello' + name + '!');
}

// 使用

var common = require('common.js');   
Page({
    helloMaer:function(){
        common.sayHello('Maer');
    }
})

11)API

小程序開(kāi)發(fā)框架提供許多原生api，可以方便的掉漆微信提供的功能，eg:獲取用戶信息，本地存儲(chǔ)，微信支付等.

wx.on開(kāi)頭的API是監(jiān)聽(tīng)某個(gè)時(shí)間發(fā)生的API接口，接受一個(gè)CALLBACK函數(shù)作為參數(shù)。當(dāng)該時(shí)間觸發(fā)的時(shí)候，會(huì)調(diào)用callback函數(shù)。
如果沒(méi)有特殊約定，其他的api接口都接受一個(gè)object作為參數(shù)。
object中可以指定success, fail, complete來(lái)接收接口調(diào)用結(jié)果。

 success     Function        接口調(diào)用成功的回調(diào)函數(shù)
 fail        Function        接口調(diào)用失敗的回調(diào)函數(shù)
 complete    Function        接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

這里舉例幾個(gè)常用的api接口：

wx.request    發(fā)起的是https請(qǐng)求。**一個(gè)微信小程序，同時(shí)只能有5個(gè)網(wǎng)絡(luò)請(qǐng)求連接。**

數(shù)據(jù) API 列表：

wx.getStorage  // 獲取本地?cái)?shù)據(jù)緩存
wx.setStorage  // 設(shè)置本地?cái)?shù)據(jù)緩存
wx.clearStorage // 清除本地?cái)?shù)據(jù)緩存

獲取網(wǎng)絡(luò)類型

wx.getNetworkType(OBJECT)

eg：

wx.getNetworkType({
    success:function(res){
        var networkType = res.networkType;  // 返回網(wǎng)絡(luò)類型2g,3g,4g,wifi
    }
})

界面 API 列表：

參考：https://mp.weixin.qq.com/debug/wxadoc/dev/api/

WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。

wxml作用主要有：數(shù)據(jù)綁定、列表渲染、條件渲染、模板、事件、引用

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

// page.js

// wxml
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
    data:{
        array：[0, 1, 2, 3, 4]
    }
})

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

// page.js
Page({
     data: { 
        view: 'MINA' 
     }
 })

 <block wx:if="{{true}}"> 
    <view> view1 </view> 
    <view> view2 </view>
</block>

Page({
    data:{
         staffA:{firstname:'a', lastname:'b'}
    }
})

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

Page({
    data:{
         count:1
    }
    add: function(e){
         this.setData({
             count:this.data.count + 1
         })
    }
})