Weex加载Android本地图片

最近和几个同事想搞一个app项目，但是原生技术储备有限，在技术选择方面遇到一些困难，LZ以前有使用过cordova的经验，但是一直受制于它js展现能力和内存占用过大的弊端，想要尝试一些更新的技术，例如react-native，还有去年阿里开源的weex项目，这两种技术都是采用当前最流行的前端框架，封装了android和ios的原生能力，体验度和原生几乎无差异，在一番权衡之后，我们开启了填埋weex大坑的道路。

weex的安装和部署过程等有机会了再说，在开发的过程中遇到了一个加载本地图片的问题，现在就把解决方法贴出来，供大家参考。

首先加载本地图片需要一个第三方类库，在build.gradle加入如下配置

classpath 'com.vanniktech:gradle-android-junit-jacoco-plugin:0.5.0'

接下来是加载本地图片的工具类

package com.example.weex.letu;

import android.widget.ImageView;

import com.nostra13.universalimageloader.core.ImageLoader;

/**
 * 异步加载本地图片工具类
 *
 * @author songfeng
 *
 */
public class LoadLocalImageUtil {
    private LoadLocalImageUtil() {
    }

    private static LoadLocalImageUtil instance = null;

    public static synchronized LoadLocalImageUtil getInstance() {
        if (instance == null) {
            instance = new LoadLocalImageUtil();
        }
        return instance;
    }

    /**
     * 从内存卡中异步加载本地图片
     *
     * @param uri
     * @param imageView
     */
    public void displayFromSDCard(String uri, ImageView imageView) {
        // String imageUri = "file:///mnt/sdcard/image.png"; // from SD card
        ImageLoader.getInstance().displayImage("file://" + uri, imageView);
    }

    /**
     * 从assets文件夹中异步加载图片
     *
     * @param imageName
     *            图片名称，带后缀的，例如：1.png
     * @param imageView
     */
    public void dispalyFromAssets(String imageName, ImageView imageView) {
        // String imageUri = "assets://image.png"; // from assets
        ImageLoader.getInstance().displayImage("assets://" + imageName,
                imageView);
    }

    /**
     * 从drawable中异步加载本地图片
     *
     * @param imageId
     * @param imageView
     */
    public void displayFromDrawable(int imageId, ImageView imageView) {
        // String imageUri = "drawable://" + R.drawable.image; // from drawables
        // (only images, non-9patch)
        ImageLoader.getInstance().displayImage("drawable://" + imageId,
                imageView);
    }

    /**
     * 从内容提提供者中抓取图片
     */
    public void displayFromContent(String uri, ImageView imageView) {
        // String imageUri = "content://media/external/audio/albumart/13"; //
        // from content provider
        ImageLoader.getInstance().displayImage("content://" + uri, imageView);
    }

}

然后是要对ImageLoader进行注册，修改WXApplication

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

    private void initImageLoader(Context context) {
        ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(
                context).threadPriority(Thread.NORM_PRIORITY - 2)
                .denyCacheImageMultipleSizesInMemory()
                .tasksProcessingOrder(QueueProcessingType.LIFO)
                .writeDebugLogs()
                .build();
        ImageLoader.getInstance().init(config);
    }

weex官方的demo里面已经集成了img标签的能力，但是只有网络请求图片的功能，现在我们把加载android本地图片的逻辑也加进去，在weex官方提供的ImageAdapter类的setImage方法中加入如下代码（*包起来的部分）

if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
    return;
}
*********************************
if (url.contains("/assets/")) {
    LoadLocalImageUtil.getInstance().dispalyFromAssets(url.replace("/assets/",""), view);
    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);
}

最后自然是图片加载了，在vue文件中如下设置：

<image class="backgroundimage" src="assets/img/login.jpg"></image>

这样的数据结构是为了浏览器调试方便，也便于以理解，你们可以根据自己的喜好进行修改，提醒一下图片要放在android\app\src\main\assets目录下，目录层级自己定义。基本的流程就是这样，并不复杂，希望对遇到该问题的开发者有所帮助。

Weex加载Android本地图片

猜你喜欢