Weex loads Android local images

Recently, I wanted to start an app project with a few colleagues, but the native technology reserve was limited, and I encountered some difficulties in technology selection. LZ had experience in using cordova before, but it has always been limited by its js display ability and memory usage. , I want to try some newer technologies, such as react-native, and the weex project that was open sourced by Alibaba last year. These two technologies use the most popular front-end frameworks and encapsulate the native capabilities, experience and native capabilities of android and ios. Almost no difference, after some trade-offs, we opened the road to fill the weex pit.

The installation and deployment process of weex has a chance. Besides, during the development process, I encountered a problem of loading local pictures. Now I will post the solution for your reference.

First, a third-party class library is required to load local images, and the following configuration is added to build.gradle

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

Next is the tool class for loading local images

package com.example.weex.letu;

import android.widget.ImageView;

import com.nostra13.universalimageloader.core.ImageLoader;

/**
 * Asynchronously load the local image tool class
 *
 * @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;
    }

    /**
     * Asynchronously load local images from memory card
     *
     * @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);
    }

    /**
     * Load images asynchronously from assets folder
     *
     * @param imageName
     * Image name, with suffix, for example: 1.png
     * @param imageView
     */
    public void dispalyFromAssets(String imageName, ImageView imageView) {
        // String imageUri = "assets://image.png"; // from assets
        ImageLoader.getInstance().displayImage("assets://" + imageName,
                imageView);
    }

    /**
     * Load local images asynchronously from drawables
     *
     * @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);
    }

    /**
     * Grab pictures from content providers
     */
    public void displayFromContent(String uri, ImageView imageView) {
        // String imageUri = "content://media/external/audio/albumart/13"; //
        // from content provider
        ImageLoader.getInstance().displayImage("content://" + uri, imageView);
    }

}

Then it is necessary to register ImageLoader and modify 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's official demo has integrated the ability of img tag, but it only has the function of requesting pictures from the network. Now we also add the logic of loading android local pictures, and add the following code to the setImage method of the ImageAdapter class provided by weex (* the wrapped part)

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

Finally, the image is naturally loaded, and the following settings are made in the vue file:

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

This data structure is for the convenience of browser debugging and understanding. You can modify it according to your own preferences. Remind that the picture should be placed in the android\app\src\main\assets directory, and the directory level should be defined by yourself. The basic process is like this, it is not complicated, I hope it will help developers who encounter this problem.

Weex loads Android local images

Guess you like