摘要：各大手機廠商意識到了危機，于是八大廠商聯合起來推出了快應用，意圖從微信小程序的圍剿中殺出一條血路。而且用戶是否愿意放棄都在使用的微信，而轉入投入未知的快應用，也是一個問題。

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

????快應用的優勢：原生程序對于一些用戶來說操作繁瑣，需要下載安裝等一系列操作，用戶體驗并不是很好，而web應用那更不用說了，體驗、速度、功能都比不上原生，我寧愿下載安裝都不愿意用web。而快應用實現了無需安裝，即點即用提高了用戶的體驗效果。在速度的方面上，各大廠商在其平臺上支持了各類的系統接口，基本接近原生的程序，提高用戶體驗。并且十大手機廠商擁有非常大的用戶基數，這會給我們帶來足夠的流量。

????快應用的劣勢：微信小程序已然滲透進各個行業，快應用的這些優勢能否讓各個公司將工作重點和精力投入到這里邊，仍然是個問題。而且用戶是否愿意放棄都在使用的微信，而轉入投入未知的快應用，也是一個問題。還有一個問題就是如今的快應用只支持安卓，那蘋果的部分是不是有需要人去支持，是不是又加入一定的勞動成本。

創建項目前我們先需要使用tookit工具用于管理項目和手機調試器用于預覽效果
pc端使用

    npm install -g hap-toolkit

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

    hap -V

用來檢測toolkit是否安裝成功。
手機調試器截圖如下：

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

hap是快應用配置的一個腳手架工具，其中項目創建，啟動，和發布都離不開他，首先建立項目使用

    hap init 

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

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文件

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

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

    this.$app.$def.showMenu()

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

說實話，如今快應用沒有微信小程序調試起來這么方便，但是咱們還是利用可以利用的資源來進行調試，首先啟動服務：

    npm run server

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

然后使用手機的調試器進行掃描安裝，然后點擊開始調試，如果你安裝了chrome瀏覽器，打開Localhost:12306，也可以看到剛才那個二維碼，一旦手機開始調試，咱們就可以利用chrome devtools進行輔助調試了，美滋滋，可比手機調試好用多

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