初識weex系列（前端視角） - 步入正軌

補充前面知識一點，打包出來的app怎麼更換圖片，改變下圖的圖片路徑就好

咱們如今開始，講講weex的組件和模塊，只講weex關於前端的部分，由於時間問題，我會結合官網的一些可用的demo和指出一些坑，假如講得很差，多多擔待。

咱們在html中，有很是多的標籤，weex就是把這些標籤編譯成android或者ios平臺上的組件
在線編輯代碼
在weex裏面，咱們每個組件的佈局不能跟html裏面那樣隨性，侷限了一部分功能，例如佈局上，在安卓佈局這塊，有四種佈局
引用簡書的一個地址:www.jianshu.com/p/f32afa6ce…

線性佈局（推薦）=> 相似前端的flex佈局
相對佈局 => 相似前端的定位。
幀佈局 => 用於動畫或者播放器之類的
表格佈局 => 相似前端的表單複製代碼

注意事項

咱們先從盒模型開始講起，其實也沒什麼好講的，官放上說border不支持複合寫法（經本人測試，瀏覽器端可使用，可是手機端是無效的，要注意使用分離的寫法）

Weex 盒模型的 box-sizing 默認爲 border-box

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不能寫在標籤做爲屬性的。我的測試時無效的，必須寫在樣式表裏面。
錯誤寫法

正確寫法寫在樣式表裏面

謹記如下五點

1. weex不支持border複合寫法。因此，咱們要分開寫
2. 盒模型是border-box，而不是常規瀏覽器下的content-box
3. 不支持float:left/right 用 flex代替
4. 安卓的dpi是一倍，蘋果設備目前都是兩倍的www.cnblogs.com/yaozhongxia…
5. 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屬性,不然加載不了
使用 組件在 Weex 頁面中嵌入一張網頁內容。src 屬性用來指定資源地址。

<web ref="webview" :src="url" class="webview" @pagestart="start" @pagefinish="finish" @error="error"></web>複製代碼

url必定要帶協議例如訪問百度url:https://www.baidu.com/複製代碼

總結:

weex上手仍是有必定難度的，多看官網，多踩坑，建議你們拓展一下屏幕適配，安卓和ios之間的差別，假如你還會vue語法的話，你會發現weex真的還挺好的。（由於本人也不是大神，時間也有限，並且都是基礎，就不整理源碼了，你們多敲一敲代碼，更加能成長起來）