weex 開發 (已放棄了)

關於weex 開發 本菜已放棄使用了，當初選擇使用weex 是爲了同時支持h5 和 android / ios  三端；想法很不錯，深刻以後 忽然發現，開發起來並無很輕鬆，由於weex 中有些方法，若是你要兼容三端，可能須要你去寫三套代碼去實現；深感不爽，決定棄坑了！

weex 開發佈局方式
在weex 開發中不支持 rem/em/pt 佈局方式, 目前只支持flexBox, 和以px爲單位的佈局方式;
另外 Android 開發是不支持百分比形式的佈局方式；而且weex不支持float浮動屬性,默認就是flex;

weex 是以750px 的寬度爲基準，當屏幕寬度小於或大於750px時;weex 會自動進行適應,因此在開發中設計圖最好是以750px 的尺寸爲標準；
在weex 徹底支持 flexBox 的佈局方式，而且給予了每一個元素 display: flex 的屬性，因此在開發中，在使用flex 佈局時，無需重複再次寫 display: flex ;

禁止引入html自帶的一些標籤，而且不要用html5自帶的標籤(header,footer等)weex不識別

不要使用 html自帶標籤和html5 中的語義化標籤, weex是不予以支持的，應使用 div 進行替換；
建議在編寫組件的時候，每個組件都包裹一個頂層的div，而且頂層div不寫樣式，這樣可以避免出現一些莫名奇妙的bug;

 

text 標籤
text 標籤在html 中是不存在的，在weex 中是用來包含文本的，weex 中規定凡是文字的你都必需要用text 標籤包裹，
如：
<text class='txt'>Hello World!</text>
text 還有一個特殊的屬性：
lines {number}: 指定文本行數。默認值是 0 表明不限制行數。
功能相似於 overflow:hidden 當文本超出 lines 行數時，超出部分不予顯示！

另外, 在給text 包裹的文本添加樣式的時候，不要直接以標籤名的，添加屬性，最好以類的形式進行添加，由於瀏覽器中，weex 會把text 標籤渲染成 p 標籤;有時會出現樣式加不上的奇怪狀況；

謹記：
1. weex不支持border複合寫法。因此，咱們要分開寫
2. 盒模型是border-box，而不是常規瀏覽器下的content-box
3. 不支持float:left/right 用 flex代替
4. 安卓的dpi是一倍，蘋果設備目前都是兩倍的http://www.cnblogs.com/yaozhongxiao/archive/2014/07/14/3842908.html
5. weex不支持rem em ,不支持百分比，可是放心使用，其實內部已經適配好了，不一樣手機看到的大小確定不是固定的

 

### 以上介紹的weex 的通用特性，下面咱們介紹weex 組件的使用特性

input 組件

input不支持click事件, 由於input點擊事件，安卓系統就會調用輸入法，可能會形成衝突
input標籤最後必定要寫斜槓或者閉合標籤，不然只能在網頁加載出來，在虛擬機中是加載不出來的。

官方寫法：
<input ref="input" class="input" type="text" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"></input>

類html的寫法：
<input ref="input" class="input" type="text" @input="oninput" @change="onchange" @focus="onfocus" @blur="onblur"/>

 

image 組件
<image> 用於在界面中顯示單個圖片。

注意：在HTML中一般使用的 <img> 標籤在 Weex 中不支持，你應該使用<image>, 在使用image 標籤的時，必須指定樣式中的寬度和高度，不然沒法正常顯示。

屬性：
1. placeholder 相似於懶加載的功能，在src 路徑加載完成以前要展現的路徑。
2. resize resize 與三個值
1) contain 縮放圖片，保證圖片寬高最長的部分徹底展現在容器中
1) cover 縮放圖片，以保證圖片寬高最短的部分徹底展現在容器中，有可能展現不徹底
1) stretch 默認值. 按照<image>區域的寬高比例縮放圖片。
3. src 要展現的圖片的 url

list 組件
list 組件支持更多高級功能，由如下子組件提供

<cell>
內部使用cell 標籤進行填充, 用於定義列表中的子列表項, HTML 中的 ul 之於 li;
Weex 會對 <cell> 進行高效的內存回收以達到更好的性能。

<header>
當 <header> 到達屏幕頂部時，吸附在屏幕頂部。

<refresh>
用於給列表添加下拉刷新的功能。

<loading>
<loading> 用法與特性和 <refresh> 相似，用於給列表添加上拉加載更多的功能。

注意:
<list> 的子組件只能包括以上四種組件或是 fix 定位的組件，其餘形式的組件將不能被正確的渲染。

weex 內置模塊

modal
modal 模塊提供瞭如下展現消息框的 API：toast、alert、confirm 和 prompt。
咱們在調用 weex 內置模塊時：
const modal = weex.requireModule('modal')

export default {
methods: {
oninput (event) {
console.log('oninput:', event.value)
modal.toast({
message: `oninput: ${event.value}`,
duration: 0.8
})
},
onchange (event) {
console.log('onchange:', event.value)
modal.toast({
message: `onchange: ${event.value}`,
duration: 0.8
})
},
onfocus (event) {
console.log('onfocus:', event.value)
modal.toast({
message: `onfocus: ${event.value}`,
duration: 0.8
})
},
onblur (event) {
console.log('onblur:', event.value)
modal.toast({
message: `input blur: ${event.value}`,
duration: 0.8
})
}
}
}

當觸發不一樣的事件，就會彈出不一樣的框，能夠輸入啊等等。

附上最近看到的一篇博客：

https://blog.csdn.net/Jupiterxx/article/details/80026909