前言
UI這方面朴摊，無論你以前是從事前端或者移動端默垄，多聯(lián)系一下，還是很容易上手甚纲。
正文
一些要記住的知識點
- 在 Weex 中口锭，F(xiàn)lexbox 是默認且唯一的布局模型，所以你不需要手動為元素添加 display: flex; 屬性。Flexbox和Android原生相比適配性更強鹃操。
- weex中的長度單位只有px;
- 屏幕默認的寬度為750px,高度約為1250px韭寸，
flexBox布局概念
weex中使用的是flexbox布局，Android過來的同學(xué)需要看一下這個flexbox荆隘。前端的同學(xué)的話也需要適應(yīng)一下恩伺，weex的flexbox是不支持百分比參數(shù)的。
flexBox寬高不支持百分比設(shè)定椰拒。使用flexBox需要記住幾個參數(shù)：
- flex-direction：
定義了flex容器中flex成員項的排列方向(row:從左到右排列晶渠，column:從上到下排列),，默認為column燃观。 - justify-content：
定義了flex容器中flex成員項在 主軸 方向上如何排列以處理空白部分褒脯。可選參數(shù)有：flex-start | flex_end | center | space-between仪壮。默認值為flex-start憨颠。
justify-content各個參數(shù)的效果 - align-items：
定義了 flex 容器中 flex 成員項在 縱軸 方向上如何排列以處理空白部分』可選值為 stretch | flex-start | center | flex-end爽彤，默認值為 stretch。
align-items各個參數(shù)的效果 - Flex成員項:
該參數(shù)僅支持在flexBox內(nèi)的控件使用缚陷。flex屬性定義了flex 成員項可以占用容器中剩余空間的大小适篙。如果所有的成員項設(shè)置相同的值 flex: 1，它們將平均分配剩余空間. 如果一個成員項設(shè)置的值為 flex: 2,其它的成員項設(shè)置的值為 flex: 1箫爷，那么這個成員項所占用的剩余空間是其它成員項的2倍嚷节。
初步編寫
初始化頁面
- 這是我們項目初始化后的頁面，頁面代碼分為三個部分：<template>,<script>虎锚，<style>硫痰，分別負責(zé)布局难捌，邏輯驰后，樣式的代碼。
- 我們現(xiàn)在嘗試根據(jù)官方文檔來添加一個控件袁勺。
-
在<template>中添加布局代碼柱徙。
web布局代碼 -
在<Style>中給控件添加寬和高(不設(shè)置寬高控件會不可見)缓屠。
web-Style代碼 -
效果：
web效果
