1. 程式人生 > >微信小程序-03-小程序開發框架

微信小程序-03-小程序開發框架

gen 生命 ava csdn href work var 能夠 程序

微信小程序-03-小程序開發框架

  • 官方文檔:
  • https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html

小程序開發框架

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

  • 框架提供了自己的視圖層描述語言 WXML 和 WXSS,以及基於 JavaScript 的邏輯層框架,並在視圖層與邏輯層間提供了數據傳輸和事件系統,讓開發者能夠專註於數據與邏輯

響應的數據綁定

  • 框架的核心是一個響應的數據綁定系統
  • 整個小程序框架系統分為兩部分:視圖層(View)和邏輯層(App Service)
  • 框架可以讓數據與視圖非常簡單地保持同步。當做數據修改的時候,只需要在邏輯層修改數據,視圖層就會做相應的更新

  • 通過這個簡單的例子來看:
//view標簽假裝是div,顯示內容:Hello和一個變量占位符(用來獲取用戶的用戶名)
<view> Hello {{name}}! </view>

//一個按鈕綁定事件,事件名:changeName
<button bindtap="changeName"> Click me! </button>
//這是我們的應用程序服務
//定義一個類
var helloData = {
  name: 'WeChat'
}

//註冊頁面
Page({
  data: helloData,
  changeName: function(e) {
  
    //發送數據更改為視圖顯示
    this.setData({
      name: 'MINA'
    })
  }
})
  • 開發者通過框架將邏輯層數據中的 name 與視圖層的 name 進行了綁定,所以在頁面一打開的時候會顯示 Hello WeChat!

  • 當點擊按鈕的時候,視圖層會發送 changeName 的事件給邏輯層,邏輯層找到並執行對應的事件處理函數

  • 回調函數觸發後,邏輯層執行 setData 的操作,將 data 中的 name 從 WeChat 變為 MINA,因為該數據和視圖層已經綁定了,從而視圖層會自動改變為 Hello MINA!

頁面管理

  • 框架 管理了整個小程序的頁面路由,可以做到頁面間的無縫切換,並給以頁面完整的生命周期。開發者需要做的只是將頁面的數據、方法、生命周期函數註冊到 框架 中,其他的一切復雜的操作都交由 框架 處理

基礎組件

  • 框架 提供了一套基礎的組件,這些組件自帶微信風格的樣式以及特殊的邏輯,開發者可以通過組合基礎組件,創建出強大的微信小程序

豐富的 API

  • 框架 提供豐富的微信原生 API,可以方便的調起微信提供的能力,如獲取用戶信息,本地存儲,支付功能等

更多文章鏈接:微信小程序

微信小程序-03-小程序開發框架