Weex系列二高职、顯示圖片

上次我們創(chuàng)建了一個(gè)簡單的Weex的demo钩乍。

一、常用的類

WXSDKEngine:SDK開放的絕大多數(shù)接口都在此有聲明怔锌。

WXLog: 用來打印日志寥粹。

WXDebugTool: weex提供的對外調(diào)試工具变过。

WXAppConfiguration: 使用weex開發(fā)的業(yè)務(wù)性配置。

二涝涤、添加圖片

1媚狰、瀏覽器查看
建議大家可以看下阿里團(tuán)隊(duì)的weex文章
在上篇的helloweex.we 中的div標(biāo)簽中 加入圖片image標(biāo)簽和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>

運(yùn)行weex helloWeex.we 后崭孤,效果如下:

圖片顯示

2、iOS端顯示圖片
我們執(zhí)行 weex helloWeex.we -o helloWeex.js 糊肠。然后把生成的helloWeex.js 替換到項(xiàng)目中辨宠。
然后在iPhone上運(yùn)行 會發(fā)現(xiàn) 圖片并沒有顯示出來。
首先我們新建一個(gè) WXImageDownloader 類货裹,用來實(shí)現(xiàn)圖片下載協(xié)議WXImgLoaderProtocol嗤形。

代碼如下:

#import <WeexSDK/WeexSDK.h>

@interface WXImageDownloader : NSObject <WXImgLoaderProtocol>

@end

在.m文件中實(shí)現(xiàn)WXImgLoaderProtocol協(xié)議的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)];

運(yùn)行后的效果為:


圖片展示

源代碼的地址還是 上篇文章中的github地址赋兵。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市墓阀,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌拓轻,老刑警劉巖斯撮,帶你破解...
    沈念sama閱讀 211,561評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異扶叉,居然都是意外死亡勿锅,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,218評論 3 385
  • 文/潘曉璐 我一進(jìn)店門枣氧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來溢十,“玉大人,你說我怎么就攤上這事达吞≌懦冢” “怎么了?”我有些...
    開封第一講書人閱讀 157,162評論 0 348
  • 文/不壞的土叔 我叫張陵酪劫,是天一觀的道長吞鸭。 經(jīng)常有香客問我,道長覆糟,這世上最難降的妖魔是什么刻剥? 我笑而不...
    開封第一講書人閱讀 56,470評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮滩字,結(jié)果婚禮上造虏,老公的妹妹穿的比我還像新娘御吞。我一直安慰自己,他們只是感情好漓藕,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,550評論 6 385
  • 文/花漫 我一把揭開白布陶珠。 她就那樣靜靜地躺著,像睡著了一般撵术。 火紅的嫁衣襯著肌膚如雪背率。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,806評論 1 290
  • 那天嫩与,我揣著相機(jī)與錄音寝姿,去河邊找鬼。 笑死划滋,一個(gè)胖子當(dāng)著我的面吹牛饵筑,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播处坪,決...
    沈念sama閱讀 38,951評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼根资,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了同窘?” 一聲冷哼從身側(cè)響起玄帕,我...
    開封第一講書人閱讀 37,712評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎想邦,沒想到半個(gè)月后裤纹,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,166評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,510評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了劫瞳。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,643評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡漆际,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出夺饲,到底是詐尸還是另有隱情奸汇,我是刑警寧澤,帶...
    沈念sama閱讀 34,306評論 4 330
  • 正文 年R本政府宣布往声,位于F島的核電站茫蛹,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏烁挟。R本人自食惡果不足惜婴洼,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,930評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望撼嗓。 院中可真熱鬧柬采,春花似錦欢唾、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,745評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至肩刃,卻和暖如春祟霍,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背盈包。 一陣腳步聲響...
    開封第一講書人閱讀 31,983評論 1 266
  • 我被黑心中介騙來泰國打工沸呐, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人呢燥。 一個(gè)月前我還...
    沈念sama閱讀 46,351評論 2 360
  • 正文 我出身青樓崭添,卻偏偏與公主長得像,于是被迫代替她去往敵國和親叛氨。 傳聞我的和親對象是個(gè)殘疾皇子呼渣,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,509評論 2 348

推薦閱讀更多精彩內(nèi)容