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

快應用腳手架模闆，旨在探索如何更為優雅的開發快應用，為廣大快應用開發者提供便利和參考，盡可能提升開發效率、優化開發體驗，使得可以在更短時間内，塑造出更為優質的快應用。

快應用是基于手機硬體平台的新型應用形态，标準是由主流手機廠商組成的

快應用聯盟

聯合制定。其标準的誕生将在研發接口、能力接入、開發者服務等層面建設标準平台，以平台化的生态模式對個人開發者和企業開發者全品類開放。快應用具備傳統 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 # 推薦 ✅✅

# 或者運作以下指令
yarn server & yarn watch

# 或者在終端一 Tab 下運作：
yarn server
# 在終端另一 Tab 下運作：
yarn watch

# ✨ 新增「快應用」頁面
yarn gen YourPageName
           

用一台

Android

手機，下載下傳安裝「快應用」調試器，打開後操作

掃碼安裝

，掃描如上指令生成的二維碼，即可看到效果；更多訊息，請參見快應用環境搭建。

改進優勢

有必要談及的是，此項目秉承在高效開發 Web 單頁應用解決方案中所傳遞的理念：為高效開發而設計；相比于其内置簡陋而淩亂的 Demo，這份腳手架做了以下諸多改進：

• ✔️ 對項目結構進行優化；如上組織結構所示，将各資源子產品，更專業的分門别類，使之可以便捷的去編寫、維護、查找，同時也是基于前端開發既定共識去設計，更容易為初接觸者所了解 & 上手；
• ✔️ 更優雅的處理資料請求；采用

  Promise

  對系統内置請求

  @system.fetch

  進行封裝，并抛出至全局，使得可以極簡的進行鍊式調用，同時便捷地處理傳回資料；
• ✔️ 内置了樣式處理方案；「快應用」支援

  less

  ,

  sass

  的預編譯；這裡采取

  less

  方案，并内置了部分變量，以及常用混合方法，使得可以輕松開啟樣式編寫、複用、修改等；
• ✔️ 封裝了常用方法；在

  helper/utils

  路徑下，有對日期、字元串、系統等常用方法，分别進行封裝，統一暴露給

  global.$utils

  ，使得維護方式更加合理且健壯，同時又可以便捷的使用，高效開發；當然，你也可以根據需要自行增删、抑或擴充；
• ✔️ 簡化開始開發流程； 注入 Concurrently 插件，使可以運作

  yarn start

  即可開始開發，而無需更多指令，進而簡潔開發流程；
• ✔️ 優化本地開發端口設定；「快應用」預設端口為

  12306

  ，雖說可自定義端口，但使用體驗卻不夠友好；此處參考

  creat-react-app

  設定，對本地開發位址端口使用進行優化：如果 🈯️ 定端口(預設:

  8080

  )被占用，則向上遞增尋找新的可用端口(如：8081 / 8082 / … )；
• ✔️ 浏覽器打開調試首頁二維碼；運作

  yarn start

  ，會啟動 HTTP 調試伺服器，并将該位址在指令行終端顯示，手機端用快應用調試器掃碼，即可下載下傳并運作 rpk 包；當終端積累的資訊流多了，就造成掃碼不便；故增設在浏覽器打開調試首頁二維碼；如想不使用此功能，在 command/server.js 檔案中，将 autoOpenBrowser 設定為

  false

  即可；
• ✔️ 內建輕粒子統計分析； 輕粒子作為官方推薦統計方案，此腳手架已做接入；使用時隻需修改 statistics.config.js 中的

  app_key

  ，為在輕粒子所申請的快應用 KEY 即可；
• ✔️ 新增快捷指令腳本；使得可以一鍵生成新頁面，隻需運作：

  yarn gen YourPageName

  （命名推薦統一為大駝峰，将會在

  pages

  路徑下建立該頁面檔案夾）指令即可，當然，也可以根據需要，自行定定制模闆：/command/gen/template.ux；
• ✔️ 內建 Prettier & Eslint；在檢測代碼中潛在問題的同時，統一團隊代碼規範、風格（

  js

  ，

  less

  scss

  等），進而促使寫出高品質代碼，以提升工作效率(尤其針對團隊開發)。
• 編寫 prettier-plugin-quickapp 插件；為快應用編寫

  prettier

  插件，使其可以針對

  .ux

  /

  .mix

  檔案也能很好地工作，進而進一步完善代碼風格及規範。
• ... ...

相關連結

• 傾城之鍊
• About Me
• 個人部落格
• 輔助部落格
• 新浪微網誌
• 知乎首頁
• 簡書首頁
• SegmentFault
• Twitter
• Facebook

原文出處：靜晴軒别苑

原文首發：快應用腳手架，為優雅而生

@2018-11-11 于深圳.福田 Last Modify：2018-11-11

同類型文章

• 快應用之開發體驗紀要