1. 程式人生 > >30分鐘帶你學透快應用介面開發的最正確姿勢

30分鐘帶你學透快應用介面開發的最正確姿勢

這篇文章適合快速開發快應用,提高效率,不管你是資深的前端開發,還是剛入門快應用開發的菜鳥,本文都值得你一讀。通過閱讀本文,我相信一定能節省你的時間,少走很多彎路,將主要的精力放在專案的開發中來。

一、入門式

從官網的介紹可以知道,快應用是以前端技術棧作為開發基礎,渲染是Native 來渲染的。

從這句話中我們要明確幾個點:

1.快應用不是Html5

2.可以用前端經驗去開發

如果你有過前端的開發經驗,來做快應用,會很快,當然如果你有開發經驗,做快應用,也很快,快應用的入門門檻不高。 如果你是一個前端小白,也可以通過看官網來入門的,開發文件地址:https://doc.quickapp.cn/

這裡我來簡單說一下入手開發快應用的步驟

1.對著文件安裝好環境,熟悉hap-toolkit的使用

2.對著文件看下我們提供的教程部分

3.看看官網提供的sample 的例子

    https://github.com/quickappcn/sample

二、進入正題

本文主要講解快應用的介面佈局。

介面佈局其實就是兩大塊

1.樣式:修飾頁面

2.結構(骨架)

三、樣式部分

快應用的樣式部分和html5相比,進行了一些縮減,但是也增加了一些特有的。

1.盒模型

框架使用border-box模型,暫不支援content-box模型與box-sizing屬性。

因此,高度height和寬度width 都包括padding和border

2.長度單位

快應用僅僅支援px和% 兩種單位,和web不一樣,px是參考專案基準寬度,在manifest的config.designWidth 可以動態配置,預設寬度是750.

所以這裡我們會有一個設計稿寬度和框架樣式的一個轉換關係。

設計稿1px / 設計稿基準寬度 = 框架樣式1px / 專案配置基準寬度

一般我們推薦設計稿的寬度為750,那麼開發者,可以按照設計稿中的畫素進行開發。

3.選擇器

目前支援的僅有5種:id,class,tag,並列,後代。

舉例說明一下:

快應用支援的僅有5種:id,class,tag,並列,後代。

舉例說明一下:

  1. /* tag選擇器 */
  2.   span {
  3.    color: #000;
  4.   }
  5.   /* class選擇器(推薦) */
  6.   .title {
  7.    color: #00FF00;
  8.   }
  9.   /* ID選擇器 */
  10.   #title {
  11.    color: #00A000;
  12.   }
  13.   /* 並列選擇 */
  14.   .title, #title {
  15.    font-weight: bold;
  16.   }
  17.   /* 後代選擇器 */
  18.   .tutorial-page text {
  19.    font-size: 30px;
  20.   }
  21.   /* 直接後代選擇器 */
  22.   .tutorial-page > text {
  23.     text-decoration: underline;
  24.   }</font>​

在快應用裡面用這些基本的選擇器就可以了,CSS3裡面一些比較新的選擇器目前暫不支援。

強調一句,如果使用後代選擇器,不要巢狀層級太多了。

再舉一個例子

比如我們在開發中經常碰到  “文字不能超過2行,超過2行,用省略號表示” 這樣的需求。 在快應用中是用lines 屬性,在html5裡面 這個是-webkit-line-clamp 這個屬性(僅webkit支援的,未列入草案)

他們的寫法分別是:

在快應用中

  1. lines: 2;
  2. text-overflow:ellipsis;</font>

在html5中

  1. overflow:hidden;
  2. text-overflow:ellipsis;
  3. display:-webkit-box;
  4. -webkit-box-orient:vertical;
  5. -webkit-line-clamp:2; </font>

再比如在快應用裡面,不支援浮動,絕對定位,相對定位。 因此以下程式碼在快應用是不生效的。

  1. float:left;
  2. position:relative
  3. position:absolute;</font>

因此,習慣了之前前端開發的同學,這種佈局方式,不要在快應用中使用了。

四、結構部分 這部分需要明確兩個東西:用什麼佈局、怎麼佈局 1)用什麼佈局?用元件(標籤)進行佈局,快應用提供了一些元件,供開發者使用。 元件(標籤)分為幾大類:

  • 容器元件
  • 基礎元件
  • 表單元件
  • 媒體元件
  • 畫布元件
  • 其他元件
  • 第三方元件

需要說明一點的是,這裡的標籤寫法和html5 寫法類似,但是他們兩者沒有任何關係,含義也不一樣【至於什麼是一樣,讀者可以自己琢磨】。 這裡我大致總結了下標籤與html5中不一致的部分,方便開發者進行開發。

  • 顯示文字放置於text元件, 不能放置於div元件
  • 基礎元件中:a, text 元件支援內部巢狀 元件,其他不支援
  • a的子元件:span
  • text的子元件:a 和span  

如果想查閱元件可以參考 https://doc.quickapp.cn 這塊相對來說,比html5縮水了不少。同時也說明,快應用入門門檻不高,非常適合開發,省時省力。 2)怎麼佈局? 前面提到過,快應用不支援浮動float,絕對定位absolute,相對定位relative,所以不要嘗試在快應用採用這種佈局方式。 快應用預設採用的是彈性盒(flex)佈局方式。 但是快應用的flex佈局和html5 佈局也有一些不同,這裡要知道一些不同的地方。 flex佈局這塊,主要弄清楚2個核心概念:主軸和交叉軸;容器和專案 (1)主軸和交叉軸

這裡的是一致的,主軸和交叉軸可以根據設定,可以交換的。 (2)容器和專案 快應用的元件中,有容器這個元件分類,但是僅僅支援三個標籤(div,list-item,tabs)。 換一句話說,就是僅僅在這些元素上才支援flex佈局,其他的元素上是不支援的。因此不要在其他元素上,比如a標籤上寫display:flex,這些程式碼也是不生效的。但是在html5裡面這是可以的。 專案就是容器內的子元件了。當然也支援巢狀使用。 需要說明一點的是,快應用預設flex佈局。以下兩種程式碼

  1. <font size="2" color="#000000">flex-direction: column;
  2. padding:20px;</font>

  1. <font size="2" color="#000000">display: flex;
  2. flex-direction: column;
  3. padding:20px;</font>

都是生效的。 其實就是可以省略掉display:flex 這一行。但是作者推薦採用第二種寫法,不要省略這行。 最後用一個圖來總結以下快應用flex佈局和html5的flex佈局一些差異(截止1020版本)。

聯絡我們:

快應用官方訂閱號: