Weex系列二、显示图片
2017-02-17 10:35
113 查看
上次我们创建了一个简单的Weex的demo。
建议大家可以看下阿里团队的weex文章。
在上篇的helloweex.we 中的div标签中 加入图片image标签和thumbnail样式,全部代码:
运行weex helloWeex.we 后,效果如下:
2、iOS端显示图片
我们执行 weex helloWeex.we -o helloWeex.js 。然后把生成的helloWeex.js 替换到项目中。
然后在iPhone上运行 会发现 图片并没有显示出来。
首先我们新建一个 WXImageDownloader 类,用来实现图片下载协议WXImgLoaderProtocol。
代码如下:
在.m文件中实现WXImgLoaderProtocol协议的downloadImageWithURL方法。用SDWebImage下载图片。
然后在AppDelegate中注册Handler:
运行后的效果为:
源代码的地址还是 上篇文章中的github地址。
一、常用的类
WXSDKEngine:SDK开放的绝大多数接口都在此有声明。 WXLog: 用来打印日志。 WXDebugTool: weex提供的对外调试工具。 WXAppConfiguration: 使用weex开发的业务性配置。
二、添加图片
1、浏览器查看建议大家可以看下阿里团队的weex文章。
在上篇的helloweex.we 中的div标签中 加入图片image标签和thumbnail样式,全部代码:
<template> <div> <image class="thumbnail" src="https://img.alicdn.com/tps/TB15vyaLpXXXXXXXFXXXXXXXXXX-198-46.png"></image> <text class="title" onclick="onClickTitle">Hello Weex</text> </div> </template> <style> .title { color: red; } .thumbnail { width: 100; height: 30; } </style> <script> module.exports = { methods: { onClickTitle: function (e) { console.log(e); alert('title clicked.'); } } } </script>
运行weex helloWeex.we 后,效果如下:
2、iOS端显示图片
我们执行 weex helloWeex.we -o helloWeex.js 。然后把生成的helloWeex.js 替换到项目中。
然后在iPhone上运行 会发现 图片并没有显示出来。
首先我们新建一个 WXImageDownloader 类,用来实现图片下载协议WXImgLoaderProtocol。
代码如下:
#import <WeexSDK/WeexSDK.h> @interface WXImageDownloader : NSObject <WXImgLoaderProtocol> @end
在.m文件中实现WXImgLoaderProtocol协议的downloadImageWithURL方法。用SDWebImage下载图片。
#import "WXImageDownloader.h" #import <SDWebImage/SDWebImageManager.h> @implementation WXImageDownloader - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image, NSError *error, BOOL finished))completedBlock { 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); } }]; } @end
然后在AppDelegate中注册Handler:
[WXSDKEngine registerHandler:[WXImageDownloader new] withProtocol:@protocol(WXImgLoaderProtocol)];
运行后的效果为:
源代码的地址还是 上篇文章中的github地址。
相关文章推荐
- Android开发系列:怎么混合显示图片和文本
- Android深入浅出系列之实例应用—简单的手指拖动图片,图片滑来滑去显示应用Gallery和BaseAdapter以及ImageView的使用
- Android图片系列(2)-------关于图片的显示的属性scaleType
- python 学习系列(3) 读取并显示图片的两种方法
- 01.LoT.UI 前后台通用框架分解系列之——小图片背景全屏显示(可自动切换背景)
- 鉴于《一步一步SharePoint 2007》系列文章中,很多文章中的图片无法显示,现紧急开通笔者自己的博客网站——www.eallies.com网站
- cocos2dx opengl入门系列四-显示图片
- 学习OpenCV的学习笔记系列(三)显示图片及视频
- WEBGL 2D游戏引擎研发系列 第二章 <显示图片>
- 从零开始学习Node.js系列教程三:图片上传和显示方法示例
- OpenCV入门系列(4):显示一张图片和一个视频
- (转载) UITableView 系列一 :基本使用方法 (显示,删除,添加图片,添加样式等
- UITableView 系列一 :基本使用方法 (显示,删除,添加图片,添加样式等) (实例)
- Android深入浅出系列之实例应用—简单的手指拖动图片,图片滑来滑去显示应用Gallery和BaseAdapter以及ImageView的使用
- 使用Qt将一系列图片通过网络发送到客户端动态显示的参考代码(修改一下可以用作远程网络监控)。
- Android深入浅出系列之实例应用—简单的手指拖动图片,图片滑来滑去显示应用Gallery和BaseAdapter以及ImageView的使用
- 2D游戏引擎Allegro 系列教程(三) 加载并显示图片!
- stm32f051系列教程 TFT LCD显示图片
- OpenCV系列1-简单高效:MFC显示图片、播放视频
- VGA系列之一:VGA显示网络图片