微信小程序開發---邏輯層(App Service)


再說邏輯層之前,先說說微信小程序框架(MINA)

小程序開發框架的目標是通過盡可能簡單、高效的方式讓開發者可以在微信中開發具有原生APP體驗的服務。

  • 框架提供了自己的視圖層描述語言WXML和WXSS,以及基於JavaScript的邏輯層框架,並在視圖層與邏輯層間提供了數據傳輸和事件系統,可以讓開發者可以方便的聚焦於數據與邏輯上。
  • 框架的核心是一個響應的數據綁定系統。整個系統分為兩塊視圖層(View)和邏輯層(App Service)
  • 框架可以讓數據與視圖非常簡單地保持同步。當做數據修改的時候,只需要在邏輯層修改數據,視圖層就會做相應的更新。
  • 框架管理了整個小程序的頁面路由,可以做到頁面間的無縫切換,並給以頁面完整的生命周期。開發者需要做的只是將頁面的數據,方法,生命周期函數注冊進框架中,其他的一切復雜的操作都交由框架處理。
  • 框架提供了一套基礎的組件,這些組件自帶微信風格的樣式以及特殊的邏輯,開發者可以通過組合基礎組件,創建出強大的微信小程序 。
  • 框架提供豐富的微信原生API,可以方便的調起微信提供的能力,如獲取用戶信息,本地存儲,支付功能等。

 

接下來就要介紹邏輯層

小程序開發框架的邏輯層是由JavaScript編寫,邏輯層將數據進行處理后發送給視圖層,同時接受視圖層的事件反饋。

注冊程序APP()函數

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

getApp()函數是用來獲取小程序實例,其中App()必須在app.js中注冊,且不能注冊多個。不要在定義於App()內的函數中調用getApp()使用this就可以拿到app實例。不要在onLaunch的時候調用getCurrentPage(),此時page還沒有生成。通過getApp()獲取實例之后,不要私自調用生命周期函數。

具體參數見:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html

場景值

通過什么樣的方式進入小程序。比如1001--通過發現欄界面的小程序入口進入;1005--通過頂部搜索欄搜索進入小程序;1011---通過掃描二維碼進入小程序

詳細場景值ID見:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html

頁面注冊

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

詳細見:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

初始化數據

初始化數據將作為頁面的第一次渲染。data 將會以 JSON 的形式由邏輯層傳至渲染層,所以其數據必須是可以轉成 JSON 的格式:字符串,數字,布爾值,對象,數組。

渲染層可以通過 WXML 對數據進行綁定。例如:

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

事件處理函數

在渲染層可以在組件中加入事件綁定,當達到觸發事件時,就會執行 Page 中定義的事件處理函數。例如

 

<view bindtap="viewTap"> click me </view>

 

Page({
  viewTap: function() {
    console.log('view tap')
  }
})

常用函數

Page.prototype.route:route 字段可以獲取到當前頁面的路徑。

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

setData() 參數格式:key-value對形式,注意的是直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的,還會造成數據不一致

 生命周期

頁面路由

路由簡單來說就是數據包從源到目的地,那么頁面路由就是一個頁面到另一個頁面的跳轉

會發生頁面跳轉的情況有

  • 小程序啟動
  • 打開新頁面---調用 API wx.navigateTo 或使用組件 <navigator open-type="navigateTo"/>
  • 頁面重定向---調用 API wx.redirectTo 或使用組件 <navigator open-type="redirectTo"/>
  • 頁面返回---調用 API wx.navigateBack 或使用組件<navigator open-type="navigateBack">或用戶按左上角返回按鈕
  • tarbar切換

詳細見:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

 文件作用域

在 JavaScript 文件中聲明的變量和函數只在該文件中有效;不同的文件中可以聲明相同名字的變量和函數,不會互相影響。

通過全局函數 getApp() 可以獲取全局的應用實例,如果需要全局的數據可以在 App() 中設置

*模塊化

可以將一些公共的代碼抽離成為一個單獨的 js 文件,作為一個模塊。模塊只有通過 module.exports 或者 exports 才能對外暴露接口。注意的是exports 是 module.exports 的一個引用,因此在模塊里邊隨意更改 exports 的指向會造成未知的錯誤。所以更推薦開發者采用 module.exports來暴露模塊接口,除非你已經清晰知道這兩者的關系。

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

module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
var common = require('common.js')//通過require(path)將公共代碼引入
Page({
  helloMINA: function() {
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

API

小程序開發框架提供豐富的微信原生 API,可以方便的調起微信提供的能力,如獲取用戶信息,本地存儲,支付功能等。詳細介紹請參考 API 文檔


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM