IOS中如何使用Weex加載.xcassets中的圖片資源

這篇文章主要介紹IOS中如何使用Weex加載.xcassets中的圖片資源，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

IOS中Weex 加載 .xcassets 中的圖片資源的實(shí)例詳解

前言：

因?yàn)?.xcassets 中的圖片資源只能通過 imageNamed: 方法加載，所以需要做一些特殊處理，才能提供給 Weex 使用（PS：純屬娛樂，因?yàn)?Weex 跨平臺的特性，這種針對某一端做實(shí)現(xiàn)的方案實(shí)用價(jià)值并不大）。

方案

觀察 WeexSDK 發(fā)現(xiàn)有 WXImgLoaderProtocol 這個(gè)協(xié)議，這個(gè)協(xié)議包含了下面的方法：

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

從名字就可以看出來，這個(gè)方法聲明的功能就是通過指定的 URL 下載圖片并返回一個(gè) UIImage 對象。

下載過 WeexDemo 的人應(yīng)該都知道里面有一個(gè)叫 WXImgLoaderDefaultImpl 的類（PS：別告訴我你對 Weex 感興趣確連 WeexDemo 里面有啥都不知道）。這個(gè)類實(shí)現(xiàn)了 WXImgLoaderProtocol 協(xié)議，內(nèi)容如下：

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

其實(shí)就是利用 SDWebImage 這個(gè)庫實(shí)現(xiàn)圖片下載功能。而且我還發(fā)現(xiàn)，如果不實(shí)現(xiàn) WXImgLoaderProtocol 協(xié)議，就無法在 Weex 的代碼中通過 URL 加載網(wǎng)絡(luò)圖片。也就是說 Weex 其實(shí)是依賴原生來做網(wǎng)絡(luò)圖片加載，至于為什么這么做，我只能說：我不知道。

然后 WeexDemo 通過下面的代碼把 WXImgLoaderDefaultImpl 注冊為 Weex 的一個(gè) iOS 原生 handler

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

這樣我們就可以在 Weex 中加載網(wǎng)絡(luò)圖片了，比如：

<image class="img"  src="https://cache.yisu.com/upload/information/20200623/126/121249.gif"></image>

好了，現(xiàn)在就來說說怎么加載 .xcassets 中的圖片資源，其實(shí)很簡單，在 WXImgLoaderDefaultImpl 實(shí)現(xiàn)的方法中添加幾行代碼就可以：

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

 return [WXXCassetsLoaderOperation new];
}

這里我定義的規(guī)則是：xcassets:+[.xcassets 中的圖片名]。所以我們判斷 url 是不是以 xcassets: 開頭，如果是，通過 imageNamed 方法加載圖片并返回即可。

因?yàn)?downloadImageWithURL 方法要求返回遵循 WXImageOperationProtocol 協(xié)議的對象，所以我們新建一個(gè) WXXCassetsLoaderOperation 類，然后實(shí)現(xiàn) WXImageOperationProtocol 協(xié)議中的 cancel 方法：

- (void)cancel {
}

然后我們就可以在 Weex 中加載 .xcassets 中的圖片了。代碼如下：

<image class="img"  src="xcassets:reload"></image>

以上是“IOS中如何使用Weex加載.xcassets中的圖片資源”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！