Weex自定义WXRichText组件实践

更新：如果想实现，简单的行间距的，可利用

style="line-height:30px"

利用这个行高属性，可以模拟出行间距的效果，不过得根据字号大小来调整这个值。

更新：自定义太麻烦了，直接用weex-ui里的组件吧。

需求

image.png

带行间距、电话下划线，电话可拨打，电话不颜色

官方资料
http://weex-project.io/cn/references/advanced/extend-to-ios.html

操作流程

#import 

@interface WXRichText : WXComponent

@end

#import "WXRichText.h"
#import "TTTAttributedLabel+TipsLabel.h"
@interface WXRichText()
/// 这个组件我们需要用到TTTAttributedLabel来实现
@property (weak, nonatomic)  TTTAttributedLabel *label3;
// 以下的属性用于记录从weex传过来的属性
@property(nonatomic, strong) UIColor *normalColor;
@property(nonatomic, strong) UIColor *specialColor;
@property(nonatomic, strong) UIFont *font;
@property(nonatomic, copy) NSString *text;
@property(nonatomic, copy) NSString *specialText;
@property(nonatomic, assign) CGFloat maxWidth;
@property(nonatomic, assign) CGFloat lineSpacing;


@end
@implementation WXRichText

-(instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
{
    if(self= [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance]){
        _normalColor = [UIColor colorWithHexString:styles[@"normalColor"]];
        _specialColor = [UIColor colorWithHexString:styles[@"specialColor"]];
        _font = [UIFont systemFontOfSize:[styles[@"fontSize"] floatValue]];
        
//        从weex传字符串过来会带有 '  '，得手动去除，请大神给个优化
        NSMutableString *muText =  [NSString stringWithFormat:@"%@" ,styles[@"text"]].mutableCopy;
        if ([muText hasPrefix:@"'"]) {
            _text = [muText stringByReplacingOccurrencesOfString:@"'" withString:@""];
        }
        if ([muText hasPrefix:@"'"]) {
            _text = [muText stringByReplacingOccurrencesOfString:@"'" withString:@""];
        }
        _specialText = [styles[@"specialText"] stringByReplacingOccurrencesOfString:@"'" withString:@""];

        _maxWidth = [styles[@"width"] floatValue];
        _lineSpacing = [styles[@"lineSpacing"] floatValue];

    }
    return self;
}

- (UIView *)loadView {
// 这里我们给控件一些初始化默认的数据
    TTTAttributedLabel *label = [[TTTAttributedLabel alloc] initWithFrame:CGRectZero];
    label.textColor = [UIColor colorWithHexString:@"0x888888"];
    label.numberOfLines   = 0;
    label.font            = [UIFont systemFontOfSize:14];
    label.lineSpacing = 8;
    label.lineBreakMode   = NSLineBreakByWordWrapping;
    NSString *text = @"3、如有疑问，请拨打客服电话400-100-8899，我们将竭诚为您服务。";
    label.text            = text;
    self.label3 = label;

    [label sizeToFit];
    return label;
}
-(void)viewDidLoad {
    
    self.label3.delegate = self;
    NSDictionary *dict = @{(__bridge NSString *)kCTUnderlineStyleAttributeName : [NSNumber numberWithInteger:NSUnderlineStyleSingle],(NSString *)kCTForegroundColorAttributeName : (__bridge id)[_specialColor CGColor]};
    self.label3.linkAttributes = dict;
    self.label3.activeLinkAttributes = dict;
    TTTAttributedLabel *label = self.label3;
    label.textColor = _normalColor;
    label.numberOfLines   = 0;
    label.font            = _font;
    label.lineSpacing = _lineSpacing;
    label.lineBreakMode   = NSLineBreakByWordWrapping;
    NSString *text = _text;
    label.text = text;
    [self.label3 addLinkToTransitInformation:@{@"actionStr" : @"callServePhone"} withRange:[text rangeOfString:_specialText]];

    /// 这里这个可做到让label自适应，不管weex对此label设置了高度没
    [self.label3 sizeToFit];
    
}
#pragma mark - TTTAttributedLabelDelegate
- (void)attributedLabel:(TTTAttributedLabel *)label didSelectLinkWithTransitInformation:(NSDictionary *)components{
    
    [self callConsumerHotline];
}

@end

weex布局处理

template里加入组件

style里配置参数

.richText {
        font-size: 18;
        normalColor: #888888;
        text:'2. 如有疑问，请拨打客服电话400-100-8899，我们将竭诚为您服务。';
        specialColor: #F45861;
        specialText:'400-100';
        lineSpacing: 8;
        width: 750;
/// 高度不用限定，ios 使用sizeToFit可自适应，安卓未知。
        /*height: 900;*/
    }

代码写得太匆忙，有时间优化。