美文网首页微信小程序
7.【已解决】小程序text组件获取接口返回数据含\n但不能换行

7.【已解决】小程序text组件获取接口返回数据含\n但不能换行

作者: TensorFlow开发者 | 来源:发表于2019-06-05 20:42 被阅读46次

    场景

    在使用小程序text组件,获取接口返回数据含\n,但实际展示时却不能换行,而是原样展示。

    如果给text组件硬编码字符串中有\n,则可以正常换行。

    含有\n示意图

    原因分析

    原因分析:
    数据库中 \n,转json后会变成\\n,所以不会换行。但是你看不到,因为前端拿到的时候这个都是\n

    解决方案

    分析出原因后,解决方案就出来了。

    这里使用正则替换,借用小程序wxs文件。


    注意:
    1.要想匹配到\\n,正则表达式要用\\\\n,这是因为这里涉及到\的转义。
    2.借用小程序wxs文件,本例子中filter.wxs
    对外暴露的方法名,可以随意起。但对内,要与定义的实现函数名对应起来。本例中代码如下是:

    var myFilter = function(text){
      if(text){
        console.log(text);
        var pattern = "\\\\n";
        var target = "\n";
        var reg = getRegExp(pattern, "g");
        return text.replace(reg, target);
    
      }
    }
    
    module.exports = {
      filter_N:myFilter,
    }
    

    3.导入wxs,并给该模块自定义个名字;本例子中命名模块名tools

    在需要使用的地方,就可以用了:tools.filter_N(item.adShortDesc)

     <text class='ad-item-box-top-right-desc' decode='true'>{{tools.filter_N(item.adShortDesc)}}</text>
    

    效果如下:


    \n实现了换行

    相关文章

      网友评论

        本文标题:7.【已解决】小程序text组件获取接口返回数据含\n但不能换行

        本文链接:https://www.haomeiwen.com/subject/dkqtxctx.html