初识Weex(一)

What

简而言之,Weex就是一套完全针对无线电商的技术方案。采用HyBird的方式,脑洞来自于RN,相比于传统的Native+WebView的方式,性能有了很大的提升。
关于weex的起源,优点这里就不一一介绍了,可以移步对无线电商动态化方案的思考 这个系列的文章。

How

下面来说说Weex在Android中的集成。

环境准备

  • Android开发环境
    JDK、SDK、Android Studio 这些都是必须的,如何安装配置不是本文的重点,这里暂时不表。但是值得注意的是:
    1. JDK的版本必须>=1.7;
    2. Android SDK version 23 (就是在build.gradle中的compileSdkVersion 的版本)(可高不可低)
  1. SDK build tool version 23.0.1 (build.gradle中buildToolsVersion的版本号)
  2. Android Support Repository >= 17
  • Weex环境配置
    Weex的环境,根据操作系统的不同,步骤稍有差别,这里仅用 Windows 的系统来讲。
    不论什么平台,首先都是要安装node.js的,安装node.js 比较简单,直接去官网 下载就好了,可以通过查看版本的方式来检查是否安装成功。
$ node -v
v6.9.2-nightly201610208bb346d61a
$npm -v
3.10.8

node.js安装成功后,npm包管理工具也一起安装好了。然后就可以使用npm来安装weex-toolkit。

$npm install -g weex-toolkit

如果安装失败也可以考虑使用淘宝的npm镜像

$npm install -g cnpm
$cnpm install -g weex-toolkit

之后就可以使用weex命令验证是否安装成功,还是通过查看版本的方式:

$weex --version
info 0.6.4

weex的环境配置到这里就结束了。这里的环境主要是用来编译和运行的,跟开发其实并没有太大的联系。

Weex开发

weex-toolkit安装成功之后,其实可以通过weex的命令来生成weex的本地工程,这个后面再讲。先从最简单的开始。

  • 创建文件
    新建一个.we的文件(这个就是weex程序的文件后缀名)。按照小白入门惯例取名为:hello_world.we
    接下来就是填写代码了。(weex主要涉及的都是前端的代码,因此开发工具可以选择如sublime等)
  
 
  
    
  

这样就完成了一个最简单的hello world的页面。
这里有几点 需要注意的地方:

  1. .we文件的结构 :