Weex初体验--创建一个简单的Weex程序

最近阿里开源的Weex很火爆。

参考官网的资料学习了一下，写了一个小Demo。

分享出来和大家交流交流。

环境准备

按照官网的教程，完成以下步骤：

1. 安装Node.js
2. 安装weex-toolkit

这两步完成以后，就可以进行代码的编写了。

小Demo

程序界面

实现一个很简单功能：在文本框中输入文字，点击按钮，文字会出现在下面列表中。

1、创建项目

这里的Demo是将Weex集成到现有的项目中，

所以首先需要创建一个Android项目。

官网要求：

1. 已经安装了JDK version>=1.7 并配置了环境变量
2. 已经安装Android SDK 并配置环境变量。
3. Android SDK version 23 (compileSdkVersion in build.gradle)
4. SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
5. Android Support Repository >= 17 (for Android Support Library)

在满足这些要求的情况下，创建一个Android Studio项目。

2、编写Android代码

（一）添加依赖

glide用于图片加载。

其他的库都是官网要求的依赖。

compile 'com.android.support:recyclerview-v7:24.2.1'
    compile 'com.android.support:appcompat-v7:24.2.1'
    compile 'com.alibaba:fastjson:1.1.45'
    compile 'com.taobao.android:weex_sdk:0.9.5@aar'
    compile 'com.github.bumptech.glide:glide:3.7.0'

（二）实现ImageAdapter

Weex要求本地实现图片的加载代码。

我这里使用Glide实现图片加载。

public class ImageAdapter implements IWXImgLoaderAdapter {
    @Override
    public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
        //实现你自己的图片下载，否则图片无法显示。
        Glide.with(view.getContext())
                .load(url)
                .into(view); 
    }
}

（三）创建Application类

注意这个类一定要在Manifest中配置。

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

（四）编写MainActivity

这里做了几件事：

1. 实例化 WXSDKInstance 。
2. 在Activity生命周期中回调 mWXSDKInstance 的对应方法。
3. 实现 IWXRenderListener 接口 。
4. 调用 mWXSDKInstance.render 方法实例化组件
5. 在 IWXRenderListener.onViewCreated() 方法中设置 view 。

IWXRenderListener.onViewCreated()会在Weex将JS实例化成View后回调。 IWXRenderListener 中同时还有：

onRenderSuccess();

onRefreshSuccess();

onException();

三个回调方法。

public class MainActivity extends AppCompatActivity implements IWXRenderListener {
    WXSDKInstance mWXSDKInstance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("home.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();
        }
    }
}

到这里基本上Android端的代码就完成了。

剩下的任务就是编写Weex代码了。

3、编写Weex代码

（一）创建一个组件

在这里我先创建了一个Weex组件，用于显示文字，并且支持变色。

组件样子

文件名： name.we

<template>
    <div>
        <text repeat="item in items" class="text {{item.sex}}">{{item.name}}</text>
    </div>
</template>
<style>
    .text{ width:750; padding-top: 10px; padding-bottom: 10px;justify-content: center;text-align: center; color:#ffffff}
    .male { background-color: #9999ff; }
    .female { background-color: #ff9999; }
</style>
<script>
    module.exports = {
        data: {
            items:[]
        },
        methods:{
        }
    }
</script>

（二）创建主界面

注意： home.we 和 name.we 要放在同一个目录

文件名：home.we

<template xmlns="http://www.w3.org/1999/html">
    <div>
        <div style="width: 750; height: 200;">
            <image class="img" src={{imageUrl}}></image>
        </div>
        <input ref="input" class="input" type="text"  value={{input}} oninput="oninput" />
        <a class="button">
              <text class="text" onclick="add">添加</text>
        </a>
        <name items = {{items}}></name>
    </div>

</template>

<script>
    module.exports = {
        data: {
            imageUrl: 'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png',
            input:'',
            sex:'male',
            items:[]
        },
        methods: {
            oninput (event) {
                console.log('ominput:', event.value)
                this.input = event.value;
            },
            add(){
                if(this.input === '')
                    return;
                this.items.unshift({name:this.input,sex:this.sex})
                this.input = "";
                if(this.sex === 'female'){
                    this.sex = 'male';
                }else{
                    this.sex = 'female';
                }
            }
        }
    }
</script>

<style>
  .img { width: 200; height: 200; margin-left: 275}
  .input {
      font-size: 50px;
      width: 650px;
      margin-top: 50px;
      margin-left: 50px;
      padding-top: 20px;
      padding-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;
      color: #666666;
      border-width: 2px;
      border-style: solid;
      border-color: #41B883;
    }
  .button {
      width: 450px;
      margin-top: 30px;
      margin-bottom: 30px;
      margin-left: 150px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-width: 2px;
      border-style: solid;
      border-color: #DDDDDD;
      background-color: #F5F5F5
    }
    .text {
      font-size: 30px;
      color: #666666;
      text-align: center;
    }
</style>

（三）调试 we文件

这个时候需要用到之前安装的 weex-toolkit 工具。

直接执行命令：

weex home.we

这时候会打开默认浏览器，

我们就会看到我们所的界面。

这里支持热更新，只要你在源文件中做了更改并保存，这个界面就会跟着刷新成最新状态。特别方便。

预览界面

（四）转换编写的 we文件

调试没有问题后，就需要使用Weex命令转换成JS文件了。

使用命令：

weex home.we --output home.js

这个时候就会在当前目录下找见 home.js 了。

这个 home.js 就是我们要在 Android项目中加载的文件了。

（五）导入JS并运行程序

拷入转换后的JS文件（我这里是直接在assets目录编写的we，所以会有三个文件）

目录结构

在代码中加载 js 文件

// WXFileUtils.loadAsset("home.js",this) 这个方法会加载assets下的js
 mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("home.js",this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);

点击运行：

运行界面

 

来自：http://www.jianshu.com/p/d9487554de3c