Android快應用開發（三）

前面介紹了快應用開發的環境搭建，項目結構

這一局就來好好寫一下佈局吧，看看各個組件是如何排兵佈陣的！

項目目錄下除了app.ux文件就剩下了Hello.ux文件，很明顯，hello.ux 是我們今天的主角。

ux文件主要由三部分組成 template,style,script

第一部分 template(模板)

按照目前得到的全部信息我們可以推斷出這一塊主要是擺放視圖組件的位置，比如放一個text,div什麼的，但是需要注意的一點是teamplate只能有一個子view，例如下面的最外層div只能有一個，但是裏面是可以有任意多級的。

<template>
    <!-- Only one root node is allowed in template. -->
    <div class="container">
        <text class="title" style="font-size:20px;">
            Hello {{title}}
        </text>
        <text if = "{{show}}">我是第二行，不服打我啊</text>
        <text elif="{{dispaly}}">我其實是第三行</text>
        <text else>我是第四行</text>
        <text show="{{visible}}"> 我是show</text>
        <div onclick="press">
            <text>略略略</text>
        </div>
        <div class="list-container">
            <text for="{{list}}" tid="id">
                <span >{{$idx}}</span>
                <span >{{$item.id}}</span>
            </text>
        </div>
        <list>
            <block for="cities">
                <list-item type="city">
                    <text>{{$item.name}}</text>
                </list-item>
                <block for="$item.spots" if="false">
                    <list-item type="spot">
                        <text>{{$item.address}}</text>
                    </list-item>
                </block>
            </block>
        </list>
    </div>
</template>

這是我拓展了一些視圖的代碼

我們好好來理解一下這段代碼主要講了什麼

1、<text>標籤的編寫就是很標準的HTML寫法，但是數據綁定時（message）應用的時候用了{{}}符號來標識。

2、條件渲染 

分爲2種：if/elif/else和show。它們的區別在於：if爲false時，組件會從VDOM中移除，而show僅僅是渲染時不可見，組件依然存在於VDOM中。

if/elif/else節點必須是相鄰的兄弟節點，否則無法通過編譯。

show等同於display=none，目前只用於系統原生組件，對自定義組件不生效。自定義組件可以通過props傳入參數，在自己內部使用show來控制是否可見。

3、列表渲染：

標籤中的tid用於指定作爲定義數組元素唯一Id的字段名，如果沒有指定，則默認採用數組索引（$idx）作爲唯一Id；tid的作用是爲了元素節點重用，優化for循環的重繪效率。
例如 tid="id" 表示$item.id作爲數組元素的唯一Id。

for循環支持的寫法（其中{{}}可以省略）：
● "fn"：for="list"：list爲數組對象，默認元素變量爲$item。
● "for="value in list"：value爲自定義的元素變量，默認元素索引爲$idx。
● "for="(index,value) in list"：index爲元素索引，value爲元素變量。

注意：

● tid指定的數據屬性必須存在，否則可能引起運行異常。
● tid指定的數據屬性要保證唯一，如果發生重複，可能會造成性能問題。

4、邏輯控制塊

可以使用<block>實現更爲靈活的循環/條件渲染； 注意<block>目前只支持for和if/elif/else屬性，如果沒有指定任何屬性，<block>則在構建時被當作“透明”節點對待，其子節點被添加到<block>的父節點上。

引入組件，這個就有點像<include>標籤了，可以在新定義一個ux文件，把ux佈局引入到指定位置。其中IDE有很多可以引入的模板，比如分類欄，底部按鈕等等。

引入自定義組件

<import name='comp' src='./comp'></import>
<template>
  <div>
    <comp prop1='xxxx' onevent1="bindParentVmMethod1" @event-type1="bindParentVmMethod1"></comp>
  </div>
</template>

如果沒有設置name屬性，則默認採用src的文件名作爲組件名。

src屬性指定組件ux文件位置，可以省略.ux後綴。

注意：

● 組件名不區分大小寫，默認統一採用小寫。
● 通過(on|@)event1語法綁定自定義子組件的event1事件，觸發事件childVm.$emit('event1', { params: '傳遞參數' })時執行父組件的方法：bindParentVmMethod1。
● 標籤上聲明事件名稱採用-連接，不要使用駝峯式，來做響應與方法的關聯，即：使用event-type1表示綁定eventType1事件。

插入自定義組件

組件中通過標籤來定義子組件插入位置，例如：

組件com-a的模板定義爲，其中下面的<slot>標籤是佔位標籤，在這個地方會替換成用該組件包含的view：

<template>
    <div>
      <text>header</text>
      <slot></slot>
      <text>footer</text>
    <div>
</template>

在頁面使用組件comA，定義如下：

<import name="comp-a" src="./comp-a"></import>
<template>
    <com-a>
      <text>body</text>
    </com-a>
</template>

則在頁面渲染時，組件comA變爲：

<div>
  <text>header</text>
  <text>body</text>
  <text>footer</text>
</div>

 

第二部分：style （樣式）

用於描述template模板的組件樣式，決定組件如何顯示。

樣式佈局採用CSS Flexbox（彈性盒）樣式，針對部分原生組件，對 CSS 進行了少量的擴充以及修改。

爲了解決屏幕適配問題，所有與大小相關的樣式（例如width、font-size）均以基準寬度（默認750px）爲基礎，根據實際屏幕寬度進行縮放，例如width:100px，在1500px寬度屏幕上，width實際上爲200px。

1、導入外部樣式文件

<!-- 導入外部文件, 代替style內部樣式 -->
<style src="./style.css"></style>

<!-- 合併外部文件 -->
<style>
 @import './style.css';
 .a{
  }
</style>

2、內部樣式

支持使用style、class屬性來控制組件的樣式

<!-- 內聯inline -->
<div style="color:red; margin: 10px;" />
<!-- class聲明 -->
<div class="normal append" />

3、選擇器

支持的選擇器如下表所示。

選擇器	樣例	樣例描述
.class	.intro	選擇所有擁有 class="intro" 的組件。
#id	#firstname	選擇擁有 id="firstname" 的組件。
tag	div	選擇所有 div 組件。
,	.a, .b	選擇所有class=“.a” 以及class=“.b”的組件。
#id .class tag	#page .body text	支持id，class，tag的後代選擇器，也可以使用">"表示直接後代。

 4、選擇器優先級

當前樣式的選擇器的優先級計算保持與瀏覽器一致，是瀏覽器CSS渲染的一個子集（僅支持：inline，id，class，tag，後代，直接後代）

選擇器優先級規則如下（假設多條CSS聲明匹配到同一個元素div），應用在該元素上的CSS聲明總體優先級是：inline > #id > .class > tag，這四大類匹配到該元素的多個CSS聲明，如：#page .class-div和.page .class-div，其優先級按照各選擇器的分數高低之和來比較。

ID 選擇器的權值爲10000 ，Class 類選擇器的權值爲100 ，Tag 標籤選擇器的權值爲1，那麼以下CSS聲明計算分數爲：
● #page的分數爲：10000
● #page .class-div的分數爲：10100
● #page .class-div text的分數爲：10101
● #page #body .container div text的分數爲：20102
因此：
#page .class-div和.page .class-div比較，分數不一致，分數高優先級高；如果分數相同，則按照聲明順序：後者覆蓋前者。

5、樣式預編譯

目前支持less，sass的預編譯。

<!--導入外部文件, 代替style內部樣式-->
<style lang="less" src="./lessFile.less">
</style>

<!--合併外部文件-->
<style lang="less">
 @import './lessFile.less';

.page-less {
  #testTag {
    .less-font-text, .less-font-comma {
      font-size: 60px;
    }
  }
}
</style>

6、僞類

任何組件中，如果某個屬性是boolean類型且默認值爲false時，均可通過該屬性名字來聲明僞類，當屬性變爲true時僞類生效，例如所有組件的disabled屬性、input組件的checked屬性等。

另外部分組件會有其他形式的僞類支持，比如input組件可以通過主動調用focus方法，或者用戶操作獲得焦點，使得focus僞類生效，詳情請參考各組件內部說明。

僞類寫法舉例：

<template>
  <input type="button" class="btn" disabled="{{btndisabled}}" value="Click"></input>
</template>
<style>
btn {
  width: 360px;
  height: 180px;
  background-color: red;
}
btn:disabled {
  background-color: green;
}
</style>  

當組件的disabled屬性變爲true時，disabled僞類的樣式生效，疊加到原有樣式上，例子中background-color會從紅色變成綠色。

支持的僞類如下：

名稱	組件	效果
:active	all	在屏幕上按下生效，擡起失效。 Tabs下的子組件相當於click效果，擡起不會失效。 說明：大屏設備不支持:active僞類。
:disabled	all	組件disabled屬性爲true時生效
:focus	input textarea	組件獲取focus時生效
:checked	input(type="checkbox") switch	組件checked屬性爲true生效

三：script（腳本）

支持ES6語法。

可以通過import引入功能模塊，在代碼中調用模塊方法請參見API文檔說明。

import fetch from "@system.fetch"

也可以一次引入所有的模塊，例如：

import system from "@system"

在代碼中使用system.network來調用接口方法。

JS代碼引用推薦使用import來導入，例如：

import utils from '../Common/utils.js'

data{}：數據塊

onInit{}：初始化函數入口

press：function(){

//自定義函數

}

script塊中還有很多其他屬性，比如生命週期，頁面消息，數據方法，公共方法，事件方法，各種公共對象等等，我猜後面真正學習API的時候還會詳細說明吧，畢竟就這樣看一遍也是記不住的，要編寫代碼，逐步用上，才能更加透徹的理解。

 

這三大塊就是UX文件的全部內容了，template負責視圖的擺放，style負責視圖的樣式和位置，script負責整體的邏輯結構，頁面的生命週期，事件的處理等。

so，那麼！今天就這樣了，下班下班

you see see you!

one day day !

do not good good study!

just know eat eat eat!

look look you fat!

下一節我們開始學習組件，畢竟我也是搞Android的，對H5的組件也是一知半解，趁這個機會再好好複習一次吧！如果有H5基礎的臭弟弟應該可以很快入手了，哭唧唧。

 

對。就這樣了！