微信小程序setData()时 字符串中的 \n 会变成 \\n 的问题

微信小程序setData()时 字符串中的 \n 会变成 \\n 的问题

木头人 148 2021-11-22

问题

最近在做微信小程序的时候遇到一个问题,要展示一段字符串,字符串中有换行操作,但又不是富文本,所以加了换行符\n
从服务端获取数据,打印得到的都是正确的,但通过setData()赋值后,小程序AppData数据中的\n却变成了\\n,导致页面显示为n而没有换行,怎么设置都不行。

解决

通过WXS 语法参考在页面上显示前,使用函数将\\n替换为\n,实现如下。

WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。
WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。

Plan A 使用wxs标签

原版渲染

<text>{{content}}</text>

修改后的渲染

<wxs module="util">
var formatText = function (text) {
    if (!text) {
        return '';
    }
    var reg = getRegExp('\\\\n', 'g')
    return text.replace(reg,'\n');
}

module.exports = {
  formatText: formatText
}
</wxs>
<text>{{util.formatText(content)}}</text>

Plan B 使用wxs文件

如果方法内容复杂,或可复用的话则可以使用wxs文件

新建filter.wxs文件,文件内容如下

var formatText = function (text) {
    if (!text) {
        return '';
    }
    var reg = getRegExp('\\\\n', 'g')
    return text.replace(reg,'\n');
}

module.exports = {
  formatText: formatText
}

在需要使用的wxml中导入wxs模块

<!-- 导入wxs模块,只能使用相对路径,并需要定义module -->
<wxs src="filter.wxs" module="util"></wxs>

text标签中使用时,需要使用util.formatText()的方法将服务器返回的数据当做参数传到方法中就可以了

<text>{{util.formatText(content)}}</text>

# 微信小程序 # \n变成\\n # setData # WXS # 换行符