转载:给初学者的weex教程
前言
随着阿里开源的构建高性能、可扩展的原生应用跨平台开发方案--weex的发布,相信很多人都涌向了这股浪潮中,我也是从RN中抽了一腿出来踏进了这个“坑”中。随着阿里勤奋的开发人员和我们不断踏坑的开发者的填坑,现在weex已经来到V.13.0版本了,相对于刚开始的时候来说是比较完善的了,但是还需要这个不断填坑的过程去完善。weex已经发布了一年多了,但目前的资料还比较少,我也是自己不断摸索着过来的,所以写下这个教程, 帮助那些没有用过weex的朋友入门,一起探讨下weex是否值得接入到项目中去。
注:如果你觉得写得不好或者错误的地方,请直接批评指出。
首先,我先回答weex和RN有什么区别吗?有必要两个都去学吗?
这里我也不详细去谈这个问题了,就贴一个说得比较好的出来供大家参考:weex&ReactNative对比
刚刚说到学习weex的途径相对来说还是比较少的,第一个就是官网,直接度娘weex就可以找到,第二个就是github上weex的源码。
正文
这里贴一个官网的一个原理图
引用官网的话:Weex 表面上是一个客户端技术,但实际上它串联起了从本地开发环境到云端部署和分发的整个链路。开发者首先可以在本地像撰写 web 页面一样撰写一个 app 的页面,然后编译成一段 JavaScript 代码,形成 Weex 的一个 JS bundle;在云端,开发者可以把生成的 JS bundle 部署上去,然后通过网络请求或预下发的方式传递到用户的移动应用客户端;在移动应用客户端里,WeexSDK 会准备好一个 JavaScript 引擎,并且在用户打开一个 Weex 页面时执行相应的 JS bundle,并在执行过程中产生各种命令发送到 native 端进行的界面渲染或数据存储、网络通信、调用设备功能、用户交互响应等移动应用的场景实践;同时,如果用户没有安装移动应用,他仍然可以在浏览器里打开一个相同的 web 页面,这个页面是使用相同的页面源代码,通过浏览器里的 JavaScript 引擎运行起来的。
按我的理解是这样的,你写好的weex代码,编译成JS文件,然后放在本地或者远程服务器上,客户端去访问,成功后客户端进行渲染,这个渲染是怎么个渲染呢?比如说吧,weex上的一个控件
如果你对weex产生了兴趣,那接下来就要开始搭建开发环境了。
开发weex需要node.js、weex-toolkit,所以各位就自行去下载吧,官网也有非常详细的介绍了。这里我推荐一个weex的开发工具WebStorm(WS),个人感觉这个IDE非常友好,而且跟AS是出自一家公司,所以对于Android的开发者来说再适合不过了。
第二步,开始你的weex之路,初始化一个weex项目,使用命令进行创建项目
weex init demo-project
结束之后你就可以看到目录下有对应的demo-project了,那么,我们就进行愉快的开发吧。
weex,使用 Vue 作为上层框架,并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API。
Vue,Vue.js 是 Evan You 开发的渐进式 JavaScript 框架。开发者能够通过撰写 *.vue 文件,基于 ,
编译后,在浏览器访问,你就可以看到我们熟悉的hello world了。
是不是看起来有点像HTML的格式,但是又不像呢?其实这个就是Vue的基于 ,