微信小程序文本 text组件

矫情吗；* 2021-09-07 23:24 429阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

文本。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">selectable</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">文本是否可选 (已废弃)</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.1.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">user-select</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">文本是否可选，该属性会使文本节点显示为 inline-block</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.12.1</a></td> 
  </tr> 
  <tr> 
   <td align="left">space</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">显示连续空格</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.4.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">decode</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">是否解码</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.4.0</a></td> 
  </tr> 
 </tbody> 
</table>

**space 的合法值**

<table> 
 <thead> 
  <tr> 
   <th align="left">值</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">ensp</td> 
   <td align="left">中文字符空格一半大小</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">emsp</td> 
   <td align="left">中文字符空格大小</td> 
   <td align="left"></td> 
  </tr> 
  <tr> 
   <td align="left">nbsp</td> 
   <td align="left">根据字体设置的空格大小</td> 
   <td align="left"></td> 
  </tr> 
 </tbody> 
</table>

**Bug & Tip**

1.  `tip`: decode可以解析的有 `` `<` `>` `&` `'` `` ``
2.  `tip`: 各个操作系统的空格标准并不一致。
3.  `tip`:[text][] 组件内只支持 [text][] 嵌套。
4.  `tip`: 除了文本节点以外的其他节点都无法长按选中。
5.  `bug`: 基础库版本低于 `2.1.0` 时， [text][] 组件内嵌的 [text][] style 设置可能不会生效。

**示例代码**

[在开发者工具中预览效果][Link 1]

index.js

var initData = 'this is first line\nthis is second line'
    var extraLine = [];
    Page({ 
      data: { 
        text: initData
      },
      add: function (e) { 
        extraLine.push('other line')
        this.setData({ 
          text: initData + '\n' + extraLine.join('\n')
        })
      },
      remove: function (e) { 
        if (extraLine.length > 0) { 
          extraLine.pop()
          this.setData({ 
            text: initData + '\n' + extraLine.join('\n')
          })
        }
      }
    })

index.wxml

<view class="btn-area">
      <view class="body-view">
        <text>{
       {text}}</text>
        <button bindtap="add">add line</button>
        <button bindtap="remove">remove line</button>
      </view>
    </view>

index.wxss

.intro { 
      margin: 30px;
      text-align: center;
    }

运行效果：

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ui2bnhNz-1621996483422)(image-20210526094137954.png)\]][img-Ui2bnhNz-1621996483422_image-20210526094137954.png]

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[text]: https://developers.weixin.qq.com/miniprogram/dev/component/text.html
[Link 1]: https://developers.weixin.qq.com/s/Egao9cm46gY6
[img-Ui2bnhNz-1621996483422_image-20210526094137954.png]: /images/20210716/43563e14c90449a4aab09f5c35b7f8f3.png