最近阿里开源的Weex很火爆。
参考官网的资料学习了一下，写了一个小Demo。
分享出来和大家交流交流。
环境准备
参考官网：https://weex-project.io/cn/guide/
按照官网的教程，完成以下步骤：
- 安装Node.js
- 安装weex-toolkit
这两步完成以后，就可以进行代码的编写了。
小Demo
程序界面
实现一个很简单功能：在文本框中输入文字，点击按钮，文字会出现在下面列表中。
1、创建项目
这里的Demo是将Weex集成到现有的项目中，
所以首先需要创建一个Android项目。
官网要求：
- 已经安装了JDK version>=1.7 并配置了环境变量
- 已经安装Android SDK 并配置环境变量。
- Android SDK version 23 (compileSdkVersion in build.gradle)
- SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)
- 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
这里做了几件事：
- 实例化 WXSDKInstance 。
- 在Activity生命周期中回调 mWXSDKInstance 的对应方法。
- 实现 IWXRenderListener 接口 。
- 调用 mWXSDKInstance.render 方法实例化组件
- 在 **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的编写教程可以参考官网教程
（一）创建一个组件
在这里我先创建了一个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);
点击运行：
运行界面
Demo源码地址：github
网友评论