共计 1193 个字符,预计需要花费 3 分钟才能阅读完成。
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"
}
!
正文完