1.配置文件

page.json來決定

初始化項目的時候，文件自動生成app.json來對小程序進行全局配置。

2.邏輯層（App Server）

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

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

1)增加 App 和 Page方法，進行程序和頁面的注冊。

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

App.prototype.getCurrentPage()
getCurrentPage() 函數(shù)用戶獲取當前頁面的實例。

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

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

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

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

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

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

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

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

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

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

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

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

b)onShow: 頁面顯示

每次打開頁面都會調(diào)用一次。

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

一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當，可以和視圖層進行交互

對界面的設(shè)置如wx.setNavigationBarTitle請在onReady之后設(shè)置

d)onHide: 頁面隱藏

當navigateTo或底部tab切換時調(diào)用。

e)onUnload: 頁面卸載

當redirectTo或navigateBack的時候調(diào)用。

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

onPullDownRefresh: 下拉刷新

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

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

除了初始化數(shù)據(jù)和生命周期函數(shù)，Page 中還可以定義一些特殊的函數(shù)：事件處理函數(shù)。在渲染層可以在組件中加入事件綁定，當達到觸發(fā)事件時，就會執(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ā)送到視圖層，同時改變對應(yīng)的this.data的值。

注意：
1.直接修改 this.data無效，無法改變頁面的狀態(tài)，還會造成數(shù)據(jù)不一致。
2.單次設(shè)置的數(shù)據(jù)不能超過1024kB，請盡量避免一次設(shè)置過多的數(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）.頁面的路由

小程序中所有頁面的路由全部由框架進行管理
路由方式：

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

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

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

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

e.Tab切換

多Tab模式下用戶切換Tab

9）文件作用域

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

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

10)模塊化

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

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

// 使用

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

11)API

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

wx.on開頭的API是監(jiān)聽某個時間發(fā)生的API接口，接受一個CALLBACK函數(shù)作為參數(shù)。當該時間觸發(fā)的時候，會調(diào)用callback函數(shù)。
如果沒有特殊約定，其他的api接口都接受一個object作為參數(shù)。
object中可以指定success, fail, complete來接收接口調(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)用成功、失敗都會執(zhí)行）

這里舉例幾個常用的api接口：

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

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

wx.getStorage  // 獲取本地數(shù)據(jù)緩存
wx.setStorage  // 設(shè)置本地數(shù)據(jù)緩存
wx.clearStorage // 清除本地數(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è)計的一套標簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(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
         })
    }
})