注冊(cè)登錄

微信小程序使用的框架:邏輯層和視圖層

2017-12-05
導(dǎo)讀:2017年6月14日,微信小程序使用的框架已經(jīng)是當(dāng)下最熱門的話題,下面將從多方面來談?wù)勎⑿判〕绦蚴褂玫目蚣芟嚓P(guān)的內(nèi)容。...

微信小程序使用的框架已經(jīng)是當(dāng)下最熱門的話題,下面將從多方面來談?wù)勎⑿判〕绦蚴褂玫目蚣芟嚓P(guān)的內(nèi)容。

小程序的邏輯層由js完成,視圖層由微信提供的WXML(WeiXin Mark Language)和WXSS(WeiXin Style Sheet)文件來完成。

其中官方給出的解釋:頁面的腳本邏輯是在JsCore中運(yùn)行,JsCore是一個(gè)沒有窗口對(duì)象的環(huán)境,所以不能在腳本中使用window,也無法在腳本中操作組件。同時(shí)由于zepto/jQuery 會(huì)使用到window對(duì)象和document對(duì)象,所以在小程序中均無法使用。

微信小程序使用的框架:邏輯層和視圖層

邏輯層

邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層,同時(shí)接受視圖層的事件反饋。 在 JavaScript 的基礎(chǔ)上,微信增加和修改了以下特性:

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

  • 增加 getApp 和 getCurrentPages 方法,分別用來獲取 App 實(shí)例和當(dāng)前頁面棧。

  • 提供豐富的 API,如微信用戶數(shù)據(jù),掃一掃,支付等微信特有能力。

  • 每個(gè)頁面有獨(dú)立的作用域,并提供模塊化能力。

  • 由于框架并非運(yùn)行在瀏覽器中,所以 JavaScript 在 web 中一些能力都無法使用,如 document,window 等。

  • 開發(fā)者寫的所有代碼最終將會(huì)打包成一份 JavaScript,并在小程序啟動(dòng)的時(shí)候運(yùn)行,直到小程序銷毀。類似 ServiceWorker,所以邏輯層也稱之為 App Service。

注冊(cè)程序

quikstart示例中App.js文件內(nèi)容如下:

 

//app.js

App({

  onLaunch: function () {

    //調(diào)用API從本地緩存中獲取數(shù)據(jù)

    var logs = wx.getStorageSync('logs') || []

    logs.unshift(Date.now())

    wx.setStorageSync('logs', logs)

  },

  getUserInfo:function(cb){

    var that = this

    if(this.globalData.userInfo){

      typeof cb == "function" && cb(this.globalData.userInfo)

    }else{

      //調(diào)用登錄接口

      wx.login({

        success: function () {

          wx.getUserInfo({

            success: function (res) {

              that.globalData.userInfo = res.userInfo

              typeof cb == "function" && cb(that.globalData.userInfo)

            }

          })

        }

      })

    }

  },

  globalData:{

    userInfo:null

  }

})

 

App()函數(shù)

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

其中onLaunch為系統(tǒng)的生命周期函數(shù),getUserInfo和globalData分別為用戶自定義函數(shù)和數(shù)據(jù)結(jié)構(gòu)對(duì)象。

App() 函數(shù)的object參數(shù)說明:

屬性

類型

描述

觸發(fā)時(shí)機(jī)

onLaunchFunction生命周期函數(shù)–監(jiān)聽小程序初始化當(dāng)小程序初始化完成時(shí),會(huì)觸發(fā) onLaunch(全局只觸發(fā)一次)

onShowFunction生命周期函數(shù)–監(jiān)聽小程序顯示當(dāng)小程序啟動(dòng),或從后臺(tái)進(jìn)入前臺(tái)顯示,會(huì)觸發(fā) onShow

onHideFunction生命周期函數(shù)–監(jiān)聽小程序隱藏當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái),會(huì)觸發(fā) onHide

其他Any開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中,用 this 可以訪問

getApp()函數(shù)

我們提供了全局的 getApp() 函數(shù),可以獲取到小程序?qū)嵗?/span>

示例代碼:

 

// other.js

var appInstance = getApp()

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

 

注冊(cè)頁面

index頁面中index.js代碼如下:

 

//index.js

//獲取應(yīng)用實(shí)例

var app = getApp()

Page({

  data: {

    motto: 'Hello World',

    userInfo: {}

  },

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

  bindViewTap: function() {

    wx.navigateTo({

      url: '../logs/logs'

    })

  },

  onLoad: function () {

    console.log('onLoad')

    var that = this

    //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)

    app.getUserInfo(function(userInfo){

      //更新數(shù)據(jù)

      that.setData({

        userInfo:userInfo

      })

    })

  }

})

 

Page()函數(shù)

Page() 函數(shù)用來注冊(cè)一個(gè)頁面。接受一個(gè) object 參數(shù),其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。

object 參數(shù)說明:

屬性

類型

描述

dataObject頁面的初始數(shù)據(jù)

onLoadFunction生命周期函數(shù)–監(jiān)聽頁面加載

onReadyFunction生命周期函數(shù)–監(jiān)聽頁面初次渲染完成

onShowFunction生命周期函數(shù)–監(jiān)聽頁面顯示

onHideFunction生命周期函數(shù)–監(jiān)聽頁面隱藏

onUnloadFunction生命周期函數(shù)–監(jiān)聽頁面卸載

onPullDownRefreshFunction頁面相關(guān)事件處理函數(shù)–監(jiān)聽用戶下拉動(dòng)作

onReachBottomFunction頁面上拉觸底事件的處理函數(shù)

其他Any開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中,在頁面的函數(shù)

Page還提供了setData() 和getCurrentPages()函數(shù)。

setData()函數(shù):

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

注意:

  1. 直接修改 this.data 無效,無法改變頁面的狀態(tài),還會(huì)造成數(shù)據(jù)不一致。

  2. 單次設(shè)置的數(shù)據(jù)不能超過1024kB,請(qǐng)盡量避免一次設(shè)置過多的數(shù)據(jù)。

getCurrentPages()函數(shù):

getCurrentPages() 函數(shù)用于獲取當(dāng)前頁面棧的實(shí)例,以數(shù)組形式按棧的順序給出,第一個(gè)元素為首頁,最后一個(gè)元素為當(dāng)前頁面。

注意:不要嘗試修改頁面棧,會(huì)導(dǎo)致路由以及頁面狀態(tài)錯(cuò)誤。

API

微信提供了諸多JavaScript形式的微信原生 API,可以方便的調(diào)起微信提供的能力,如獲取用戶信息,本地存儲(chǔ),支付功能等。

API將在專門的章節(jié)介紹。

視圖層WXML

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

用以下一些簡(jiǎn)單的例子來看看 WXML 具有什么能力:

數(shù)據(jù)綁定

 

<!--wxml-->

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

// page.js

Page({

  data: {

    message: 'Hello MINA!'

  }

})

 

列表渲染

 

<!--wxml-->

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

// page.js

Page({

  data: {

    array: [1, 2, 3, 4, 5]

  }

})

 

條件渲染

 

<!--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'

  }

})

 

模板

 

<!--wxml-->

<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>

// page.js

Page({

  data: {

    staffA: {firstName: 'Hulk', lastName: 'Hu'},

    staffB: {firstName: 'Shang', lastName: 'You'},

    staffC: {firstName: 'Gideon', lastName: 'Lin'}

  }

})

 

事件

 

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

Page({

  data: {

    count: 1

  },

  add: function(e) {

    this.setData({

      count: this.data.count + 1

    })

  }

})

 

 


重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)

電話咨詢 微信咨詢 預(yù)約演示 0元開店