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

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

????快應(yīng)用的優(yōu)勢：原生程序?qū)τ谝恍┯脩魜碚f操作繁瑣，需要下載安裝等一系列操作，用戶體驗并不是很好，而web應(yīng)用那更不用說了，體驗、速度、功能都比不上原生，我寧愿下載安裝都不愿意用web。而快應(yīng)用實現(xiàn)了無需安裝，即點即用提高了用戶的體驗效果。在速度的方面上，各大廠商在其平臺上支持了各類的系統(tǒng)接口，基本接近原生的程序，提高用戶體驗。并且十大手機(jī)廠商擁有非常大的用戶基數(shù)，這會給我們帶來足夠的流量。

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

創(chuàng)建項目前我們先需要使用tookit工具用于管理項目和手機(jī)調(diào)試器用于預(yù)覽效果
pc端使用

    npm install -g hap-toolkit

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

    hap -V

用來檢測toolkit是否安裝成功。
手機(jī)調(diào)試器截圖如下：

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

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

    hap init 

啟動項目后我們就可以進(jìn)入項目，看看目錄結(jié)構(gòu)，下面是他的目錄結(jié)構(gòu)截圖

node_modules文件夾是我們通過使用

    npm install

安裝所需要的依賴，這里我們來看看package.json文件的scripts的內(nèi)容

 "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服務(wù)，轉(zhuǎn)換Nodejs模塊文件，啟動調(diào)試環(huán)境，編譯打包，發(fā)布程序，監(jiān)聽文件變化后編譯。
在看看src/manifest.json文件的內(nèi)容。

icon代表程序保存到手機(jī)上呈現(xiàn)的圖標(biāo)，features代表在本app中所需要使用到的模塊，例如在本文件中，我們需要使用的就有三個模塊prompt,router,shortcut,分別代表彈窗、路由跳轉(zhuǎn)、桌面圖標(biāo)。注意，如果我們不在這兒提出來，那么在程序中我們就無法使用這些模塊config中l(wèi)ogLevel用于日志的顯示級別。在來看router的配置，entry代表入口文件，pages就是每個頁面，每個頁面入口文件用component進(jìn)行配置。這些看英文都能看懂啥意思，menu用于展示是否顯示右上角的菜單欄是否顯示，pages用于表示每一頁多帶帶的配置。
在看看src/uils.js中的內(nèi)容,下面是一個函數(shù)showMenu的代碼

function showMenu () {
  const prompt = require("@system.prompt")
  const router = require("@system.router")
  const appInfo = require("@system.app").getInfo()
  prompt.showContextMenu({
    itemList: ["保存桌面", "關(guān)于", "取消"],
    success: function (ret) {
      switch (ret.index) {
      case 0:
        // 保存桌面
        createShortcut()
        break
      case 1:
        // 關(guān)于
        router.push({
          uri: "/About",
          params: {
            name: appInfo.name,
            icon: appInfo.icon
          }
        })
        break
      case 2:
        // 取消
        break
      default:
        prompt.showToast({
          message: "error"
        })
      }
    }
  })
}

prompt和router模塊在前面已經(jīng)提到，具體的api可看源碼，app這個模塊代表這個app的一些基本信息，getInfo()用于獲取這個app的基本信息，在這里調(diào)用了showContextMenu()方法，用于展示彈窗的一些信息，后邊的自己也能看明白，就不一一介紹了。
以我接觸最多的vue來說，這個快應(yīng)用的寫法和vue和類似(哈哈，看來vue真的簡單好用)，在來看看src/Demo/index.ux文件

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

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

    this.$app.$def.showMenu()

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

說實話，如今快應(yīng)用沒有微信小程序調(diào)試起來這么方便，但是咱們還是利用可以利用的資源來進(jìn)行調(diào)試，首先啟動服務(wù)：

    npm run server

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

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

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