Weex 加载 .xcassets 中的图片资源

标签: weex ios
3038人阅读 评论(0) 收藏 举报
分类:

背景

因为 .xcassets 中的图片资源只能通过 imageNamed: 方法加载,所以需要做一些特殊处理,才能提供给 Weex 使用(PS:纯属娱乐,因为 Weex 跨平台的特性,这种针对某一端做实现的方案实用价值并不大)。

方案

观察 WeexSDK 发现有 WXImgLoaderProtocol 这个协议,这个协议包含了下面的方法:

- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock;

从名字就可以看出来,这个方法声明的功能就是通过指定的 URL 下载图片并返回一个 UIImage 对象。

下载过 WeexDemo 的人应该都知道里面有一个叫 WXImgLoaderDefaultImpl 的类(PS:别告诉我你对 Weex 感兴趣确连 WeexDemo 里面有啥都不知道)。这个类实现了 WXImgLoaderProtocol 协议,内容如下:

- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock
{
    if ([url hasPrefix:@"//"]) {
        url = [@"http:" stringByAppendingString:url];
    }

    return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {

    } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
        if (completedBlock) {
            completedBlock(image, error, finished);
        }
    }];
}

其实就是利用 SDWebImage 这个库实现图片下载功能。而且我还发现,如果不实现 WXImgLoaderProtocol 协议,就无法在 Weex 的代码中通过 URL 加载网络图片。也就是说 Weex 其实是依赖原生来做网络图片加载,至于为什么这么做,我只能说:我不知道。��

然后 WeexDemo 通过下面的代码把 WXImgLoaderDefaultImpl 注册为 Weex 的一个 iOS 原生 handler


[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)];

这样我们就可以在 Weex 中加载网络图片了,比如:

<image class="img" style="width: 68px; height: 68px;margin-left:20px;" src="https://gw.alicdn.com/tps/TB1El.mKXXXXXXyapXXXXXXXXXX-34-34.gif"></image>

好了,现在就来说说怎么加载 .xcassets 中的图片资源,其实很简单,在 WXImgLoaderDefaultImpl 实现的方法中添加几行代码就可以:

if ([url hasPrefix:@"xcassets:"]) {
    UIImage *image = [UIImage imageNamed:[url substringFromIndex:9]];
    completedBlock(image, nil, YES);

    return [WXXCassetsLoaderOperation new];
}

这里我定义的规则是:xcassets:+[.xcassets 中的图片名]。所以我们判断 url 是不是以 xcassets: 开头,如果是,通过 imageNamed 方法加载图片并返回即可。

因为 downloadImageWithURL 方法要求返回遵循 WXImageOperationProtocol 协议的对象,所以我们新建一个 WXXCassetsLoaderOperation 类,然后实现 WXImageOperationProtocol 协议中的 cancel 方法:

- (void)cancel {
}

然后我们就可以在 Weex 中加载 .xcassets 中的图片了。代码如下:

<image class="img" style="width: 300px; height: 300px;" src="xcassets:reload"></image>
查看评论

Kylix安装手记

Kylix安装手记 Kylix早已经发布了,作为一个Delphi程序开发爱好者,又是一个unix的忠实用户。当我看到有Linux上的Delphi时,忍不住想要试它一试,所以就早早地预定了一套Kylix...
  • yousoft
  • yousoft
  • 2001-08-22 11:55:00
  • 1129

Weex Android加载本地图片及网络图片

Weex Android加载本地图片及网络图片前言本篇本地图片加载目前仅适用于ImageLoader,如若是其他图片框架,则需要自己写适配规则。当然如果要适配Fresco,则需去研究一下WXImage...
  • mengzuixilou
  • mengzuixilou
  • 2016-09-30 16:57:32
  • 6322

weex资源图片

  • renbolaoda
  • renbolaoda
  • 2017-03-23 09:55:54
  • 305

关于Picasso加载本地图片不显示的解决办法

1、一般我们获取到的路径都是不能直接加载的 path=/storage/sdcard0/ProjectName/temp/temp.jpg   2、解决办法 如果是上述的URL,在前面加上"f...
  • prince70
  • prince70
  • 2017-12-02 15:06:41
  • 431

获取网络图片之---三种方式

android中获取网络图片是一件耗时的操作,如果直接获取有可能会出现应用程序无响应(ANR:Application Not Responding)对话框的情况。对于这种情况,一般的方法就是耗时操作用...
  • zhengxiangwen
  • zhengxiangwen
  • 2015-12-10 01:07:32
  • 793

weex传图

http://blog.csdn.net/zhangyulin311/article/details/53134701 // //  WXUploadHeadImageModule.m /...
  • zhuweideng
  • zhuweideng
  • 2016-11-25 16:50:15
  • 1563

weex在iOS环境加载本地图片的方法

从weex的API中,我们知道加载本地图片的方法是: 在 iOS 中,Weex 会在 bundle resources 中查找。例如,image 组件的 src 属性为 local:///ap...
  • CodingFire
  • CodingFire
  • 2018-03-12 16:13:46
  • 204

weex开发实战(8)--在weex页面实现图片上传

不同于移动端原生开发,当开发者使用weex移动开发时,使用第三方SDK比较棘手。因为第三方的JS SDK是无法直接拿来使用的,环境不同。必须使用原生SDK,下面我介绍一下自己是如何在weex开发时(安...
  • qianzu1872
  • qianzu1872
  • 2017-02-07 13:42:34
  • 3119

iOS 真机不能显示图片问题

  • vaercly
  • vaercly
  • 2014-09-04 20:21:31
  • 1094

Weex系列一、构建Weex工程

Weex比React Native更简单,更容易学习,并且做到真正的跨平台,一套代码可以多个平台运行。所以建议大家都用Weex吧。 一、安装Node 已经安装Node的,请忽略过去。 ...
  • tCDPYh6sA3
  • tCDPYh6sA3
  • 2017-03-10 17:17:47
  • 508
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 33万+
    积分: 5005
    排名: 7056
    博客专栏
    最新评论