整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、引言
2018年3月份，由小米，中興，華為等10家廠商成立了快應用聯盟，共同發布了快應用的標準。 自此我們可以采用一套標準去開發應用，而無縫的運行在各個手機廠商上。一次開發，一次上傳，自動分發到所有聯盟廠商的設備。根據快應用官方的說法，快應用官方是采用前端的技術棧來開發的，這篇文章以一個前端開發者的角度，來介紹怎么開發快應用，快速入門快應用的開發。
1.什么是快應用
2.快應用技術特點
從上面我們可以了解到：
1. 快應用不是HTML5,但是可以用前端已有技術棧直接上手開發；
2. 快應用是原生渲染,有著比H5更加完備的功能及原生體驗；
3. 快應用即點即用,無需安裝。
二、快應用 vs HTML5開發
首先，我們來回顧一下，在web項目中是怎么進行開發的？
簡單的說下，可以分為以下9個步驟：
如下圖所示：
做過前端的同學對這個步驟應該很熟悉了，快應用的開發步驟和這差不多，主要有2點差別，我們來比較一下：
如下圖所示，下面是快應用的開發過程：
下面從 搭建環境，hap-toolkit的使用，靜態頁面書寫（PSD轉成html），js業務邏輯的書寫，調試這5個方面來說說如何開發快應用。其他的步驟都是html5開發常見的步驟，和html5一樣，直接遷移過來就行。
1.搭建開發環境
快應用開發是基于前端技術棧的，官方團隊提供了基于nodejs的開發環境，可以參考官網的詳細教程。
主要是：
當然快應用官方也提供了IDE，也可以直接安裝一個IDE。
2.hap-toolkit的使用
安裝好hap-toolkit后，可以在控制臺輸入hap -v 看看當前的版本。
當前的最新版本是0.1.1
下面是hap-toolkit的一些常見用法
具體可以參考：
https://doc.quickapp.cn/tools/toolkit-tools.html
3.靜態頁面書寫
快應用提供了組件和指令，方便PSD轉化成html。
01.組件
快應用中組件與Vue中組件類似，一個快應用，可以組織為一個嵌套的組件樹，如下圖所示：
組件分類：
當一個頁面的業務邏輯變得復雜時，就需要將頁面拆成多個模塊，完成解耦。所以，快應用提供了自定義組件的能力，定義自定義組件與開發頁面一致。
（1）text、div等為原生組件,由各平臺 Native 底層渲染；
（2）自定義組件是一個開發者編寫的組件，使用起來和 Native 一樣，最終按照組件的<template>來渲染,頁面也是一種自定義組件；
（3）自定義組件比頁面組件的不同之處在于多了一個props屬性,用于聲明該組件可接受的外部數據傳遞,props是一個數組，數組中每個元素是暴露的屬性名稱,如果屬性名稱使用駝峰定義，如：prop2Object，那么在外部傳遞數據時請使用-連接，如：prop2-object；
（4）引入自定義組件的方式為通過 <import> 標簽引入,如: <import name="comp-part1" src="./part1"></import>；
（5）父子組件之間可以通過事件進行通信,兄弟組件之間通過 Publish/Subscribe 模型來完成通信,詳情請見文檔。
02.指令
框架指令是框架為組件定義的特殊屬性，以及框架提供的特殊組件，用于自定義頁面DOM結構渲染邏輯。
指令主要包含：
注意：
（1）for 循環 自定義變量表示 for 指令的數組索引和數組元素時，變量名不可以用$或_開頭
（2） if/elif/else 節點必須是相鄰的兄弟節點
4.JS業務邏輯的書寫
快應用的js是采用es6語法標準的，支持es6的特性。
這里主要講2個方面：生命周期和事件機制
01.生命周期
生命周期概念為現代前端開發的重要基礎，快應用里，頁面的生命周期指的也就是ViewModel的生命周期，整個頁面生命周期如下:
APP 中可以同時運行多個頁面，但是每次只能顯示其中一個頁面；這點與純前端開發，瀏覽器頁面中每次只能有一個頁面，當前頁簽打開另一個頁面，上個頁面就銷毀了。
02.事件機制
與html5一樣，快應用里面也提供了事件機制。
5.調試
不同于傳統前端開發，快應用運行在廠商聯盟的手機上。因此，官方提供了調試工具。
開發者可通過快應用調試器、hap-toolkit 的遠程調試命令 、chrome devtools 調試界面，來調試快應用。
快應用調試目前支持 chrome devtools 中的elements, console, source, network等模塊。
使用chrome devtools進行調試
三、性能優化
性能優化是前端永恒的主題
性能優化包括兩個大類：
建議開發者了解性能優化的常見方案，提升應用性能
1.簡化ViewModel的數據
在ViewModel的定義中，屬性public、protected、private 主要承擔數據驅動的數據定義與改造功能，會對賦值的數據中每個屬性進行遞歸式的定義。因此，屬性個數的定義越少越好，尤其是數組類型數據，建議過濾不需要用到的對象屬性。
示例如下：
如果頁面僅需要用到 list 中每個 item 的 userId, orderName 屬性的話，則僅賦值這兩個屬性到ViewModel數據中，過濾掉非相關屬性。
// 模擬fetch請求返回的數據
const orderList = [
{
userId: '123',
orderName: 'XX產品',
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 預編譯，方便開發者開發，提升代碼可維護性。然而，過多的使用后代選擇器，也會在節點匹配上帶來性能損耗，尤其是當一個節點滿足多個選擇時。
優化建議如下：
3.使用懶加載
懶加載是一項通用的優化手段，傳統 H5 頁面中的圖片懶加載，指的是頁面即將滾動到屏幕可視區域時，才加載資源，渲染頁面。
在框架中，也可以使用懶加載技術：為了加快頁面可視區域的渲染，可以通過指令或者事件觸發等手段推遲不可見區域的渲染。
四、參考文檔
隨著主流瀏覽器對HTML5的不斷支持和完善，越來越多的開發者開始使用HTML5開發各種功能強大的web應用，可以說HTML5正在引領著互聯網新革命。HTML5的火爆，使得HTML5成為了僅次于Java和Python開發的高薪職位，為了能夠更快跨入高薪大門，以下就跟著千鋒武漢HTML5培訓小編簡單來了解下HTML5從入門到精通應學習的內容。
想要學習HTML5，首先應該來了解下HTML5的特征有哪些？
1、本地存儲?；贖TML5開發的網頁APP擁有更短的啟動時間，更快的聯網速度，這些全得益于HTML5APP Cache，以及本地存儲功能。
2、實現多媒體更加簡單。利用HTML5的和非常方便的在網頁上添加視頻和音頻，不需要很復雜的代碼，就能打造一款功能齊全的HTML5播放器。
3、三維圖形和動畫。HTML5的3D引擎卻可以更方便的實現3D效果，而且更加逼真。
4、CSS3的運用。CSS3提供更多的CSS屬性，可以做更豐富的渲染效果。
HTML5可以實現哪些功能呢？
1、一次編寫，隨處部署。HTML5可以在多種設備上運行，這是其他方式都無法做到的。
2、在互聯網中分享。HTML5應用都有一個URL，因此它可以在互聯網中被隨意分享，并且在搜索時即可被找到。
3、多廠商標準，建立在協議之上。HTML5是眾多公司努力的結果，沒有一家廠商可以左右它的方向。
4、適用于多種環境。HTML5應用可以使用交互式設計來提供最佳體驗，而不需要更改代碼。你可以從桌面到手機到平板電腦無縫進行切換，而無需重復安裝不同的應用。
HTML5基礎內容了解之后，那么HTML5的前端技術也是必備的，其中包括：CSS、HTML、DOM、js、Ajax，jquery，Vue，jquery- mobile，zepto等，在掌握這些技術的同時，還要清楚地了解它們在不同瀏覽器上的兼容情況、渲染原理和存在的Bug。這是前端工程師的最核心技能，是專做頁面效果的技術。如果想更深條理的做好前端開收，那就需要學習和了解更多的東西，比如一些熱門的框架backbone，angularjs 等;nodejs近幾年也越來越水了，同樣需要學習。
學習HTML5開發技術，想要入門到精通，以上知識內容和技能掌握是必備的。HTML5的發展如日中天，只要你有足夠的熱情和興趣，并且肯努力，學好HTML5沒有任何問題。所以，你還在猶豫什么，趕快來學HTML5吧！
莓BB10系統作為目前官方商店仍在運行的小眾系統之一，真的是非常難得。尤其對于一個關注小眾系統的碼農掌叔來說，更是彌足珍貴。掌叔曾經在BB10系統上開發過2個應用，上架官方商店的有一個。所以在開發以及應用發布的過程中也積累了一點點的經驗，準備寫成系列教程與其他小伙伴們的分享。如果你手里正好有黑莓手機，又有想親自給它開發一些應用的想法，那么來吧，跟隨掌叔一起，把代碼寫起來！
對于BB10上應用的開發，目前的有三種路徑選擇，一種是用C++寫原生應用，一種是開發Android應用然后在黑莓的虛擬機上運行，還有一種就是利用Cordova采用HTML5技術來寫。這三種開發路徑就難易度上來說，掌叔認為最后一種方法最為簡單，上手的成本比較低。同時因為跨平臺的原因，開發的應用還能在WP、Andorid、iOS上運行。所以本系列教程掌叔就以最后一種開發方式為講解內容。
今天我們先來看一下怎么配置一個開發環境。
1、首先去黑莓官網下載安裝BlackBerry Native SDK。打開剛裝好的Momentics IDE，會提示要下載SDK，這時候電腦接上黑莓bb10手機，然后選擇Connect a BlackBerry 10 device
下一步，輸入手機密碼，注意這一步一定要開啟手機的開發者模式。
下一步選擇API級別，默認就好，點擊Install。
開始下載了。
然后我們進入安裝目錄bbndk雙擊里面的bbndk-env_10_3_1_995.bat文件它會幫我們處理好系統環境的設置。
2、安裝完之后下一步我們來創建bbidtoken.csk令牌 首先我們要先創建一個黑莓開發者賬戶，這里掠過開發賬戶申請流程，我們假設看到這里的同學已經創建好了自己的黑莓開發者賬號。訪問黑莓網站用你的賬號登錄
進入這個界面開始創建令牌，這里需要輸入一個6至8位的密碼。為了好記可以輸入你黑莓開發者賬號的密碼。
點擊“獲取令牌”之后瀏覽器就會自動下載一個bbidtoken.csk文件，根據頁面提示我們將這個文件復制到％HOMEPATH％\ AppData \ Local \ Research In Motion這里。
然后打開一個命令行窗口輸入：
C:\bbndk\host_10_3_1_12\win32\x86\usr\bin\blackberry-keytool -genkeypair -storepass 123456 -author iniche
執行成功后會在剛才令牌那個文件夾里生成一個author.p12文件。123456替換成你令牌的密碼，iniche替換成你要的令牌作者名稱，最好是英文名稱。
接下來我們來安裝cordova，首先要先安裝好nodejs，我們可以到nodejs的官網去下載，nodejs有安裝包，安裝很簡單，這里就不再贅述了。當然注意一下版本，掌叔用的是8.2.1版本的。
裝好nodejs之后我們打開一個CMD命令行窗口，在里面輸入npm install -g cordova@6.1，電腦開始自動安裝cordova需要文件，過一會就會提示安裝完畢。 一切都裝好之后下面就讓我們來創建一個項目吧。
依次在命令行窗口輸入如下命令：
$ cordova create hello com.example.hello $ cd hello $ cordova platform add blackberry10 $ cordova build
如果一切順利的話就能看到bar文件打包成功的提示，如下圖。
安裝包已經打包成功了，接下來我們把應用部署到我們的手機里吧。
首先看一下我們手機的PIN碼是多少，方法是系統設置-關于-類別選硬件。然后把PIN碼記下來。然后把手機用USB線和電腦連接，在手機上進入安全和隱私-開發模式，打開開發模式。這里有一個IP地址我們也記下來。
下面我們在手機上安裝調試令牌，并且安裝應用。輸入cd platforms\blackberry10\cordova回車切換到這個文件夾。然后輸入run.bat --device --keystorepass mypassword，mypassword要替換成你令牌的密碼。執行成功后就會在手機里安裝調試令牌，并且自動幫你把剛才的hello項目安裝到你的手機里了。一切正常話，應用匯自動啟動，如下圖這樣：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
