快應(yīng)用教程概述

概述

本文介紹快應(yīng)用背景，入口場(chǎng)景等，以及介紹了快應(yīng)用參與及開發(fā)流程

通過本節(jié)，你將學(xué)會(huì):

• 背景介紹
• 入口場(chǎng)景
• 參與流程
• 如何開發(fā)
• 開發(fā)過程

背景介紹

快應(yīng)用是一種新的應(yīng)用形態(tài)，以往的手機(jī)端應(yīng)用主要有兩種方式：網(wǎng)頁、原生應(yīng)用；網(wǎng)頁無需安裝，卻體驗(yàn)不是很好；原生應(yīng)用體驗(yàn)流暢，卻需要從應(yīng)用商店下載安裝，難以一步直達(dá)用戶；快應(yīng)用的出現(xiàn)，就是希望能夠讓用戶無需下載安裝，并且還能流暢的體驗(yàn)應(yīng)用內(nèi)容。

為了達(dá)到上面的目標(biāo)，快應(yīng)用建立一種新的語言開發(fā)規(guī)范，同時(shí)提供一系列的開發(fā)套件輔助支持。簡(jiǎn)單來說，開發(fā)者主要利用前端知識(shí)與技能，以及對(duì)應(yīng)的IDE，手機(jī)設(shè)備就可以做原型的開發(fā)?？鞈?yīng)用使用前端技術(shù)棧開發(fā)，原生渲染，同時(shí)具備H5與原生應(yīng)用的雙重優(yōu)點(diǎn)，開發(fā)者使用的前端技術(shù)棧資料多，學(xué)習(xí)成本低。

2018年3月份，由小米，OPPO，VIVO，華為等10家國內(nèi)主流廠商成立了快應(yīng)用聯(lián)盟，從技術(shù)規(guī)范層面做了統(tǒng)一，并保證了開發(fā)者開發(fā)的快應(yīng)用可以直接在所有的聯(lián)盟內(nèi)廠商的手機(jī)設(shè)備上運(yùn)行。

快應(yīng)用框架深度集成進(jìn)各手機(jī)廠商的手機(jī)操作系統(tǒng)中，可以在操作系統(tǒng)層面形成用戶需求與應(yīng)用服務(wù)的無縫連接，很多只用在原生應(yīng)用中才能使用的功能，在快應(yīng)用中可以很方便的實(shí)現(xiàn)，享受原生應(yīng)用體驗(yàn)，同時(shí)不用擔(dān)心分發(fā)留存等問題，資源消耗也比較少。

對(duì)于每臺(tái)手機(jī)設(shè)備，應(yīng)用可以從多個(gè)系統(tǒng)入口，引用用戶體驗(yàn)產(chǎn)品。比如：全局搜索、負(fù)一屏、瀏覽器搜索等。

下面，我們?nèi)娼榻B一下快應(yīng)用的開發(fā)流程。

入口場(chǎng)景

快應(yīng)用的部分場(chǎng)景入口列舉如下：

比如：全局搜索

參與流程

開發(fā)者參與快應(yīng)用開發(fā)，主要分為以下幾個(gè)步驟:

1. 快應(yīng)用官網(wǎng)注冊(cè)
2. 完善資料
3. 綁定廠商開發(fā)者賬號(hào)(至少一家)

完成以上三部，快應(yīng)用開發(fā)者就可以提交快應(yīng)用，詳情參考 快應(yīng)用注冊(cè)流程

整體參與流程如圖所示: 

如何開發(fā)

快應(yīng)用采用前端技術(shù)棧，運(yùn)行可開發(fā)效率高，學(xué)習(xí)成本低，代碼可復(fù)用

快應(yīng)用開發(fā)需要基本基礎(chǔ)的前端知識(shí)，如 標(biāo)簽， 樣式， js 腳本

快應(yīng)用使用 MVVM 的設(shè)計(jì)模式進(jìn)行開發(fā)，開發(fā)者無需直接操作 DOM 節(jié)點(diǎn)的增刪，利用數(shù)據(jù)驅(qū)動(dòng)的方式完成節(jié)點(diǎn)更新。

當(dāng)前標(biāo)準(zhǔn)的開發(fā)規(guī)范與 Vue 的開發(fā)方式相近，后期可能開放并接入其它的 DSL 開發(fā)方式，以符合開發(fā)者的開發(fā)習(xí)慣。

開發(fā)過程

進(jìn)行快應(yīng)用開發(fā)，整體過程如下：

1. 準(zhǔn)備開發(fā)工具

快應(yīng)用開發(fā)需要準(zhǔn)備PC/筆記本，廠商手機(jī)，內(nèi)網(wǎng)環(huán)境或者手機(jī)可連接電腦

2. 開發(fā)調(diào)試

開發(fā)調(diào)試過程:

1. 通過命令行工具，或者 IDE 安裝并運(yùn)行快應(yīng)用，詳情請(qǐng)見：使用命令行
2. 了解命令行工具生成的項(xiàng)目結(jié)構(gòu)，編寫項(xiàng)目代碼，詳情請(qǐng)見：項(xiàng)目結(jié)構(gòu)講解
3. 通過 toolkit，chrome devtools 進(jìn)行調(diào)試，詳情請(qǐng)見：調(diào)試

3. 提交上傳

完成代碼相關(guān)工作，我們就可以提交上傳快應(yīng)用，詳情請(qǐng)見: 快應(yīng)用上傳流程