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

轉載于:https://www.cnblogs.com/zccblog/p/9413209.html