快應用簡單瞭解

Rick_Lee發表於2018-06-12

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，修改配置如下
   {
    &emsp;"config": {
      &emsp;&emsp;"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 總結

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

相關文章