Weex填坑笔记(2)-Android环境集成

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/[email protected]
在浏览器里面没有问题，但是在android端会显示不出来

使用的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