補充前面知識一點，打包出來的app怎麼更換圖片，改變下圖的圖片路徑就好
我們現在開始，講講weex的元件和模組，只講weex關於前端的部分，因為時間問題，我會結合官網的一些可用的demo和指出一些坑，假如講得不好，多多擔待。
我們在html中，有非常多的標籤，weex就是把這些標籤編譯成android或者ios平臺上的元件
線上編輯程式碼
在weex裡面，我們每一個元件的佈局不能跟html裡面那樣隨性，侷限了一部分功能，例如佈局上，在安卓佈局這塊，有四種佈局
引用簡書的一個地址:www.jianshu.com/p/f32afa6ce…
線性佈局（推薦）=> 類似前端的flex佈局
相對佈局 => 類似前端的定位。
幀佈局 => 用於動畫或者播放器之類的
表格佈局 => 類似前端的表單複製程式碼注意事項
我們先從盒模型開始講起，其實也沒什麼好講的，官放上說border不支援複合寫法（經本人測試，瀏覽器端可以使用，但是手機端是無效的，要注意使用分離的寫法）
Flex 容器
以往，我們寫移動端是不是，是不是經常用到100%這種百分比的流式佈局法，很可惜安卓的佈局不支援百分數。並且，weex不支援float浮動屬性，預設就是flex所以，我們用flex佈局的方式來寫佈局。
接下來我們直接進入/src/foo.vue
<template>
<div>
<div v-for="(v, i) in list" class="row">
<div v-for="(text, k) in v" class="item">
<div>
<text>{{text}}</text>
</div>
</div>
</div>
</div>
</template>
<style scoped>
.item{
flex:1;
justify-content: center;
align-items:center;
border-width:1;
}
.row{
flex-direction: row;
height:80px;
}
</style>
<script>
module.exports = {
data: function () {
return {
list:[
['A', 'B', 'C'],
['D', 'E', 'F'],
['G', 'H', 'I']
]
}
}
}
</script>複製程式碼禁止引入html自帶的一些標籤，並且不要用html5自帶的標籤(header,footer等)weex不識別
因為不支援html5的標籤，類似header，footer，一律用用div代替
個人推薦寫法，每一個元件都包裹一個頂層的div，並且頂層div不寫樣式，這樣就避免了一些bug
(還記得上一講，為什麼在web居中了，但是在虛擬機器中沒有居中嗎？原因就是沒有加一個頂層不帶class的div)複製程式碼text標籤
text標籤在html裡面是沒有的，在weex裡有什麼用呢？凡是文字的你都要用text標籤包裹，這是規定。
例如：
<text class="title">Hello</text>複製程式碼另外text有個很特殊的樣式
lines {number}: 指定文字行數。預設值是 0 代表不限制行數。複製程式碼這個樣式性很有用，使用場景有點像text-overflow，就是多行情況下我限制顯示幾行
但是官方demo又有一個錯誤，lines不能寫在標籤作為屬性的。個人測試時無效的，必須寫在樣式表裡面。
錯誤寫法
正確寫法寫在樣式表裡面
謹記以下五點
- weex不支援border複合寫法。所以，我們要分開寫
- 盒模型是border-box，而不是常規瀏覽器下的content-box
- 不支援float:left/right 用 flex代替
- 安卓的dpi是一倍，蘋果裝置目前都是兩倍的www.cnblogs.com/yaozhongxia…
- weex不支援rem em ,不支援百分比，但是放心使用，其實內部已經適配好了，不同手機看到的大小肯定不是固定的
上面是一些規範或者說是通用特性，下面我們來講講一些所見即所得的元件，更多通用特性見官網，因為坑我都列出來了，你看官網絕對一馬平川。
input元件
input不支援click事件,為什麼不支援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"/>複製程式碼madal 模組
我們接觸的第一個內建模組，就是weex操作原生的一個模組，我們vue的寫法只是寫ui
按常理來解釋，有點像前端我們所說的toast，或者alert prompt之類的，但是他是原生的，這懂了吧？
require madal
有兩個引數，第二個是點選之後做的事情。
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
})
}
}
}複製程式碼當觸發不同的事件，就會彈出不同的框，可以輸入啊等等。
image元件
前面我們說過文字都要用text ,在weex裡，關於影像的都要用image標籤。
div標籤也不能直接設定背景圖片，只能設定背景色，所以image標籤也是很有用的
image 元件用於渲染圖片，並且它不能包含任何子元件。
需要注意的是，需要明確指定 width 和 height，否則圖片無法顯示。
如果需要實現 background-image 的效果，可以使用 image 元件和 position 定
位來現實，如下面程式碼。
<template>
<div>
<image style="width:750px; height:750px;" src="https://img.alicdn.com/tps/TB1z.55OFXXXXcLXXXXXXXXXXXX-560-560.jpg"></image>
<div class="title">
<text style="font-size:50px; color: #ff0000">你好，image</text>
</div>
</div>
</template>
<style>
.title{
position:absolute;
top:50;
left:10;
}
</style>複製程式碼切記的一點:閉合標籤
<image :src="logoUrl" class="logo"></image>複製程式碼這時候，有個非常重要的點，就是weex螢幕的適配：我們不管螢幕的解析度是多少，其實weex自己內部有一個換算比，寬是750px,g高是1250px上下，不管你跑在任何手機上，安卓大部分手機都是百分之百的顯示，可以去android studio裡面下載多幾部不同的解析度手機分別測試，然後進行一點點的微調(主要是高度，但是手機一般高度都忽略)
video元件
預設是呼叫原生安卓播放器進行播放。
在小型的app用video還是很不錯的,
<template>
<div>
<video class="video" :src="src" autoplay controls
@start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
<text class="info">state: {{state}}</text>
</div>
</template>
<style scoped>
.video {
width: 630px;
height: 350px;
margin-top: 60px;
margin-left: 60px;
}
.info {
margin-top: 40px;
font-size: 40px;
text-align: center;
}
</style>
<script>
export default {
data () {
return {
state: '----',
src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
}
},
methods:{
onstart (event) {
this.state = 'onstart'
},
onpause (event) {
this.state = 'onpause'
},
onfinish (event) {
this.state = 'onfinish'
},
onfail (event) {
this.state = 'onfinish'
}
}
}
</script>複製程式碼這裡要提一點，假如你在網頁上沒有任何效果，就在虛擬機器中試試，weex的web環境還是模擬不了真實的安卓環境。
stream 模組
提供了一個ajax的方式來載入外部的資源，官方例子很完整，大家複製下來，看看具體api，一般會用jq的ajax請求，就會用了。
methods: {
getStarCount (repo, callback) {
return stream.fetch({
method: 'GET',
type: 'json',
url: 'https://api.github.com/repos/' + repo
}, callback)
}
},複製程式碼a元件和web元件
在網頁上a標籤在html上是頁面和頁面之間的跳轉，那weex裡面呢？
<template>
<div class="wrapper">
<a class="button" href="http://dotwe.org/raw/dist/3e0e40f9ddad79f98cd236753965ffd8.js">
<text class="text">Jump</text>
</a>
</div>
</template>複製程式碼a標籤也是進行頁面跳轉的，但是href連結的地址，是一個js檔案，這個js檔案是我們weex能解讀的js檔案
我們可以把編譯後app.weex.js的檔案放到根目錄下取名hello.js，然後用a標籤連結到這個js檔案，就可以點選跳轉到這個hello.js的頁面，可以這麼理解每一個編譯後的app.weex.js就是一個頁面
<a class="button" href="/hello.js">
<text class="text">Jump</text>
</a>複製程式碼web元件
有點像iframe，一般引入第三方的資源，web元件要有width屬性,否則載入不了
使用
<web ref="webview" :src="url" class="webview" @pagestart="start" @pagefinish="finish" @error="error"></web>複製程式碼url一定要帶協議例如訪問百度url:https://www.baidu.com/複製程式碼總結:
weex上手還是有一定難度的，多看官網，多踩坑，建議大家擴充一下螢幕適配，安卓和ios之間的差異，假如你還會vue語法的話，你會發現weex真的還挺好的。（因為本人也不是大神，時間也有限，而且都是基礎，就不整理原始碼了，大家多敲一敲程式碼，更加能成長起來）