本文目的

結(jié)合官方文檔，旨在讓開發(fā)者更快了解释牺、體驗(yàn)萝衩、開發(fā)QuickApp。

目錄

• 快應(yīng)用是什么
• 環(huán)境配置
• 第一個(gè)程序
• 項(xiàng)目配置
• 框架

快應(yīng)用是什么

2018年3月20日没咙，華為猩谊、小米、中興祭刚、聯(lián)想等手機(jī)廠商牌捷，共同舉辦了“快應(yīng)用”標(biāo)準(zhǔn)啟動(dòng)發(fā)布會(huì)。

“快應(yīng)用”是幾家手機(jī)廠商基于硬件平臺(tái)共同推出的新型應(yīng)用生態(tài)涡驮，用戶不必下載安裝暗甥，即點(diǎn)即用，能夠享受到原生應(yīng)用的性能體驗(yàn)捉捅〕贩溃“快應(yīng)用”使用前端技術(shù)棧開發(fā)與原生渲染，兼具H5頁面和原生應(yīng)用的雙重優(yōu)點(diǎn)棒口。

環(huán)境配置

quick app需要nodejs環(huán)境寄月。

• 需安裝6.0以上辜膝、8.0以下版本的nodejs，請(qǐng)從NodeJS官網(wǎng)下載漾肮，推薦v6.11.3 LTS厂抖。
• 建議先安裝nvm，用nvm來管理nodejs版本克懊，尤其是在正式工作環(huán)境下忱辅。

安裝nvm

nvm的全稱是Node Version Manager，一套使用廣泛的nodejs版本管理工具谭溉。安裝一般用以下兩種方式即可：

通過curl:

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

通過Wget:

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

建議在linux下工作耕蝉，一般不會(huì)有什么其他安裝問題，安裝完畢后重啟terminal之后基本就可以了夜只。本教程全部基于ubuntu，其他安裝方式參見這里

安裝完畢后可以輸入nvm確認(rèn)一下是否安裝成功蒜魄。

安裝完之后需要將nvm源修改為taobao源扔亥，在~/.bashrc末尾加入：

NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node

保存，重開terminal谈为，就可以開始安裝nodejs了旅挤。

nvm install v6.11.3 LTS

安裝完試一下node -v輸出是否正常，輸出版本號(hào)說明安裝完成了伞鲫。

安裝hap-toolkit

npm是nodejs的包管理工具粘茄，然而這里我們還是需要把默認(rèn)源改成taobao源，不然很慢秕脓。這里直接安裝taobao提供的cnpm工具柒瓣，替代npm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝完成之后我們后續(xù)的npm命令都可以改用cnpm執(zhí)行。接下來可以來裝hap-toolkit：

cnpm install -g hap-toolkit

在命令行中執(zhí)行hap -V會(huì)輸出版本信息表示hap-toolkit安裝成功吠架，如下命令所示：

hap -V

第一個(gè)程序

接下來我們來看看怎么安裝運(yùn)行快應(yīng)用芙贫。

創(chuàng)建項(xiàng)目

如果我想創(chuàng)建的項(xiàng)目名叫project1：

hap init project1

這樣hap會(huì)在當(dāng)前目錄下創(chuàng)建project1文件夾并做一些基本的配置。結(jié)構(gòu)如下：

├── node_modules
├── sign                      rpk包簽名模塊
│   └── debug                 調(diào)試環(huán)境
│       ├── certificate.pem   證書文件
│       └── private.pem       私鑰文件
├── src
│   ├── Common                公用的資源文件和組件文件
│   │   └── logo.png          manifest.json中配置的icon
│   ├── Demo                  頁面目錄
│   |   └── index.ux          頁面文件傍药，文件名不必與父文件夾相同
│   ├── app.ux                APP文件（用于包括公用資源）
│   └── manifest.json         項(xiàng)目配置文件（如：應(yīng)用描述磺平、接口申明、頁面路由等）
└── package.json              定義項(xiàng)目需要的各種模塊及配置信息拐辽，npm install根據(jù)這個(gè)配置文件拣挪，自動(dòng)下載所需的運(yùn)行和開發(fā)環(huán)境

編譯項(xiàng)目

在初始化之后，這個(gè)項(xiàng)目已經(jīng)具備了在手機(jī)上運(yùn)行的能力俱诸。在你的項(xiàng)目目錄下執(zhí)行：

cnpm install

這個(gè)命令會(huì)為你的quickapp安裝相關(guān)的依賴包菠劝，安裝完畢后我們可以開始編譯：

cnpm run build

此時(shí)會(huì)生成兩個(gè)文件夾：

• build：臨時(shí)產(chǎn)出，包含編譯后的頁面js乙埃，圖片等
• dist：最終產(chǎn)出闸英，包含rpk文件锯岖。其實(shí)是將build目錄下的資源打包壓縮為一個(gè)文件，后綴名為rpk甫何，這個(gè)rpk文件就是項(xiàng)目編譯后的最終產(chǎn)出

一般來說我們只需要dist里的rpk出吹。

安裝調(diào)試器

現(xiàn)階段如果要在其他手機(jī)上體驗(yàn)快應(yīng)用，需要安裝下面這兩個(gè)apk辙喂，點(diǎn)擊下載：

• 調(diào)試器
• 預(yù)覽平臺(tái)

運(yùn)行方案推薦兩種捶牢，http與本地。

• 本地
  • 直接把rpk文件拖入手機(jī)巍耗，在調(diào)試器里本地安裝即可
• http
  • 實(shí)質(zhì)上是在主機(jī)上運(yùn)行一個(gè)服務(wù)器秋麸，通過http請(qǐng)求調(diào)試
  • 在主機(jī)上運(yùn)行npm run server
  • 會(huì)出現(xiàn)一個(gè)二維碼，在調(diào)試器上掃描即可

debuger.png

之后就可以愉快的運(yùn)行了炬太，自測(cè)的效果感覺還可以灸蟆。

example.png

項(xiàng)目配置

項(xiàng)目配置在src/manifest.json中。

與傳統(tǒng)安卓apk一樣亲族，這里會(huì)對(duì)整個(gè)應(yīng)用做一些全局配置炒考，但內(nèi)容比較不同。個(gè)人覺得這里的配置更像一個(gè)web應(yīng)用霎迫。

這里直接用一個(gè)manifest文件來展開：

{
    # 包名斋枢，區(qū)分不同應(yīng)用的唯一id，因?yàn)槊Q其實(shí)是可以一樣的
    "package": "com.application.demo",

    # 應(yīng)用名稱
    "name": "hi",

    # 版本管理的話知给，每次更新將versionCode自增1即可
    "versionName": "1.0.0",
    "versionCode": "1",
    "minPlatformVersion": "101",

    # 程序的入口icon瓤帚，所有關(guān)于文件的引用統(tǒng)一使用根目錄
    # 根目錄對(duì)應(yīng)src文件夾
    "icon": "/Common/logo.png",

    # 
    "features": [
        { "name": "system.prompt" },
        { "name": "system.router" },
        { "name": "system.shortcut" }
    ],

    "permissions": [
        { "origin": "*" }
    ],

    # 配置相關(guān)
    "config": {
        # 這里的設(shè)置是log輸出的最低等級(jí)
        # 如果是warn的話，info類型將不會(huì)輸出
        # 等級(jí)請(qǐng)參考js中的console日志
        "logLevel": "off"
    },

    # 路由
    # 這里會(huì)配置應(yīng)用入口的頁面
    # 所有的頁面都需要在這里配置
    # 會(huì)把頁面與對(duì)應(yīng)的頁面文件對(duì)應(yīng)起來
    # 經(jīng)過配置之后可以通過/Demo訪問到Demo目錄下的index.ux頁面
    "router": {
        "entry": "Demo",
        "pages": {
            "Demo": {
                # 這里對(duì)應(yīng)的Demo文件夾里的index.ux
                "component": "index"
            },
            "DemoDetail": {
                "component": "index"
            },
            "About": {
                "component": "index"
            }
        }
    },
    
    # 配置頁面UI顯示
    # 主要分為兩種涩赢，頁面公有與頁面私有
    "display": {
        # 這三個(gè)都是所有頁面公有的戈次，頂部titleBar內(nèi)容
        "titleBarText": "public title"
        "titleBarBackgroundColor": "#f2f2f2",
        "titleBarTextColor": "#414141",

        # 會(huì)增加一個(gè)導(dǎo)航欄
        "menu": true,

        # 頁面私有內(nèi)容
        "pages": {
            "Demo": {
                # 這里面的內(nèi)容就是每個(gè)頁面私有的了
                "titleBarText": "示例頁",
                "menu": false
            },
            "DemoDetail": {
                "titleBarText": "詳情頁"
            },
            "About": {
                "menu": false
            }
        }
    }
}

更多內(nèi)容請(qǐng)直接查詢官方文檔。