快應(yīng)用是基于手機(jī)硬件平臺(tái)的新型應(yīng)用形態(tài)烫止，標(biāo)準(zhǔn)是由主流手機(jī)廠商組成的快應(yīng)用聯(lián)盟聯(lián)合制定呻疹。其標(biāo)準(zhǔn)的誕生將在研發(fā)接口击狮、能力接入话侧、開發(fā)者服務(wù)等層面建設(shè)標(biāo)準(zhǔn)平臺(tái)栗精，以平臺(tái)化的生態(tài)模式對(duì)個(gè)人開發(fā)者和企業(yè)開發(fā)者全品類開放。快應(yīng)用具備傳統(tǒng) APP 完整的應(yīng)用體驗(yàn)瞻鹏，無需安裝悲立、即點(diǎn)即用鹿寨；覆蓋 10 億設(shè)備，與操作系統(tǒng)深度集成级历，探索新型應(yīng)用場景。快應(yīng)用 ── 復(fù)雜生活的簡單答案寥殖，讓生活更順暢玩讳。
目標(biāo)與哲學(xué)
快應(yīng)用是一種新型的應(yīng)用形態(tài)，由國內(nèi)九大手機(jī)廠商基于硬件平臺(tái)共同推出嚼贡；秒開即點(diǎn)即用熏纯，更易于應(yīng)用的傳播和留存，可以為用戶提供更高效的服務(wù)粤策。在可預(yù)見的未來樟澜，其將有不錯(cuò)的應(yīng)用場景和發(fā)展空間。此 quickapp-boilerplate-template 倉庫的建立叮盘，旨在探索如何更為優(yōu)雅的開發(fā)快應(yīng)用秩贰，為廣大快應(yīng)用開發(fā)者提供便利和參考，盡可能提升開發(fā)效率柔吼、優(yōu)化開發(fā)體驗(yàn)毒费，使得可以在更短時(shí)間內(nèi)，塑造出更為優(yōu)質(zhì)的快應(yīng)用愈魏。關(guān)于快應(yīng)用開發(fā)更詳細(xì)資料觅玻，可參見快應(yīng)用教程資源列表。
組織結(jié)構(gòu)
├── sign # 存儲(chǔ) rpk 包簽名模塊;
│ ├── debug # 調(diào)試環(huán)境證書/私鑰文件
│ └── release # 正式環(huán)境證書/私鑰文件
└── src
│ ├── assets # 公用的資源(images/styles/字體...)
│ │ ├──images # 存儲(chǔ) png/jpg/svg 等公共圖片資源
│ │ ├──js # 存儲(chǔ)公共 javaScript 代碼資源
│ │ └──styles # 存放 less/css/sass 等公共樣式資源
│ ├── helper # 項(xiàng)目自定義輔助各類工具
│ │ ├──apis # 存儲(chǔ)與后臺(tái)請求接口相關(guān)(已封裝好)
│ │ ├──ajax.js # 對(duì)系統(tǒng)提供的 fetch api 進(jìn)行鏈?zhǔn)椒庋b
│ │ └──utils # 存放項(xiàng)目所封裝的工具類方法
│ ├── pages # 統(tǒng)一存放項(xiàng)目頁面級(jí)代碼
│ ├── app.ux # 應(yīng)用程序代碼的人口文件
│ └── manifest.json # 配置快應(yīng)用基本信息
└── package.json # 定義項(xiàng)目需要的各種模塊及配置信息
如何使用
git clone https://github.com/nicejade/quickapp-boilerplate-template.git
cd quickapp-boilerplate-template && yarn
yarn start # 推薦 ??
# 或者運(yùn)行以下命令
yarn server & yarn watch
# 或者在終端一 Tab 下運(yùn)行：
yarn server
# 在終端另一 Tab 下運(yùn)行：
yarn watch
# ? 新增「快應(yīng)用」頁面
yarn gen YourPageName
用一臺(tái) Android 手機(jī)培漏，下載安裝「快應(yīng)用」調(diào)試器溪厘，打開后操作掃碼安裝，掃描如上命令生成的二維碼牌柄，即可看到效果畸悬；更多訊息，請參見快應(yīng)用環(huán)境搭建友鼻。
改進(jìn)優(yōu)勢
有必要談及的是傻昙，此項(xiàng)目秉承在高效開發(fā) Web 單頁應(yīng)用解決方案中所傳遞的理念：為高效開發(fā)而設(shè)計(jì)；相比于其內(nèi)置簡陋而凌亂的 Demo彩扔，這份腳手架做了以下諸多改進(jìn)：
- ?? 對(duì)項(xiàng)目結(jié)構(gòu)進(jìn)行優(yōu)化；如上組織結(jié)構(gòu)所示僻爽，將各資源模塊虫碉，更專業(yè)的分門別類，使之可以便捷的去編寫胸梆、維護(hù)敦捧、查找须板，同時(shí)也是基于前端開發(fā)既定共識(shí)去設(shè)計(jì)，更容易為初接觸者所理解 & 上手兢卵；
- ?? 更優(yōu)雅的處理數(shù)據(jù)請求习瑰；采用
Promise對(duì)系統(tǒng)內(nèi)置請求@system.fetch進(jìn)行封裝，并拋出至全局秽荤，使得可以極簡的進(jìn)行鏈?zhǔn)秸{(diào)用甜奄，同時(shí)便捷地處理返回?cái)?shù)據(jù)； - ?? 內(nèi)置了樣式處理方案窃款；「快應(yīng)用」支持
less,sass的預(yù)編譯课兄；這里采取less方案，并內(nèi)置了部分變量晨继，以及常用混合方法烟阐，使得可以輕松開啟樣式編寫、復(fù)用紊扬、修改等蜒茄； - ?? 封裝了常用方法；在
helper/utils路徑下餐屎，有對(duì)日期檀葛、字符串、系統(tǒng)等常用方法啤挎，分別進(jìn)行封裝驻谆，統(tǒng)一暴露給global.$utils，使得維護(hù)方式更加合理且健壯庆聘，同時(shí)又可以便捷的使用胜臊，高效開發(fā)；當(dāng)然伙判，你也可以根據(jù)需要自行增刪象对、抑或擴(kuò)展； - ?? 簡化開始開發(fā)流程宴抚； 注入 Concurrently 插件勒魔，使可以運(yùn)行
yarn start即可開始開發(fā)，而無需更多命令菇曲，從而簡潔開發(fā)流程冠绢； - ?? 優(yōu)化本地開發(fā)端口設(shè)定；「快應(yīng)用」默認(rèn)端口為
12306常潮，雖說可自定義端口弟胀，但使用體驗(yàn)卻不夠友好；此處參考creat-react-app設(shè)定，對(duì)本地開發(fā)地址端口使用進(jìn)行優(yōu)化：如果 ??? 定端口(默認(rèn):8080)被占用孵户，則向上遞增尋找新的可用端口(如：8081 / 8082 / … )萧朝； - ?? 瀏覽器打開調(diào)試主頁二維碼；運(yùn)行
yarn start夏哭，會(huì)啟動(dòng) HTTP 調(diào)試服務(wù)器检柬，并將該地址在命令行終端顯示五芝，手機(jī)端用快應(yīng)用調(diào)試器掃碼泳桦，即可下載并運(yùn)行 rpk 包宙枷；當(dāng)終端積累的信息流多了菊卷，就造成掃碼不便终息；故增設(shè)在瀏覽器打開調(diào)試主頁二維碼螟凭；如想不使用此功能勘高，在 command/server.js 文件中婉商，將 autoOpenBrowser 設(shè)置為false即可龄减； - ?? 集成輕粒子統(tǒng)計(jì)分析项钮； 輕粒子作為官方推薦統(tǒng)計(jì)方案，此腳手架已做接入希停；使用時(shí)只需修改 statistics.config.js 中的
app_key烁巫，為在輕粒子所申請的快應(yīng)用 KEY 即可； - ?? 新增快捷命令腳本宠能；使得可以一鍵生成新頁面亚隙，只需運(yùn)行：
yarn gen YourPageName（命名推薦統(tǒng)一為大駝峰，將會(huì)在pages路徑下新建該頁面文件夾）命令即可违崇，當(dāng)然阿弃，也可以根據(jù)需要，自行定定制模板：/command/gen/template.ux羞延； - ?? 集成 Prettier & Eslint渣淳；在檢測代碼中潛在問題的同時(shí)，統(tǒng)一團(tuán)隊(duì)代碼規(guī)范伴箩、風(fēng)格（
js入愧，less，scss等）嗤谚，從而促使寫出高質(zhì)量代碼棺蛛，以提升工作效率(尤其針對(duì)團(tuán)隊(duì)開發(fā))。 -
編寫 prettier-plugin-quickapp 插件巩步；為快應(yīng)用編寫
prettier插件旁赊，使其可以針對(duì).ux/.mix文件也能很好地工作，從而進(jìn)一步完善代碼風(fēng)格及規(guī)范椅野。 - ... ...
相關(guān)鏈接
原文出處：靜晴軒別苑
原文首發(fā)：快應(yīng)用腳手架彤恶，為優(yōu)雅而生
@2018-11-11 于深圳.福田 Last Modify：2018-11-11
