深圳幻海软件技术有限公司 欢迎您!

原生微信小程序/uniapp使用空格占位符无效解决方法

2023-03-01

最近碰到一个需求,在一个<text>文本中的前后添加空格占位符,总所周知,我并不会前端,于是我查看了原生微信小程序以及uniapp官方文档,得到了以下答案:原生微信小程序官方文档uniapp官方文档从文档可以知道我们可以用 , , 等

最近碰到一个需求,在一个<text>文本中的前后添加空格占位符,总所周知,我并不会前端,于是我查看了原生微信小程序以及uniapp官方文档,得到了以下答案:

  • 原生微信小程序官方文档
  • uniapp官方文档

    从文档可以知道我们可以用&nbsp;,&ensp;,&emsp;等等作为占位符实现空格效果,然而我试了很多次都没有达到效果,以下是错误示范:
  • 错误示范一:
    <text>&ensp;爱吃炸排骨</text>
    
    • 1
    错误原因:decode默认是false,也就是说默认是不会解码的,需要手动设置为true
  • 错误示范二:
    <text decode>&ensp;爱吃炸排骨</text>
    
    • 1
    错误原因:&ensp需要用{{}}括起来,于是!!!
  • 正确示范:
    <text decode>{{myText}}</text>
    
    • 1
    .js文件(原生微信小程序)或 <script>(uniapp)中写内容
    myText: '&ensp;爱吃炸排骨&ensp;'
    
    • 1

然后大功告成!!!其实我还试过好多错误的但是这里就不一 一演示了
下面是完整文件(同样也分为了uniapp和原生):
uniapp:(为了演示的明显一点我加了好多个占位符)

<template>
<view>
<text decode>{{myText}}</text>
</view>
</template>

<script>
export default {
data() {
return {
myText: '&ensp;&ensp;&ensp;&ensp;爱吃炸排骨&ensp;'
}
},
methods: {

}
}
</script>

<style>

</style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

原生微信小程序

  • wxml:
<text decode>{{myText}}</text>
  • 1
  • js(为了演示的明显一点我加了好多个占位符)
Page({
  data:{
    myText: '&ensp;&ensp;&ensp;&ensp;爱吃炸排骨&ensp;'
  },

  onLoad: function() {

  }
})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

🆗,完结撒花🌺🌺🌺

文章知识点与官方知识档案匹配,可进一步学习相关知识
小程序技能树首页概览4732 人正在系统学习中