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 开发平常

Weex新手记

前言

Weex 简单介绍

知识点