uniapp开发的微信小程序,其中用到了:
<text class="menu-arrow">></text>
但是编译成小程序后变成了:
>
这是一个非常经典且常见于 uni-app (尤其是编译到小程序端时) 的问题,原因在于 uni-app 的编译过程和微信小程序的渲染机制。
简单来说,这段代码经历了两个主要步骤:
- uni-app 编译:
uni-app的编译器为了安全和跨端兼容性,会将写在模板中的特殊HTML字符(如<、>、&等)自动转义成HTML实体(HTML Entities)。所以,>被转换成了>。 - 小程序渲染: 微信小程序的渲染引擎在解析WXML时,默认情况下,并 不会 把
<text>标签里的>实体解码回>字符。它会把>当作一个普通的、由4个字符组成的字符串直接显示出来。
这就是为什么明明写的是 >,最终却在屏幕上看到了 > 的原因。
解决方案
为了解决这个问题,微信小程序为 <text> 组件提供了一个专门的属性:decode。
只需要在你的 <text> 标签上添加 decode 属性,就能告诉小程序渲染引擎:“请解码我内部的文本内容中的HTML实体”。
修改代码
将代码:
<text class="menu-arrow">></text>
修改为:
<text class="menu-arrow" decode>{{ '>' }}</text>
或者直接使用HTML实体(这样更语义化,推荐):
<text class="menu-arrow" decode>></text>



