最近由于公司的需要，初步研究了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 深圳
