前言

上一篇文章讲的是view组件，写的很简单我感觉应该还有一些东西没有说到，但是还是得到了一些小伙伴的支持（大神勿喷😝），我觉得很有动力，今天继续更新，聊聊 <text> 和 <image>组件。

<text>组件作用

<text>是一个文本组件，也就是说，我们在小程序里面要展示的一些文字可以用<text>包起来，然后小程序框架就可以渲染出来了，（ps:其实不包也可以渲染出来）包起来之后就可以通过wxss来改变文本的样式，搭配出漂亮的UI啦

使用

<text>组件默认是在一行显示的，如果按照HTML的意思来说的话：<text>其实是一个行内元素，而且<text>的宽高都是由里面的内容来决定的，也就是说里面没有文字的话，你的界面就不会显示<text>，下面代码大家可以更清晰的看到

wxml代码

<text class='temp'></text>

<text class='textOne'>你好哇！</text>

<text class='textTwo'>我还可以！</text>

<text class='textThree'>
开发者可以使用云开发开发微信小程序、小游戏，无需搭建服务器，即可使用云端能力云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭互兼容，并不互斥。
</text>

wxss代码

.temp{
  background-color: orange; 
}
.textOne{
  background-color: red; 
}
.textTwo{ 
  width: 400rpx;     /* 设置宽高进行对比 */
  height: 400rpx;
  background-color: blue;
}
.textThree{
  background-color: orange;
}

运行效果图

通过上面可以看到<text>普通情况下指定宽高是没有用的，那要怎么办呢？在这里就需要wxss的display属性来控制它是行内还是块级元素了，在对应的wxss样式里面加上 display: block ; 就可以使<text>变身，现在它既可以设置宽高，也可以加外边距等等，还是通过代码看看

wxml代码

<text class='textOne'>你好哇！</text>
<text class='textTwo'>我还可以！</text>

wxss代码

.textOne{
  background-color: red; 
}
.textTwo{ 
  display: block;  /*注意这里 */
  width: 400rpx;
  height: 400rpx;
  background-color: blue;
}

运行效果图

text属性

微信小程序的官方文档提供了三个属性selectable、space、decode。我个人觉得用的最多的应该就是selectable了，它的值是布尔类型，默认为false,它的作用就是设置这段文字是不是可以长按复制

wxml代码

<text class='textOne' selectable='true'>你好哇！</text>
<text class='textTwo'>我还可以！</text>

真机运行图

结语

🆗！这一篇<text>也就差不多了，小插曲：不知道为什么编辑的时候图片总是显示不出来，然后就截图保存到本地在插入了，但是图片的清晰度很感人，大家将就的看一下吧。。呜呜呜，后期我看能不能改一改。最后还是谢谢大家的支持，希望可以帮到你。期待下一篇<image>组件😍
ps:图片已经改了，但是真机运行图那个没办法了…反正就是可以复制，在模拟器上不好显示，所以。。。