初识Weex(一)

2016-12-29 本文已影响393人 seph_von

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 的版本)(可高不可低)

SDK build tool version 23.0.1 (build.gradle中buildToolsVersion的版本号)
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等）

  <template>
    <div>
      <text>hello world</text>
    </div>
  </template>
 
  <style>
  </style>
    
  <script>
  </script>

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

.we文件的结构 :<template> <style> <script> 分别对应Web中的Html，CSS, JavaScript；其中<template>标签不能省略。
<template>中必须要有且只有一个根节点
.we文件中不能在<div>的标签下直接添加字符，任何内容都应该是组件

运行查看
需要查看页面效果，在命令行里使用命令：

$weex hello_world.we

这样就可以打开浏览器，里面显示的就是hello world的内容。
Ps：上面的命令默认启用的是8080端口，如果8080端口被占用的话，可以通过--port的参数指定端口

$weex hello_world.we --port 3001

如果想要在手机上查看页面效果的话，那么手机上就得下载安装Playground ;然后在命令行执行命令：

$weex hello_world.we --port 3001 --qr

这个时候命令行里就会显示一个二维码，使用Playground来扫描这个二维码，即可在手机上查看页面。

调试
weex-toolkit已经集成了Debugger，执行下面命令就可以打开debug模式：

$weex debug hello_world.we --port 3001

这个时候浏览器上就会展示带有两个二维码的页面：

debug页面

第一个二维码是Debugger Server，用Playground中先扫第一个，这个时候就会进入一个新的页面，然后在这个页面中选择需要调试的模式。

debug模式
关于debugger 和 Inspector的模式的解释，图片上已经介绍了很清楚了。选择模式后再扫第二个二维码，即可进入我们开发的页面。然后就可以查看log，以及页面结构了。

Android集成Weex

Android集成有两种方式：

源码依赖：将源码作为一个module导入
SDK依赖：导入Weex的SDK包（from jcenter）

SDK依赖

SDK的接入比较简单，我们平时在开发过程中经常会引用到第三方的库文件，都是使用这种方式进行集成的。在app的build.gradle文件中加入以下依赖：

compile 'com.android.support:recyclerview-v7:23.1.1'
compile 'com.android.support:support-v4:23.1.1'
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.alibaba:fastjson:1.1.46.android'
compile 'com.taobao.android:weex_sdk:0.5.1@aar'

另外要加上

ndk{
  abiFilters "x86"
  abiFilters "armeabi"
}

否则64位的手机无法渲染组件。
接下来就开始实现集成的代码了：
首先，实现IWXImgLoaderAdapter，在Weex的初始化的时候，Image loader adapter 一定要实现否则会报空指针。

  public class ImageApdater implements IWXImgLoaderAdapter {
    @Override
    public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
      // 实现图片加载
    }
}

然后实现自己的Application，在onCreate中初始化Weex的引擎：

  public class WXTestApplication extends Application{
    @Override
    public void onCreate(){
      super.onCreate();
      InitConfig config = new InitConfig.Builder().setImageAdapter(new ImageApdater()).build();
      WXSDKEngine.initialize(this,config);
    }
  }

特别要注意，这里一定要setImageAdapter，否则运行会报空指针错误。
最后在Activity中加载js文件。这里先要把上面hello_world.we 生成的hello_world.js文件拷贝到assets的目录里：

  public class MainActivity extends AppCompatActivity implements IWXRenderListener {    
     
   WXSDKInstance mWXSDKInstance;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        mWXSDKInstance.render("Weex Test Page", WXFileUtils.loadFileContent("hello_world.js",this),null,null,-1,-1, WXRenderStrategy.APPEND_ASYNC);
    }
  
    @Override
    public void onViewCreated(WXSDKInstance instance, View view) {
        setContentView(view);
    }
  
    @Override
    public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
    }
  
    @Override
    public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
    }
  
    @Override
    public void onException(WXSDKInstance instance, String errCode, String msg) {
    }
  
    @Override
    protected void onResume() {
        super.onResume();
        if(mWXSDKInstance!=null){
            mWXSDKInstance.onActivityResume();
        }
    }
  
    @Override
    protected void onPause() {
        super.onPause();
        if(mWXSDKInstance!=null){
            mWXSDKInstance.onActivityPause();
        }
    }
  
    @Override
    protected void onStop() {
        super.onStop();
        if(mWXSDKInstance!=null){
            mWXSDKInstance.onActivityStop();
        }
    }
  
    @Override
    protected void onDestroy() {
        super.onDestroy();
        if(mWXSDKInstance!=null){
            mWXSDKInstance.onActivityDestroy();
        }
    }
}

之后运行，就可以看到在手机的页面上看到hello_world.we中的内容了。

真机运行效果

源码依赖

下载源码： git clone https://github.com/alibaba/weex
通过以下路径File -> New Import Module->choose weex/android/sdk ->Finish 来导入Weex的SDK Module
app 的build.gradle 中添加依赖：compile project(':weex_sdk')
其他配置如上。

以上就是Weex的环境配置以及Android的集成方法，相对来说还是比较简单的。后面再讲下加载远程页面和远程调试（集成Devtools）