因為微信的普及，微信小程式得到極大的推廣，從剛開始的受人詬病，到如今的每個公司人手一個微信小程式。各大手機廠商意識到了危機，於是八大廠商聯合起來推出了快應用，意圖從微信小程式的圍剿中殺出一條血路。這裡就是我對快應用的一些簡單的理解。

快應用的優劣

快應用的優勢：原生程式對於一些使用者來說操作繁瑣，需要下載安裝等一系列操作，使用者體驗並不是很好，而web應用那更不用說了，體驗、速度、功能都比不上原生，我寧願下載安裝都不願意用web。而快應用實現了無需安裝，即點即用提高了使用者的體驗效果。在速度的方面上，各大廠商在其平臺上支援了各類的系統介面，基本接近原生的程式，提高使用者體驗。並且十大手機廠商擁有非常大的使用者基數，這會給我們帶來足夠的流量。
快應用的劣勢：微信小程式已然滲透進各個行業，快應用的這些優勢能否讓各個公司將工作重點和精力投入到這裡邊，仍然是個問題。而且使用者是否願意放棄都在使用的微信，而轉入投入未知的快應用，也是一個問題。還有一個問題就是如今的快應用只支援安卓，那蘋果的部分是不是有需要人去支援，是不是又加入一定的勞動成本。

環境搭建

建立專案前我們先需要使用tookit工具用於管理專案和手機偵錯程式用於預覽效果 pc端使用

    npm install -g hap-toolkit
複製程式碼

用於安裝toolkit,電腦端可以使用

    hap -V
複製程式碼

用來檢測toolkit是否安裝成功。手機偵錯程式截圖如下：

可以看到我們除錯程式有兩種方法，第一種掃碼下載，第二種將生成的rpk檔案傳到手機，然後手機手動找到rpk檔案，然後安裝。掃碼安裝的優勢在於可以高頻率更新程式碼，但是需要讓電腦和手機在同一區域網。本地安裝的優勢在於更快，掃碼安裝稍微大點的檔案需要特別長的時間。還有個問題就是在於如果使用本地安裝你需要知道自己安裝包在哪兒，不然到時候找安裝包特別麻煩。

專案初始化

hap是快應用配置的一個腳手架工具，其中專案建立，啟動，和釋出都離不開他，首先建立專案使用

    hap init <projectName>
複製程式碼

啟動專案後我們就可以進入專案，看看目錄結構，下面是他的目錄結構截圖

node_modules資料夾是我們通過使用

    npm install
複製程式碼

安裝所需要的依賴，這裡我們來看看package.json檔案的scripts的內容

 "scripts": {
    "server": "hap server",
    "postinstall": "hap postinstall",
    "debug": "hap debug",
    "build": "hap build",
    "release": "hap release",
    "watch": "hap watch"
  },
複製程式碼

可以看到的是他的指令碼命令包括: server,postinstall,debug,build,release,watch。
這幾個分別的意義代表啟動HTTP服務，轉換Nodejs模組檔案，啟動除錯環境，編譯打包，釋出程式，監聽檔案變化後編譯。在看看src/manifest.json檔案的內容。

icon代表程式儲存到手機上呈現的圖示，features代表在本app中所需要使用到的模組，例如在本檔案中，我們需要使用的就有三個模組prompt,router,shortcut,分別代表彈窗、路由跳轉、桌面圖示。注意，如果我們不在這兒提出來，那麼在程式中我們就無法使用這些模組config中logLevel用於日誌的顯示級別。在來看router的配置，entry代表入口檔案，pages就是每個頁面，每個頁面入口檔案用component進行配置。這些看英文都能看懂啥意思，menu用於展示是否顯示右上角的選單欄是否顯示，pages用於表示每一頁單獨的配置。在看看src/uils.js中的內容,下面是一個函式showMenu的程式碼

function showMenu () {
  const prompt = require('@system.prompt')
  const router = require('@system.router')
  const appInfo = require('@system.app').getInfo()
  prompt.showContextMenu({
    itemList: ['儲存桌面', '關於', '取消'],
    success: function (ret) {
      switch (ret.index) {
      case 0:
        // 儲存桌面
        createShortcut()
        break
      case 1:
        // 關於
        router.push({
          uri: '/About',
          params: {
            name: appInfo.name,
            icon: appInfo.icon
          }
        })
        break
      case 2:
        // 取消
        break
      default:
        prompt.showToast({
          message: 'error'
        })
      }
    }
  })
}
複製程式碼

prompt和router模組在前面已經提到，具體的api可看原始碼，app這個模組代表這個app的一些基本資訊，getInfo()用於獲取這個app的基本資訊，在這裡呼叫了showContextMenu()方法，用於展示彈窗的一些資訊，後邊的自己也能看明白，就不一一介紹了。以我接觸最多的vue來說，這個快應用的寫法和vue和類似(哈哈，看來vue真的簡單好用)，在來看看src/Demo/index.ux檔案

<template>
  <!-- template裡只能有一個根節點 -->
  <div class="demo-page">
    <text class="title">歡迎開啟{{title}}</text>
    <!-- 點選跳轉詳情頁 -->
    <input class="btn" type="button" value="跳轉到詳情頁" onclick="routeDetail" />
  </div>
</template>

<style>
</style>

<script>
  import router from '@system.router'

  export default {
    // 頁面級元件的資料模型，影響傳入資料的覆蓋機制：private內定義的屬性不允許被覆蓋
    private: {
      title: '示例頁面'
    },
    routeDetail () {
      // 跳轉到應用內的某個頁面，router用法詳見：文件->介面->頁面路由
      router.push ({
        uri: '/DemoDetail'
      })
    }
  }
</script>
複製程式碼

可以看到和vue的寫法沒什麼兩樣，這個就是private可能有點差異。程式碼怎麼寫就介紹到這裡。在src/app.ux裡邊我們可以看到這樣的程式碼：

<script>
  /**
   * 應用級別的配置，供所有頁面公用
   */
  import util from './util'

  export default {
    showMenu: util.showMenu,
    createShortcut: util.createShortcut
  }
</script>
複製程式碼

如果所有的檔案要共享方法，那麼就需要在app.ux中加入，然後如果我們需要在檔案中使用這些方法，就像下面這麼寫：

    this.$app.$def.showMenu()
複製程式碼

可以看到我們就使用了showMenu()這個方法。

除錯環境

說實話，如今快應用沒有微信小程式除錯起來這麼方便，但是我們們還是利用可以利用的資源來進行除錯，首先啟動服務：

    npm run server
複製程式碼

然後我們就可以得到下面的截圖:

然後使用手機的偵錯程式進行掃描安裝，然後點選開始除錯，如果你安裝了chrome瀏覽器，開啟Localhost:12306，也可以看到剛才那個二維碼，一旦手機開始除錯，我們們就可以利用chrome devtools進行輔助除錯了，美滋滋，可比手機除錯好用多

如果熟悉mvvm框架的寫法，相信這個對你應該沒什麼難度，難度可能在於這個快應用是未知的，我們們可能會遇到各種各樣的坑，所以任重道遠，一起努力。等我試了一下，在把我遇到的坑講出來。

新建一個微信群，大家有什麼問題可以一起討論，人多力量大。

快應用初體驗

快應用的優劣

環境搭建

專案初始化

除錯環境

相關文章