问题

最近在做微信小程序的时候遇到一个问题，要展示一段字符串，字符串中有换行操作，但又不是富文本，所以加了换行符\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 # 换行符