最近和几个同事想搞一个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实现本地图片加载image播放gif动画扩展module获取版本号 博客地址:http://blog.csdn.net/codingandroid/article/details/77719557
weex android Demo weex android Demo weex android Demo
Weex Android 可修改的SDK源码,可直接作为依赖库导入项目,替代不可修改的weex-sdk maven库。这边已有两个线上项目在使用。
weex版,跨Android和IOS终端
Android Weex 阿里巴巴开源框架Weexdemo
mzlibrary-release.aar
阿里巴巴Weex在Android中的使用
IOS中Weex 加载 .xcassets 中的图片资源的实例详解 前言: 因为 .xcassets 中的图片资源只能通过 imageNamed: 方法加载,所以需要做一些特殊处理,才能提供给 Weex 使用(PS:纯属娱乐,因为 Weex 跨平台的特性,...
该fork基于最新Weex-dev,调整了Weex默认的list加载更多方式,简单暴力修改了源码,使其拥有自然滑动加载更多的能力。【仅修改了Android】 考虑到目前WEEX处于发展阶段,因此该修改仅仅用作前期需求的满足,因此不...
最新的适用于android11的weex aar 去掉项目里的远程依赖“com.taobao.android:weex_sdk:0.28.0”改为aar依赖 最新的weex包域名是org.apache.weex,所以需要修改与weex相关的问题的import包
Android端使用Weex的简单demo
一个基于weex的简单手势密码解锁Android插件
阿里巴巴weex校园开发大赛作品该app获得比赛第二名weex开发流程1.打开Android Studio,初始化一个项目2.配置好gradle,安装好weex-sdk(我用的是v0.8.0版本) compile '...
WEEX分析仪施工。
android + weex 开发移动端,实现多端运行,仅就android加载weex代码集成代码,供初学者参考
代码热加载、webpack打包,weex原生调用,vue组件封装,weex内置组件使用
.Weex 阿里巴巴 开源项目 传送门 weex 入门Demo Android IOS weex 移动端
通过三种不同的方法实现gif图片的加载,希望能帮到你,大家互相学习吧
安卓比较复杂的weex例子,里面有具体的weex的项目,仿的商场项目。