欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

IOS中Weex 加载 .xcassets 中的图片资源的实例详解

程序员文章站 2023-12-18 21:16:04
ios中weex 加载 .xcassets 中的图片资源的实例详解 前言: 因为 .xcassets 中的图片资源只能通过 imagenamed: 方法加载,所以需要做...

ios中weex 加载 .xcassets 中的图片资源的实例详解

前言:

因为 .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>

以上就是ios中weex 加载 .xcassets 中的图片资源的实例详解,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

上一篇:

下一篇: