uniapp-vue3-chatgpt 基于uniapp+pinia跨平台仿chatgpt实例

uniapp对vue3语法支持越来越完善了，最近使用uni-app+vite4+pinia搭建了一个跨多端实现chatgpt会话模板项目。

uni-chatgpt 一款基于uni-app+vue3创建的多端智能AI会话项目案例。

使用HbuilderX创建项目，采用vue3 setup语法编码开发页面。

技术栈

• 编辑器：HbuilderX 3.8.4
• 框架技术：Uniapp+Vite4+Vue3+Pinia
• UI组件库：uView-plus^3.1.31
• markdown渲染：markdown-it
• 代码高亮：highlight.js
• 本地缓存：pinia-plugin-unistorage
• 支持编译：小程序+H5+APP端

项目组织目录

main.js入口配置

/**
 * 主入口配置
  */

import App from './App'
import { createSSRApp } from 'vue'

// 引入pinia状态管理
import pinia from '@/store'

// 引入uview-plus组件库
import uviewplus from '@/uview-plus'

export function createApp() {
    const app = createSSRApp(App)
    app.use(pinia)
    app.use(uviewplus)
    return {
        app,
        pinia
    }
}

uniapp渲染markdown模板

uniapp vue3项目支持封装markdown-it和highlight.js插件实现markdown语法解析。

// 引入uniapp markdown插件
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" 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;display: block;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
}

到这里基本就能实现uniapp解析markdown语法了。

OK，以上就是uni-app+vue3搭建小程序/h5/App端对话实例的一些分享。