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']
方法不只上面一种 也可以只写图片名称 在图片处理对象中进行区别处理
