快應用開發快速上手及簡明教程

時間 2020-01-09

標籤應用開發快速上手簡明教程简体版

原文原文鏈接

博主的開發及調試環境是 macOS 10.13.4 + Chrome/65.0.3325.181 + honorV9 EMUI8.0.0(Android8.0.0)
本文適合有必定前端開發經驗的小夥伴（有必定經驗看原文檔太累贅了，並且環境配置部分原文寫的太零碎了），最後總結了一些開發過程當中遇到的坑。附文檔連接：https://doc.quickapp.cn/php

本文沒有提到的部分和正常前端開發保持一致，也多是我尚未遇到的坑。。。css

註冊帳號

首先你須要一個手機廠商對應開發者帳號和快應用帳號html

因爲博主的手機是華爲，就在華爲官網註冊一個我的開發者帳號就好啦，這個部分就不具體展開了。相關地址快應用也給我提供了一份列表和指南。值得說明的是，這個帳號是須要實名制的，有上傳身份證照片和我的照片審覈的，審覈須要1-2個工做日（華爲使用芝麻信用認證能夠即即刻生效，不知道其餘廠家什麼狀況）。前端

而後打開快應用官網 https://www.quickapp.cn/, 點擊右上角的註冊，註冊一個快應用帳號，這個部分很簡單，也不展開了。
登錄之後咱們能夠看到導航欄上多出來一個開發者中心標籤，點擊進去，選擇【廠商帳號綁定】選項卡，選擇你的手機品牌方標籤進行綁定便可，目前小米、華爲、金立、魅族、努比亞、OPPO 和 VIVO 都已經能夠綁定了，而中興、聯想和一加還不能綁定。該綁定過程一樣須要1-2個工做日審覈。node

安裝相關軟件和工具

開發工具

首先你須要安裝 node v6.11.3 這是快應用官方推薦的版本
注意：不要使用 v8.0.* 這個版本內部 ZipStream 實現與 node-archive 包不兼容，會引發報錯android

若是你已經使用了 node 高版本，能夠安裝 nvm 管理 node 版本(若是你是第一次安裝 node 能夠直接安裝 v6 版本，跳過該步驟)。
安裝nvm, 注意不要使用 brew 安裝，由於 curl 安裝不須要手動配置 .bashrc :git

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash

而後安裝對應版本node:github

nvm install v6.11.3

檢查當前使用 node 版本：web

nvm current

此時應該已是咱們須要的版本了，若是不是，能夠手動切換。查看已安裝的 node 版本，和切換到已安裝的版本：正則表達式

nvm ls   # 查看已安裝版本
nvm use v6.11.3     # 使用已安裝版本

更多 nvm 用法直接輸入:

nvm --help

到這裏，咱們繼續快應用開發，全局安裝腳手架:

npm install -g hap-toolkit

檢測是否安裝成功：

hap -V

調試工具

chrome 的 devTools 確定是必不可少的。除此以外咱們須要在手機安裝一下兩個應用:快應用調試器(左)，快應用預覽平臺(右)

若是你不安裝【快應用預覽平臺】，那麼【快應用調試器】中的按鈕都是不可點擊的。而【快應用預覽平臺】裏面其實啥也看不到，就是一個供快應用工做的殼。完整安裝好之後【快應用調試器】以下圖。

固然官方也給了一份源碼, 方便你們熟悉生命週期，樣式，自定義組件，事件傳遞，組件使用。注意：下載後請記得操做：hap update --force，增長編譯支持。

最後 adb 安裝(Homebrew)：

brew cask install android-platform-tools

檢測是否安裝成功：

adb devices

Demo

項目生成

咱們利用腳手架新建一個項目, 而且進入該項目, init 過程當中須要輸入項目名稱：

hap init demo && cd demo

注意：以後的全部操做都在這個目錄下面

這是 demo 目錄結構

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

須要注意的是，sign 用來存放簽名模塊，sign/debug 中有用於調試的證書的私鑰，但debug簽名因爲是公開的，安全性沒法保證。在 release 發佈以前必定要添加 release 目錄而且寫入對應的證書和私鑰：

openssl req -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -out certificate.pem
mkdir sign/release && mv *.pem ./sign/release/

安裝相關依賴：

npm install

若是上面的安裝很慢，可使用淘寶的資源：

npm install --registry=https://registry.npm.taobao.org

腳手架已經提供不少運行方式：

npm run release     # 發佈程序包，在 /dist/.signed.rpk，注意須要使用 release 簽名模塊
npm run build       # 生成 build 和 dist 兩個目錄。前者是臨時產出，後者是最終產出
npm run watch       # 文件保存時自動編譯和調試

調試方法

項目已和產生了 rpk 包，在作好以前的準備工做已後，運行：

npm run server        # 固然，你能夠經過 --port XXXX 指定端口，默認12306

此時，會在控制檯和 http://localhost:12306 獲得一個二維碼，利用【快應用調試器】中的掃碼安裝，便可在手機上看到效果了。
此時你退出預覽界面，點擊【快應用調試器】中的開始調試，會同步在 chrome Devtool 中打開調試窗口，原理同在 chrome://inspect 中使用的遠程調試功能，以下圖：

調試能夠採用一下三種方式：

npm run build # 手動編譯 + 手動刷新
npm run build && npm run notify # 手動編譯 + 自動刷新
npm run watch # 自動編譯 + 自動刷新

注意：使用遠程調試請確保手機與PC在同一局域網

開發

IDE / Code Editor
1. VS Code: 搜索 Hap Extension 安裝插件便可
2. webStorm: 能夠經過 html 關聯 '.ux' 文件
3. sublime: 選擇 html 高亮便可
4. Android Studio: 使用 Android Monitor 看 console
console

爲了正常使用 console.log 修改 src/manifest.json 中的 config 以下：
```
{
　"config": {
  　　"logLevel": "debug"
  }
}
```
console 僅支持 info, log, warn, error, debug 方法。
LESS 支持
1. 安裝 less、less-loader
2. 在 style 標籤上添加 lang="less" 屬性便可

Async Function 支持

安裝 babel-runtime
將 babel 注入項目全局

/* app.ux 文件（若是沒有本身在 Common 裏建一個）*/

<script>
const global = Object.getPrototypeOf(global) || global
global.regeneratorRuntime = require ('babel-runtime/regenerator')

// else code...
</script>

目錄結構與 manifest

目錄結構

根目錄下的 sign 文件上文已經提到過，其餘文件目錄再也不贅述，由於前端項目大多如此，這裏僅僅說 src 目錄：

src
├── manifest.json          # 配置文件
├── app.ux                 # 入口文件
├── Page1                  # 頁面1
│   ├── page1.ux
├── Page2                  # 頁面2
│   ├── page2.ux
└── Common                 # 公共頁面和資源
    ├── ComponentA.ux
    ├── ComponentB.ux
    └── xxx.png

manifest

manifest

屬性	類型	默認值	必填	描述
package	String	-	是	應用包名，確認與原生應用的包名不一致，推薦採用com.company.module的格式，如：com.example.demo
name	String	-	是	應用名稱，6個漢字之內，與應用商店保存的名稱一致，用於在桌面圖標、彈窗等處顯示應用名稱
icon	String	-	是	應用圖標，提供192x192大小的便可
versionName	String	-	否	應用版本名稱，如："1.0"
versionCode	Integer	-	是	應用版本號，從1自增，推薦每次從新上傳包時versionCode+1
minPlatformVersion	Integer	-	否	支持的最小平臺版本號，兼容性檢查，避免上線後在低版本平臺運行並致使不兼容；若是不填按照內測版本處理
features	Array	-	否	接口列表，絕大部分接口都須要在這裏聲明，不然不能調用，詳見每一個接口的文檔說明
config	Object	-	是	系統配置信息，詳見下面說明
router	Object	-	是	路由信息，詳見下面說明
display	Object	-	否	UI顯示相關配置，詳見下面說明

config

用於定義系統配置和全局數據。

屬性	類型	默認值	描述
logLevel	String	log	打印日誌等級，分爲off,error,warn,info,log,debug
designWidth	Integer	750	頁面設計基準寬度，根據實際設備寬度來縮放元素大小
data	Object	-	全局數據對象，屬性名不能以$或_開頭，在頁面中可經過this進行訪問;若是全局數據屬性與頁面的數據屬性重名，則頁面初始化時，全局數據會覆蓋頁面中對應的屬性值

router

用於定義頁面的組成和相關配置信息，若是頁面沒有配置路由信息，則在編譯打包時跳過。

屬性	類型	默認值	描述
entry	String	-	首頁名稱
pages	Object	-	頁面配置列表，key值爲頁面名稱（對應頁面目錄名，例如Hello對應'Hello'目錄），value爲頁面詳細配置page，詳見下面說明

router.page

用於定義單個頁面路由信息。

屬性	類型	默認值	必填	描述
component	String	-	是	頁面對應的組件名，與ux文件名保持一致，例如'hello' 對應 'hello.ux'
path	String	/<頁面名稱>	否	頁面路徑，例如「/user」,不填則默認爲/<頁面名稱>。path必須惟一,不能和其餘page的path相同。下面page的path由於缺失,會被設置爲`「/Index」："Index": {"component": "index"}`
filter	Object	-	否	聲明頁面能夠處理某種請求

router.page.filter

聲明頁面能夠處理某種請求，頁面能夠從$page獲取打開頁面的參數。filter的結構以下：

"filter": {
  "<action>": {
    "uri": "<pattern>"
  }
}

屬性	類型	默認值	必填	描述
action	String	-	是	請求的動做，目前僅支持view這一種
uri	Pattern	-	是	請求的數據的匹配規則。必須是正則表達式。如`https?://.*`能夠匹配全部http和https類型的網址。

display

用於定義與UI顯示相關的配置。

屬性	類型	默認值	描述
backgroundColor	String	#ffffff	窗口背景顏色
fullScreen	Boolean	false	是不是全屏模式，默認不會同時做用於titleBar，titleBar須要繼續經過titleBar控制
titleBar	Boolean	true	是否顯示titleBar
titleBarBackgroundColor	String	-	標題欄背景色
titleBarTextColor	String	-	標題欄文字顏色
titleBarText	String	-	標題欄文字(也可經過頁面跳轉傳遞參數(titleBarText)設置)
menu	Boolean	false	是否顯示標題欄右上角菜單按鈕
pages	Object	-	各個頁面的顯示樣式，key爲頁面名（與路由中的頁面名保持一致），value爲窗口顯示樣式，頁面樣式覆蓋default樣式。

template 結構

<!-- temp.ux -->
<import name="hint" src="./hint-modal"></import>  <!-- 引入外部模板 -->
<import src="./table"></import>  <!-- 引入外部模板 -->
<template>
  <div class="container">
      <div class="mod-header">
          <text class="mod-title" style="color: red; margin: 10px;">{{title}}</text>    <!-- 行內樣式 -->
          <text class="mod-detail" onclick="showDetail">?</text>    <!-- 無參事件綁定 -->
      </div>
      <div class="mod-content">
          <!-- block 用來表示邏輯，不渲染 -->
          <block for="totalData">   <!-- for 循環遍歷數組 $idx, $item 分別爲數組的索引和值-->
              <!-- 事件綁定 -->
              <div onclick="onTabClick($idx)" class="item {{tabIndex === $idx && 'active'}}"> <!-- 支持簡單表達式 -->
                  <text class="{{tabIndex === $idx && 'text-active'}}">{{($item || {}).name}}</text>
                  <text class="{{tabIndex === $idx && 'text-active'}}">{{($item || {}).value}}</text>  <!-- 布爾值、null、undefined、'' 不渲染，其他包括 falsy 值一概渲染 -->
              </div>
          </block>
      </div>
      <image class="mod-like" if="{{isLike}}" /> <!-- 支持if elif else, 必須是相鄰節點 -->
      <image class="mod-dislike" else />
      <table data={{dataList}}></table>  <!-- 傳入屬性值，使用外部模板-->
      <hint show="{{isHintShown}}">
          This is children of hint templete.
      </hint>   <!-- 使用外部模板 -->
      <!-- if 和 show 的區別：if 爲 false 分支的節點不會渲染進 DOM 樹，而 show 爲 false 的節點會渲染，只是 display: none; -->
  </div>
</template>

<style lang="less" src="./lessFile.less"></style>   <!-- 引入外部 CSS/LESS -->
<style lang="less">
  /* 引入外部 CSS/LESS */
  @import '../Common/global.less';

  .container{
    /* 定義樣式，less 支持 */
  }
</style>

<script>
  import fetch from "@system.fetch"    // 引入系統 js
  import conf from './globalConf';     // 引入外部 js
  export default {
    props: ['title', 'dataList'],  // 傳入屬性：必須字母開頭，全小寫、數字和 `-` ，不能保留字和函數，不能以符號開頭
    public: {
      // 定義變量，會被 props 和內部請求覆蓋
    },
    private: {
      // 定義變量，不會被 props 覆蓋
    },
    protected: {
      // 定義變量，不會被 props 覆蓋, 但會被內部請求覆蓋(得到經過 a 標籤和 router 傳遞的參數)
    }
    data :{   // data 不能和 public、private、protected 一塊兒使用，data 也能夠是 function（返回 data 對象，onInit以前執行）
      // 定義變量：不能保留字和函數，不能以符號開頭
      totalData: [{name: 'a',value: 97},{name: 'b',value: 98}];
        // 定義變量，會被 props 覆蓋
    },
    onTabClick(index){    // 內部事件定義
      console.log(index);
    },
    events: {
       onIDChange(){
          // 外部事件定義
       }
    }
  }
</script>

<!-- hint.ux -->
<template>
  <text><slot></slot></text>          <!-- slot: 獲取該數據的引用的 children, 該例中即：This is children of hint templete. -->
</template>

開發基礎

保留字

除了傳統保留字，添加了 show tid 等;

生命週期

頁面生命週期

屬性	類型	參數	返回值	描述	觸發時機
onInit	Function	無	無	監聽頁面初始化	當頁面完成初始化時調用，只觸發一次
onReady	Function	無	無	監聽頁面建立完成	當頁面完成建立能夠顯示時觸發，只觸發一次
onShow	Function	無	無	監聽頁面顯示	當進入頁面時觸發
onHide	Function	無	無	監聽頁面隱藏	當頁面跳轉離開時觸發
onDestroy	Function	無	無	監聽頁面退出	當頁面跳轉離開（不進入導航棧）時觸發
onBackPress	Function	無	Boolean	監聽返回按鈕動做	當用戶點擊返回按鈕時觸發。返回true表示頁面本身處理返回邏輯，返回false表示使用默認的返回邏輯，不返回值會做爲false處理
onMenuPress	Function	無	無	監聽菜單按鈕動做	當用戶點擊菜單按鈕時觸發

A頁面的生命週期接口的調用順序：

打開頁面A：onInit() -> onReady() -> onShow()
在頁面A打開頁面B：onHide()
從頁面B返回頁面A：onShow()
A頁面返回：onBackPress() -> onHide() -> onDestroy()

應用生命週期

屬性	類型	參數	返回值	描述	觸發時機
onCreate	Function	無	無	監聽應用建立	當應用建立時調用
onDestroy	Function	無	無	監聽應用銷燬	當應用銷燬時觸發

預置對象

全局對象 (經過 this 訪問)

的屬性	類型	參數	描述
$app	Object	-	應用對象
$app.$def	Object	-	獲取在app.ux中暴露的對象
$app.$data	Object	-	獲取在manifest.json的config.data中聲明的全局數據
$page	Object	-	頁面對象
$page.action	String	-	獲取打開當前頁面的action。僅在當前頁面是經過filter匹配的方式打開時有效，不然爲undefined。參見manifest
$page.uri	String	-	獲取打開當前頁面的uri。僅在當前頁面是經過filter匹配的方式打開時有效，不然爲undefined。參見manifest
$page.setTitleBar	Function	Object*	-
$valid	Boolean	-	頁面對象是否有效
$visible	Boolean	-	頁面是否處於用戶可見狀態

* this.$page.setTitleBar 參數屬性包括：

{
  text: 'Hello QuickApp',        //標題欄文字
  textColor: '#ffff',            //文字顏色
  backgroundColor: '#434343',    //背景顏色
  backgroundOpacity: '0.8',      //背景透明度
  menu: false,      //是否在標題欄右上角顯示菜單按鈕 | 設置當前
}

屬性	類型	參數	描述
$element	Function	id: String	獲取指定id的組件dom對象，若是沒有指定id，則返回根組件dom對象用法：`this.$element('xxx')`獲取id爲xxx的組件實例對象 `this.$element()` 獲取根組件實例對象
$root	Function	無	獲取頂層ViewModel
$parent	Function	無	獲取父親ViewModel
$child	Function	id: String	獲取指定id的自定義組件的ViewModel用法：this.$child('xxx') 獲取id爲xxx的div組件ViewModel
$vm `deprecated`	Function	id: String	請使用上面this.$child('xxx')替代
$rootElement `deprecated`	Function	無	請使用上面this.$element()替代
$forceUpdate	Function	無	強制頁面刷新

公共屬性	類型	參數	描述
$set	Function	key: String value: Any	添加數據屬性，必須在onInit函數中使用，用法：`this.$set('key',value)`
$delete	Function	key: String	刪除數據屬性，若是在onInit函數中使用，用法：`this.$delete('key')`

元素屬性/方法	類型	參數	描述
$set	Function	key: String value: Any	添加數據屬性，用法：`this.$vm('id').$set('key',value)`
$delete	Function	key: String	刪除數據屬性，用法：`this.$vm('id').$delete('key')`
$on	Function	eventName: String<br/>handler: Function	在當前頁面註冊監聽事件，可監聽`$emit()`、 `$dispatch()`、 `$broadcast()`等觸發的自定義事件，不能用於註冊組件節點的事件響應
$off	Function	eventName: String<br/>handler: Function	移除事件監聽，參數 fnHandler 爲可選，傳遞僅移除指定的響應函數，不傳遞則移除此事件的全部監聽
$emit	Function	eventName: String <br/>data: Object	觸發當前實例監聽事件函數，與 $on() 配合使用

* 注意，獲取元素應該在頁面已渲染後，如 onReady 事件中或 onReady 事件執行完之後。

頁面設計

佈局和尺寸

採用 border-box 模型且不支持 box-sizing 屬性
設計稿1px / 設計稿基準寬度 = 框架樣式1px / 項目配置基準寬度(項目配置基準寬度:/src/manifest.json 中 config.designWidth 的值，默認750)

可使用內聯樣式、tag選擇器、class選擇器、id選擇器來爲組件設置樣式
僅可使用並列選擇、後代選擇器、子代選擇器
支持@import引入外部樣式、內聯樣式、行內樣式
顏色值不支持縮寫，僞類支持不徹底（支持:disabled,:checked,:focus等)

通用

通用事件：click, longpress, focus, blur, appear(組件出現)，disappear(組件消失)，swipe(快速滑動，參數direction:[left|right|up|down])
通用屬性： id, class, style, if, elif, else, for, show, disabled 等；
通用樣式：width, height, padding, padding-, margin, margin-, border, border-style, border-width, border-color, border--color, border--width, border-radius, border---radius, background-color, background-size, background-image(僅本地圖片), background-repeat, opacity, display(flex|none), flex, flex-grow, flex-shrick, flex-basis, position(none|fix), linear-gradient, repeating-inear-gradient, transform-origin, animation, animation-name, animation-delay, animation-duration, animation-iteration-count, animation-timing-function, animation-fill-mode, @key-frames(background-color|opacity|width|height|transform), transform(translate|translateX|translateY|rotate|rotateX|rotateY|scale|scaleX|scaleY)(以上*表明枚舉[left|right|top|bottom], 具體和 css 一致。注：縮寫形式和展開形式不要同時使用)

組件

默認支持通用事件、屬性和樣式
<text>、<a>、<span>、<label>組件爲文本容器組件，其它組件不能直接放置文本內容

<div>: 和 HTML 同樣
1. 支持樣式 flex-direction, flex-wrap, justify-content, align-items, align-content
<popup>: 氣泡框
1. 支持屬性 target 和 placement
2. 支持樣式 mask-color
3. 支持事件 visibilitychange
4. 自組件只能是<text>
<refresh>: 下拉刷新
1. 支持屬性 offset 和 refreshing
2. 支持樣式 background-color 和 progress-color
3. 支持事件 refresh
<richtext>: 富文本編輯器
1. 支持屬性 type(值爲 html)
2. 支持div樣式, height 無效
3. 不支持子組件
<stack>: 子組件排列方式爲層疊排列，每一個直接子組件按照前後順序依次堆疊，覆蓋前一個子組件
1. 支持div樣式
<swiper>: 輪播視圖容器
1. 支持屬性 index, interval, autoplay 和 indicator(是否顯示indicator)
2. 支持樣式 indicator-color, indicator-selected-color 和 indicator-size
3. 支持事件 change
4. 支持方法 swipeTo(index)
<tabs>: 選項卡
1. 支持屬性 index
2. 支持事件 change
3. 子組件僅支持最多一個<tab-bar>和最多一個<tab-content>
<tab-bar>: 用來展現tab的標籤區，子組件排列方式爲橫向排列
1. 支持屬性 mode(scrollable|fix)
2. 支持樣式 height
3. 支持事件 visibilitychange
<tab-content>: 用來展現tab的內容區，高度默認充滿tabs剩餘空間，子組件排列方式爲橫向排列
1. 支持屬性 target 和 placement
2. 支持樣式 mask-color
3. 支持事件 visibilitychange
<list>: 開發者在頁面中實現長列表或者屏幕滾動等效果時，習慣使用div組件作循環遍歷
1. 子組件必須是 <list-item>;
2. 支持屬性 scrollpage，默認關閉，標誌是否將頂部頁面中非<list>的元素隨<list>一塊兒滾動。開啓 scrollpage 會下降<list>渲染性能
3. 組件的性能優化分爲: 精簡 DOM 層級、複用<list-item>、細粒度劃分<list-item>、關閉 scrollpage 四個方面
4. 支持 flex-direction 和 column
5. 具備方法scrollTo(num)和事件scroll, scrollBottom, scrollTop
<list-item> list 的子元素
1. 的子組件能夠是任何標籤或除<list>之外的組件
2. 有一個屬性 type，type 值相同的 <list-item> 後代 DOM 必須如出一轍，若是不同，請使用不一樣的 type 值。type 不能爲空！
3. 支持<div>樣式和 column-span，不支持 position
<a>: 連接
1. 支持屬性 href
2. href 屬性值可根據路由配置
3. href還支持http和https開頭的網址，點擊後會打開webview加載網頁
4. href還能夠經過「?param1=value1」的方式添加參數，參數能夠在頁面中經過this.param1的方式使用
5. 子組件僅支持<span>
6. 僅支持 `text
7. 支持 sms, tel, mailto
8. 支持樣式 lines, color, font-style, font-weight(normal|bold),text-decoration, text-align, line-height, text-overflow
<image>: 圖片
1. 支持屬性 src 和 alt
2. 支持樣式 resize-mode(cover|contain|stretch|center)
3. 不支持子組件
<process>: 進度條
1. 支持屬性 percent 和 type(horizontal|circular)
2. 支持樣式 color 和 stroke-width
3. 支持事件 visibilitychange
4. 不支持子組件
<rating>: 星級評分
1. 支持屬性 numstars(總數), stepsize(步長), indicator(是否可操做)和 rating(值)
2. 支持樣式 star-background, star-secondary, star-foreground（三種狀態的圖片）
3. 支持事件 change，不支持click、longpress事件
4. 不支持子組件
<span>: 格式化的文本
1. 只能做爲<text>與<a>的子組件
2. 不支持 show 和 disabled 屬性
3. 支持樣式 color, font-size, font-style, font-weight(normal|bold),text-decoration
4. 不支持任何事件
5. 不支持子組件
<text>: 文本內容寫在標籤內容區，支持轉義字符""
1. 僅支持<a>與<span>子組件
2. 支持樣式 lines, color, font-style, font-weight(normal|bold),text-decoration, text-align, line-height, text-overflow
<input>: 接收用戶的輸入
1. 不支持子組件
2. 支持屬性 type(button|checkbox|radio|text|email|date|time|number|password), name, value, checked 和 placeholder
3. 支持樣式 color, placeholder-color, width, height 和 font-size
4. 支持事件 change
5. 支持方法 focus()
<label>: 爲input、textarea組件定義標註
1. 不支持子組件
2. 支持屬性 target
3. 支持樣式 lines, color, font-style, font-weight(normal|bold),text-decoration, text-align, line-height, text-overflow
4. 不支持事件
<option>: <select>的子組件，用來展現下拉選擇具體項目
1. 不支持子組件
2. 支持屬性 value 和 selected
3. 不支持事件
<picker>: 滾動選擇器，目前支持三種選擇器，普通選擇器，日期選擇器，時間選擇器。默認爲普通選擇器。
1. 支持子組件
2. 支持屬性 type(text|date|time), range, start, end, value 和 selected
3. 不支持 click 事件, 支持 change 事件
4. 支持方法 show()
<select>: 下拉菜單
1. 僅支持<option>子組件
2. 不支持 click 事件, 支持 change 事件
<slider>: 滑動選擇器
1. 不支持子組件
2. 支持屬性 min, max, value 和 step
3. 支持樣式 color, selected-color, padding 僅支持 left 和 right
4. 支持事件 change
<switch>: 開關選擇
1. 不支持子組件
2. 支持屬性 checked
3. 支持事件 change
<textarea>: 接收用戶的輸入
1. 不支持子組件
2. 支持屬性 placeholder
3. 支持樣式 color, placeholder-color 和 font-size
4. 支持事件 change
5. 支持方法 focus()
<video>: 視頻播放器
1. 支持屬性 src, poster 和 autoplay
2. 支持事件 prepared, start, pause, finish, error, seeking, seeked, timeupdate 和 fullscreenchange
3. 支持方法 start(), pause(), setCurrentTime(seconds), requestFullscreen() 和 exitFullscreen()
<web>: 用於顯示在線的html頁面
1. 必須聲明"打開網頁"接口，不然會提示缺少權限。
2. 支持屬性 src, src 值爲 Deeplink, 參考下文 Deeplink 部分
3. 支持樣式 mask-color
4. 支持事件 titlereceive, pagestart, pagefinish 和 error
5. 支持方法 reload(), forward(), back(), canForward(callback), canBack(callback)

接口

如下接口經過 import app from '@system.app' 或 require('@system.app')方式引入
接口申明在 manifest 文件的 features 中，除了 @system.app使用前之外都須要申明。

@system.app
1. getInfo(), 獲得應用名稱、版本名稱、版本號、log級別，三級來源
@system.share
1. 內置分享，接口聲明：{"name": "system.share"}
  1. share({type: MIME Type, data:String/URL/FileList, success, fail, cancel, complete}): 分享調用
2. 第三方分享，接口聲明：{"name": "service.share","params": {"appSign": "abcdefg...","qqKey":"1234567","wxKey":"wx1234","sinaKey":"1234"}}
  1. manifest 參數說明: appSign 簽名; qqKey QQ後臺ID; wxKey: 微信後臺ID, sinaKey 新浪後臺ID
  2. getProvider(): 獲取廠商信息
  3. share({shareType:int, title, summary, targetUrl,imagePath, mediaUrl, success, fail, cancel, complete})
    - 其中 shareType 默認圖文０,純文字1,純圖片2,音樂３,視頻４

cancel

@system.router
1. 接口聲明：{"name": "system.router"}
2. push({url, params:Object}): 跳轉url
3. replace({url, params:Object}): 跳轉url, 後退不會來
4. back(): 後退
5. clear(): 清空歷史棧
6. getLength(): 獲取歷史棧長度
7. getState(): 獲取固然頁面位置，名稱，路徑
@system.prompt
1. 接口聲明：{"name": "system.prompt"}
2. showToast({message, duratuon:(0 or 1)}): 顯示吐司
3. showDialog({title:, message:, buttons:[{text,color}], success({index}), fail, cancel, complete}): 顯示對話框
4. showContextMenu({itemList:String[], itemColor:HexColor, success, fail, cancel, complete}): 顯示上下文菜單
@system.notification
1. 接口聲明：{"name": "system.notification"}
2. show({contentTitle, contentText, clickAction:{url}}): 顯示通知
@system.vibrator
1. 接口聲明：{"name": "system.vibrator"}
2. vibrate(): 震動1s
@system.webview
1. 接口聲明：{"name": "system.webview"}
2. loadUrl({url}): 經過 webview 加載 url
3. 在webview打開的網頁中可使用的api: system.go(path): url 跳轉
@system.request
1. 接口聲明：{"name": "system.request"}
2. upload({url, header:Object, method(POST|GET), files:{filename,name,url,type}[], data:{name,value}[], success({code,data,headers}), fail, complete}): 上傳
3. download({url, header:Object, success({token}), fail, complete}): 下載
4. onDownloadComplete({token, success({url}), fail({code}), complete}): 監聽下載任務
@system.fetch
1. 接口聲明：{"name": "system.fetch"}
2. fetch({url, header:Object, method(POST|GET), files:{filename,name,url,type}[], data:{name,value}[], success({code,data,headers}), fail, complete}): 發起請求
@system.storage
1. 接口聲明：{"name": "system.storage"}
2. get({key, default, success({data}), fail, complete}): 獲取值
3. set({key, value, success, fail, complete}): 存儲值
4. clear({success, fail, complete}): 清空數據
5. delete({key, success, fail, complete}): 刪除數據
@system.file
1. 接口聲明：{"name": "system.file"}
2. move({srcUri, dstUri, success, fail({code}), complete}): 移動文件
3. copy({srcUri, dstUri, success, fail({code}), complete}): 複製文件
4. list({uri, success(fileList:{uil,list,lastModifiedTime}[]), fail({code}), complete}): 獲取目錄下文件列表
5. get({uri, success({uil,list,lastModifiedTime}), fail({code}), complete}): 獲取文件信息
6. delete({uri, success, fail(code**), complete}): 獲取文件信息
@system.barcode (須要用戶受權)
1. 接口聲明：{"name": "system.barcode"}
2. scan({success({result}), fail(code:201用戶拒絕), cancel, complete}): 掃描二維碼
@system.sensor
1. 接口聲明：{"name": "system.sensor"}
2. subscribeAccelerometer({callback(x,y,c)}): 獲取重力感應數據
3. unsubscribeAccelerometer(): 中止獲取重力感應數據
4. subscribeCompass({callback(direction)}): 獲取羅盤數據
5. unsubscribeCompass(): 中止獲取羅盤數據
6. subscribeProximity({callback(distance)}): 獲取距離感應數據
7. unsubscribeProximity(): 中止獲取距離感應數據
8. subscribeLight({callback(intensity)}): 獲取光線感應數據
9. unsubscribeLight(): 中止獲取光線感應數據
@system.clipboard
1. 接口聲明：{"name": "system.clipboard"}
2. set({text, success, fail, complete}): 寫入
3. get({success({text}), fail, complete}): 讀取
@system.geolocation (須要用戶受權)
1. 接口聲明：{"name": "system.geolocation"}
2. getLocation({timeout, success({longitude, latitude}), fail, complete}): 獲取地理位置
3. subscribe({callback(longitude, latitude), fail}): 監聽用戶位置
4. unsubscribe(): 取消監聽用戶位置
@system.shortcut (須要用戶受權)
1. 接口聲明：{"name": "system.shortcut"}
2. hasInstalled({success, fail, complete}): 是否已建立桌面圖標
3. install({success, fail, complete}): 建立桌面圖標
@system.calandar (須要用戶受權)
1. 接口聲明：{"name": "system.calandar"}
2. insert({title, description, startDate:number, endDate:number, timezone:string, allDay:boolean是否成天, rrule:string重複規則, remindMinutes:number[]提早提醒時間, organizer: string, success, fail, cancel}): 插入日曆事件
@system.network
1. 接口聲明：{"name": "system.network"}
2. getType({success(metered是否按流量計費, type網絡類型), fail, complete}): 獲取網絡類型
3. subscribe({callback(metered, type), fail}): 監聽網絡狀況
4. unsubscribe(): 取消監聽網絡狀況
@system.device (須要用戶受權)
1. 接口聲明：{"name": "system.device"}
2. getInfo({success({brand, manufacturer, model, product, osType, osVersionName, osVersionCode, platformVersionName, platformVersionCode, language, region, screenWidth, screenHeight}), fail, complete}): 獲取設備基本信息
3. getId({type(device|mac|user|advertising)[], success({device, mac, user, advertising}), fail, complete}): 獲取設備標識
4. getDeviceId({success({deviceId}), fail, complete}): 獲取設備ID
5. getUserId({success({userId}), fail, complete}): 獲取用戶ID
6. getAdvertisingId({success({advertisingId}), fail, complete}): 獲取廣告ID
7. getTotalStorage({success({totalStorage}), fail, complete}): 獲取總容量
8. getAvailableStorage({success({availableStorage}), fail, complete}): 獲取可用容量
9. getCpuInfo({success({cpuInfo}), fail, complete}): 獲取cpu信息
@system.brightness
1. 接口聲明：{"name": "system.brightness"}
2. getValue({success({value}), fail, complete}): 獲取屏幕亮度
3. setValue({value, success(value:0手動;1自動), fail, complete}): 設置屏幕亮度
4. getMode({success(value:0手動;1自動), fail, complete}): 獲取屏幕亮度模式
5. setMode({value, success, fail, complete}): 設置屏幕亮度模式 1. 接口聲明：{"name": "system.volume"}
@system.volume
1. 接口聲明：{"name": "system.volume"}
2. getMediaValue({success(value:0到1), fail, complete}): 獲取音量
3. setMediaValue({value, success, fail, complete}): 設置音量
@system.battary
1. 接口聲明：{"name": "system.battary"}
2. getStatus({success(charging, level:0到1), fail, complete}): 獲取當前電池狀態
@system.package
1. 接口聲明：{"name": "system.package"}
2. hasInstalled({package包名, success(result:boolean), fail, complete}): 判斷是否安裝了某個應用
3. install({package, success(result:boolean), fail, complete}): 安裝應用
4. 利用路由中的 push 操做打開應用
@system.record (須要用戶受權)
1. 接口聲明：{"name": "system.record"}
2. start({success({url}), fail, complete}): 開始錄音
3. record.stop(): 中止錄音
@system.cipher
1. 接口聲明：{"name": "system.cipher"}
2. rsa({action:encrypt|decrypt, text, key加密爲公鑰|解密爲私鑰, transformation補充項，success({text}), fail, complete}): rsa 加密解密
@system.media (須要用戶受權)
1. 接口聲明：{"name": "system.media"}
2. takePhoto({success({uri}), fail, complete, cancel}): 拍照
3. takeVideo({success({uri}), fail, complete, cancel}): 錄像
4. pickImage({success({uri}), fail, complete, cancel}): 選擇圖片
5. pickVideo({success({uri}), fail, complete, cancel}): 選擇視頻
@system.image
1. 接口聲明：{"name": "system.image"}
2. getImageInfo({uri, success({uri, width, height, size}), fail, complete, cancel}): 獲取圖片基礎信息
3. compressImage({uri, quality:1到100, ratio:number縮放比, format:圖片格式, success({uri, width, height, size}), fail, complete, cancel}): 壓縮圖片
4. applyOperations({uri, operations:Object[](以下), quality, format, success({uri}), fail, complete, cancel}}): 對圖片按順序執行編輯操做
  - 剪裁: {action: 'crop', x, y, width, height}
  - 縮放: {action: 'scale', scaleX, scaleY}
  - 旋轉: {action: 'rotate', degree}
5. editImage({uri, success({uri}), fail, complete, cancel}): 使用編輯器編輯圖片
@system.audio
1. 接口聲明：{"name": "system.audio"}
2. play(): 播放
3. pause(): 暫停
4. 屬性: src, currentTime, duration, autoplay, loop, volume, muted
5. 事件: play, pause, loadeddata, ended, durationchange, error, timeupdate
@system.push
1. 接口聲明：{"name": "system.push"}
2. getProvider(): 獲取服務提供商
3. subscribe({success({regId}), fail, complete}): 訂閱push
4. unsubscribe(): 取消訂閱push
5. on({callback(messageId, data)}): 添加push事件回調
6. off(): 移除push事件回調
@system.pay
1. 接口聲明：{"name": "system.pay"}
2. getProvider(): 獲取服務提供商
3. pay({orderInfo:String, success({code, message, result}), fail({code, message}), complete}): 付款
@system.stats
1. 接口聲明：{"name": "system.stats"}
2. getProvider(): 獲取服務提供商
3. recordCountEvent({category, key, map}): 計數類型事件
4. recordCalculateEvent({category, key, value, map}): 計算類型事件
@system.account
1. 接口聲明：{"name": "system.account"}
2. getProvider(): 獲取服務提供商
3. authorize({type:string(code|token), redirectUri, scope, state, success({state, code, accessToken, tokenType, expiresIn, scope}), fail, complete): 認證
4. getProfile({token, success({openid, id, unionid, nickname, avatar}), fail, complete}): 獲取用戶認證信息
@system.alipay
1. 接口聲明：{"name": "system.alipay"}
2. pay({orderInfo:string, callback}): 支付
3. 支付寶支付細節，請查看請求參數說明文檔
@system.wxpay
1. 接口聲明：{"name": "service.wxpay", "params": {"package": "com.your.package", "sign": "abcdefg", "url": "http://your.domain/page"}}
2. 兩種方式的 manifest 配置：
  - app 原生：package: 包名，sign: 簽名
  - web 方式：url：H5 url
3. getType(): 返回調用方式(none|APP|MWEB)
4. pay({prepayid, extra, success({prepayid,final_url}), fail(code**), complete}): 支付
  - extra app 版參數以下
    1. app_id: 微信支付訂單中的app_id
    2. partner_id: 微信支付訂單中的partner_id
    3. package_value: 微信支付訂單中的package_value
    4. nonce_str: 微信支付訂單中的nonce_str
    5. time_stamp: 微信支付訂單中的time_stamp
    6. order_sign: 微信支付訂單中的order_sign
  - extra app 版參數以下
    1. mweb_url: 在微信的支付服務器下單之後，微信返回的 MWEB_URL，在CP用於微信支付的h5頁面中，直接將mweb_url取出後跳轉過去便可，但這個作法並非強制的，您也能夠經過其餘自定義鍵值向您本身的服務器換取MWEB_URL
    2. custome_key: 其餘的自定義鍵值，cp能夠根據須要增長其餘本身認爲須要的鍵名和鍵值
5. 微信支付細節,請參考微信網頁支付和微信app支付

以上接口錯誤列表以下：

201 用戶拒絕

202 參數錯誤

204 超時

300 I/O錯誤

301 路徑不存在

900 簽名有誤

901 包名有誤

1000 應用未安裝|下載失敗|位置開關關閉

1001 url配置找不到|任務不存在

2001 內部錯誤

頁面切換和參數傳遞

傳遞方法1. <a>標籤配合 queryString 傳遞參數, 這個和前端一致。

<a href="/src/home/index.html?key=2333">跳轉頁面</a>

傳遞方法2. 經過 router 接口：router.push(), router.replace(), 接受一個以下結構的對象，用法這個和前端 router 一致。

{
  url: '/src/home/index.html',
  params: { key: 2333 /* 須要傳遞的參數 */ }
}

接收方法：上述2種傳遞參數的方法，其接收方法一致，在接收參數頁面的 protected 對象中獲取便可（可設置默認值）

<script>
  export default {
    protected: {
      key: 0               // 獲得傳過來的 key: 2333, 0 爲默認值
    }
  }
</script>

回傳參數：藉助 this.$app.$data 實現，至關於綁定數據到全局了，這個再也不舉例

頁面間通訊

這個部分和 HTML5 中的同源頁面通訊一模一樣。會利用到一個構造函數 new BroadcastChannel(string), 它接受一個字符串參數，做爲實例的頻道名稱。它的實例具備如下屬性和方法：

名稱	類型	參數	描述
name	String	-	頻道名稱,區分不一樣的消息頻道(注意：不一樣頻道之間不可通訊)。
postMessage	Function	Any: 消息內容	用於在當前頻道中廣播消息。
onmessage	Function	Event:消息對象	訂閱消息。在頻道中接收到廣播消息以後，會給全部訂閱者派發消息事件。
close	Function	-	關閉當前的頻道。

其中 onmessage 事件有2個屬性(經過 event 對象訪問)：

屬性	類型	描述
type	String	"message"
data	Any	接收到的消息內容

因爲和 HTML5 用法同樣，這裏就不演示了。

組件通訊

父子組件通訊

父子組件使用見 template 部分

父組件到子組件
1. 子組件經過 props 獲取父組件傳入的值，見上文 template 部分
2. 經過 this.watch(props, callback) 監控傳入數據變化並調用回調函數
3. 父組件經過this.$broadcast()完成事件觸發，子組件經過$on()綁定事件並響應
子組件到父組件
1. 父子組件傳對象類型屬於引用傳遞，能夠直接修改父組件傳入對象改變父組件數據
2. 子組件經過this.$dispatch()完成事件觸發，父組件經過$on()綁定事件並響應
3. 子組件經過this.$emit()觸發在節點上綁定的事件來執行父組件的方法

* 注：this.$broadcast()、this.$emit() 和 this.$dispatch() 參數一致
* 注：觸發時傳遞參數，再接收時使用event.detail來獲取參數
* 注：當傳遞結束後，能夠調用event.stop()來結束傳遞

Deeplink

配合<web>標籤框架支持經過連接從外部打開應用，格式

http://hapjs.org/app/<package>/[path][?key=value]
https://hapjs.org/app/<package>/[path][?key=value]
hap://app/<package>/[path][?key=value]

參數說明：

package: 應用包名，必選
path: 應用內頁面的path，可選，默認爲首頁
key-value: 但願傳給頁面的參數，可選，能夠有多個

從傳統網頁調起需引入如下腳本：

<script src='//statres.quickapp.cn/quickapp/js/routerinline.min.js'/>

提供方法：

appRouter(packageName, pageName, params, confirm)
- packageName：應用的包名，和manifest.json中保持一致
- pageName：跳轉的頁面，對應於manifest.json中pages的path字段. 特殊的.若是傳入的是"/",則跳轉到path爲"/"的頁面,若是無此頁面,則跳轉到首頁. 更多信息,請參見manifest中path字段的說明.
- params：攜帶參數，形式爲{ param1: value1, param2: value2 }
- confirm：顯示給用戶的應用名稱，當不爲空時，表示跳轉時須要用戶確認，當不傳或者爲false時，表示無需用戶確認直接跳轉
channelReady(callback)
- callback：檢測的回調函數，不管檢測到是否支持服務，都會執行回調函數。平臺支持服務則傳入實參true，不然傳入實參false

遇到的一些坑

自定義屬性名不能採用駝峯命名，不然值永遠是 undefined
show 屬性並很差用，沒起什麼做用
相似 onInit 等等函數是頁面生命週期，不是組件生命週期，不會由於組件狀態變化而執行
display 類型只有 flex 和 none
子盒子不能將父盒子撐高
不遵循盒子模型，相似但不徹底等同於 border-box，
css選擇器在覆蓋樣式時候，不能採用後代選擇器寫法(初次定義樣式時能夠)，這樣子 box 樣式不會生效，由於性能問題，當前只支持 CSS 聲明的多個選擇器中最後一個規則的變動對DOM的更新,例如,下例中給 .tag 添加了 .active 後，只有邊框顏色會變，字的顏色不會變。

<style>
  .tag{
    /* 邊框樣式不支持縮寫 */
    border-bottom-color: #cccccc;   /* 顏色不支持縮寫 */
    border-bottom-width: 2px;
    text{
      color: #666666;
    }
  }
  .active{
    border-bottom-color: #3333ff;
    text{
      color: #3333ff;
    }
  }
</style>