---

2023-11-16更新：重传图片

前言

我的实习进行了三个多月了，公司前端用的是uniapp+nvue+vue2，以及uView库，重构翻新旧app。
uni-app本身有不小坑和痛点，比如文本标签只有一个<text>，而nvue页面有着更苛刻的要求，比如只支持flex布局，有限的css支持…这个过程着实踩了不少坑，遇到很多问题，解决问题途中免不了去查资料，而网上资料有些难找，有些无用😔
所以在这里记录下我遇到过的大坑和解决方案吧，希望seo能帮到有相似需求的人。

---

问题场景和解决方案

提示：以下全是基于nvue页面的解决方案，图片是从我的手机真机调试截的图。

一、App Nvue富文本问题(文字+图片)

uni-app原生文本组件只有一个<text>，图片也是只是<image>。<text>表现为块级元素且不允许嵌套，正常下不能跟图片。而且需要说的是nvue只支持flex布局下，让<text>与<text>做不到第一个元素结束后紧贴第二个元素，可能出现
你今晚吃     我吃猪脚饭     [emoji]
啥，

解决这个痛点，是时候请出<rich-text>富文本组件，或者是用封装一下的uView2 的 Parse 富文本解析器(这个真的好用)。
这个例子我是用的uView2的<u-parse>富文本解析组件，毕竟封装过，App Nvue下可以扔一个大html字符串进去就完事(h5写法)，而uni-app原生因为不支持app-nvue，就得拆成一个个节点放进数组，再交给解析器解析，有点麻烦。
真机调试 本样例原数据是"有用的话[哼]能点个赞不[doge] 把[]变成img标签放入，外层包裹span"

<!-- nvue -->
<u-parse :previewImg="false" :content='
	`
		<span style="font-size: 0">
			<span style="font-size: 26.92rpx;color: #2458a3;">张三</span>
			<span style="font-size:26.92rpx;color: #3e3e3e;">&nbsp;回复&nbsp;</span>
			<span style="font-size: 26.92rpx;color: #2458a3;">李四</span>
			<span style="font-size:26.92rpx;color: #3e3e3e;">：${replyFilter("有用的话[哼]能点个赞不[doge]")}</span>
		</span>
	`
'></u-parse>

function replyFilter(value) {
	// 正则匹配 获取[]中的文字，映射替换为img标签装进去
	const reg0 = /\[(.+?)\]/g;
	const reg = /\[(.+?)\]/;
	const filterArr = [...value.matchAll(reg0)];
	for (let item of filterArr) {
		// 不属于表情文案的不处理
		if (!stringEmojiList.includes(item[1])) {
			continue;
		}
		// 因为是表情包不走网络请求 这里tran我写的是base64码 emojiMapping是一个对象 比如 'doge': '(base64)'
		const tran = emojiMapping[item[1]];
		const text = `<img style='width: 25px;height: 25px;vertical-align: bottom;' src='${tran}' />`;
		value = value.replace(reg, text);
	}
	// 返回替换后的文本
	return value;
}

需要注意的是，这里的<img>图片路径用不了本地相对路径，我的结论是要么是用base64，要么是网络资源带http,https开头的完整路径。

---

二、uni-app 图片转base64问题

长话短说，目前(2022-12-02)在nvue页面获取不到图片的base64码(这个我查了非常非常久才给这个结论，或许以后会更新支持？)，因为真机下的nvue不支持FileReader ，但是vue页面支持！
解决方案：
建立一个vue页面，nvue传过来上传的图片所有数据，在里面推荐image-tools 这个插件提供的pathToBase64方法。
(或者不用插件的话，因为传过来的数据有File对象，vue页面可以用FileReader拿到base64编码)
最后再回传给nvue页面(nvue真是后妈养的…)