微信小程序文本換行

Git項目地址
掃碼體驗Demo小程序

1、描述

小程序常常須要將服務器傳回的數據進行換行，傳回的數據常常用 \n 或 <br /> 分隔數據，小程序.wxml文件會將返回數據中的 \n 處理成字符串n, 不能獲得咱們想要的換行結果。因此咱們須要將數據進行特殊處理。

2、解決辦法

• 將<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>

3、結果

{
    "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"
}

!