小程式

基礎知識

小程式實現原理

• 微信

iOS 執行在 webkit（蘋果開源的瀏覽器核心），Android 執行在 X5(QQ瀏覽器核心)。

• 支付寶

• 小程式呼叫系統的 API

• 小程式的架構

小程式與 Android & iOS 對比

• 生命週期

• 資料儲存

Android：SQLite、Realm、SharedPreferences、File

iOS：SQLite、Realm、plist、歸檔、NSUserDefaults、File

微信小程式：localStorage、File

支付寶小程式：localStorage

• 網路

Android：OkHttp、Volley

iOS：Alamofire

微信小程式：wx.request()

支付寶小程式：my.httpRequest()

專案結構

|-ProjectName
    |-component//template，元件
        |-common-button
    |-config
    |-images
    |-pages//頁面
        |-home 
            |-home.acss/wxss
            |-home.axml/wxml
            |-home.js
            |-home.json
 

    |-utils
    |-app.acss/wxss
    |-app.js
    |-app.json

• App

微信小程式

App({
  onLaunch: function(options) {
    // Do something initial when launch.
  },
  onShow: function(options) {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  onError: function
 
(msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

支付寶小程式

App({
  onLaunch(options) {
    // 小程式初始化
  },
  onShow(options) {
    // 小程式顯示
  },
  onHide() {
    // 小程式隱藏
  },
  onError(msg) {
    console.log(msg)
  },
  globalData: {
    foo: true,
  }
})

• Page

微信小程式

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  customData: {
    hi: 'MINA'
  }
})

支付寶小程式

Page({
  data: {
    title: "Alipay"
  },
  onLoad(query) {
    // 頁面載入
  },
  onReady() {
    // 頁面載入完成
  },
  onShow() {
    // 頁面顯示
  },
  onHide() {
    // 頁面隱藏
  },
  onUnload() {
    // 頁面被關閉
  },
  viewTap() {
    // 事件處理
    this.setData({
      text: 'Set data for updat.'
    })
  },
  go() {
    // 帶引數的跳轉，從 page/index 的 onLoad 函式的 query 中讀取 xx
    my.navigateTo('/page/index?xx=1')
  },
  customData: {
    hi: 'alipay'
  }
})

• localStorage

微信小程式

//同步儲存資料
wx.setStorageSync({
  key:"key",
  data:"value"
})

wx.getStorageSync({key: 'key'})//同步讀取資料
wx.removeStorageSync('key')//同步刪除資料

支付寶小程式：my.httpRequest()

//同步儲存資料
my.setStorageSync({
  key:"key",
  data:"value"
})

my.getStorageSync({key: 'key'})//同步讀取資料
my.removeStorageSync('key')//同步刪除資料

• 網路請求

微信小程式：wx.request()

wx.request({
  url: 'http://xxx.xx',
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  },
  fail: function(res) {
    console.log(res.data)
  },
  complete: function(res) {
    console.log(res.data)
  }
})

支付寶小程式：my.httpRequest()

my.httpRequest({
  url: 'http://xxx.xx',
  method: 'POST',
  data: {
    x: '' ,
    y: ''
  },
  dataType: 'json',
  success: function(res) {
    my.alert({content: 'success'});
  },
  fail: function(res) {
    my.alert({content: 'fail'});
  },
  complete: function(res) {
    my.alert({content: 'complete'});
  }
});

小程式的特點

1. 提前新建 WebView，準備新頁面渲染。
2. View 層和邏輯層分離，通過資料驅動，不直接操作 DOM。
3. 使用 Virtual DOM，進行區域性更新。
4. 全部使用 https，確保傳輸中安全。
5. 前端元件化開發。
6. 加入 rpx 單位，隔離裝置尺寸，方便開發。

小程式的不足

1. 小程式仍然使用 WebView 渲染，並非原生渲染
2. 需要獨立開發，不能在非微信/支付寶環境執行。
3. 開發者不可以擴充套件新元件。
4. 服務端介面返回的頭無法執行，比如：Set-Cookie。
5. 依賴瀏覽器環境的 js 庫不能使用，因為是 JSCore 執行的，沒有 window、document 物件。
6. WXSS/ASS 中無法使用本地（圖片、字型等），ASS 可以使用本地圖片。
7. WXSS/ASS 轉化成 js 而不是 css，為了相容 rpx。
8. WXSS/ASS 不支援級聯選擇器。
9. 小程式無法開啟頁面，無法拉起 APP。

更多文章