快應用，快入門

時間 2019-11-21

標籤應用入門简体版

原文原文鏈接

做者：餓了麼顧誠html

開篇也不扯那些沒用的，讓咱們高效的開始教程。前端

在一切教程開始前

不管學習什麼語言、框架、庫，首先你要作的，就是登錄它的官網，認真閱讀它的入門手冊、文檔等，這比任何《xx 分鐘從入門到精通》、《xx 深刻淺出》都要靠譜得多，再加上如今編程體系的越發完善，開發者愈來愈注重基礎設施的搭建，官網絕對是學習同樣東西的首先選擇。因此，快應用如今的官網是：https://www.quickapp.cn 文檔是：https://doc.quickapp.cn 請認真閱讀文檔。vue

在快應用的教程開始以前

快應用宣傳的一大優點，就是對於 Web 前端開發者的低學習成本、快速上手。那麼它的這個優點，實際上是創建在你熟悉（有必定程度瞭解）類 Vuejs 的框架的前提上的。它基本上是創建在 Vue 的體系上的，通過必定程度的改造、精簡，造成了快應用的開發體系。本篇教程，也默認你對 Vue 已經有必定程度的瞭解，假如你尚未完成這個前提，那麼先去了解一下 Vue 也不錯。因此，讓我假設閱讀本文的你，是一名擁有 Vue 經驗的 Web 前端開發者，對新出的快應用有必定興趣，想要了解一下它，那麼，但願文章對你有所幫助。node

教程前置準備

上文也說了，快應用的開發，對比的就是 Vue 的體系，因此，我選擇經過對比一樣實現目標的 APP 的 Vue 版本和快應用版本，來講明你要進行快應用開發須要準備和了解哪些東西。首先，我選擇了人民羣衆喜聞樂見的 HackerNews 做爲實現目標，它提供了完善的 API，方便咱們構建真實 APP，而且 Vue 的官方也有一個 Demo 版本的 HackerNews 源碼，省去了咱們很多工做。因此咱們直接選擇 https://github.com/vuejs/vue-hackernews 當前 master 分支做爲 Vue 版本的代碼，大家也能夠自行 clone 查看。webpack

快應用項目初始化

請根據快應用官方文檔的快速入門一節，準備好開發環境，在這裏只有一點提醒：假如你的手機尚未直接支持快應用的運行環境（提示沒有運行環境），請安裝「快應用平臺預覽版」，經過它進行調試。git

開始

首先確認一下咱們的工程結構github

.
├── quickapp
│   ├── README.md
│   ├── build
│   ├── dist
│   ├── node_modules
│   ├── package-lock.json
│   ├── package.json
│   ├── sign
│   └── src
└── vue
    ├── LICENSE
    ├── README.md
    ├── index.html
    ├── node_modules
    ├── package.json
    ├── src
    ├── static
    └── webpack.config.js
複製代碼

就是這樣，快應用是經過 hap 工具直接初始化的工程，做爲開發者，直接寫代碼就完事了，我想你目前應該也不關心快應用的實現原理和內部細節。web

1. 第一步：入口

Vue 項目的入口天然是 index.html 和 main.js，它的核心代碼結構是這樣的：vue-router

src
├── components
├── filters
├── main.js
├── store
└── variables.styl
複製代碼

好，看一下 main.jsvuex

import Vue from 'vue'
import Router from 'vue-router'
import { domain, fromNow } from './filters'
import App from './components/App.vue'
import NewsView from './components/NewsView.vue'
import ItemView from './components/ItemView.vue'
import UserView from './components/UserView.vue'

// install router
Vue.use(Router)

// register filters globally
Vue.filter('fromNow', fromNow)
Vue.filter('domain', domain)

// routing
var router = new Router()

router.map({
  '/news/:page': {
    component: NewsView
  },
  '/user/:id': {
    component: UserView
  },
  '/item/:id': {
    component: ItemView
  }
})

router.beforeEach(function () {
  window.scrollTo(0, 0)
})

router.redirect({
  '*': '/news/1'
})

router.start(App, '#app')
複製代碼

很簡單，作了幾件事情：

引入框架（Vue,VueRouter）
引入組件
定義 filters、路由
啓動應用

OK，那麼咱們去快應用裏面看一下，快應用裏，一個 APP 的入口，是 src/manifest.json，一個 APP 的重要信息就定義在這裏面，咱們看一下

{
  "package": "me.ele.hacknews",
  "name": "quickapp-hackernews",
  "versionName": "1.0.0",
  "versionCode": "1",
  "minPlatformVersion": "101",
  "icon": "/Common/logo.png",
  "features": [
    { "name": "system.prompt" },
    { "name": "system.router" },
    { "name": "system.shortcut" },
    { "name": "system.fetch" }
  ],
  "permissions": [
    { "origin": "*" }
  ],
  "config": {
    "logLevel": "debug"
  },
  "router": {
    "entry": "News",
    "pages": {
      "News": {
        "component": "index"
      },
      "User": {
        "component": "index"
      },
      "Item": {
        "component": "index"
      }
    }
  },
  "display": {
    "titleBarBackgroundColor": "#ff6600",
    "titleBarTextColor": "#ffffff",
    "menu": true,
    "pages": {
      "News": {
        "titleBarText": "Hacker News | QuickApp Clone"
      }
    }
  }
}
複製代碼

固然，這和你剛初始化完成時候的配置確定不同了，不過我只是改爲了 HackerNews 的配置，結構並無改變，來看一下：

定義好包名（package）、應用名（name）、logo（logo）
定義須要用的系統接口（features），因此上文讓你認真看文檔，調用系統接口都是須要提早聲明（你也不想用戶說你濫用權限對吧），這裏咱們須要router（路由）、fetch（網絡請求）
config.logLevel 先改爲 debug 好了，輸出全部 log
router 中定義好全部路由，entry 就是首頁，pages 和 component 對應好
display 你能夠先無論（不過也沒什麼難度就是了）

那麼對比 Vue 的啓動配置來講，由於快應用是運行在系統集成環境中的，因此 Vue 項目要求的引入框架、庫（路由）就都不須要了，多出了系統接口的提早聲明，按需聲明就能夠了，這項目只須要最基本的路由、網絡請求權限就能夠了。

路由這塊，請參考官方文檔，稍微須要注意的就是 page 默認使用它的名稱文件夾做爲它的組件所在位置。基本上也和 Vue 版本的路由對應的配置就能夠了，須要注意的是路由參數不須要在這裏配置，而是在對應的組件內配置（做爲組件外部傳入屬性）。

到這裏，你就已經完成了快應用項目的基礎配置，固然，如今是運行不起來的，你配置的頁面尚未實現對應的組件，下面咱們就把 Vue 的頁面組件改形成快應用的組件。

2. 改造 Vue-> QuickApp

看一下快應用版本的源代碼目錄結構

src
├── Common
├── Item
├── News
├── User
├── app.ux
├── filters
├── manifest.json
├── store
└── util.js
複製代碼

一個頁面對應一個目錄，app.ux 是入口組件（如今不用管它），咱們開始改造過程。

第一個頁面就是首頁（News），上改造先後對比圖，diff 圖左邊是 Vue 項目代碼，右邊是快應用代碼，咱們來逐一分析：

template 部分

自定義組件引入，用特殊的 import 標籤引入，直接能夠在 template 中使用
用 list 組件提升列表性能，就先把它當成 div 好了（想要進一步瞭解，請閱讀官方文檔，list 優化一節）
快應用不支持 :before, :after 僞類，所以 loading 文字只能用一個單獨的元素並根據條件來展現了。
你也發如今快應用中：
- v-show -> show
- v-for -> for
- v-if -> if
- :property -> property="{{ }}"
- track-by -> tid
- $index -> $idx 基本上就是去掉了 Vue 特點，變成了通用單詞。另外，大部分表達式使用時（除 for、tid 等），要寫在 {{ expression }} 中，須要注意一下。
文本寫在 text 組件內！（請認真閱讀文檔），這和 Web 開發有很大區別，HTML 的體系中，基本是個標籤就能加文本，可是快應用中不行，須要綁定在 text 組件內。文本寫在 text 組件內！文本寫在 text 組件內！
沒有 filter，這個在某些狀況下確實有些不方便，只能改形成函數了 $index | formatItemIndex -> formatItemIndex($idx)。

完成以上步驟，你的 template 部分就基本改造完成了，對着手冊一一改造就能夠了。

script 部分

這部分改動不多，快應用支持 ES2015 的絕大部分語法、特性，這裏有一個很差的地方，官方沒有詳細說明支持程度，可能會遇到支持性問題。

引入路由服務，由於須要手動跳轉（快應用也支持 href 跳轉，這裏只是爲了演示），使用系統服務，就按照正常的引入項目模塊的邏輯來進行就能夠了。
不在 script 引入自定義組件。
生命週期，改個名字，經常使用的就是 onInit、onReady、onDestroy，顧名思義，不懂看文檔。
方法，快應用的方法不須要定義在 methods 裏面，由於它的組件裏，沒那麼多其他屬性，直接在組件對象第一層下定義方法就能夠了，script 和 template 通用。所以咱們把全部方法都從 methods 裏面搬了出來。
filters，上文說了，快應用沒有 filter，就改形成普通方法好了（壞處是不能定義全局 filter，每一個組件都須要反覆引入 filter 方法，固然能夠在 App 層面定義方法，不過很差管理）。
補上一個頁面跳轉的方法，能夠看一下使用方式，就是普通的函數調用，uri + params

完成了以上步驟，你就基本完成了script 部分的改造，這裏有一個問題，Vuex 你不由想問，Vuex 怎麼辦，上面我寫的那個 store，是 vuex 嗎？不是。很遺憾，假如你依賴於 Vuex，你可能會遇到麻煩，我尚未很好的辦法替代 Vuex，快應用支持全局 data，支持 watch，可是並不足以替代 Vuex，上面的 store，並非 Vuex，只是一個處理數據的服務，下文會說到。

style

style 部分看上去是最簡單，但實際上是最麻煩的部分：

style 僅支持部分 CSS 屬性
快應用使用 flex 進行佈局
快應用有默認的屏幕適配（750px），你寫的全部 px 單位，都會以 750px 爲標準進行縮放適配，有優點，也有缺點。
快應用有一些特有的屬性
快應用的選擇器支持比較有限

上面這些特色，須要你認真閱讀快應用文檔的 style部分，以及各個組件的樣式部分，來了解狀況，請必定要認真閱讀，你很容易用上了不支持的 CSS 特性。

咱們這個 DEMO 項目的 style 比較簡單，Vue 項目用了 stylus，快應用顯然不支持，爲了方便轉成了 CSS，不過快應用支持 Less CSS，也是不錯的選擇。

根據 flex 佈局作一些調整
把僞類改爲了獨立元素
移除了不支持的屬性
移除不支持的僞類（hover 之類的）
適配一些不支持的縮寫語法

這多是一個體驗很糟糕的過程，寫着名義上是 CSS 卻有那麼多不一樣的 style 代碼，不過不管如何，咱們總算是完成了 style 部分的改造。

改造小結

很明顯，經過以上對比，你會發現，快應用的代碼體系，真的很像 Vue，可是又有那麼一些糟糕的區別。仍是那句話，若是你想要進行快應用的開發，請認真閱讀文檔，磨刀不誤砍柴工。

組件以外

顯然咱們的項目裏，通常不會只有組件這一種東西，還有一些 JavaScript 模塊，好比上文的 store，這時候正文開始了 :)。

diff 圖左邊是 Vue 項目代碼，右邊是快應用代碼

what? firebase 庫? 講道理，這是一個 JavaScript 庫，應該能夠在快應用環境中直接使用，可是實際上，不行。

firebase 庫依賴於不少瀏覽器（window）API，好比 XHR 請求，這時候，它就沒法在快應用的體系中正常運行了。這時候你陷入了一個兩難的抉擇，對 firebase 的庫進行魔改，或者本身造一個 firebase 庫。這時候你可能就想放棄了，事實就是這麼殘酷，你會想，我作了這個事情我怎麼不去加入 firebase？

可是教程老是要繼續，好在咱們這個項目真的很簡單，簡單到我不須要 firebase 的庫，也能夠輕鬆兼容原代碼，完成改造。