支付寶小程序框架 概述

文件結構

小程序分為app和page兩層。app描述整體程序，page描述各個頁面。

app由三個文件組成，必須放在項目的根目錄。

page由四個文件組成，分別是：

注意：為了方便開發(fā)者，我們規(guī)定這四個文件必須具有相同的路徑與文件名。

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

開發(fā)者寫的所有代碼最終將會打包成一份 JavaScript 腳本，在小程序啟動的時候運行，在小程序結束運行時銷毀。

邏輯結構

小程序的核心是一個響應式的數據綁定系統，邏輯上分為視圖層和邏輯層。這兩層始終保持同步，只要在邏輯層修改數據，視圖層就會相應的更新。

請看下面這個簡單的例子。

<!-- 視圖層 -->
<view> Hello {{name}}! </view>
<button onTap="changeName"> Click me! </button>

<!-- 邏輯層 -->
var helloData = {
  name: 'taobao'
};


// Register a Page.
Page({
  data: helloData,
  changeName(e) {
    // sent data change to view
    this.setData({
      name: 'alipay'
    })
  }
});

上面代碼中，框架自動將邏輯層數據中的name與視圖層的name進行了綁定，所以在頁面一打開的時候會顯示Hello taobao!。

用戶點擊按鈕的時候，視圖層會發(fā)送changeName的事件給邏輯層，邏輯層找到對應的事件處理函數。邏輯層執(zhí)行了setData的操作，將name從taobao變?yōu)?code>alipay，因為該數據和視圖層已經綁定了，從而視圖層會自動改變?yōu)?code>Hello alipay!。

注意：由于框架并非運行在瀏覽器中，所以 JavaScript 在 web 中的一些能力都無法使用，如 document、window等對象。

邏輯層 js 可以用 es2015 模塊化語法組織代碼，也支持從 node_modules 目錄載入第三方模塊，例如 page.js:

import util from './util'; // 載入相對路徑
import absolute from '/absolute'; // 載入項目跟路徑文件
import lodash from 'lodash'; // 載入第三方 npm 模塊

模塊名的保留字

小程序中將瀏覽器部分內置對象名（如 window、document）作保留字使用，以應對未來的不時之需。 保留字有：globalThis、global、AlipayJSBridge、fetch、self、window、document、location、XMLHttpRequest。請勿使用保留字做模塊名，否則框架會出現無法正常訪問模塊的現象。如：

import { window } from './myWindow'
console.log(window) // undefined 

上述代碼中，因為使用了保留字做模塊名，使得引入的模塊變成了 undefined 。正確的方法是不使用保留字命名模塊，或者在引入模塊的時候使用 as 關鍵字給模塊重新命名，例如：

import { window as myWindow } from './myWindow'
console.log(myWindow)

第三方 NPM 模塊

小程序支持引入第三方模塊，需先在小程序根目錄下執(zhí)行如下命令安裝該模塊：

$ npm install query-string --save

引入后即可在邏輯層中直接使用：

import queryString from 'query-string'; // 載入第三方 npm 模塊

有關 NPM 的詳細介紹，請參見 NPM 包管理。

注意： 由于node_modules 里第三方模塊代碼不會經過轉換器，為了確保各個終端兼容，node_modules 下的代碼需要轉成 ES5 格式再引用，模塊格式推薦使用 ES2015 的 import/export。同時，瀏覽器相關 web 能力同樣無法使用。