uni-app基础知识【icon、text】

一.icon图标

备注：由于icon组件各端表现存在差异，可以通过使用字体图标的方式来弥补各端差异。

二.icon图标案例

<view class="lab">图标</view>
<view>
	<icon class="icon" type="success"></icon>
	<icon class="icon" type="warn"></icon>
	<icon class="icon" type="download"></icon>
</view>

css样式：

.lab{
	background-color: #567;
	color: #fff;
	text-align: center;
	size: a3;
	align-items: center;
}

效果：

三.text文本

备注：

• text组件内只支持嵌套text，不支持其它组件或自定义组件，否则会引发在不同平台的渲染差异。

• decode 可以解析的有 ：

    < > & '    
  

• 各个操作系统的空格标准并不一致。

• 除了文本节点以外的其他节点都无法长按选中。

• 支持 \n 方式换行。

• 如果使用 span 组件编译时会被转换为 text。

四.text文本案例

<view class="lab">文本</view>
<view class="text">
	<text>{{text}}</text>
</view>

css样式：

.text{
	width: 750rpx; 
	background-color: #789;
	text-align: center;
	align-items: center;
}

数据：

text: 'HBuilder，200万开发者选择的IDE \n uni-app，终极跨平台方案'

效果：