Weex 初体验(3)-android加载本地图片

1.Weex 工程代码

代码比较简单，src这里暂时为hardcode(只为android测试，建议使用者根据平台区分具体路径)
！注意前缀必须为file:///android_asset，还需要手动拷贝images/1.png至安卓目录(文章末尾会介绍插件打包拷贝)

<template>
    <div class="wrapper">
        <image class="image" v-if="src" :src="src" resize="cover"></image>
    </div>
</template>

<script>
    var navigator = weex.requireModule('navigator')
    var modal = weex.requireModule('modal')

    export default {
        name: "test",
        data(){
            return{
                src: "file:///android_asset/images/1.png"
                //src: "local:///1.png"
                //src: 'https://cdn.dribbble.com/users/179241/screenshots/1829868/nerfwarrior_dribbble.png'
            }
        },
        methods:{}
    }
</script>

<style>
    .wrapper { align-items: center; margin-top: 0px; }
    .image {
        width: 600px;
        height: 600px;
    }
</style>

2.android相关代码

• Native Code -> ImageAdapter.java
  ImageAdapter.java在我的版本是自动提供的，路径如下图
  
• ImageAdapter.java 代码更改
  其实代码也不用改，只需要把src的路径传对就可以。

package com.weex.app.extend;

import android.graphics.BitmapFactory;
import android.net.Uri;
import android.text.TextUtils;
import android.util.Log;
import android.widget.ImageView;

import com.squareup.picasso.Callback;
import com.squareup.picasso.Picasso;
import com.taobao.weex.WXEnvironment;
import com.taobao.weex.WXSDKManager;
import com.taobao.weex.adapter.IWXImgLoaderAdapter;
import com.taobao.weex.common.WXImageStrategy;
import com.taobao.weex.dom.WXImageQuality;

import java.io.InputStream;

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;
                }
                //fix by lee
                String temp = url;
                if (url.startsWith("//")) {
                    temp = "http:" + url;
                }
                if (temp.contains("/images/") && temp.startsWith("src")) {
                    temp = "file:///android_asset/images/" + url.substring(url.lastIndexOf("/")+1);
                    Log.d("ImageAdapter", "url:" + temp);
                }

                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);
    }
}

3.webpack打包完毕拷贝文件夹

• 插件名称：copy-webpack-plugin
• 安装命令：npm i copy-webpack-plugin
• 拷贝例子：
  
  
  在构建项目或者打包完毕后，插件会自动进行目录拷贝。