如何從HTML5快速轉(zhuǎn)型快應用？

、引言

2018年3月份，由小米，中興，華為等10家廠商成立了快應用聯(lián)盟，共同發(fā)布了快應用的標準。自此我們可以采用一套標準去開發(fā)應用，而無縫的運行在各個手機廠商上。一次開發(fā)，一次上傳，自動分發(fā)到所有聯(lián)盟廠商的設備。根據(jù)快應用官方的說法，快應用官方是采用前端的技術棧來開發(fā)的，這篇文章以一個前端開發(fā)者的角度，來介紹怎么開發(fā)快應用，快速入門快應用的開發(fā)。

1.什么是快應用

快應用是基于手機硬件平臺的新型應用形態(tài)，標準是由主流手機廠商組成的快應用聯(lián)盟聯(lián)合制定；
快應用標準的誕生將在研發(fā)接口、能力接入、開發(fā)者服務等層面建設標準平臺；以平臺化的生態(tài)模式對個人開發(fā)者和企業(yè)開發(fā)者全品類開放；
快應用具備傳統(tǒng)APP完整的應用體驗，無需安裝，即點即用。

2.快應用技術特點

采用前端技術棧，運行和開發(fā)效率高，學習成本低，代碼可以復用；
原生渲染能力，功能完備，體驗等同于應用，資源消耗小。

從上面我們可以了解到：

1. 快應用不是HTML5,但是可以用前端已有技術棧直接上手開發(fā)；

2. 快應用是原生渲染,有著比H5更加完備的功能及原生體驗；

3. 快應用即點即用,無需安裝。

二、快應用 vs HTML5開發(fā)

首先，我們來回顧一下，在web項目中是怎么進行開發(fā)的？

簡單的說下，可以分為以下9個步驟：

拿到PSD設計圖
切圖
將PSD 轉(zhuǎn)成html
寫JS業(yè)務邏輯
mock數(shù)據(jù)，自測
與后端聯(lián)調(diào)
提交測試
上線
迭代與優(yōu)化

如下圖所示：

做過前端的同學對這個步驟應該很熟悉了，快應用的開發(fā)步驟和這差不多，主要有2點差別，我們來比較一下：

html5開發(fā)是基于瀏覽器的，直接寫完后在瀏覽器下就可以運行，看效果。但是快應用開發(fā)是基于nodejs環(huán)境的，所以我們開始需要搭建一下開發(fā)環(huán)境；
在將PSD轉(zhuǎn)成html的時候，快應用提供了一個腳手架，當然html5的一些項目里面也有腳手架，比如vue，react項目，官方都提供了一個腳手架，方便開發(fā)者進行開發(fā)。

如下圖所示，下面是快應用的開發(fā)過程：

下面從 搭建環(huán)境，hap-toolkit的使用，靜態(tài)頁面書寫（PSD轉(zhuǎn)成html），js業(yè)務邏輯的書寫，調(diào)試這5個方面來說說如何開發(fā)快應用。其他的步驟都是html5開發(fā)常見的步驟，和html5一樣，直接遷移過來就行。

1.搭建開發(fā)環(huán)境

快應用開發(fā)是基于前端技術棧的，官方團隊提供了基于nodejs的開發(fā)環(huán)境，可以參考官網(wǎng)的詳細教程。

主要是：

nodejs（推薦 node 8以上版本）
hap-toolkit 編譯工具。
快應用調(diào)試器和快應用預覽版（方便調(diào)試和查看效果）

當然快應用官方也提供了IDE，也可以直接安裝一個IDE。

2.hap-toolkit的使用

安裝好hap-toolkit后，可以在控制臺輸入hap -v 看看當前的版本。

當前的最新版本是0.1.1

下面是hap-toolkit的一些常見用法

具體可以參考：

https://doc.quickapp.cn/tools/toolkit-tools.html

3.靜態(tài)頁面書寫

快應用提供了組件和指令，方便PSD轉(zhuǎn)化成html。

01.組件

快應用中組件與Vue中組件類似，一個快應用，可以組織為一個嵌套的組件樹，如下圖所示：

組件分類：

原生組件
自定義組件

當一個頁面的業(yè)務邏輯變得復雜時，就需要將頁面拆成多個模塊，完成解耦。所以，快應用提供了自定義組件的能力，定義自定義組件與開發(fā)頁面一致。

（1）text、div等為原生組件,由各平臺 Native 底層渲染；

（2）自定義組件是一個開發(fā)者編寫的組件，使用起來和 Native 一樣，最終按照組件的<template>來渲染,頁面也是一種自定義組件；

（3）自定義組件比頁面組件的不同之處在于多了一個props屬性,用于聲明該組件可接受的外部數(shù)據(jù)傳遞,props是一個數(shù)組，數(shù)組中每個元素是暴露的屬性名稱,如果屬性名稱使用駝峰定義，如：prop2Object，那么在外部傳遞數(shù)據(jù)時請使用-連接，如：prop2-object；

（4）引入自定義組件的方式為通過 <import> 標簽引入,如: <import name="comp-part1" src="./part1"></import>；

（5）父子組件之間可以通過事件進行通信,兄弟組件之間通過 Publish/Subscribe 模型來完成通信,詳情請見文檔。

02.指令

框架指令是框架為組件定義的特殊屬性，以及框架提供的特殊組件，用于自定義頁面DOM結構渲染邏輯。

指令主要包含：

注意：

（1）for 循環(huán) 自定義變量表示 for 指令的數(shù)組索引和數(shù)組元素時，變量名不可以用$或_開頭

（2） if/elif/else 節(jié)點必須是相鄰的兄弟節(jié)點

4.JS業(yè)務邏輯的書寫

快應用的js是采用es6語法標準的，支持es6的特性。

這里主要講2個方面：生命周期和事件機制

01.生命周期

生命周期概念為現(xiàn)代前端開發(fā)的重要基礎，快應用里，頁面的生命周期指的也就是ViewModel的生命周期，整個頁面生命周期如下:

APP 中可以同時運行多個頁面，但是每次只能顯示其中一個頁面；這點與純前端開發(fā)，瀏覽器頁面中每次只能有一個頁面，當前頁簽打開另一個頁面，上個頁面就銷毀了。

02.事件機制

與html5一樣，快應用里面也提供了事件機制。

on用于監(jiān)聽自定義事件；off移除對應的事件監(jiān)聽；
$emit()、 $dispatch()、 $broadcast()等觸發(fā)事件，其中$dispatch()為向上傳遞，$broadcast()為向下傳遞；

原生組件支持一系列事件，如通用事件、組件專有事件,通過on+事件名稱作為組件屬性，來監(jiān)聽事件 (如: focus事件,可以用 onfocus 屬性監(jiān)聽)。

5.調(diào)試

不同于傳統(tǒng)前端開發(fā)，快應用運行在廠商聯(lián)盟的手機上。因此，官方提供了調(diào)試工具。

開發(fā)者可通過快應用調(diào)試器、hap-toolkit 的遠程調(diào)試命令、chrome devtools 調(diào)試界面，來調(diào)試快應用。

快應用調(diào)試目前支持 chrome devtools 中的elements, console, source, network等模塊。

使用chrome devtools進行調(diào)試

三、性能優(yōu)化

性能優(yōu)化是前端永恒的主題

性能優(yōu)化包括兩個大類：

通用的解決方案，這類具有普適性；
與具體組件結合的解決方案，如：組件級別的懶加載，甚至利用組件本身特性完成優(yōu)化。

建議開發(fā)者了解性能優(yōu)化的常見方案，提升應用性能

1.簡化ViewModel的數(shù)據(jù)

在ViewModel的定義中，屬性public、protected、private 主要承擔數(shù)據(jù)驅(qū)動的數(shù)據(jù)定義與改造功能，會對賦值的數(shù)據(jù)中每個屬性進行遞歸式的定義。因此，屬性個數(shù)的定義越少越好，尤其是數(shù)組類型數(shù)據(jù)，建議過濾不需要用到的對象屬性。

示例如下：

如果頁面僅需要用到 list 中每個 item 的 userId, orderName 屬性的話，則僅賦值這兩個屬性到ViewModel數(shù)據(jù)中，過濾掉非相關屬性。

// 模擬fetch請求返回的數(shù)據(jù)

const orderList = [

{

userId: '123',

orderName: 'XX產(chǎn)品',

userName: '張三',

shoppingList: [

{

productId: '001',

productLink: 'http://xxx',

productShop: {

ownerId: '2390',

ownerName: 'XXX店鋪'

}

]

{

// ...

}

]

export default {

private: {

list: []

onInit () {

// 返回頁面中需要的對象屬性，過濾無用的對象屬性

this.list = orderList.map(item => {

userId: item.userId,

orderName: item.orderName

})

}

2.合理使用后代選擇器

框架支持 CSS 中的后代選擇、支持 less 預編譯，方便開發(fā)者開發(fā)，提升代碼可維護性。然而，過多的使用后代選擇器，也會在節(jié)點匹配上帶來性能損耗，尤其是當一個節(jié)點滿足多個選擇時。

優(yōu)化建議如下：

避免使用組件名稱（tag 標簽名稱）作為后代選擇的最后一項匹配規(guī)則，如： .doc-page #shop text { ... }；否則每個 text 組件渲染時都會遍歷匹配一次；
減少后代選擇的層級數(shù)量，層級越深，單次匹配耗時越長，如：.class1 .class2 .class3 .class4 .class5 .class6 { ... }；
后代選擇中最后一條匹配規(guī)則的定義名稱盡量唯一，如：.doc-page #shop .shop-item .shop-name-full { ... }。

3.使用懶加載

懶加載是一項通用的優(yōu)化手段，傳統(tǒng) H5 頁面中的圖片懶加載，指的是頁面即將滾動到屏幕可視區(qū)域時，才加載資源，渲染頁面。

在框架中，也可以使用懶加載技術：為了加快頁面可視區(qū)域的渲染，可以通過指令或者事件觸發(fā)等手段推遲不可見區(qū)域的渲染。

四、參考文檔

快應用開發(fā)教程
https://doc.quickapp.cn/tutorial/
sample項目
https://github.com/quickappcn/sample

隨著主流瀏覽器對HTML5的不斷支持和完善，越來越多的開發(fā)者開始使用HTML5開發(fā)各種功能強大的web應用，可以說HTML5正在引領著互聯(lián)網(wǎng)新革命。HTML5的火爆，使得HTML5成為了僅次于Java和Python開發(fā)的高薪職位，為了能夠更快跨入高薪大門，以下就跟著千鋒武漢HTML5培訓小編簡單來了解下HTML5從入門到精通應學習的內(nèi)容。

想要學習HTML5，首先應該來了解下HTML5的特征有哪些？

1、本地存儲。基于HTML5開發(fā)的網(wǎng)頁APP擁有更短的啟動時間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5APP Cache，以及本地存儲功能。

2、實現(xiàn)多媒體更加簡單。利用HTML5的和非常方便的在網(wǎng)頁上添加視頻和音頻，不需要很復雜的代碼，就能打造一款功能齊全的HTML5播放器。

3、三維圖形和動畫。HTML5的3D引擎卻可以更方便的實現(xiàn)3D效果，而且更加逼真。

4、CSS3的運用。CSS3提供更多的CSS屬性，可以做更豐富的渲染效果。

HTML5可以實現(xiàn)哪些功能呢？

1、一次編寫，隨處部署。HTML5可以在多種設備上運行，這是其他方式都無法做到的。

2、在互聯(lián)網(wǎng)中分享。HTML5應用都有一個URL，因此它可以在互聯(lián)網(wǎng)中被隨意分享，并且在搜索時即可被找到。

3、多廠商標準，建立在協(xié)議之上。HTML5是眾多公司努力的結果，沒有一家廠商可以左右它的方向。

4、適用于多種環(huán)境。HTML5應用可以使用交互式設計來提供最佳體驗，而不需要更改代碼。你可以從桌面到手機到平板電腦無縫進行切換，而無需重復安裝不同的應用。

HTML5基礎內(nèi)容了解之后，那么HTML5的前端技術也是必備的，其中包括：CSS、HTML、DOM、js、Ajax，jquery，Vue，jquery- mobile，zepto等，在掌握這些技術的同時，還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。這是前端工程師的最核心技能，是專做頁面效果的技術。如果想更深條理的做好前端開收，那就需要學習和了解更多的東西，比如一些熱門的框架backbone，angularjs 等;nodejs近幾年也越來越水了，同樣需要學習。

學習HTML5開發(fā)技術，想要入門到精通，以上知識內(nèi)容和技能掌握是必備的。HTML5的發(fā)展如日中天，只要你有足夠的熱情和興趣，并且肯努力，學好HTML5沒有任何問題。所以，你還在猶豫什么，趕快來學HTML5吧！

莓BB10系統(tǒng)作為目前官方商店仍在運行的小眾系統(tǒng)之一，真的是非常難得。尤其對于一個關注小眾系統(tǒng)的碼農(nóng)掌叔來說，更是彌足珍貴。掌叔曾經(jīng)在BB10系統(tǒng)上開發(fā)過2個應用，上架官方商店的有一個。所以在開發(fā)以及應用發(fā)布的過程中也積累了一點點的經(jīng)驗，準備寫成系列教程與其他小伙伴們的分享。如果你手里正好有黑莓手機，又有想親自給它開發(fā)一些應用的想法，那么來吧，跟隨掌叔一起，把代碼寫起來！

對于BB10上應用的開發(fā)，目前的有三種路徑選擇，一種是用C++寫原生應用，一種是開發(fā)Android應用然后在黑莓的虛擬機上運行，還有一種就是利用Cordova采用HTML5技術來寫。這三種開發(fā)路徑就難易度上來說，掌叔認為最后一種方法最為簡單，上手的成本比較低。同時因為跨平臺的原因，開發(fā)的應用還能在WP、Andorid、iOS上運行。所以本系列教程掌叔就以最后一種開發(fā)方式為講解內(nèi)容。

今天我們先來看一下怎么配置一個開發(fā)環(huán)境。

1、首先去黑莓官網(wǎng)下載安裝BlackBerry Native SDK。打開剛裝好的Momentics IDE，會提示要下載SDK，這時候電腦接上黑莓bb10手機，然后選擇Connect a BlackBerry 10 device

下一步，輸入手機密碼，注意這一步一定要開啟手機的開發(fā)者模式。

下一步選擇API級別，默認就好，點擊Install。

開始下載了。

然后我們進入安裝目錄bbndk雙擊里面的bbndk-env_10_3_1_995.bat文件它會幫我們處理好系統(tǒng)環(huán)境的設置。

2、安裝完之后下一步我們來創(chuàng)建bbidtoken.csk令牌首先我們要先創(chuàng)建一個黑莓開發(fā)者賬戶，這里掠過開發(fā)賬戶申請流程，我們假設看到這里的同學已經(jīng)創(chuàng)建好了自己的黑莓開發(fā)者賬號。訪問黑莓網(wǎng)站用你的賬號登錄

進入這個界面開始創(chuàng)建令牌，這里需要輸入一個6至8位的密碼。為了好記可以輸入你黑莓開發(fā)者賬號的密碼。

點擊“獲取令牌”之后瀏覽器就會自動下載一個bbidtoken.csk文件，根據(jù)頁面提示我們將這個文件復制到％HOMEPATH％\ AppData \ Local \ Research In Motion這里。

然后打開一個命令行窗口輸入：

C:\bbndk\host_10_3_1_12\win32\x86\usr\bin\blackberry-keytool -genkeypair -storepass 123456 -author iniche

執(zhí)行成功后會在剛才令牌那個文件夾里生成一個author.p12文件。123456替換成你令牌的密碼，iniche替換成你要的令牌作者名稱，最好是英文名稱。

接下來我們來安裝cordova，首先要先安裝好nodejs，我們可以到nodejs的官網(wǎng)去下載，nodejs有安裝包，安裝很簡單，這里就不再贅述了。當然注意一下版本，掌叔用的是8.2.1版本的。

裝好nodejs之后我們打開一個CMD命令行窗口，在里面輸入npm install -g cordova@6.1，電腦開始自動安裝cordova需要文件，過一會就會提示安裝完畢。一切都裝好之后下面就讓我們來創(chuàng)建一個項目吧。

依次在命令行窗口輸入如下命令：

$ cordova create hello com.example.hello
$ cd hello
$ cordova platform add blackberry10
$ cordova build

如果一切順利的話就能看到bar文件打包成功的提示，如下圖。

安裝包已經(jīng)打包成功了，接下來我們把應用部署到我們的手機里吧。

首先看一下我們手機的PIN碼是多少，方法是系統(tǒng)設置-關于-類別選硬件。然后把PIN碼記下來。然后把手機用USB線和電腦連接，在手機上進入安全和隱私-開發(fā)模式，打開開發(fā)模式。這里有一個IP地址我們也記下來。

下面我們在手機上安裝調(diào)試令牌，并且安裝應用。輸入cd platforms\blackberry10\cordova回車切換到這個文件夾。然后輸入run.bat --device --keystorepass mypassword，mypassword要替換成你令牌的密碼。執(zhí)行成功后就會在手機里安裝調(diào)試令牌，并且自動幫你把剛才的hello項目安裝到你的手機里了。一切正常話，應用匯自動啟動，如下圖這樣：

在線咨詢

上一篇：整個網(wǎng)頁變成灰色的代碼是什么？
下一篇：超高效 Vue 模態(tài)彈出框組件Vue-Modal

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

如何從HTML5快速轉(zhuǎn)型快應用？

您的項目需求