Weex的主要用途是用于app的开发，所以首先就来尝试一下怎么集成到android中去，这里需要读者熟悉基本的安卓开发，IDE使用Android Studio。
集成的方式有两种，一种是基于gradle依赖，另一种是直接源码依赖，具体的集成步骤就不再提了，参考这里，主要针对这过程中可能遇到的问题进行补缺补漏。
解决编译慢的问题
由于gradle默认使用的jcenter的源，在国内访问实在是慢，因此需要先加入国内的maven镜像源，编辑build.gradle文件：
repositories {
jcenter()
}
改成（注意有两个地方）
repositories {
maven{
url "http://maven.aliyun.com/nexus/content/groups/public/"
}
jcenter()
}
完整的：
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
maven{
url "http://maven.aliyun.com/nexus/content/groups/public/"
}
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:2.2.3'
}
}
allprojects {
repositories {
maven{
url "http://maven.aliyun.com/nexus/content/groups/public/"
}
jcenter()
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}
这样就可以享受飞一般的感觉了。
库依赖的问题
Weex可以源码依赖也可以aar包依赖，这里需要注意的是weex_sdk的版本，最新的是0.10.0
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.10.0@aar' 使用gradle依赖
compile 'com.squareup.picasso:picasso:2.5.2'
//使用本地依赖，可将weex源码里android目录下的sdk目录直接以模块的方式添加到项目里，不用拷贝到当前目录下，方便更新维护
compile project(':weex_sdk')
默认生成的例子图片无法显示的问题
如果使用填坑笔记1里面默认的方式生成一个项目，会自动生成默认的页面：src/foo.vue
里面的logoUrl是
https://alibaba.github.io/weex/img/weex_logo_blue@3x.png
在浏览器里面没有问题，但是在android端会显示不出来
<!--src/foo.vue文件-->
<template>
<div class="wrapper" @click="update">
<image :src="logoUrl" class="logo"></image>
<text class="title">Hello {{target}}</text>
</div>
</template>
<style>
.wrapper { align-items: center; margin-top: 120px; }
.title { font-size: 48px; }
.logo { width: 360px; height: 82px; }
</style>
<script>
export default {
data: {
logoUrl: 'https://weex-project.io/images/ios.png',
target: 'World'
},
methods: {
update: function (e) {
this.target = 'Weex!'
console.log('target:', this.target)
}
}
}
</script>
使用的ImageAdapter:
public class ImageAdapter implements IWXImgLoaderAdapter {
public ImageAdapter() {
}
@Override
public void setImage(final String url, final ImageView view, WXImageQuality quality, final 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;
}
if(!TextUtils.isEmpty(strategy.placeHolder)){
Picasso.Builder builder=new Picasso.Builder(WXEnvironment.getApplication());
Picasso picasso=builder.build();
picasso.load(Uri.parse(strategy.placeHolder)).into(view);
view.setTag(strategy.placeHolder.hashCode(),picasso);
}
Picasso.with(WXEnvironment.getApplication())
.load(temp)
//.transform(new BlurTransformation(strategy.blurRadius))
.into(view, new Callback() {
@Override
public void onSuccess() {
if(strategy.getImageListener()!=null){
strategy.getImageListener().onImageFinish(url,view,true,null);
}
if(!TextUtils.isEmpty(strategy.placeHolder)){
((Picasso) view.getTag(strategy.placeHolder.hashCode())).cancelRequest(view);
}
}
@Override
public void onError() {
if(strategy.getImageListener()!=null){
strategy.getImageListener().onImageFinish(url,view,false,null);
}
}
});
}
},0);
}
}
会发现图片获取使用的是Picasso库，Picasso在处理的时候出现了错误，这个问题卡壳了很久，其实解决的办法很简单，就是换一张图片，比如这张图片：）
https://puui.qpic.cn/qqvideo_ori/0/u00227vq2f4_228_128/0
参考资料：
https://weex-project.io/cn/guide/integrate-to-your-app.html
https://github.com/xkli/WXSample
