Weex的环境搭建以及集成到Android项目

最近由于公司的需要，初步研究了Weex，Weex是阿里开发的一个web的框架，官方的介绍如下：

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

总的来说，它是一个跨平台的框架，以Web的形式构建具有原生性能的native的应用。

首先，项目环境的搭建：奉上官方链接。

1、node.js的安装。

　　要求：基本没啥要求，就是版本要5.x+ 可升不可降，现在node.js官网一般来说有两个，一个是6.10.2的稳定版，一个是最新版。

　　安装没啥要注意的，直接下一步咯，最后安装好后，相应的npm的包管理工具也会随之安装好。

　　最后一步就是检测是否安装成功，这个和简单嘛，命令如下：

$ node -v

$ npm -v

　　一看就明白这两是什么命令了，前面那条是打印node.js的版本号，后面那条是打印npm包管理工具的版本号。

　　如果都能正常的打印出来，那就OK咯。

2、Weektools的安装

　　这里需要注意的是：weex-toolkit 在 1.0.1 之后才支持初始化 Vue 项目，使用前请确认版本是否正确。

　　然后，安装，命令如下：

npm install -g weex-toolkit

　　这就是安装命令了，但是，它是从https://registry.npmjs.org/这里下载安装源的，所以需要梯子，既然这个是国产的阿里的框架，那么阿里肯定就有提供啦，所以，我们不需要去这里下载。直接从阿里的镜像里面去下载就好。

　　官方是这样给出的：

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install -g weex-toolkit

sudo cnpm install -g weex-toolkit

　　这两条命令也很简单，一条是从阿里上下载安装源，第二条是利用cnpm来安装刚才下载的。贴心的阿里还给出了一个安装错误的常见情况，就是如果提示安装失败，且失败的原因是由于权限的话，那么就使用sudo这个命令去安装。

　　但是，但是，但是我无论怎样都安装失败，但并不是由于权限，具体原因不明，同时也很奇怪，当你打印版本号的时候可以出来，但是你直接weex的时候，就出错了，所以我也不知道是为啥，知道的兄弟麻烦告知一声，谢谢！

　　最后，倒腾了许久，找到了这篇博客，使用如下的两条命令，居然安装成功了。

npm config set registry https://registry.npm.taobao.org 

npm install -g weex-toolkit

　　这两条命令， 一条是更改下载源，一条是安装，和最初的那条安装命令是一样的，不同的是，这个更改下载源后就不再从国外的服务器上下载，而是在阿里的镜像里面下载，所以，效果是一样的，省心。

　　最后一步：检验是否安装成功

weex -v

weex

当你这两条命令都能出来如下结果的时候，就说明安装成功了。

至此，安装weex结束，下面就来个Helloworld。哈哈

Helloworld:

1、找个地方，新建一个文件夹作为项目的根目录。这个直接windows下完成就好了。建好之后，打开cmd，进入刚才新建的项目。

2、执行 weex init

3、安装依赖，npm install

4、运行项目和服务器，分别是 npm run dev  和  npm run serve

5、打开：http://localhost:8080/index.html

最后需要解释一下的是，项目里面的package.json里面的-->serve -p 8080，这个就是服务器的端口号了，如果你项目运行不成功的话，先打开这个看一下，端口号写对了没有，没有你就更改一下。

下面，来跑自己试试，先在src下新建一个we文件，文件内容你可以自己写，不会就用下面这段吧：

<template>
  <div class="wrapper">
    <text class="weex">Hello Weex !</text>
    <text class="vue">Hello Vue !</text>
  </div>
</template>
<style scoped>
  .wrapper {
    flex-direction: column;
    justify-content: center;
  }
  .weex {
   font-size: 60px;
   text-align: center;
   color: #1B90F7;
  }
  .vue {
   font-size: 60px;
   text-align: center;
   margin-top: 30px;
   color: #41B883;
  }
</style>

　　完了之后，直接cmd到项目的src目录，执行weex FileName 就可以了，例如你的文件名是demo.we，那么你就敲 weex demo.we 就可以了，执行完后回自动的打开浏览器，自动的打开刚才这个页面。

这里还需要介绍一条命令是：weex demo.we --output demo.js

这条命令和上面那条差不多，只不过多了一步，执行输出相应的js，一般来说，相应的js文件会是在：C:\Users\userName\.weex_tmp\

至此，环境的搭建和Helloworld已经跑成功了，下面来看看怎么把Weex集成到Android。

Weex集成到Android

先奉上官网链接、集成到android上有两种不同的方式，SDK依赖和源码依赖，这里只讲SDK的依赖，源码依赖的方式先放下。

1、创建Android项目，这个和我们平时创建的时候一样，没什么差别。

2、添加依赖，和我们平时一样，在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'

3、这些准备工作都做好了，就对着官网抄就可以了。

package com.weex.sample;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import com.taobao.weex.IWXRenderListener;
import com.taobao.weex.WXSDKInstance;
import com.taobao.weex.common.WXRenderStrategy;
import com.taobao.weex.utils.WXFileUtils;
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);
    /**
     * WXSample 可以替换成自定义的字符串，针对埋点有效。
     * template 是.we transform 后的 js文件。
     * option 可以为空，或者通过option传入 js需要的参数。例如bundle js的地址等。
     * jsonInitData 可以为空。
     * width 为-1 默认全屏，可以自己定制。
     * height =-1 默认全屏，可以自己定制。
     */
    mWXSDKInstance.render("WXSample", WXFileUtils.loadFileContent("hello.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();
    }
  }
}

　　这个是MainActivity的代码，自己补齐相应的代码吧。这个不多说了，都很简单。需要说明的是，代码里面的 hello.js  这个js文件是在我们android项目的assets目录下的。如果在子目录下，那么相应的 fiilefloder/filename.js 就可以。

　　最后 我hello.js从哪里来呢？我们前面跑helloworld的时候，最后不是跑自己的文件么，对对对，当你使用weex xx.we --output xx.js 的时候，就会生成js文件了，去相应的目录下拷贝过来就可以了。

　　上面这种是加载本地的，还有一种方式，是夹在网络上的一段js，其实都一样，使用如下方式即可：

        //Sample 2:load js from internet
        Map<String, Object> options = new HashMap<>();
        options.put(WXSDKInstance.BUNDLE_URL, JS_URL);
        mWXSDKInstance.renderByUrl("WXSample", JS_URL, options, null, -1, -1, WXRenderStrategy.APPEND_ONCE);

　　温馨提示，不要忘了在android上加 internet 的权限。

自此，到此结束，从环境的搭建，helloworld，和集成到android都可以了。

但是，你发现没，如果你的项目里面有图片。是不成功的。对对对，没错，就是这样，这个属于扩展功能，图片属于adapter扩展，是weex扩展方式中3种的其中一种。下面就来看看adapter的实现。

实现也很简单，直接新建一个ImageAdapter类，代码如下。

public class ImageAdapter implements IWXImgLoaderAdapter {
    @Override
    public void setImage(final String url, final ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
        WXSDKManager.getInstance().postOnUiThread(new Runnable() {
            @Override
            public void run() {
                if(view==null||view.getLayoutParams()==null){
                    return;
                }
                if (TextUtils.isEmpty(url)) {
                    view.setImageBitmap(null);
                    return;
                }
                String temp = url;
                if (url.startsWith("//")) {
                    temp = "http:" + url;
                }
                if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
                    return;
                }
                Picasso.with(WXEnvironment.getApplication())
                        .load(temp)
                        .into(view);
            }
        },0);
    }
}

　　下面打开你的Application，如果没有，就新建一个，新建的时候，要在Manifest.xml里面注册，指定name为这个Application。

InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
WXSDKEngine.initialize(this,config);

　　在自定义的Application中添加上面两行代码即可，上面两行代码的意思无非就是注册一个Adapter。

附上github上的sample和Weexmarket。

 OK，大功告成。就此记录，，，2017-4-18 深圳