快應用腳手架，為優雅而生

技術 · 發表 2018-11-12 08:30:25

摘要：快應用是基於手機硬體平臺的新型應用形態，標準是由主流手機廠商組成的快應用聯盟聯合制定。其標準的誕生將在研發介面、能力接入、開發者服務等層面建設標準平臺，以平臺化的生態模式對個人開發者和企業開發者全品類開放。快應用具備傳統 APP 完整的應用體驗，無需安裝、即點即用；覆蓋 10...

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 檔案也能很好地工作，從而進一步完善程式碼風格及規範。
... ...

快應用腳手架，為優雅而生

目標與哲學

組織結構

如何使用

改進優勢

您可能也會喜歡…