【原創】快應用QuickApp--HelloWorld體驗


快應用:

快應用是九大手機廠商基於硬件平台共同推出的新型應用生態。用戶無需下載安裝,即點即用,享受原生應用的性能體驗。
3月20日在北京聯合召開快應用標准啟動發布會。過去1天了,官網(快應用官方網站)上的文檔和教程也都大致齊備了,一起體驗試試。
本文參考官方文檔中心:環境搭建
本文代碼地址:SmileSmith/quickapp-weibo
吐槽一下:官網打開文檔中心的默認進入了注冊流程? 我是已經登錄的狀態了。。。

一、環境搭建

1)Node環境安裝快應用toolkit

npm install -g hap-toolkit

 

2)Node環境用toolkit初始化demo項目

hap init <ProjectName>

 

得到如下文件目錄:
├── node_modules
├── sign                      rpk包簽名模塊
│   └── debug                 調試環境
│       ├── certificate.pem   證書文件
│       └── private.pem       私鑰文件
├── src
│   ├── Common                公用的資源文件和組件文件
│   │   └── logo.png          manifest.json中配置的icon
│   ├── Demo                  頁面目錄
│   |   └── index.ux          頁面文件,文件名不必與父文件夾相同
│   ├── app.ux                APP文件(用於包括公用資源)
│   └── manifest.json         項目配置文件(如:應用描述、接口申明、頁面路由等)
└── package.json              定義項目需要的各種模塊及配置信息,npm install根據這個配置文件,自動下載所需的運行和開發環境

 

3)依賴安裝

進入項目根目錄安裝所有依賴的npm包
npm install

 

如果安裝速度慢,可以嘗試在項目根目錄創建.npmrc,並寫入一個全能npm鏡像指向:
registry=https://registry.npm.taobao.org 
disturl=https://npm.taobao.org/dist 
chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver 
operadriver_cdnurl=http://cdn.npm.taobao.org/dist/operadriver 
phantomjs_cdnurl=http://cdn.npm.taobao.org/dist/phantomjs 
fse_binary_host_mirror=https://npm.taobao.org/mirrors/fsevents 
sass_binary_site=http://cdn.npm.taobao.org/dist/node-sass 
electron_mirror=http://cdn.npm.taobao.org/dist/electron/

 

4)IDE插件安裝

如果你是VSCode用戶可以參考如下:
a. 搜索Hap安裝語法模板、語法高亮的支持(體驗類似Vue):
b. 項目自帶的eslint對ux文件似乎不起作用,依賴包里面的有個插件"eslint-plugin-hybrid",可能是對ux文件的eslint支持,但是diydyq/eslint-plugin-hybrid上已經8個月沒更新了,期待后續支持
c. 格式化代碼用之前的Prettier就行

5)調試器和調式平台安裝

調試器APK:操作調試
開發調試平台APK:模擬真實的快應用平台,所有的前端代碼編譯后都是在這個平台上運行
需要注意的是:
a. 單獨安裝調試器是無法使用的,按鈕全部置灰,需要有rpk的平台才能使用
b. 我在win下用包含arm指令集的Genymotion一直報錯,只能有真機調試
 

二、開發調試

1)在Node環境下啟動開發環境Server

npm run server

會在命令行出現二維碼

2)用手機的調試器掃碼打開

 
這里同時會打開Inspector調式頁面
 
PS:在調試器右上角菜單點擊設置:填入服務器地址,就可以點擊【在線更新】刷新App

3)新開Node環境啟動實時編譯推送(熱更新)

npm run watch

 

PS:這里每次更新確實重新編譯打包了,但是手機上的通知似乎沒生效,不會自動刷新App,需要點擊【在線更新】后才能刷新應用
PS2:從代碼邏輯上看是notify.js訪問調式手機上的某個地址完成通知,實際上並沒有生成所需要的client.json文件

 

PS3:查看快應用工具hap-tools的代碼,也沒看到類似寫入client.json的邏輯

 

 

三、項目基礎設計

這部分還沒想好,這個hap開發思路類似Vue和小程序的結合版(很像wepy?),組件和路由這些都已經處理好了。其他的初步想法是嘗試sass語法,類vuex的實現等

1)組件

2)路由

3)原生接口

4)全局狀態管理

5)類型檢測

 
待續。。。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM