快應用的那些事

       提及快應用，你們的第一反應就是，什麼是快應用？ 一個陌生又新鮮的詞彙。 讓人忍不住想去知道它，瞭解它，進而使用它。

      快應用：是十大手機廠商基於硬件平臺共同推出的新型應用生態。簡單歸納來講就是不用下載， 隨點隨用，卻還能享受原生應用的性能體驗。

       做爲前端開發人員，時刻關注着前端的新型技術，瞭解行業動態，把握新的技術，才能時刻保持本身能走在技術的前沿。快應用的興起，給安卓市場帶來了巨大的改變。改變有不少方式，對於投資和開發的角度來說，效果和投入產出比相當重要。九大廠商共建的快應用標準，最大的優點在於下降了開發者的開發和推廣成本，有了這個標準，開發者能夠作到一次性開發，各大手機廠商都能運行，極大地減小了開發成本。

       快應用的特徵顯而易見。使用的是咱們前端技術開發，原生渲染，同時具有了HTML5 和 原生應用的雙重優勢，不用安裝，點開使用，享受同樣的體驗。使得用戶經過本身的手機更容易獲取本身所需的服務。 沒必要存儲，一鍵直達，更新直接推送。 更快更好的享受快應用所帶來的快感和便捷。

     快應用如今的發展趨勢迅速， 例如豆瓣評分，餓了麼，時光時鐘，王者榮耀盒子等都有快應用。你不須要去下載，也能夠直接去搜索美食，不須要去下載也能夠關注時間，不須要去下載， 你能夠看到遊戲盒子。 隨隨便便的搜一搜點一點， 你就能覆蓋你生活的需求，知足你搜索的須要。這就是快應用所想給人帶來的極致體驗。

      做爲開發者，除了跟你們分享快應用，我也但願能將我開發中的一些總結，一些問題的發現，一些bug的總結，跟你們進行分享。但願做爲快應用的支持者，能在此和你們共同瞭解快應用，學習快應用，使用快應用。 能讓快應用以更好的姿態融入到咱們的生活當中。

關於快應用的你們進行分享詳情可參照快應用官網https://doc.quickapp.cn/tutorial/ide/

1.1pc安裝toolkit工具

1.1.1安裝nodeJs

安裝過程： nodejs.org/en/ node官方地址進行下載 。安裝版本在6.0以上

安裝後校驗是否安裝成功： node -v ，若是出現如下相似狀態，則表示安裝成功

1.1.2安裝hap-toolkit

經過npm命令安裝

命令: npm install -g hap-toolkit

安裝後校驗是否安裝成功：

hap -V 【注意大寫的 V】

1.2.手機安裝調試器

調試器是一個Android應用程序

1.2.1快應用調試器

爲了方便調試程序，您可使用快應用調試器，這是一個Android應用程序，主要包含如下功能：

· 掃碼安裝：配置HTTP服務器地址，下載rpk包，並喚起平臺運行rpk包

· 本地安裝：選擇手機文件系統中的rpk包，並喚起平臺運行rpk包

· 在線更新：從新發送HTTP請求，更新rpk包，並喚起平臺運行rpk包

· 開始調試：喚起平臺運行rpk包，並啓動遠程調試工具

調試器可使用後， 在調試器安裝rpk包 。

快應用調試器能夠鏈接到手機系統內的快應用執行環境（須要將系統升級到最新的正式版本），或者您能夠單獨下載安裝快應用平臺預覽版來提供執行環境。

下載調試器 【點擊 www.quickapp.cn/docCenter/p…】 點擊下載調試器

下載調試器 名稱是 quickapp_debugger.apk 。將apk 經過qq傳送到本身的手機 。 直接下載安裝便可。

1.2.2快應用預覽版

當您的手機系統還沒有內置快應用運行平臺，或您想在開發過程當中體驗快應用還沒有正式發佈的新功能、新特性，您能夠安裝 快應用預覽版。

下載版本目前有4個。分別是

快應用預覽版v1030

快應用預覽版v1020

快應用預覽版v1010

快應用預覽版v1000

下載名稱 相似於 【quickapp_platform_preview_release_v1020.apk 】 也能夠經過qq傳送。 下載到本機，而後經過快應用調試器-選擇本地安裝進行安裝。

rpk 安裝 =》 若是是qq接收， 地址通常是 ：本地安裝 =》文件管理=》內部存儲設備=》tencent（騰訊）=》QQfile_recv 找到下載的最新的文件 。（dist文件產出rpk包）

注意：若是須要安裝低版本， 則須要先卸載以前的版本。

1.3建立項目

toolkit工具和調試器安裝完成之後，開始建立項目

1.3.1創建項目模版

例如： hap init myproject

myproject 爲 項目名稱 ， 也是項目根目錄

myproject 則包含項目配置和示例初始代碼。

結構以下：

· src：項目源文件夾

· sign：簽名模塊，當前僅有debug簽名，若是內測上線，請添加release文件夾，增長線上簽名；簽名生成方法詳見文檔編譯工具

· 

 

1.3.2 安裝依賴

npm install

若是有報錯 ：Cannot find module '.../node_modules/hap-tools/webpack.config.js'

運行 hap update --force 執行後，沒必要再次執行 npm i

1.3.3編譯項目

手動編譯， 在根目錄下， 例如myproject 下。 運行

npm run build

編譯打包成功後，項目根目錄下會生成文件夾：build、dist

· build：臨時產出，包含編譯後的頁面js，圖片等

· dist：最終產出，包含rpk文件。實際上是將build目錄下的資源打包壓縮爲一個文件，後綴名爲rpk，這個rpk文件就是項目編譯後的最終產出

· 

自動編譯項目（每次修改源代碼文件後，都自動編譯項目）

npm run watch

1.3.4啓動http服務器

開啓另外一個窗口 ， 好比cmd開啓或者 vscode新增一個窗口， 輸入

npm run server （推薦）

也能夠自定義端口（如：8080）

npm run server -- -- port 8080

1.3.5手機上預覽運行效果

1 打開調試器， 點擊掃碼安裝。能夠掃碼 npm run server的二維碼（輸入終端窗口提示的二維碼），也能夠複製npm run server 出現的地址 （輸入終端窗口提示的http服務器地址）到瀏覽器生成二維碼並掃碼。【推薦】

2打開調試器，點擊右上角 menu ==》設置，輸入終端窗口中http服務器地址

【注意】：若是提示安裝失敗， 首先檢查npm run server 是否正常 。 而後檢查是否在一個網段。pc和手機是一個網段。 不能夠開啓360wifi一類的。

試用場景： 預覽或者低頻率的更新rpk包。若是是長時間的瀏覽，能夠直接將rpk qq發送到手機。 進行本地安裝。rpk 安裝 =》 若是是qq接收， 地址通常是 ：本地安裝 =》文件管理=》內部存儲設備=》tencent（騰訊）=》QQfile_recv 找到下載的最新的文件 。（dist文件產出rpk包）

安裝成功的預覽效果：

總結 ： 瞭解項目結構， 編譯產生rpk ， 運行經過調節器安裝rpk 。

1.4 .代碼編譯配置-開發工具

1.4.1 使用 Visual Studio Code 開發

下載安裝 : 點擊跳轉下載Visual Studio Code

打開 vscode ， 打開項目。 點擊左上角擴展，此圖標

搜索 hap 安裝 Hap Extension ==》點擊從新加載 ，激活 Hap Extension

1.4.2使用WebStorm開發和sublime開發 請參照（https://doc.quickapp.cn/tutorial/getting-started/code-edit-conf.html）

【推薦vscode】

1.5開發與調試

1.5.1 日誌輸出和日誌查看

日誌輸出

找到src文件夾的manifest.json，找到config配置，將logLevel修改成最低級別debug，即：容許全部級別的日誌輸出

{
　"config": {
　　"logLevel": "debug"
}
}

在js中輸出日誌（與傳統前端開發一直）

console.debug('debug')
console.log('log')
console.info('info')
console.warn('warn')
console.error('error')

查看日誌

能夠在瀏覽器控制檯查看日誌，也能夠在編輯器終端窗口查看日誌。

1.5.2 遠程調試

就是經過瀏覽器預覽快應用。 啓動服務器npm run server

1編輯器提供掃碼的二維碼

2快應用調試器-掃描按照-安裝rpk文件

3點擊快應用調試器的-開始調試

1.6項目配置信息

地址（doc.quickapp.cn/tutorial/ge…）

1.6.1配置應用基本信息

在manifest.json文件中

（1）應用包名（package）

格式：

{
"package": "com.example.demo"
}

（2）應用名稱（name）【6個漢字之內，與應用商店保存的名稱一致，桌面顯示的應用名也是】

格式：

{
"name": "我是快應用"
}

（3）應用圖標（icon）【 正方形（不能是圓角），且務必無白邊】

格式：

{
"icon": "/Common/logo.png"
}

注意【必須是絕對路徑 】其中/對應於路徑<myproject>/src/

（4）應用版本名稱、版本號（versionName、versionCode）【版本號 主版本.次版本 格式 ， 版本號從1開始，每次更新上架自增1 】

{
"versionName": "1.0",
"versionCode": 1
}

demo：

"versionName": "1.0.0.0",

"versionCode": "1",

（5）支持的最小版本號（minPlatformVersion） 【最小是1000，小於1000請在提測前下載安裝快應用平臺內測版，自測經過後提測】

{
"minPlatformVersion": 1000
}

（6）配置接口列表（features）

【注意】在使用接口時，必須先在manifest中聲明接口。在每一個接口文檔的頂部，都附有聲明接口的配置代碼

格式：

{
"features": [
{ "name": "system.fetch" }
]
}

1.6.2 配置頁目錄有（router）

注意【定義頁面的實際地址、跳轉地址。若是ux頁面沒有配置路由，則不參與項目編譯（就是能夠不配置）。一個目錄下最多隻能存在一個主頁面文件（不包括組件文件）】

（1）首頁名稱（router.entry）

例如工程目錄

└── src
└── Demo 頁面目錄，存放各自頁面私有的資源文件和組件文件
└── index.ux 頁面文件，文件名沒必要與父文件夾相同（推薦index.ux）

{
"router": {
"entry": "Demo"
}
}

則進入項目的第一個頁面 爲demo的index.ux 頁面 （入口頁）

（2）頁面路由對象（router.pages）

頁面路由對象， key爲頁面名稱（src目錄下，，頁面目錄的相對丼 ， value爲頁面具體路由配置， key不能重複）

頁面具體路由配置（router.pages的value）包括如下屬性：

· component：頁面對應的ux文件名

· path：頁面路徑，不填則默認爲頁面名稱（<ProjectName>/src目錄下，頁面目錄的相對路徑）

demo工程目錄：

└── src
|── Demo 頁面目錄，存放各自頁面私有的資源文件和組件文件
| └── index.ux 頁面文件，文件名沒必要與父文件夾相同（推薦index.ux）
└── Doc
└── Layout 頁面目錄，存放各自頁面私有的資源文件和組件文件
└── index.ux 頁面文件，文件名沒必要與父文件夾相同（推薦index.ux）

當頁面名稱（router.pages的key）爲Demo時，對應的頁面配置（router.pages的value）包括：

· component：頁面對應的【ux文件名】index

· path：頁面路徑，默認爲頁面名稱Demo

{
"router": {
"pages": {
"Demo": {
"component": "index"
},
"Doc/Layout": {
"component": "index"
}
}
}
}

開發者就能夠經過/Demo訪問到Demo目錄下的index.ux頁面了，就能夠開始快應用的開發了。

提及快應用，不得不說快應用踩過的坑。 因爲快應用處於不斷優化階段，在開發過程當中，天然會遇到一些不完善的地方，因爲咱們對於新技術的掌握還不透徹，也會使得開發中遇到不少的困難。 我將快應用開發的問題羅列到下面，但願對你們的開發有所幫助。

1. stack模式注意事項

stack模式下，父級內放入image，將事件做用於stack和div事件觸發均有難問題，因此，須要將事件設置到image上。 設置於子級自己。

2 . tabs切換

若是是自定義組件形式。 tab-bar能夠設置爲div形式。 當點擊每一個tab-bar ， 能夠切換圖片和更換顏色。

在data中設置數據進行切換 。

3．缺乏依賴

Can’t resolve ‘less-loader’ ,證實缺乏 less-loader依賴，直接從新安裝依賴便可， 即 npm install less-loader ，其餘依賴同理。

4 . 返回數據做二次處理再渲染

若是數據返回的是類型等數字，好比返回爲1 ，2 等。 須要將1和2 在渲染的過程當中轉換爲name 和 state ， 則返回的數據須要處理後從新返回新數據即

5．父子組件傳參 （父組件向子組件傳參）

子組件 設置props

props中的屬性做爲子組件，遍歷 data的值，遍歷到每個是 $item ，表明data1中每個對象 。獲取每一個對象，拿到對應屬性， 將其放入 頁面中。

父組件的數據形式

在父組件中使用子組件

6. 經過 openssl 命令等工具生成簽名文件private.pem、certificate.pem

若是隻是單獨vscode 生成證書必須使用openssl，使用命令是直接用不了的。必須安裝openssl。

操做步驟是：

複製華爲的openssl 到項目的同級 D盤的 D:\Program Files，複製OpenSSL-Win64 文件到 D:\Program Files 此位置

而後設置全局環境變量

個人電腦 -右鍵- 屬性 -高級-環境變量-path雙擊- 在最後加分號加openssl路徑。 ;D:\Program Files\OpenSSL-Win64\bin

而後執行命令

openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem複製代碼

最後在工程的 sign 目錄下建立 release 目錄，將私鑰文件 private.pem 和證書文件 certificate.pem 拷貝進去。

7 . 沒有tab-bar，列表沒法加載底部問題

快應用，在隱藏tab-bar的狀態 ，列表加載一直是加載中，沒法加載到底部。 因此要設置一個padding值，>=2px，不然沒法加載到底部。

8. 路由傳參

路由傳參：（使用時注意引入import router from '@system.router';）

路由傳img（參數時），接受時是字符串類型，需作處理才能使用。

this.detailList = JSON.parse(this.detailList); 使用此方法將\\解析。

可得正常結果例如:https://blog.csdn.net/shi_yi_fei/article/details/51202209

9．路由跳轉傳參

路由跳轉傳參（routePagePushWithParams）

格式

routePagePushWithParams () {

// 跳轉到應用內的某個頁面

router.push({

uri: '/heroDetail',

params: {

detaiId: this.$item.hero_id

}

})

}

該路徑跳轉爲heroDetail下的index.ux的文件，

子組件在接收時注意定義屬性最好不爲null （不然會出現未知錯誤）

例

protected: {

detaiId: ""（正確）

detaiId: null（錯誤）

}

10.list瀑布流(不理想)

佈局:

方案1: list中嵌套兩個list-item，list-item中用block循環對應數組中數據。

缺點:

list不支持justify-content樣式。

頁面出現卡頓。

方案2: div中嵌套兩個list，block循環list-item來展現數據。

缺點:

div不能實現頁面滾動。

左右list會獨立滾動。

方案3: list中設置屬性columns:2，list-item顯示數據信息。

缺點:

沒法區分兩側數據。

每一個list-item高度相同。

方案4: list中嵌套一個list-item，list-item中用div分爲左右兩列列表，div中block循環對應數組中數據。

缺點:

頁面卡頓。

第一頁內容顯示正常，但以後的內容顯示不全。

js: 先定義兩個數組，遍歷數據根據後臺返回的高度來判斷添加到哪一個數組中。

總結:

list內子元素只能單方向滾動，不能換行。

list、list-item中不可再次嵌套list。

暫不支持瀑布流

list-item的type屬性是優化list的關鍵。

block會被當作透明標籤處理，調試時不顯示。

11．swiper中多個圖片加載

若是很長很長圖片加載時出現圖片模糊、被放大（初次加載時出現）

部分機型(小米)出現一些圖片被切割現象。（不可恢復）

部分機型（華爲、oppo）滑動過快，出現圖片被切割現象，從新加載能夠還原頁面。有多是手機渲染的問題。

12.圖片編輯

文檔中圖形圖像目錄下，對圖片的操做不能操做網絡上的圖片。

不然會報202（參數錯誤）

uri格式爲 uri:'internal://tmp/abc.jpg'

13.頁面調試

最初調試時注意版本號以及是否在同一網段。若是手機電腦都使用一個wifi 。可是電腦安裝了360wifi等，則會改變網段。請注意必須在同一網段。

調試時會出現頁面忽然崩掉，從新加載便可。

當你npm run watch頁面不更新時，從新npm run build的會顯示你的錯誤。

出現安裝失敗，肯定代碼沒問題，就清理一下測試機。

14.變量

問題1：在block循環中直接使用".length",可顯示length前內容的長度。 例: {{$item.thumb_img.length}}

問題2：當點擊圖片跳轉該圖片詳情頁時，routePagePushWithParams中可直接打印出當前點擊圖片下的詳情信息

html：

<block for="{{imgListMsg}}" @click="routePagePushWithParams">

<text class="text-title">{{$item.title}}</text>

</block>

js:

routePagePushWithParams () {

console.log(this.$item.title)

// 跳轉到應用內的某個頁面

router.push({

uri: '/cosImgDetail',

params: {

detailName: this.$item.title,

}

})

}

15.css樣式問題

html

<text for="value in $item.reply_list">

<span>用戶名稱</span>

用戶內容

</text>

當給span添加樣式時，會覆蓋text的樣式

解決辦法：給span添加class ，不是直接span標籤。

16.richtext 樣式不可被覆蓋

<richtext type="html" class="skillCon" >

{{description}}

</richtext>

richtext解析返回的html數據。 樣式不可被覆蓋更改。 須要單獨給html更改新的顏色等，不可實現。

17.if使用和判斷

<div class="topPic" if="{{$item.iconList !='' && $item.iconList != null }}" @click="routewebdetail" >

<div class="smallPic" for="{{$item.iconList}}">

<!-- 圖片 -->

<image src="{{$item.icon}}" class="imgImg" ></image>

</div>

</div>

出現報錯

緣由是，列表中儘可能少使用if判斷，若是使用了。必須保證type值相同的結構type惟一，若是列表中可能出現不一樣的type則可能報錯。最好的解決辦法是，使type值不惟一。

解決辦法：type="product-{{ listItem.iconList.length }}-{{ listItem.coverList.length }}"

18.分享問題

分享問題請注意，申請回來的key。 注意將value值放入到manifext.json。模式是

若是platform只有一個，好比只有微信。點擊分享的時候，會直接分享到微信頁面， 不會調起彈框。若是須要有其餘額外的操做在分享頁，能夠製做假的點擊按鈕，逐個分享。

19.swiper中暫時不支持list組件

處理辦法，若是須要滑動操做，則使用tabs中放入list組件。

20. list中圖片不能佔滿全屏處理

list做爲最大的外層容器，內部的background-image或者image 若是不設置高，height：100%；撐不開元素。

處理辦法：給image設置固定的px高度，若是要圖片佔滿全屏，則 device.getInfo能夠獲取設備的高， 將獲取的高給到list-item內的image設置高度。 能夠佔滿全屏。目前不肯定是否有兼容性問題。

若是隻有一張固定背景圖，而不是list渲染圖片，則能夠給最大的節點設置背景圖，能夠佔滿全屏。

21.div下image設置問題

若是div下直接有一個image。 div設置寬60px高60px，image一樣設置寬高60 ，最後渲染的結果多是60*60，60*61，61*60,59*59，會有1像素的問題。目前仍是待解決。

感謝你們閱讀這邊文章。但願你們能提出寶貴的意見，但願咱們能共同見證快應用的成長，享受快應用所帶來的極致體驗。