最近和几个同事想搞一个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目录下,目录层级自己定义。基本的流程就是这样,并不复杂,希望对遇到该问题的开发者有所帮助。