内容简介:leader 想让我转大前端,当时我内心还是比较兴奋的,因为这跟我最开始对自己的定位是完全一致的,但后续做了一些后端的东西后,发现自己对后端也有感觉,不过实话实说都还在比较浅薄的层面上。上周末我想了两天,发现自己确实得在大前端这块上继续“抛头颅,洒热血”,不单是再精进一些之前已掌握的知识,更是拓展了自己在稍微擅长的一个领域站得更稳,刚好最近负责的产品有往“跨平台”的开发模式上转,需要提前做些调研工作,再跟上最近团队人员的变动,新来的同学有意愿切入 Weex 跨平台框架。当然,对于我个人而已,我完全不喜欢任
leader 想让我转大前端,当时我内心还是比较兴奋的,因为这跟我最开始对自己的定位是完全一致的,但后续做了一些后端的东西后,发现自己对后端也有感觉,不过实话实说都还在比较浅薄的层面上。
上周末我想了两天,发现自己确实得在大前端这块上继续“抛头颅,洒热血”,不单是再精进一些之前已掌握的知识,更是拓展了自己在稍微擅长的一个领域站得更稳,刚好最近负责的产品有往“跨平台”的开发模式上转,需要提前做些调研工作,再跟上最近团队人员的变动,新来的同学有意愿切入 Weex 跨平台框架。
当然,对于我个人而已,我完全不喜欢任何非原生的东西,甚至目前到了用别人的库都觉得“怪异”,今年年初的时候把当时最火的两个跨平台框架“小程序”和 “React-Native” 都撸了一遍,但就仅仅从 demo 这个级别出发,当时就已经非常的厌恶各种跨平台的开发框架了,总有些说不出的“怪异”之处,但也不能说它们毫无是处,在编写 demo 的过程中,很多基础组件上手就用,比 Native 开发效率上都大大提升了不只一两倍这么简单。
经过一周短暂的、磕磕碰碰的学习,也把今年学习的第三个目前也十分火爆的跨平台框架—— Weex 写出了 demo,其中大部分思路来源于 Weex 的官方文档和教学视频。如果你感兴趣的话,可以扫描下方二维码进行试玩:
Weex 简单介绍
对于 Weex 的介绍在网上已有大量的讲解,在此用自己的话可以总结如下:
- Weex 写起来很爽,前提是:对动画无要求;对交互无要求;对性能无要求;业务逻辑不复杂。
- 如果你司技术栈
Javascript
为主体且依赖Vue
,排除第一条后,上 Weex 几乎没有悬念,毕竟到现在 Weex 都被认为是Vue-Native
。 - 如果你司已经沉淀出了大量 Native 经验,上 Weex 几乎可以认定公司要倒(只是比喻 :smile: );反之,如果你司是 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"></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> 复制代码
相关注意点
安装 Weex 工具包
npm install weex-toolkit -g
从零开始创建 Weex 工程
weex create awesome-app
在创建工程的过程中,会提示一些关键信息,比如作者、是否使用 vue-router
, ESLint
等等,根据提示等待即可。
添加 iOS 工程
weex platform add ios
构建 js bundle
weex run build
在 dist 文件夹下拿到对应的 js bundle 文件。
切换显示
在工厂目录下执行 npm start
后,会在浏览器打开一个“套壳”的页面,有很多不需要的元素,如果不需要的话,可以这么做:
- 假设执行
nmp start
后,打开的地址为:http://172.20.10.4:8081/web/preview.html?page=index.js
- 把地址改为:
http://172.20.10.4:8081/index.html
,这样就去除掉了多余不需要的元素了,页面变得十分干净
新增页面
新增页面后,此时如果通过浏览器直接输入地址访问会 404,因为此次 build 出来的资源文件中并未包含我们新增的页面,需要重新执行 npm start
进行重新构建。
flex-direction
决定你的页面布局主要方向,是 row (水平)还是 column (垂直布局)。
align-items
决定父容器中的元素在水平方向上的布局,想要居中则设置为 center
。
align-content
决定父容器中的元素在垂直方向上的布局,想要居中则设置为 center
。
justify-content
决定父容器中的元素在主轴上如何排列,如果想要等分布局,则设置为 space-around
,左右边距将为中间间隔的一半。
align-items
决定元素在交叉轴上如何排列
dist
通过 webpack 打包后生成的 JS Bundle
文件都在 dist
文件夹下。
在模版中,Vue 会把驼峰命名的组件自动转换成短横线连接
Boolean
在 Weex 中关于 bool 值,本质上为字符串,比如 "true"
这样才是“真”, true
这样什么也不是,官方说会在未来版本中进行修复,还有很多类似这种容易引起“差评”的地方。
Weex SDK
构建出来的 js bundle 直接直接可以拖入工程使用,在 iOS 下,看到的渲染后的页面层级如下:
查看 WeexSDK,可以看到基本上把原生组件都按照 Weex 支持的格式封装了一遍,所以加入跨平台框架后,app 体积不上升是不可能的,只不过得看用什么个优化方法了(删删删哈哈哈~)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。