基于uni-app+vue3渲染markdown格式|uniapp軟鍵盤頂起問題解決方案
前些時候有給大家分享一篇uni-app+vite4+uview-plus搭建跨端項目。今天主要分享下在uniapp中渲染markdown語法及uniapp中軟鍵盤彈起，頁面tabbar或頂部自定義navbar導航欄被撐起擠壓的問題。
如上圖：支持h5+小程序+App端markdown解析渲染。
上面則是演示了在App端+小程序端鍵盤彈起，整體頁面及自定義導航條不會被頂跑的問題。
好了，話不多說，接下來就主要介紹下如何實現的吧。
uniapp+vue3解析markdown語法/高亮
雖說uniapp插件市場也有一些markdown渲染插件，但大多兼容性不好。于是就使用了markdown-it及highlight.js插件進行了簡單的封裝處理。經調試目前可以支持h5/小程序/App端的markdown語法解析。
// 引入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'
highlight.js高亮樣式大家可以根據需要自行下載，這里使用的淺色樣式。
- 初始化markdownIt插件
接下來是初始化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" data-line="' + (index + 1) + '"></span>' + 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 } })
- 渲染markdown結構
const parseNodes = (value) => { if(!value) return let htmlString = '' if (value.split("```").length % 2) { let msgContent = value if(msgContent[msgContent.length-1] != '\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 }
最后使用rich-text組件來渲染處理后的結果。
<rich-text space="nbsp" :nodes="parseNodes(item.content)" @itemclick="handleItemClick"></rich-text>
代碼復制功能則是使用rich-text提供的itemclick方法來實現。
// 復制代碼 const handleItemClick = (e) => { let {attrs} = e.detail.node let {"code-data-index": codeDataIndex, "class": className} = attrs if(className == 'copy-btn'){ uni.setClipboardData({ data:copyCode[codeDataIndex], showToast:false, success() { uni.showToast({ title: '復制成功', icon: 'none' }); } }) } }
通過上面幾步，基本就實現了解析markdown語法了。
uniapp markdown組件已經發布插件市場，歡迎免費下載使用。
如果大家有一些其它不錯的解決方案，歡迎交流討論分享哈~~
uni-app軟鍵盤撐起頂跑問題
在使用uniapp開發的時候，經常會遇到input輸入框鍵盤會頂跑頁面。導致頂部自定義導航欄會不見了。
接下來就介紹一種簡單的方法，經測試是可行的，如果大家有其它方法，也歡迎交流分享。
說白了，就是在input編輯框外層加一個view標簽，然后給設置padding-bottom為鍵盤彈起高度。
uniapp也提供了監聽鍵盤高度變化函數 uni.onKeyboardHeightChange
const fixPaddingBottom = computed(() => { let keyH = keyboardHeight.value > 50 ? keyboardHeight.value - 50 : keyboardHeight.value return (keyH || 10) + 'px' })
這里減去50是底部有自定義tabbar，大家可以根據實際情況調整。
onMounted(() => { nextTick(() => { scrollToLast() }) // #ifndef H5 uni.onKeyboardHeightChange(e => { keyboardHeight.value = e.height // 在dom渲染完畢 滾動到最后一條消息 nextTick(() => { scrollToLast() }) }) // #endif })
目前通過這種方法解決了鍵盤撐起問題。如果大家有其它解決方法，歡迎下方留言討論哈~~??
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
vue3-webseek網頁版AI問答|Vite6+DeepSeek+Arco流式ai聊天打字效果
浙公網安備 33010602011771號
UP主小店