Weex系列(一)之Weex入门准备

一、A New Start

在上一个系列文章中我们说到大前端一定是可以预见到的未来的趋势之一,那么从本篇文章中我将开启一个新的系列,从入门到深入,一步步走近大前端的核心腹地。计划本系列文章包含以下内容:

  • Weex入门准备,包含学习资料、学习途径等;
  • Weex项目实践,使用Weex开发一个原生的界面;
  • Weex源码分析系列;
  • Weex的本地接入封装;
  • 针对Weex不够高的地方进行源码修改。

二、Why is Weex?

这个章节本来是想忽略的,因为说Weex那肯定绕不开ReactNative,而这个章节也极易引起口水;但是不写总觉得技术选型没有做到位。因此我就简单说几句:技术选型与团队规模、团队成员技术偏好、技术稳定性、易用性等方面息息相关,没有最正确的选型,只有最合适的选型。引入一项新技术的初衷是为了解放生产力、跟进新技术,而不是为了趟坑自虐。错误的技术选型(例如一个小团队却选择了一个需要持续维护的技术方向)不仅不会提升生产力,反而会降低生产力、伤害团队成员的技术热情。

三、What is Weex?

Weex 是一套简单易用的跨平台开发方案,能以 web 的开发体验构建高性能、可扩展的 native 应用,为了做到这些,Weex 与 Vue 合作,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API,这样一来,你甚至可以使用其他框架驱动 Weex,打造三端一致的 native 应用。

从Weex官网介绍我们可以看出几个关键词:跨平台、高性能、Vue、W3C标准、三端一致;以上关键词我们会在逐渐的深入了解过程中逐步体会到。

放一张Weex整体架构图:可以参考下面备注。

Weex 表面上是一个客户端技术,但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。开发者首先可以在本地像撰写 web 页面一样撰写一个 app 的页面(Weex File),然后编译成一段 JavaScript 代码(transformer),形成 Weex 的一个 JS bundle;在云端,开发者可以把生成的 JS bundle 部署上去(deploy),然后通过网络请求或预下发的方式传递到用户的移动应用客户端(Server————>JS FrameWork);在移动应用客户端里,WeexSDK 会准备好一个 JavaScript 引擎(JSCore、V8),并且在用户打开一个 Weex 页面时执行相应的 JS bundle,并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储、网络通信、调用设备功能、用户交互响应等移动应用的场景实践(callJs、callNative);同时,如果用户没有安装移动应用,他仍然可以在浏览器里打开一个相同的 web 页面,这个页面是使用相同的页面源代码,通过浏览器里的 JavaScript 引擎运行起来的。

看起来是不是还有点抽象,那好人话来了!见下图,忽略掉Weex FrameWork与Native的交互,可以参考理解为我们发布新版本Apk的过程。

四、Quick Start

体验Weex的Demo可以参考快速上手;

  • 在dotWe编写或者粘贴Demo中的代码实时预览;
  • 下载Weex专门的一个 Playground App扫描网页右边的二维码。

五、DevTools

Weex开发环境的搭建并不复杂,可以参考搭建开发环境章节。此处主要推荐下Weex的开发使用工具:

  • Sublime
    • 安装、破解可以参考《mac sublime3 破解版的安装、插件管理和配置》;
    • 安装的一些插件:Emmet、HTML-CSS-JS Prettify、Vue Syntax Highlight、VueJs Snippets等。
  • WebStrom
    • 安装、破解可以参考《Webstorm 2017 MAC版本—————下载及破解码》;
    • 对Vue进行设置,参考《关于webstorm 对 vue的设置》;
    • 添加weex的插件,在plugin中搜索weex,并且设置对vue的支持。

这样就可以愉快的开发了。

六、Preparation

对Weex的学习铺垫就到了这里;环境、开发工具完成之后,对照官方文档,练习Demo即可。当然前提是对前端、Vue的了解,如果没有相关姿势的同学岂不是没法破了?不了解还真没法破!学习实践Weex不需要你成为前端专家,但是语法、相关的一些知识还是必不可少的。

  • 推荐看一些HTML+CSS的基础课程,比较推荐慕课网(真不是广告);
  • Vue也是比较好入门的,只要理解了双向绑定,参考文章《Vue.js——60分钟快速入门》;

本文分享自微信公众号 - 双十二技术哥(gh_b0e7544783e2)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-08-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小樱的经验随笔

【批处理学习笔记】第二十八课:声音和控制

声音     呵呵,是不是注意到了批处理没有声音呐?闲话不说,直接做实验吧 ^_^ ======================================...

29640
来自专栏java一日一条

2016 年 7 个顶级 JavaScript 框架

当涉及到Web开发时,JavaScript框架往往是一些开发人员和企业最受欢迎的平台。可能,你有机会尝试过一两个顶级的JavaScript框架,但你仍然有点不确...

8810
来自专栏编程微刊

进阶攻略|前端完整的学习路线

28850
来自专栏针针小站

【Soft】QQ 9.0 – 从心出发 趣无止境

20930
来自专栏空帆船w

Android Studio 插件推荐一

首先推荐两款界面插件,毕竟每天都得面对着 Android Studio,好的界面让心情更加愉悦。

19730
来自专栏BestSDK

从初创到BAT,都必须遵守的4个用户体验设计细节

启动页 当用户打开 app 时,最不能做的事情就是让他们等待。但是如果 app 的初始设置非常耗时,又不可能优化该怎么办?你不得不让用户等。如果他们愿意等,你得...

32540
来自专栏视频咖

【小视频】特效录制插件强势来袭

2017年3月20日,腾讯云视频盛典正在北京·中国大饭店火爆进行,盛况空前。就在刚才,视频云客户端团推出了小更新:小视频特效录制插件

33020
来自专栏达摩兵的技术空间

重新思考数据输入

在目前的产品交互中,输入数据然后程序或者产品对数据进行验证是非常常见的需求,而产品进行验证的目的性也很明确,就是为了避免脏数据进入数据库。但是从产品交互本身来讲...

11720
来自专栏java一日一条

10 个最适合 Web 和 APP 开发的 NodeJS 框架

在浏览器以外运行 JavaScript 对于 JavaScript 爱好者来说非常神奇,同时也肯定是 web 应用程序开发界最受欢迎的进步之一。全球各地的开发者...

79520
来自专栏IMWeb前端团队

Front-End MV*简述(一)

本文作者:IMWeb 何璇 原文出处:IMWeb社区 未经同意,禁止转载 近几年来由于web应用的交互越来越复杂,前端技术也迎来了一个飞速发展的时期。...

214100

扫码关注云+社区

领取腾讯云代金券