Weex 新手記

前言

leader 想讓我轉大前端，當時我內心還是比較興奮的，因為這跟我最開始對自己的定位是完全一致的，但後續做了一些後端的東西后，發現自己對後端也有感覺，不過實話實說都還在比較淺薄的層面上。

上週末我想了兩天，發現自己確實得在大前端這塊上繼續“拋頭顱，灑熱血”，不單是再精進一些之前已掌握的知識，更是擴充了自己在稍微擅長的一個領域站得更穩，剛好最近負責的產品有往“跨平臺”的開發模式上轉，需要提前做些調研工作，再跟上最近團隊人員的變動，新來的同學有意願切入 Weex 跨平臺框架。

當然，對於我個人而已，我完全不喜歡任何非原生的東西，甚至目前到了用別人的庫都覺得“怪異”，今年年初的時候把當時最火的兩個跨平臺框架“小程式”和 “React-Native” 都擼了一遍，但就僅僅從 demo 這個級別出發，當時就已經非常的厭惡各種跨平臺的開發框架了，總有些說不出的“怪異”之處，但也不能說它們毫無是處，在編寫 demo 的過程中，很多基礎元件上手就用，比 Native 開發效率上都大大提升了不只一兩倍這麼簡單。

經過一週短暫的、磕磕碰碰的學習，也把今年學習的第三個目前也十分火爆的跨平臺框架—— Weex 寫出了 demo，其中大部分思路來源於 Weex 的官方文件和教學視訊。如果你感興趣的話，可以掃描下方二維碼進行試玩：

Weex 簡單介紹

對於 Weex 的介紹在網上已有大量的講解，在此用自己的話可以總結如下：

Weex 寫起來很爽，前提是：對動畫無要求；對互動無要求；對效能無要求；業務邏輯不復雜。
如果你司技術棧 Javascript 為主體且依賴 Vue，排除第一條後，上 Weex 幾乎沒有懸念，畢竟到現在 Weex 都被認為是 Vue-Native。
如果你司已經沉澱出了大量 Native 經驗，上 Weex 幾乎可以認定公司要倒（只是比喻 ? ）；反之，如果你司是 web 主導，想切入 Native 端，滿足第一條後，再考慮 React-Native 是否符合自身技術棧，其次再來考慮 Weex。驗證我這番話，可以對比 RN 和 Weex 的官方文件和社群，當然 Weex 還是十分的年輕，但和 React-Native 二者正式開源也就前後相隔一年左右。
據我所知，目前“極客時間“、”企鵝電競“等 App 已經是純 Weex 開發，甚至桔廠”順風車“也全面擁抱，可見其威力有多大！

知識點

該 demo 中運用到的主要相關知識點如下：

Weex 內建元件：div，text
Weex 內建模組：navigator，storage，dom
Weex custom Component
CSS 基本內容
Vue.js 基本內容
Javascript 基本內容

頁面展示

index.html

add.html

detail.html

開發過程

Weex 吸收了目前最流行的 MVVM 和麵向元件開發的思想，上文中我所說的“爽”就來自於此！舉一個例子，navbar 元件，編寫一個元件相對 Native 來說，真的是又快又爽！在 <tempalte> 中寫好元件模版程式碼，在 <script> 中寫好事件處理、屬性定義、生命週期管理，在 <style> 中寫好 CSS 樣式佈局，想要給別人用，直接拖走這個 .vue 檔案即可完事（當然 native 也是一樣）。我覺得能有如此便利，多虧 CSS，在 native 實現一個功能可能使用 CSS 只需要兩三行即可完事！

`navbar` 元件

<template>
  <div class="navbar">
      <!-- v-if 判斷是否需要展示返回 icon -->
      <text v-if="showBack" class="iconfont navbar-icon" @click="onBack">&#xe779;</text>
      <text v-else class="navbar-title"></text>
      <text class="navbar-title">{{ title }}</text>
      <text class="navbar-title"></text>
  </div>
</template>

<script>
const navigator = weex.requireModule('navigator')
export default {
  name: 'navbar',
  props: {
    showBack: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      required: true
    }
  },
  beforeCreate () {
    const domModule = weex.requireModule('dom')
    domModule.addRule('fontFace', {
      'fontFamily': 'iconfont',
      'src': "url('http://at.alicdn.com/t/font_933576_ji32n9fdyki.ttf')"
    })
  },
  methods: {
    onBack () {
      navigator.pop({
        animated: 'true'
      })
    }
  }
}
</script>

<style scoped>
.iconfont {
    font-family: iconfont;
  }
.navbar {
  height: 88px;
  background-color: #50e3a4;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}
.navbar-title {
  font-size: 32px;
  color: #fff;
}
.navbar-icon {
  color: #fff;
  font-size: 36px;
}
</style>

align-items

決定元素在交叉軸上如何排列

dist

通過 webpack 打包後生成的 JS Bundle 檔案都在 dist 資料夾下。

在模版中，Vue 會把駝峰命名的元件自動轉換成短橫線連線

Boolean

在 Weex 中關於 bool 值，本質上為字串，比如"true" 這樣才是“真”，true這樣什麼也不是，官方說會在未來版本中進行修復，還有很多類似這種容易引起“差評”的地方。

Weex SDK

構建出來的 js bundle 直接直接可以拖入工程使用，在 iOS 下，看到的渲染後的頁面層級如下：

檢視 WeexSDK，可以看到基本上把原生元件都按照 Weex 支援的格式封裝了一遍，所以加入跨平臺框架後，app 體積不上升是不可能的，只不過得看用什麼個優化方法了（刪刪刪哈哈哈～）

總結

本來想系統的介紹一下 Weex 的開發流程和部分細節，下次有機會再愉快的玩耍吧～本次 Weex demo 的練習，讓自己對 Weex 和 Vue 都有了一個直觀的感受，到現在給我印象最深刻的不是 Weex 而是 Vue，感觸良多。對原生開發的喜愛又多了不少，在今天這個時代背景下，求快不求穩，不管怎麼說，我還是一個堅定的原生開發者～

原文地址：PJ 的 iOS 開發日常

優秀的人遵守規則，頂尖的人創造規則

Weex 新手記

前言

Weex 簡單介紹

知識點