uni-app 在view中变量后跟着双引号发布到小程序会有问题
uni-app 在view中变量后跟着双引号发布到小程序会有问题
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Mac | 11.4 (20F71) | HBuilderX |
产品分类：uniapp/小程序/微信
HBuilderX类型：正式
HBuilderX版本号：3.2.2
第三方开发者工具版本号：1.05.2108130
基础库版本号：2.19.2
示例代码：
``` html
<view class="color-white font-24">{{item.info_voice_len}}</view>
操作步骤：
<view class="color-white font-24">{{item.info_voice_len}}</view>
预期结果：
<view class="color-white font-24 data-v-2a4190be">{{item.$orig.info_voice_len}}</view>
实际结果：
<view class="color-white font-24 data-v-2a4190be">{{item.$orig.info_voice_len+"\""}}</view>
bug描述：
变量后直接跟双引号发布会被转义,导致显示错误
在微信小程序中显示的时候变成了\x22
暂时先用<text>标签分开来避免了这个问题
更多关于uni-app 在view中变量后跟着双引号发布到小程序会有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
1 回复
更多关于uni-app 在view中变量后跟着双引号发布到小程序会有问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是一个已知的 uni-app 编译问题，当模板中的变量后面直接跟随双引号时，在小程序端编译会产生转义错误。
问题原因： 在 uni-app 的编译过程中，模板解析器在处理变量和字符串拼接时，对边界情况的处理存在缺陷。当变量后面紧跟着双引号时，编译器错误地将双引号识别为字符串的一部分，导致生成错误的渲染代码。
解决方案：
- 使用空格分隔（推荐）：
<view class="color-white font-24">{{item.info_voice_len}} "</view>
- 使用<text>标签分隔：
<view class="color-white font-24">
{{item.info_voice_len}}<text>"</text>
</view>
- 在数据中处理： 在 JS 中预先处理好需要显示的内容：
// 在数据准备阶段
item.info_voice_len = item.info_voice_len + '"'
然后在模板中直接使用：
<view class="color-white font-24">{{item.info_voice_len}}</view>
- 使用计算属性：
computed: {
formattedVoiceLen() {
return this.item.info_voice_len + '"'
}
}