Weex新手記

時間 2019-11-17

標籤 weex 手記简体版

原文原文鏈接

前言

leader 想讓我轉大前端，當時我心裏仍是比較興奮的，由於這跟我最開始對本身的定位是徹底一致的，但後續作了一些後端的東西后，發現本身對後端也有感受，不過實話實說都還在比較淺薄的層面上。html

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

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

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

Weex 簡單介紹

對於 Weex 的介紹在網上已有大量的講解，在此用本身的話能夠總結以下：ios

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

知識點

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

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 只須要兩三行便可完事！github

`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 開發平常