更新：如果想實(shí)現(xiàn)，簡(jiǎn)單的行間距的犀斋，可利用
style="line-height:30px"
利用這個(gè)行高屬性贝乎，可以模擬出行間距的效果，不過(guò)得根據(jù)字號(hào)大小來(lái)調(diào)整這個(gè)值叽粹。
更新：自定義太麻煩了览效，直接用weex-ui里的組件吧蒙具。
需求
image.png
帶行間距、電話下劃線朽肥，電話可撥打，電話不顏色
官方資料
http://weex-project.io/cn/references/advanced/extend-to-ios.html
操作流程
#import <WeexSDK/WeexSDK.h>
@interface WXRichText : WXComponent
@end
#import "WXRichText.h"
#import "TTTAttributedLabel+TipsLabel.h"
@interface WXRichText()<TTTAttributedLabelDelegate>
/// 這個(gè)組件我們需要用到TTTAttributedLabel來(lái)實(shí)現(xiàn)
@property (weak, nonatomic) TTTAttributedLabel *label3;
// 以下的屬性用于記錄從weex傳過(guò)來(lái)的屬性
@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傳字符串過(guò)來(lái)會(huì)帶有 ' '持钉，得手動(dòng)去除衡招，請(qǐng)大神給個(gè)優(yōu)化
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 {
// 這里我們給控件一些初始化默認(rèn)的數(shù)據(jù)
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、如有疑問(wèn)每强，請(qǐng)撥打客服電話400-100-8899始腾，我們將竭誠(chéng)為您服務(wù)。";
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]];
/// 這里這個(gè)可做到讓label自適應(yīng)空执，不管weex對(duì)此label設(shè)置了高度沒
[self.label3 sizeToFit];
}
#pragma mark - TTTAttributedLabelDelegate
- (void)attributedLabel:(TTTAttributedLabel *)label didSelectLinkWithTransitInformation:(NSDictionary *)components{
[self callConsumerHotline];
}
@end
weex布局處理
template里加入組件
<richText class = "richText" ></richText>
style里配置參數(shù)
.richText {
font-size: 18;
normalColor: #888888;
text:'2. 如有疑問(wèn)浪箭，請(qǐng)撥打客服電話400-100-8899，我們將竭誠(chéng)為您服務(wù)辨绊。';
specialColor: #F45861;
specialText:'400-100';
lineSpacing: 8;
width: 750;
/// 高度不用限定奶栖，ios 使用sizeToFit可自適應(yīng)，安卓未知门坷。
/*height: 900;*/
}
代碼寫得太匆忙宣鄙，有時(shí)間優(yōu)化。
