快應用:
快應用是九大手機廠商基於硬件平台共同推出的新型應用生態。用戶無需下載安裝,即點即用,享受原生應用的性能體驗。
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)類型檢測
待續。。。