快速上手快應用
官網(wǎng)
介紹
- 快應用是國內(nèi)十家手機廠商聯(lián)合推出的類似于小程序的東西
- 背景是被微信小程序引流太嚴重
- 因為是十家手機廠商聯(lián)合推出的，所以其內(nèi)部矛盾也很多，兼容性相當尷尬，特別是推動者之一華為和其他廠商之間的兼容性問題
- 例如環(huán)境搭建，一般用廠商聯(lián)盟的版本，因為用自己熟悉的IDE，只不過是調(diào)試要用到手機，但是華為的需要用自己的IDE和自己的加載器，不然很多華為的兼容性問題找不出來
環(huán)境搭建（廠商聯(lián)盟）
-
安裝
NodeJS- 這個就不說了
-
安裝
hap-toolkitnpm install -g hap-toolkit
-
當
nodeJs版本高于6的時候hap update --force
-
手機安裝調(diào)試器和平臺預覽版（平臺預覽版最好1020及以上）
環(huán)境搭建（華為）
- 前三步都一樣
- 安裝華為IDE
- 安裝華為加載器
- 華為IDE的官網(wǎng)
編輯器的配置
- 華為有IDE
- vscode
- 需要安裝
Hap Extension插件
- 需要安裝
- webstorm
- 648763.png
創(chuàng)建項目
-
創(chuàng)建項目模板
hap init <ProjectName>
初始化后的項目結(jié)構
├── sign rpk包簽名模塊
│ └── debug 調(diào)試環(huán)境
│ ├── certificate.pem 證書文件
│ └── private.pem 私鑰文件
├── src
│ ├── Common 公用的資源和組件文件
│ │ └── logo.png 應用圖標
│ ├── Demo 頁面目錄
│ | └── index.ux 頁面文件，可自定義頁面名稱
│ ├── app.ux APP文件，可引入公共腳本，暴露公共數(shù)據(jù)和方法等
│ └── manifest.json 項目配置文件，配置應用圖標、頁面路由等
└── package.json 定義項目需要的各種模塊及配置信息
安裝依賴
npm install-
啟動項目
- 編譯代碼并watch代碼變化實時編譯
npm run watch - 啟動服務
npm run server - 此時就有個地址，打開地址會有二維碼
- 用快應用調(diào)試器掃描二維碼，可以看到具體項目了（注意要在同一局域網(wǎng)下）
- 編譯代碼并watch代碼變化實時編譯
-
其他命令
-
npm run build生成本地測試包 -
npm run release生產(chǎn)帶簽名的可上線的包
-
app.ux 和 manifest.json 簡介
-
app.ux
- 主要就是引入第三方組件或者公共方法等
- 或者在生命周期中加入某些方法，讓快應用在打開每個頁面都執(zhí)行
manifest.json
{
"package": "打包后的rpk名稱",
"name": "快應用名稱，如果添加到桌面，會顯示該名稱",
"versionName": "版本號",
"minPlatformVersion": 1010, // 最低快應用預覽版的版本
"icon": "logo.png", // logo圖
"widgets": [
// 卡片
],
"features": [ // 使用的系統(tǒng)的功能
{ "name": "system.prompt" },
{ "name": "system.router" }
],
"permissions": [
{ "origin": "*" }
],
"config": {
"logLevel": "debug", // 調(diào)試等級
"designWidth": "375", // 設置設計稿的寬度
"data": {
"umeng_appkey" : "key"
}
},
"router": {
"entry": "home/index", // 入口
// 各個路由
"pages": {
"路由路徑": {
"component": "路徑下的文件，不帶后綴"
}，
“home/index”: {
"component": "index" // 表示 home/index/index.ux 文件
}
}
},
"display": {
"titleBarBackgroundColor": "#f2f2f2", // title背景色
"titleBarTextColor": "#414141", // title 字體顏色
"titleBar":false, // 默認顯示title
"menu": true // 顯示菜單
}
}
