IOS程序員學微信小程序開發系列《四》：邏輯層、視圖層、配置文件

做者：廖馬兒

1.配置文件

page.json來決定

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

2.邏輯層（App Server）

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

邏輯層將數據進行處理後發送給視圖層，同時接受視圖層的事件反饋。 在 JavaScript的基礎上，作了一些修改，以方便地開發小程序。

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

App（）函數用來註冊一個小程序。接受一個 object 參數，其指定小程序的生命週期函數等。

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

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

2）App()叫作註冊程序，Page()叫作註冊頁面

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

3）初始化數據

初始化數據將做爲頁面的第一次渲染。
data將會以 JSON 的形式由邏輯層傳至渲染層，因此其數據必須是能夠轉成JSON的格式：字符串，數字，布爾值，對象，數組。

渲染層能夠經過WXML 對數據進行綁定。
eg:下面這個是一段wxml的代碼

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

下面這個是一段.js代碼，data是初始化頁面數據

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

4）頁面的生命週期函數

a)onLoad: 頁面加載
一個頁面只會調用一次。
參數能夠獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。這個是什麼意思呢？

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

b)onShow: 頁面顯示

每次打開頁面都會調用一次。

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

一個頁面只會調用一次，表明頁面已經準備穩當，能夠和視圖層進行交互

對界面的設置如wx.setNavigationBarTitle請在onReady以後設置

d)onHide: 頁面隱藏

當navigateTo或底部tab切換時調用。

e)onUnload: 頁面卸載

當redirectTo或navigateBack的時候調用。

5)頁面相關事件處理函數

onPullDownRefresh: 下拉刷新

監聽用戶下拉刷新事件。
須要在config的window選項中開啓enablePullDownRefresh。

6)事件處理函數

除了初始化數據和生命週期函數，Page 中還能夠定義一些特殊的函數：事件處理函數。在渲染層能夠在組件中加入事件綁定，當達到觸發事件時，就會執行Page 中定義的事件處理函數。

eg:

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

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

7)Page.prototype.setData()

setData函數用於將數據從邏輯層發送到視圖層，同時改變對應的this.data的值。

注意：
1.直接修改 this.data無效，沒法改變頁面的狀態，還會形成數據不一致。
2.單次設置的數據不能超過1024kB，請儘可能避免一次設置過多的數據。

<!--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.初始化
打開新頁面：調用 API wx.navigateTo 或使用組件<navigator />（節點方式）

b.打開新頁面,至關於iOS中的nav的push
調用 API wx.navigateTo 或使用組件 <navigator />，調用後路由前頁面函數：onHide

c.頁面重定向
調用 API wx.redirectTo 或使用組件 <navigator />,調用後路由前頁面函數：onUnload

d.頁面返回
調用 API wx.navigateBack或用戶按左上角返回按鈕

e.Tab切換

多Tab模式下用戶切換Tab

9）文件做用域

在 JavaScript 文件中聲明的變量和函數只在該文件中有效；不一樣的文件中能夠聲明相同名字的變量和函數，不會互相影響。

經過全局函數 getApp() 能夠獲取全局的應用實例，若是須要全局的數據能夠在 App() 中設置

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

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

wx.on開頭的API是監聽某個時間發生的API接口，接受一個CALLBACK函數做爲參數。當該時間觸發的時候，會調用callback函數。
若是沒有特殊約定，其餘的api接口都接受一個object做爲參數。
object中能夠指定success, fail, complete來接收接口調用結果。

success Function 接口調用成功的回調函數
fail Function 接口調用失敗的回調函數
complete Function 接口調用結束的回調函數（調用成功、失敗都會執行）
這裏舉例幾個經常使用的api接口：

wx.request 發起的是https請求。一個微信小程序，同時只能有5個網絡請求鏈接。
數據 API 列表：

wx.getStorage // 獲取本地數據緩存
wx.setStorage // 設置本地數據緩存
wx.clearStorage // 清除本地數據緩存
獲取網絡類型

wx.getNetworkType(OBJECT)

eg：

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

界面 API 列表：

參考：https://mp.weixin.qq.com/debu...

3.視圖層

框架的視圖層由WXML 與 WXSS編寫，由組件來進行展現。

將邏輯層的數據反應成視圖，同時將視圖層的事件發送給邏輯層。

組件(Component)是視圖的基本組成單元。

1)WXML

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構。

wxml做用主要有：數據綁定、列表渲染、條件渲染、模板、事件、引用

數據綁定：

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

// page.js
Page({
data:{
message: 'Hello world'!
}
})

列表渲染

// 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/>並非一個組件，它僅僅是一個包裝元素，不會在頁面中作任何渲染，只接受控制屬性

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

模板

總結：在屬性中的值都要加「」.<template is="staffName" data="{{...staffA}}"></template>
擴展運算符...來將一個對象展開

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

注意： 若是js:

Page({
data:{
foo:'a',
bar:'b'
}
})`

<template data={{foo, bar}}> data組合對象爲：{foo:'a', bar:'b'}

<template data={{'A':foo, 'B':bar}}> data組合對象爲:{'A':'a', 'B':'b'}

模板擁有本身的做用域，只能使用data傳入的數據。

事件
eg:

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

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

2)wxml

爲了適應廣大的前端開發者，WXSS具備 CSS 大部分特性。 同時爲了更適合開發微信小程序，對 CSS 進行了擴充以及修改。

尺寸單位

rpx（responsive pixel） 規定屏幕寬爲750rpx

樣式導入

使用@import

語句能夠導入外聯樣式表，@import

後跟須要導入的外聯樣式表的相對路徑，用;

表示語句結束。

相關連接：
IOS程序員學微信小程序開發系列《一》：入門及框架
IOS程序員學微信小程序開發系列《二》：組件，API，工具
IOS程序員學微信小程序開發系列《三》：經驗及知識點