6
收藏
评论

【小程序学习记录】-text组件

小程序入门教程第三篇--text组件

前言

上一篇文章讲的是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:图片已经改了,但是真机运行图那个没办法了…反正就是可以复制,在模拟器上不好显示,所以。。。

最后一次编辑于  06-03  (未经腾讯允许,不得转载)
复制链接赞 6收藏投诉评论

4 个评论

  • 桑
    03-18

    👍


    03-18
    赞同
    回复 1
    • Killer Irving
      Killer Irving
      03-18

      谢谢

      03-18
      回复
  • villainhr
    villainhr
    03-18

    截图感人,或者直接甩一个代码片段

    03-18
    赞同
    回复 1
    • Killer Irving
      Killer Irving
      03-18

      好的呀!谢谢了

      03-18
      回复