微信小程序文本换行

Git项目地址
扫码体验Demo小程序

一、描述

小程序经常需要将服务器传回的数据进行换行，传回的数据经常用 \n 或 <br /> 分隔数据，小程序.wxml文件会将返回数据中的 \n 处理成字符串n, 不能得到我们想要的换行结果。所以我们需要将数据进行特殊处理。

二、解决办法

• 将<view>标签换成<text>标签

<view class="page">
    <view class="page__hd">
        <text class="page__desc">{{tools.replaceLine(question.question)}}</text>
    </view>
</view>

• 添加wxs模块(/miniprogram/tools/tools.wxs)使用replace替换n和<br/>, 匹配\n需要使用\\\\4个斜杠，因为\\匹配一个\；传入的参数需要判空，若传入的参数为空replace会报错

var replaceBr = function (val) {
    return val ? val.replace(getRegExp("<br />", "g"), "\n") : val
}

var replaceLine = function (val) {
    return val ? val.replace(getRegExp("\\\\n", "g"), "\n") : val
}

module.exports.replaceBr = replaceBr
module.exports.replaceLine = replaceLine

• 在.wxml文件引入创建的wxs模块，并调用指定的函数

<wxs src="../../tools/tools.wxs" module="tools" />
<view class="page">
    <view class="page__hd">
        <text class="page__desc">{{tools.replaceLine(question.question)}}</text>
    </view>
</view>

三、结果

{
    "question":"(1)小张迟到两小时 \n (2)一女同志骑车摔倒被人送往医院 \n (3)小张的奖金未被扣除还得到奖励 \n (4)办公室规定迟到扣半月奖金 \n (5)小张上班后说自己去修了一下车 \n 请按逻辑排序",
    "option":[{"key":"A","value":"1-5-4-2-3"},{"key":"B","value":"4-2-1-5-3"},{"key":"C","value":"2-1-4-5-3"},{"key":"D","value":"4-1-2-3-5"}],
    "answer":"D","analysis":"无",
    "status":"1",
    "position":106,
    "create_at":"2020-06-05 16:46:36",
    "update_at":"2020-06-05 16:46:36"
}

!