小程序開發到跨端

文件結構

小程序分爲 app 和 page 兩層。app 用來描述整個應用，page 用來描述各個頁面。

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

文件	必填	作用
app.js	是	小程序邏輯
app.json	是	小程序全局設置
app.acss	否	小程序全局樣式表

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

文件類型	必填	作用
js	是	頁面邏輯
axml	是	頁面結構
acss	否	頁面樣式表
json	否	頁面配置

注意： 爲了方便開發者，支付寶小程序規定這四個文件必須具有相同的路徑與文件名。

上面是支付寶小程序的文件命名規則，下面是微信小程序的規則。

文件	必填	作用
app.js	是	小程序邏輯
app.json	是	小程序全局設置
app.wxss	否	小程序全局樣式表

文件類型	必填	作用
js	是	頁面邏輯
wxml	是	頁面結構
wxss	否	頁面樣式表
json	否	頁面配置

微信文檔連接
支付寶文檔連接

都是小程序，規則都大同小異，而且每個頁面都要包含：JS頁面邏輯、樣式文件、DOM結構和JSON配置文件。

可是作爲熟悉vue開發的用戶來說，我都習慣來單文件組件，也就是之前我們在寫vue文件的時候可以把HTML模板、JS邏輯和CSS都寫到一個文件裏面，可是到了小程序非得搞得這麼麻煩，必須要建幾個不同的文件。

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script>
  data () {
    return {}
  }
</script>
<style>
  .bg {
    background: red;
  }
</style>

因此對於熟悉單文件寫法的開發來說，這個改變會給我我們造成麻煩，於是乎發現找到來市面上的跨端框架-MPX，它的寫法就是類似於單文件的寫法。

一個重要的事情值得注意，關注點分離不等於文件類型分離。怎麼看待關注點分離？，推薦大家vue文檔中的部分介紹：https://cn.vuejs.org/v2/guide/single-file-components.html

MPX文檔鏈接：地址

MPX的單文件寫法和Vue十分類似

<!--對應wxml文件-->
<template>
  <view>hello mpx</view>
</template>
<!--對應js文件-->
<script>
</script>
<!--對應wxss文件-->
<style lang="stylus">
</style>
<!--對應json文件-->
<script type="application/json">
</script>

接下來帶着大家一步一步接入MPX，一定會慢慢的喜歡這個框架。

註冊小程序

之前已經介紹來文件的結構，不管是支付寶還是微信，每個小程序都需要在 app.js 中調用 App 方法註冊小程序實例，綁定生命週期回調函數、錯誤監聽和頁面不存在監聽函數等。

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

不管是支付寶還是微信都使用App方法傳入一個配置對象的形式註冊小程序，但是生命週期各個平臺存在差異化。

那麼MPX框架如何註冊小程序呢？MPX在 app.mpx 中調用createApp方法註冊小程序。在MPX框架中文件的後綴是mpx結尾的。然後同樣的在配置對象裏面編寫各個平臺的生命週期。

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

那有人就會很好奇，各個平臺都有的生命週期我們不擔心，比如onLaunch微信和支付寶都有，但是各個平臺中生命週期遇到不一致的怎麼辦呢？比如onThemeChange生命週期只在微信裏面又，支付寶裏面沒有怎麼辦呢？MPX是如何轉換的呢？

其實對於平臺之間沒有的API在MPX是不能轉換，也就是說在轉換的過程中MPX不能單獨在支付寶裏面自己實現一個onThemeChange生命週期讓它在特定的時機去調用。只是平臺支持的API平臺纔會執行，平臺不支持的API不執行罷了。所以onThemeChange生命週期如果你在代碼裏面寫了，在微信是可以調用執行的，在支付寶裏面不會被調用執行，只有等到平臺原生支持這個屬性纔可以執行。

註冊頁面

Page(Object object)
註冊小程序中的一個頁面。接受一個 Object 類型參數，其指定頁面的初始數據、生命週期回調、事件處理函數等。

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

不管是微信還是支付寶都使用Page方法進行註冊頁面。在MPX中使用createPage方法進行註冊頁面。

createPage({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

註冊組件

Component(Object object)
創建自定義組件，接受一個 Object 類型的參數。

Component({

  behaviors: [],

  // 屬性定義（詳情參見下文）
  properties: {
    myProperty: { // 屬性名
      type: String,
      value: ''
    },
    myProperty2: String // 簡化的定義方式
  },

  data: {}, // 私有數據，可用於模板渲染

  lifetimes: {
    // 生命週期函數，可以爲函數，或一個在methods段中定義的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命週期函數，可以爲函數，或一個在methods段中定義的方法名
  attached: function () { }, // 此處attached的聲明會被lifetimes字段中的聲明覆蓋
  ready: function() { },

  pageLifetimes: {
    // 組件所在頁面的生命週期函數
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
    onMyButtonTap: function(){
      this.setData({
        // 更新屬性和數據的方法與更新頁面數據的方法類似
      })
    },
    // 內部方法建議以下劃線開頭
    _myPrivateMethod: function(){
      // 這裏將 data.A[0].B 設爲 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

不管是微信還是支付寶都使用Component方法進行創建組件，只是裏面的配置對象的參數有點不一樣。

在MPX中使用createComponent創建組件。

使用自定義組件
聲明好一個組件後，即可在其他頁面上使用。

// /pages/index/index.json
{
  "usingComponents": {
    "my-component":"/components/index/index"
  }
}