国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

sean / 3378人閱讀

摘要：注冊賬號首先你需要一個手機廠商對應開發者賬號和快應用賬號由于博主的手機是華為，就在華為官網注冊一個個人開發者賬號就好啦，這個部分就不具體展開了。

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


本文沒有提到的部分和正常前端開發保持一致，也可能是我還沒有遇到的坑。。。
注冊賬號

首先你需要一個手機廠商對應開發者賬號和快應用賬號

由于博主的手機是華為，就在華為官網注冊一個個人開發者賬號就好啦，這個部分就不具體展開了。相關地址快應用也給我提供了一份列表和指南。值得說明的是，這個賬號是需要實名制的，有上傳身份證照片和個人照片審核的，審核需要1-2個工作日（華為使用芝麻信用認證可以即即刻生效，不知道其他廠家什么情況）。

然后打開快應用官網 https://www.quickapp.cn/, 點擊右上角的注冊，注冊一個快應用賬號，這個部分很簡單，也不展開了。
登陸以后我們可以看到導航欄上多出來一個開發者中心標簽，點擊進去，選擇【廠商賬號綁定】選項卡，選擇你的手機品牌方標簽進行綁定即可，目前小米、華為、金立、魅族、努比亞、OPPO 和 VIVO 都已經可以綁定了，而中興、聯想和一加還不能綁定。該綁定過程同樣需要1-2個工作日審核。

安裝相關軟件和工具 開發工具

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

如果你已經使用了 node 高版本，可以安裝 nvm 管理 node 版本(如果你是第一次安裝 node 可以直接安裝 v6 版本，跳過該步驟)。
安裝nvm, 注意不要使用 brew 安裝，因為 curl 安裝不需要手動配置 .bashrc :

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

然后安裝對應版本node:

nvm install v6.11.3

檢查當前使用 node 版本：

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

VS Code: 搜索 Hap Extension 安裝插件即可

webStorm: 可以通過 html 關聯 ".ux" 文件

sublime: 選擇 html 高亮即可

Android Studio: 使用 Android Monitor 看 console

console

為了正常使用 console.log 修改 src/manifest.json 中的 config 如下：

{
　"config": {
  　　"logLevel": "debug"
  }
}

console 僅支持 info, log, warn, error, debug 方法。

LESS 支持

安裝 less、less-loader

在 style 標簽上添加 lang="less" 屬性即可

Async Function 支持

安裝 babel-runtime

將 babel 注入項目全局

/* app.ux 文件（如果沒有自己在 Common 里建一個）*/

目錄結構 與 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": {
  "": {
    "uri": ""
  }
}
屬性 類型 默認值 必填 描述
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 結構
開發基礎 保留字

除了傳統保留字，添加了 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
handler: Function		 在當前頁面注冊監聽事件， 可監聽$emit()、 $dispatch()、 $broadcast()等觸發的自定義事件，不能用于注冊組件節點的事件響應
$off Function eventName: String
handler: Function		 移除事件監聽，參數 fnHandler 為可選，傳遞僅移除指定的響應函數，不傳遞則移除此事件的所有監聽
$emit Function eventName: String
data: Object		 觸發當前實例監聽事件函數，與 $on() 配合使用

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

頁面設計

布局和尺寸

采用 border-box 模型且不支持 box-sizing 屬性

設計稿1px / 設計稿基準寬度 = 框架樣式1px / 項目配置基準寬度(項目配置基準寬度:/src/manifest.json 中 config.designWidth 的值，默認750)

CSS

可以使用內聯樣式、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 一致。注：縮寫形式和展開形式不要同時使用)

組件

默認支持通用事件、屬性和樣式
、、、組件為文本容器組件，其它組件不能直接放置文本內容

: 和 HTML 一樣

支持樣式 flex-direction, flex-wrap, justify-content, align-items, align-content

: 氣泡框

支持屬性 target 和 placement

支持樣式 mask-color

支持事件 visibilitychange

自組件只能是

: 下拉刷新

支持屬性 offset 和 refreshing

支持樣式 background-color 和 progress-color

支持事件 refresh

: 富文本編輯器

支持屬性 type(值為 html)

支持div樣式, height 無效

不支持子組件

: 子組件排列方式為層疊排列，每個直接子組件按照先后順序依次堆疊，覆蓋前一個子組件

支持div樣式

: 輪播視圖容器

支持屬性 index, interval, autoplay 和 indicator(是否顯示indicator)

支持樣式 indicator-color, indicator-selected-color 和 indicator-size

支持事件 change

支持方法 swipeTo(index)

: 選項卡

支持屬性 index

支持事件 change

子組件僅支持最多一個和最多一個

: 用來展示tab的標簽區，子組件排列方式為橫向排列

支持屬性 mode(scrollable|fix)

支持樣式 height

支持事件 visibilitychange

: 用來展示tab的內容區，高度默認充滿tabs剩余空間，子組件排列方式為橫向排列

支持屬性 target 和 placement

支持樣式 mask-color

支持事件 visibilitychange

: 開發者在頁面中實現長列表或者屏幕滾動等效果時，習慣使用div組件做循環遍歷

子組件必須是 ;

支持屬性 scrollpage，默認關閉，標志是否將頂部頁面中非的元素隨一起滾動。開啟 scrollpage 會降低渲染性能

組件的性能優化分為: 精簡 DOM 層級、復用、細粒度劃分、關閉 scrollpage 四個方面

支持 flex-direction 和 column

具有方法scrollTo(num)和事件scroll, scrollBottom, scrollTop

list 的子元素

的子組件可以是任何標簽或除以外的組件

有一個屬性 type，type 值相同的 后代 DOM 必須一模一樣，如果不一樣，請使用不同的 type 值。type 不能為空！

支持

樣式和 column-span，不支持 position

: 鏈接

支持屬性 href

href 屬性值可根據路由配置

href還支持http和https開頭的網址，點擊后會打開webview加載網頁

href還可以通過“?param1=value1”的方式添加參數，參數可以在頁面中通過this.param1的方式使用

子組件僅支持

僅支持 `text

支持 sms, tel, mailto

支持樣式 lines, color, font-style, font-weight(normal|bold),text-decoration, text-align, line-height, text-overflow

: 圖片

支持屬性 src 和 alt

支持樣式 resize-mode(cover|contain|stretch|center)

不支持子組件

: 進度條

支持屬性 percent 和 type(horizontal|circular)

支持樣式 color 和 stroke-width

支持事件 visibilitychange

不支持子組件

: 星級評分

支持屬性 numstars(總數), stepsize(步長), indicator(是否可操作)和 rating(值)

支持樣式 star-background, star-secondary, star-foreground（三種狀態的圖片）

支持事件 change，不支持click、longpress事件

不支持子組件

: 格式化的文本

只能作為與的子組件

不支持 show 和 disabled 屬性

支持樣式 color, font-size, font-style, font-weight(normal|bold),text-decoration

不支持任何事件

不支持子組件

: 文本內容寫在標簽內容區，支持轉義字符""

僅支持與子組件

支持樣式 lines, color, font-style, font-weight(normal|bold),text-decoration, text-align, line-height, text-overflow

: 接收用戶的輸入

不支持子組件

支持屬性 type(button|checkbox|radio|text|email|date|time|number|password), name, value, checked 和 placeholder

支持樣式 color, placeholder-color, width, height 和 font-size

支持事件 change

支持方法 focus()

: 為input、textarea組件定義標注

不支持子組件

支持屬性 target

支持樣式 lines, color, font-style, font-weight(normal|bold),text-decoration, text-align, line-height, text-overflow

不支持事件

: : 下拉菜單

僅支持

不支持 click 事件, 支持 change 事件

: 滑動選擇器

不支持子組件

支持屬性 min, max, value 和 step

支持樣式 color, selected-color, padding 僅支持 left 和 right

支持事件 change

: 開關選擇

不支持子組件

支持屬性 checked

支持事件 change