基于uni-app+vue3渲染markdown格式|uniapp软键盘顶起问题解决方案

在花丛中的蝴蝶 發表於 2023-6-25 08:58:00

基于uni-app+vue3渲染markdown格式|uniapp软键盘顶起问题解决方案

前些时候有给大家分享一篇uni-app+vite4+uview-plus搭建跨端项目。今天主要分享下在uniapp中渲染markdown语法及uniapp中软键盘弹起，页面tabbar或顶部自定义navbar导航栏被撑起挤压的问题。
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230625081854178-1749525320.jpg">
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230625081623909-996917660.jpg">
如上图：支持h5+小程序+App端markdown解析渲染。
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230625082127594-1754336575.gif">
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230625082232994-503235810.gif">
上面则是演示了在App端+小程序端键盘弹起，整体页面及自定义导航条不会被顶跑的问题。
好了，话不多说，接下来就主要介绍下如何实现的吧。
<h3>uniapp+vue3解析markdown语法/高亮</h3>
虽说uniapp插件市场也有一些markdown渲染插件，但大多兼容性不好。于是就使用了markdown-it及highlight.js插件进行了简单的封装处理。经调试目前可以支持h5/小程序/App端的markdown语法解析。
<div class="cnblogs_code">
<pre>// 引入markdown-it和highlight.js插件
import MarkdownIt from '@/plugins/markdown-it.min.js'
import hljs from '@/plugins/highlight/highlight.min.js'
// import '@/plugins/highlight/github-dark.min.css'
import '@/plugins/highlight/atom-one-light.css'
import parseHtml from '@/plugins/html-parser.js'</pre>
</div>
highlight.js高亮样式大家可以根据需要自行下载，这里使用的浅色样式。
<ul>
<li>初始化markdownIt插件</li>
</ul>
接下来是初始化markdown及语法高亮、增加代码行号功能。
<div class="cnblogs_code">
<pre>const markdown = MarkdownIt({
html: true,
highlight: function(str, lang) {
let preCode = ""
try {
 preCode = hljs.highlightAuto(str).value
} catch (err) {
 preCode = markdown.utils.escapeHtml(str);
}
// 自定义行号
const lines = preCode.split(/\n/).slice(0, -1)
let html = lines.map((item, index) => {
 // 去掉空行
 if( item == ''){
 return ''
 }
 return '<li>' + item +'</li>'
}).join('')
html = '<ol style="padding: 0px 30px;">' + html + '</ol>'

// 代码复制
 copyCode.push(str)
let htmlCode = `<div class="markdown-wrap">`
 // #ifndef MP-WEIXIN
 htmlCode += `<div style="color: #aaa;text-align: right;font-size: 12px;padding:8px;">`
 htmlCode += `${lang}<a class="copy-btn" code-data-index="${copyCode.length - 1}" style="margin-left: 8px;">复制代码</a>`
 htmlCode += `</div>`
 // #endif
 htmlCode += `<pre class="hljs" style="padding:0 8px;margin-bottom:5px;overflow: auto;border-radius: 5px;"><code>${html}</code></pre>`;
 htmlCode += '</div>'
return htmlCode
}
})</pre>
</div>
<ul>
<li>渲染markdown结构</li>
</ul>
<div class="cnblogs_code">
<pre>const parseNodes = (value) => {
if(!value) return

let htmlString = ''
if (value.split("```").length % 2) {
let msgContent = value
if(msgContent != '\n'){
 msgContent += '\n'
}
htmlString = markdown.render(msgContent)
} else {
htmlString = markdown.render(msgContent.value)
}

// #ifndef APP-NVUE
return htmlString
// #endif

// nvue模式下将htmlString转成htmlArray，其他情况rich-text内部转
// 注：本示例项目还没使用nvue编译
// #ifdef APP-NVUE
return parseHtml(htmlString)
// #endif
}</pre>
</div>
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230625083602081-1912030801.jpg">
最后使用rich-text组件来渲染处理后的结果。
<div class="cnblogs_code">
<pre><rich-text space="nbsp" :nodes="parseNodes(item.content)" @itemclick="handleItemClick"></rich-text></pre>
</div>
代码复制功能则是使用rich-text提供的itemclick方法来实现。
<div class="cnblogs_code">
<pre>// 复制代码
const handleItemClick = (e) => {
let {attrs} = e.detail.node
let {"code-data-index": codeDataIndex, "class": className} = attrs
if(className == 'copy-btn'){
uni.setClipboardData({
 data:copyCode,
 showToast:false,
 success() {
 uni.showToast({
 title: '复制成功',
 icon: 'none'
 });
 }
})
}
}</pre>
</div>
通过上面几步，基本就实现了解析markdown语法了。
<blockquote>
uniapp markdown组件已经发布插件市场，欢迎免费下载使用。
https://ext.dcloud.net.cn/plugin?id=13307
</blockquote>
如果大家有一些其它不错的解决方案，欢迎交流讨论分享哈~~
<img src="https://img2023.cnblogs.com/blog/1289798/202307/1289798-20230702004144717-291673688.png">
 
<h3>uni-app软键盘撑起顶跑问题</h3>
在使用uniapp开发的时候，经常会遇到input输入框键盘会顶跑页面。导致顶部自定义导航栏会不见了。
接下来就介绍一种简单的方法，经测试是可行的，如果大家有其它方法，也欢迎交流分享。
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230625084656847-1517998451.png">
说白了，就是在input编辑框外层加一个view标签，然后给设置padding-bottom为键盘弹起高度。
uniapp也提供了监听键盘高度变化函数 uni.onKeyboardHeightChange 
<div class="cnblogs_code">
<pre>const fixPaddingBottom = computed(() => {
let keyH = keyboardHeight.value > 50 ? keyboardHeight.value - 50 : keyboardHeight.value
return (keyH || 10) + 'px'
})</pre>
</div>
这里减去50是底部有自定义tabbar，大家可以根据实际情况调整。
<div class="cnblogs_code">
<pre>onMounted(() => {
nextTick(() => {
scrollToLast()
})

// #ifndef H5
uni.onKeyboardHeightChange(e => {
keyboardHeight.value = e.height
// 在dom渲染完毕滚动到最后一条消息
nextTick(() => {
 scrollToLast()
})
})
// #endif
})</pre>
</div>
目前通过这种方法解决了键盘撑起问题。如果大家有其它解决方法，欢迎下方留言讨论哈~~💝
<h3>Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板</h3>
<h3>vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果</h3>
<img src="https://img2023.cnblogs.com/blog/1289798/202306/1289798-20230625085415872-266031454.gif">
 

</div>
<div id="MySignature" role="contentinfo">
本文为博主原创文章，未经博主允许不得转载，欢迎大家一起交流 QQ（282310962） wx（xy190310） 
来源：https://www.cnblogs.com/xiaoyan2017/p/17502105.html

頁: [1]

琼殿技术论坛's Archiver

基于uni-app+vue3渲染markdown格式|uniapp软键盘顶起问题解决方案