快應用簡單瞭解

1 前言

1.1 快應用

簡單地說快應用是國內的十大主流手機廠商好比小米、華爲、ov 等聯合推出的一種新型應用。無需安裝，秒開，體驗媲美原生。還提供了像原生應用同樣的入口：應用商店，搜索頁等。

• 官網
• 官方文檔
• 官方論壇
• 開發工具配置

1.2 爲何要寫這篇文章

對於技術人員來講，多瞭解一些不一樣的技術、不一樣的開發模式、不一樣的架構、擴展本身的技術廣度，對將來的職業發展是頗有必要的。因此本人就從一個前端開發者的角度，從項目搭建開始進入，來分析一下快應用開發。

1.3 本文的目標讀者

• 1 想要學習更多和了解更多的人
• 2 對技術充滿熱情

2 簡單對比

-	微信小程序	快應用
語法規範	小程序開發規範	類vue開發規範
標籤集合	小程序標籤	快應用標籤
樣式規範	wxss	scss、style、less
組件化	無組件化機制	快應用組件規範
多端複用	不可複用	不可複用
自動構建	自己無自動構建	webpack構建
上手成本	全新學習	有vue基礎便可
集中數據管理	不支持	不支持
外部依賴npm	不支持	支持
開發調試	微信開發者工具	一系列環境及調試工具

3 工程結構對比

3.1 快應用

├── sign                      rpk包簽名模塊
│   └── debug                 調試環境
│       ├── certificate.pem   證書文件
│       └── private.pem       私鑰文件
├── src                       項目文件夾
│   ├── Common                公用的資源和組件文件
│   │   └── logo.png          應用圖標
│   ├── Demo                  頁面目錄
│   |   └── index.ux          頁面文件，可自定義頁面名稱
│   ├── app.ux                APP文件，可引入公共腳本，暴露公共數據和方法等
│   └── manifest.json         項目配置文件，配置應用圖標、頁面路由等
└── package.json              定義項目須要的各類模塊及配置信息

複製代碼

3.2 文件解析

• UX文件解析 一個普通的ux文件示例以下

<template>
  <!-- template裏只能有一個根節點 -->
  <div class="demo-page">
    <text class="title">歡迎打開{{title}}</text>
    <!-- 點擊跳轉詳情頁 -->
    <input class="btn" type="button" value="跳轉toplife" onclick="routeDetail('index')" />
    <input class="btn" type="button" value="跳轉品牌頁" onclick="routeDetail('brands')" />
    <input class="btn" type="button" value="跳轉list" onclick="routeDetail('list')" />
  </div>
</template>

<style>
  .demo-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .title {
    font-size: 40px;
    text-align: center;
  }

  .btn {
    width: 550px;
    height: 86px;
    margin-top: 75px;
    border-radius: 43px;
    background-color: #09ba07;
    font-size: 30px;
    color: #ffffff;
  }
</style>

<script>
  import router from '@system.router'

  export default {
    // 頁面級組件的數據模型，影響傳入數據的覆蓋機制：private內定義的屬性不容許被覆蓋
    private: {
      title: 'TOPLIFE'
    },
    routeDetail (type = 'index') {
      // 跳轉到應用內的某個頁面，router用法詳見：文檔->接口->頁面路由
      router.push ({
        uri: type
      })
    }
  }
</script>

複製代碼

能夠看出ux文件是 Vue 風格的寫法.template style script

• mainifest.json 項目配置文件

{
  "package": "com.application.demo",
  "name": "helloQuickApp",
  "versionName": "1.0.1",
  "versionCode": "1",
  "minPlatformVersion": "101",
  "icon": "/Common/logo.png",
  "features": [
    { "name": "system.prompt" },
    { "name": "system.router" },
    { "name": "system.shortcut" },
    { "name": "system.webview" }
  ],
  "permissions": [
    { "origin": "*" }
  ],
  "config": {
    "logLevel": "debug"
  },
  "router": {
    "entry": "demo",   
    "pages": {
      "demo": {
        "component": "index"
      }
    }
  },
  "display": {
    "titleBarBackgroundColor": "#f2f2f2",
    "titleBarTextColor": "#414141",
    "menu": true,
    "pages": {
      "demo": {
        "titleBarText": "TOPLIFE",
        "menu": false
      }
    }
  }
}
複製代碼

在開發階段進行代碼調試時，須要將config中的 logLevel設置爲debug; display---用於定義與UI顯示相關的配置。 詳細介紹

4 頁面的生命週期

4.1 快應用生命週期

4.1.1 頁面生命週期

• onInit： ViewModel的數據已經準備好
• onReady：ViewModel的模板已經編譯完成
• onShow：顯示
• onHide：隱藏
• onDestroy：頁面被銷燬時調用
• onBackPress：返回
• onMenuPress：調用頂部標題欄時

4.1.2 app生命週期

• onCreate
• onDestroy

5 debug對比

5.1 快應用

快應用支持日誌輸出，也就是傳統的console.log()，支持遠程調試，須要一部手機或者安裝Android Studio等輸出看日誌。

5.1.1 使用日誌輸出以下：

打開src文件下的manifest.json，修改配置以下

{
     "config": {
        "logLevel": "debug"
      }
    }
複製代碼

在js中輸出日誌（console對象）

console.debug('debug')
console.log('log')
console.info('info')
console.warn('warn')
console.error('error')
複製代碼

查看日誌(經過Android Studio等 )

5.1.2 遠程調試步驟以下(注意：確保手機與PC在同一局域網)：

運行npm run server

打開手機上的快應用調試器掃碼安裝，也能夠將rpk文件拷貝到手機上安裝

快應用調試器中的開始調試按鈕，開始調試，也須要使用console對象

6 總結

總的來講，快應用做爲一個新的入口，從發佈以來呈降低趨勢，將來還待觀察。不過近期，快應用將啓動北上廣深杭成六地巡迴，發起了線上流量扶持計劃，拿出了超過兩億的流量資源。