Weex实现富⽂本展⽰
Weex默认不⽀持富⽂本展⽰，需要我们⼿动实现。已知的⽅式有两种：
第⼀种⽅式
使⽤中的wxc-rich-text组件。它提供了丰富的功能样式，但是其局限性也是显⽽易见的，不能直接识别h5样式。
第⼆种⽅式
第⼀步⾃定义组件（）
1、新建⼀个基类为 WXComponent 的 class
如果此时我们什么都不做，将该组件注册进 WeexSDK engine，它的功能就跟内置的 div 组件功能是⼀致的。
2、覆盖 WXComponent 中的⽣命周期⽅法
loadView
⼀个 component 默认对应于⼀个 view，如果未覆盖 loadView 提供⾃定义 view, 会使⽤ WXComponent 基类中的 WXView, WXView 是继承⾃ UIView 的⼀个派⽣ view。
要实现地图功能，我们需要对应的地图 view, ⽐如系统的 MKMapView
- (UIView *)loadView {
return [MKMapView new];
}
viewDidLoad
对组件 view 需要做⼀些配置，⽐如设置 delegate, 可以在 viewDidLoad ⽣命周期做，如果当前 view 没有添加 subview 的话，不要设置view 的 frame，WeexSDK 会根据 style 设置。
- (void)viewDidLoad {
((MKMapView*)self.view).delegate = self;
}
3、注册 component
[WXSDKEngine registerComponent:@"map" withClass:[WXMapComponent class]];
后续步骤
第⼆步在paintRichText⽅法中使⽤UILabel来展⽰h5样式。
-(void)paintRichText{
_label = [[UILabel alloc] initWithFrame:self.view.bounds];
_label.numberOfLines = 0;
[self.view addSubview:_label];
NSData *data = [_text dataUsingEncoding:NSUnicodeStringEncoding];
NSDictionary *options = @{NSDocumentTypeDocumentAttribute: NSHTMLTextDocumentType};
NSAttributedString *html = [[NSAttributedString alloc]initWithData:data
options:options
documentAttributes:nil
error:nil];
_label.attributedText = html;
[_label sizeToFit];
if (_mapLoaded) {
[self fireEvent:@"mapLoaded" params:@{@"height":[NSString stringWithFormat:@"%f",_label.frame.size.height]} domChanges:nil];
}
html document是什么
}
第三步在Weex中使⽤该标签
<richText class="richTextStyle" : :text='contentDetail' @mapLoaded="onMapLoaded"></richText>
richText是⾃定义的组件标签名，contentDetail是Weex传递给Native的h5样式数据，mapLoaded是与Native绑定的事件。richText内容渲染完成后Native调⽤fireEvent并且在onMapLoaded⽅法中修改richText组件⾼度richTextHeight，实现⾃适应页⾯。
[self fireEvent:@"mapLoaded" params:@{@"height":[NSString stringWithFormat:@"%f",_label.frame.size.height]} domChanges:nil];
onMapLoaded:function(e) {
var me = this;
var height = e.height * 2;
me.richTextHeight = {'height':height + 'px'};
},
⽤Weex实现⼀个富⽂本显⽰就完成了，可以展⽰任何h5样式，包含图⽚，但是需要指定image的height 和 width，否则页⾯布局会有错乱。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。