快應用腳手架,為優雅而生
ofollow,noindex">快應用 是基於手機硬體平臺的新型應用形態,標準是由主流手機廠商組成的 快應用聯盟
聯合制定。其標準的誕生將在研發介面、能力接入、開發者服務等層面建設標準平臺,以平臺化的生態模式對個人開發者和企業開發者全品類開放。 快應用 具備傳統 APP 完整的應用體驗, 無需安裝、即點即用
; 覆蓋 10 億裝置
, 與作業系統深度整合,探索新型應用場景
。 快應用 ── 複雜生活的簡單答案,讓生活更順暢 。
目標與哲學
快應用 是一種新型的應用形態,由國內九大手機廠商基於硬體平臺共同推出;秒開即點即用,更易於應用的傳播和留存,可以為使用者提供更高效的服務。在可預見的未來,其將有不錯的應用場景和發展空間。此 quickapp-boilerplate-template 倉庫的建立,旨在探索如何更為優雅的開發 快應用 ,為廣大 快應用開發者
提供便利和參考,儘可能提升開發效率、優化開發體驗,使得可以在更短時間內,塑造出更為優質的 快應用
。關於 快應用 開發更詳細資料,可參見 快應用教程資源列表 。
組織結構
├── sign# 儲存 rpk 包簽名模組; │├── debug# 除錯環境證書/私鑰檔案 │└── release# 正式環境證書/私鑰檔案 └── src │├── assets# 公用的資源(images/styles/字型...) ││├──images# 儲存 png/jpg/svg 等公共圖片資源 ││├──js# 儲存公共 javaScript 程式碼資源 ││└──styles# 存放 less/css/sass 等公共樣式資源 │├── helper# 專案自定義輔助各類工具 ││├──apis# 儲存與後臺請求介面相關(已封裝好) ││├──ajax.js# 對系統提供的 fetch api 進行鏈式封裝 ││└──utils# 存放專案所封裝的工具類方法 │├── pages# 統一存放專案頁面級程式碼 │├── app.ux# 應用程式程式碼的人口檔案 │└── manifest.json# 配置快應用基本資訊 └── package.json# 定義專案需要的各種模組及配置資訊
如何使用
git clone https://github.com/nicejade/quickapp-boilerplate-template.git cd quickapp-boilerplate-template && yarn yarn start # 推薦 :white_check_mark::white_check_mark: # 或者執行以下命令 yarn server & yarn watch # 或者在終端一 Tab 下執行: yarn server # 在終端另一 Tab 下執行: yarn watch
用一臺 Android
手機,下載安裝 「快應用」偵錯程式 ,開啟後操作 掃碼安裝
,掃描如上命令生成的二維碼,即可看到效果;更多訊息,請參見快應用環境搭建。
改進優勢
有必要談及的是,此專案秉承在 高效開發 Web 單頁應用解決方案 中所傳遞的理念:為 高效開發 而設計;相比於其內建簡陋而凌亂的 Demo,這份腳手架做了以下諸多改進:
- :heavy_check_mark: 對專案結構進行優化 ;如上組織結構所示,將各資源模組,更專業的分門別類,使之可以便捷的去編寫、維護、查詢,同時也是基於前端開發既定共識去設計,更容易為初接觸者所理解 & 上手;
- :heavy_check_mark: 更優雅的處理資料請求 ;採用
Promise
對系統內建請求@system.fetch
進行封裝,並丟擲至全域性,使得可以極簡的進行鏈式呼叫,同時便捷地處理返回資料; - :heavy_check_mark: 內建了樣式處理方案 ;「快應用」支援
less
,sass
的預編譯;這裡採取less
方案,並內建了部分變數,以及常用混合方法,使得可以輕鬆開啟樣式編寫、複用、修改等; - :heavy_check_mark: 封裝了常用方法 ;在
helper/utils
路徑下,有對日期、字串、系統等常用方法,分別進行封裝,統一暴露給global.$utils
,使得維護方式更加合理且健壯,同時又可以便捷的使用,高效開發;當然,你也可以根據需要自行增刪、抑或擴充套件; - :heavy_check_mark: 簡化開始開發流程 ; 注入 Concurrently 外掛,使可以執行
yarn start
即可開始開發,而無需更多命令,從而簡潔開發流程; - :heavy_check_mark: 優化本地開發埠設定 ;「快應用」預設埠為
12306
,雖說可自定義埠,但使用體驗卻不夠友好;此處參考creat-react-app
設定,對本地開發地址埠使用進行優化:如果 :u6307:️ 定埠(預設:8080
)被佔用,則向上遞增尋找新的可用埠(如:8081 / 8082 / … ); - :heavy_check_mark: 瀏覽器開啟除錯主頁二維碼 ;執行
yarn start
,會啟動 HTTP 除錯伺服器,並將該地址在 命令列終端 顯示,手機端用快應用偵錯程式掃碼,即可下載並執行 rpk 包;當終端積累的資訊流多了,就造成掃碼不便;故增設在瀏覽器開啟除錯主頁二維碼;如想不使用此功能,在 command/server.js 檔案中,將 autoOpenBrowser 設定為false
即可; - :heavy_check_mark: 整合輕粒子統計分析 ; 輕粒子 作為官方推薦統計方案,此腳手架已做接入;使用時只需修改 statistics.config.js 中的
app_key
,為在 輕粒子 所申請的快應用 KEY 即可; - :heavy_check_mark: 整合 Prettier & Eslint ;在檢測程式碼中潛在問題的同時,統一團隊程式碼規範、風格(
js
,less
,scss
等),從而促使寫出高質量程式碼,以提升工作效率(尤其針對團隊開發)。 - 編寫 prettier-plugin-quickapp 外掛 ;為快應用編寫
prettier
外掛,使其可以針對.ux
/.mix
檔案也能很好地工作,從而進一步完善程式碼風格及規範。 - ... ...