text组件

小程序里的这个组件也是我们的老朋友了，他主要是类似于行标签的用法，类似于html里面的<span>标签，同样的，他和html里面的<span>标签也不一样，更高级，也有更多的用法。

打开微信开发者文档，我们可以看到以下的内容：

小程序学习日志4：小程序常用组件之文本组件

text组件属性1：文本可被选

这个属性加进<text>组件之后，这个<text>里面的内容就可以被选中了。

参考代码：
  <view>
  <text selectable>小程序开发</text>
</view>

小程序学习日志4：小程序常用组件之文本组件

这个属性是用来加空格的

大家来看这行代码，<view><text>马    蹄       谷</text></view>

我这里面马蹄谷三个字空了很大的空间，但是呢，没什么用，看下图：

小程序学习日志4：小程序常用组件之文本组件

可以看到上图，只实现出了一个空格的效果，那么，我们就需要用到这个space的功能。打开微信开发文档，这里面的space用三个属性值，我们可以根据实际情况选用合适的值。

小程序学习日志4：小程序常用组件之文本组件

你看，我们放进去ensp这个属性之后，我在代码里空多少格，显示也是多少格。这里显示的空格是英文的空格。

小程序学习日志4：小程序常用组件之文本组件

emsp则是中文的空格，我们使用这个参数以后可以看到页面上显示出来的空格更大了，这是因为一个中文的空格符等于两个英文的空格符。

可以看到，这里小编的文字都空到第二行来了。

小程序学习日志4：小程序常用组件之文本组件

nbsp则是根据字体设置空格大小，看起来跟英文的差不多。他是比较活泼的属性了。可以根据用户手机上的字体大小调整合适的空格间距。

小程序学习日志4：小程序常用组件之文本组件

这个属性用于<text>框里的解码，我们平常如果需要的话需要在里面插入一些代码空格，就需要用到这个。

比方说我在这个里面输入<text>马 蹄谷</text>
此时可以看到，显示是不会讲这个代码解析的，因为我们还没有把这个decode放进去。

小程序学习日志4：小程序常用组件之文本组件

这样，我们就可以清楚的看到，现在这里面的代码已经被我们解析出来了，怎么样，是不是很简单呢。

小程序学习日志4：小程序常用组件之文本组件

小程序的我们生活中很多时候都会遇到的应用，头条的程序，微信的程序，等等。学好程序，可以帮助我们更好的发现生活的乐趣，可以更好的学习和生活。

文章评论

查看所有0条评论>>

分类索引