weex-32-如何加载本地图片

A3D5CC6C-7F27-48F0-B7C4-C8084B4DED4D.png

截止我写这篇文章时(2017-5-21),组件<image> 的src 属性不支持本地图片

本节任务

加载本地图片

加载本地图片相当重要,比如我们的引导页,第一次打开应用时,展现给用户,如果是要先进行网络请求,然后呈现给用户会出现白屏,用户体验很差,所以第一次的启动应用的引导页图片肯定是要加载本地图片的,类似这个的需求,都可以使用本节的知识来做。

以iOS 为例

先安装第三方图片加载框架,如果你的框架比它高效,可以使用其它的

pod 'SDWebImage’,'~>3.8'

第一步 先把图片放在iOS项目里

501E3ED5-1808-4FF4-BA02-2447083C0F2F.png

第二步 获取资源的根路径

let path = Bundle.main.bundlePath

如下

/var/containers/Bundle/Application/ED4E283A-12FF-4E6A-B50F-12A1FDBDCBEA/SceneKit.app

第三步 渲染js 文件时,将跟路径当做参数传递给sdkInstance对象

 sdkInstance.render(with: self.url, options: ["bundleUrl":Bundle.main.bundlePath], data: nil)

第四步 实现图片下载(这个不是本节的重点)

自定义图片下载类WXImgLoaderDefaultImpl,实现两个协议

@interface WXImgLoaderDefaultImpl : NSObject<WXImgLoaderProtocol, WXModuleProtocol>

实现部分

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

在WXSDKEngine注册一下

WXSDKEngine.registerHandler(WXImgLoaderDefaultImpl(), with: WXImgLoaderProtocol.self)

以上是iOS 项目的基本配置步骤,接下来vue部分的调用

第五步 获取图片的根路径,拼接图片名称

let src =   this.$getConfig().bundleUrl + '/a1.jpg'

拼接后的路径类似下面

/var/containers/Bundle/Application/ED4E283A-12FF-4E6A-B50F-12A1FDBDCBEA/SceneKit.app

注意 sdk在渲染图片的时候,自定义类的方法

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

当以上面的src当做路径 创建NSURL 对象的时候,会是一个空对象,所以要拼接一个完整的url路径,正确的拼接如下

 let src =  'file://' +  this.$getConfig().bundleUrl + '/a1.jpg'

第六步 设置图片组件的属性

<image  :src="src" resize="cover"  class="image"></image>

这样本地图片就能被渲染出来了

我在app中内置了如下图片,您可以使用上面的方式创建一个demo 试试看

 ['/a1.jpg','/a2.jpeg','/a3.jpg','/a4.jpg','/a5.jpeg','/a6.png','/a7.png','/a8.jpg']

方法不只上面一种 也可以只写图片名称 在图片处理对象中进行区别处理