初探快應用

騰訊DeepOcean發表於2018-10-29

騰訊DeepOcean原創文章：dopro.io/quick.html

快應用是什麼

快應用官網給出的解釋：

1、快應用是基於手機硬體平臺的新型應用形態，標準是由主流手機廠商組成的快應用聯盟聯合制定。

2、快應用標準的誕生將在研發介面、能力接入、開發者服務等層面建設標準平臺，以平臺化的生態模式對個人開發者和企業開發者全品類開放。

3、快應用具備傳統APP完整的應用體驗，無需安裝、即點即用。

簡單來說快應用就是國內幾大手機廠商聯合推出的免安裝應用，類似於微信的小程式，使用者不用安裝應用，即點即用，如圖所示,在oppo搜尋介面中出現的是一款騰訊動漫的快應用。

1

快應用如何開發

一、準備工作

1、安裝hap-toolkit 
npm install -g hap-toolkit
複製程式碼
2、建立專案 
hap init <ProjectName>
複製程式碼
3、手機安裝偵錯程式 3

4、編輯器設定

這裡採用的是vscode，快應用的檔案都是帶有ux字尾，需要安裝hap擴充套件外掛

2

二、程式碼結構

4

比較重要的是manifest.json檔案，它包含了應用描述、介面宣告、頁面路由資訊

{
  "package": "com.application.demo",
  "name": "appName",
  "icon": "/Common/icon.png",
  "versionName": "1.0",
  "versionCode": 1,
  "minPlatformVersion": 1000,
  "features": [
    { "name": "system.network" },
    { "name": "system.fetch" },
  ],
  "permissions": [
    { "origin": "*" }
  ],
  "config": {
    "logLevel": "debug" 
  },
  "router": {
    "entry": "Demo",
    "pages": {
      "Demo": {
        "component": "index"
      },
    }
  },  
  "display": {
    "titleBarBackgroundColor": "#252525",
    "titleBarTextColor": "#FFFFFF", 
    "titleBar": true,
    "menu": true,
    "pages": {
      "Demo": {
        "titleBar": false
      },
    }
  }}
複製程式碼

其中”features”是介面列表，比如網路、通知能力，類似java引入jar包方式 ; config.logLevel設定為debug模式，表示允許所有級別的日誌輸出。

*.ux檔案的編碼方式和vue類似，都是分為template、style、script三塊，但還是有一定區別： 如data變為了private，沒有methods，方法直接跟隨在private後面

<script>      
import prompt from '@system.prompt'
import router from '@system.router'
import share from '@system.share'
import fetch from '@system.fetch' 
export default {
    private: { 
        titleBar: {
            'type': 'titleBar',
            'config': {
                'title': '企鵝電競'  
            }
        },
        fetchedData: [],  
        list:[]
    },
    onInit () {
      this.fetchDataListAsync() 
    },    
}
複製程式碼

三、生命週期

vue的生命週期主要是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed；

而快應用頁面生命週期是onInit、onReady、onShow、onHide、onDestroy、onBackPress、onMenuPress，此外還包含了APP的生命週期：onCreate、onDestroy

四、釋出

需要在各個手機廠商開發平臺註冊開發者賬號，然後在快應用官網進行繫結，還是比較麻煩，另外說明下最好是選擇企業註冊，比如oppo的個人開發者只能釋出桌布、主題型別，不能釋出應用 5

五、一個簡單的demo

<import name='titleBar' src='./component-titlebar'></import> 
<template>
        <div class="doc-page">     
            <titleBar value="{{titleBar}}"></titleBar>  
            <list class="list-wrap " columns="2">        
                    <list-item type="listItem" class="list-item flex-column flex-1 " for="{{list}}">  
                        <image class="video-image" src="{{$item.cover_url}}"></image>   
                        <text class="text-title">{{$item.title}}</text>      
                    </list-item>
            </list>
            <div class="fix-bottom"> 
                <div class="download-btn">
                    <image class="logo" src="./images/logo.png"></image>
                    <text class="download-btn-text">發彈幕，看比賽，下載企鵝電競</text>  
                </div>
            </div> 
        </div>  
</template>
6
複製程式碼

最後

快應用的開發總體來說還算簡單，效能也還不錯，不過也遇到了些問題，比如漸變和圓角不能同時使用、button自帶陰影的樣式問題，另外手機除錯發熱會比較嚴重，出現了溫度過高的警告，希望後面能改進吧。

最後，如果希望自家的app能夠獲取更多的流量支援，快應用也是一項不錯的選擇。

歡迎關注"騰訊DeepOcean"微信公眾號,每週為你推送前端、人工智慧、SEO/ASO等領域相關的原創優質技術文章：

看小編搬運這麼辛苦，關注一個唄：)

初探快應用

相關文章