前几天有分享一篇uniapp+vite4搭建vue3多端项目。
uniapp-vite4-vue3整合创建跨端应用
今天给大家分享uniapp解析渲染markdown语法(支持h5/小程序端/App端)，以及uniapp中软键盘弹起页面顶部导航栏被顶起挤上去问题。
如上图：在h5/小程序/App端支持markdown语法解析，系统软键盘弹起后，内容区会向上收缩，顶部自定义导航栏不会被顶跑。
uniapp vue3渲染markdown/语法高亮
如何在uniapp vue3项目中支持h5/小程序/app端markdown语法渲染解析？
应用市场有一些插件只支持h5或小程序，兼容性不是很好。今天给大家介绍一种解决方案。
// 引入markdown-it highlight插件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'
初始化markdown插件
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><span class="line-num" code-snippet__number">1) + '"></span>' + item +'</li>'}).join('')html = '<ol style="padding: 0px 30px;">' + html + '</ol>'// 代码复制copyCode.push(str)let htmlCode = `<div class="markdown-wrap">`// #ifndef MP-WEIXINhtmlCode += `<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>`// #endifhtmlCode += `<pre class="hljs" style="padding:0 8px;margin-bottom:5px;overflow: auto;display: block;border-radius: 5px;"><code>${html}</code></pre>`;htmlCode += '</div>'return htmlCode}})
解析渲染markdown语法
const parseNodes = (value) => {if(!value) returnlet htmlString = ''if (value.split("```").length % 2) {let msgContent = valueif(msgContent[msgContent.length-1] != 'n'){msgContent += 'n'}htmlString = markdown.render(msgContent)} else {htmlString = markdown.render(msgContent.value)}// #ifndef APP-NVUEreturn htmlString// #endif// nvue模式下将htmlString转成htmlArray，其他情况rich-text内部转// 注：本示例项目还没使用nvue编译// #ifdef APP-NVUEreturn parseHtml(htmlString)// #endif}
使用uniapp内置组件rich-text来显示解析后的markdown内容。
<rich-text space="nbsp" :nodes="parseNodes(item.content)" @itemclick="handleItemClick"></rich-text>
使用rich-text提供的itemclick方法来实现复制markdown中代码块功能。
// 复制代码const handleItemClick = (e) => {console.log(e);let {attrs} = e.detail.nodeconsole.log({attrs});let {"code-data-index": codeDataIndex, "class": className} = attrsif(className == 'copy-btn'){uni.setClipboardData({data:copyCode[codeDataIndex],showToast:false,success() {uni.showToast({title: '复制成功',icon: 'none'});}})}}
这样基本就实现了解析markdown语法了，大家感兴趣可以去试一试。
uniapp vue3键盘弹起挤压问题
点击input输入框后，软键盘弹起的时候把底部自定义tabbar也弹起来了或顶部导航栏顶起。
下面就介绍一种简单的uni-app 解决手机软键盘弹出挤压页面变形问题。
给底部编辑器外层包一层view组件，然后设置padding-bottom值为键盘高度。
const fixPaddingBottom = computed(() => {let keyH = keyboardHeight.value > 70 ? keyboardHeight.value - 70 : keyboardHeight.valuereturn (keyH || 10) + 'px'})
上面的70像素，大家根据实际情况自行调整。
onMounted(() => {nextTick(() => {scrollToLast()})// #ifndef H5uni.onKeyboardHeightChange(e => {keyboardHeight.value = e.height// 在dom渲染完毕 滚动到最后一条消息nextTick(() => {scrollToLast()})})// #endif})
经过调试发现上面的方法可行，软键盘弹起，顶部自定义导航栏不会被顶跑。当然如果大家有其它的解决方案，欢迎一起讨论!
💝分享不易，希望各位小伙伴们点个分享在看，多多支持下哈~~☕️☕️
发表评论