Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 3ce40c6b 作者: 方治民
操作

feat: 新增 AI 聊天助手 WebView 嵌入示例，集成最新版 SDK，更多可控制参数

上级 aefd478f
正在显示 包含 132 行增加 和 1 行删除
src/hybrid/html/chat.html 0 → 100644
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover"
name="viewport" />
<title>AI Chat</title>
<style>
body {
margin: 0;
padding: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #fff;
}
#chat-bot {
position: fixed;
inset: 0;
z-index: 9999;
box-sizing: border-box;
/* 兼容 iOS < 11.2 */
padding-bottom: constant(safe-area-inset-bottom);
/* 兼容 iOS >= 11.2 */
padding-bottom: env(safe-area-inset-bottom);
/* 兼容 iOS < 11.2 */
padding-top: constant(safe-area-inset-top);
/* 兼容 iOS >= 11.2 */
padding-top: env(safe-area-inset-top);
}
.close-btn {
z-index: 99999;
position: absolute;
right: 12px;
top: calc(18px + constant(safe-area-inset-top));
top: calc(18px + env(safe-area-inset-top));
padding: 8px;
}
</style>
</head>
<body>
<div id="chat-bot"></div>
<script type="text/javascript" src="https://hntq-res.oss-cn-shenzhen.aliyuncs.com/uni.webview.1.5.6.js"></script>
<script src="https://lf-cdn.coze.cn/obj/unpkg/flow-platform/chat-app-sdk/1.1.0-beta.0/libs/cn/index.js"></script>
<script>
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function () {
// 添加关闭按钮
var div = document.createElement('div')
div.className = 'close-btn'
div.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24"><path fill="#666" d="m12 13.4l-4.9 4.9q-.275.275-.7.275t-.7-.275t-.275-.7t.275-.7l4.9-4.9l-4.9-4.9q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l4.9 4.9l4.9-4.9q.275-.275.7-.275t.7.275t.275.7t-.275.7L13.4 12l4.9 4.9q.275.275.275.7t-.275.7t-.7.275t-.7-.275z"/></svg>'
div.onclick = function () {
uni.navigateBack()
}
document.body.appendChild(div)
})
const cozeWebSDK = new CozeWebSDK.WebChatClient({
config: {
bot_id: "7431695792534077478",
},
userInfo: {
id: "12345",
url: "https://hntq.yiring.com/minio/public/system/ai/hntq-ai-user-2.png",
// nickname: "壹润科技",
},
ui: {
base: {
layout: "mobile",
lang: "zh-CN",
icon: "https://hntq.yiring.com/minio/public/system/ai/hntq-ai-logo.png",
},
header: {
isNeedClose: false,
},
footer: {
isShow: false,
},
chatBot: {
title: "湖南天气 AI 小助手",
uploadable: false,
el: document.getElementById('chat-bot')
},
asstBtn: {
isNeed: false,
},
},
});
cozeWebSDK.showChatBot();
</script>
</body>
</html>
src/pages.json
...@@ -48,6 +48,21 @@ ...@@ -48,6 +48,21 @@
} }
} }
}, },
{
"path": "pages/example/chat/webview",
"style": {
"navigationStyle": "custom",
"backgroundColor": "#ffffff",
// #ifdef H5
"titleNView": false,
// #endif
"disableScroll": true,
"app-plus": {
"titleNView": false,
"bounce": "none"
}
}
},
// ================================ 通用页面分割线 ==================================== // ================================ 通用页面分割线 ====================================
// === 关于我们 === // === 关于我们 ===
......
src/pages/example/chat/webview.vue 0 → 100644
<script setup lang="ts">
const webviewStyles = reactive({
progress: {
color: '#42c02e',
height: '1%',
},
})
</script>
<template>
<view>
<web-view :webview-styles="webviewStyles" src="/hybrid/html/chat.html" />
</view>
</template>
src/pages/example/index.vue
...@@ -29,11 +29,17 @@ ...@@ -29,11 +29,17 @@
}, },
{ {
name: 'Chat AI 对话', name: 'Chat AI 对话',
icon: 'emojione-cowboy-hat-face', icon: 'fluent-color-chat-bubbles-question-24',
page: `/pages/example/chat/index?link=${encodeURIComponent('https://api.coze.cn/open-platform/sdk/chatapp?params=%7B%22chatClientId%22%3A%22BCsVIvFQTfR6aaoq9rRlj%22%2C%22chatConfig%22%3A%7B%22bot_id%22%3A%227426295021118488587%22%2C%22user%22%3A%22yUDCvvY6bwgJlKOR4z64X%22%2C%22conversation_id%22%3A%22ugG5MOjgpB5QidAIG8Yf1%22%7D%2C%22componentProps%22%3A%7B%22layout%22%3A%22mobile%22%2C%22lang%22%3A%22zh-CN%22%2C%22uploadable%22%3Atrue%2C%22title%22%3A%22%E6%B9%96%E5%8D%97%E5%A4%A9%E6%B0%94%20AI%20%E5%B0%8F%E5%8A%A9%E6%89%8B%22%2C%22icon%22%3A%22https%3A%2F%2Fhntq.yiring.com%2Fminio%2Fpublic%2Fsystem%2Fai%2Fhntq-ai-logo.png%22%7D%7D')}`, page: `/pages/example/chat/index?link=${encodeURIComponent('https://api.coze.cn/open-platform/sdk/chatapp?params=%7B%22chatClientId%22%3A%22BCsVIvFQTfR6aaoq9rRlj%22%2C%22chatConfig%22%3A%7B%22bot_id%22%3A%227426295021118488587%22%2C%22user%22%3A%22yUDCvvY6bwgJlKOR4z64X%22%2C%22conversation_id%22%3A%22ugG5MOjgpB5QidAIG8Yf1%22%7D%2C%22componentProps%22%3A%7B%22layout%22%3A%22mobile%22%2C%22lang%22%3A%22zh-CN%22%2C%22uploadable%22%3Atrue%2C%22title%22%3A%22%E6%B9%96%E5%8D%97%E5%A4%A9%E6%B0%94%20AI%20%E5%B0%8F%E5%8A%A9%E6%89%8B%22%2C%22icon%22%3A%22https%3A%2F%2Fhntq.yiring.com%2Fminio%2Fpublic%2Fsystem%2Fai%2Fhntq-ai-logo.png%22%7D%7D')}`,
animationType: 'slide-in-bottom', animationType: 'slide-in-bottom',
}, },
{ {
name: 'Chat AI 对话（WebView）',
icon: 'fluent-color-chat-multiple-24',
page: `/pages/example/chat/webview`,
animationType: 'slide-in-bottom',
},
{
name: 'Webview（本地）', name: 'Webview（本地）',
icon: 'vscode-icons-file-type-html', icon: 'vscode-icons-file-type-html',
page: `/pages/common/webview/index?link=${encodeURIComponent('/hybrid/html/local.html')}`, page: `/pages/common/webview/index?link=${encodeURIComponent('/hybrid/html/local.html')}`,
......
unocss.config.ts
...@@ -19,6 +19,8 @@ const ICONS = [ ...@@ -19,6 +19,8 @@ const ICONS = [
'twemoji:laptop', 'twemoji:laptop',
'vscode-icons:file-type-pdf2', 'vscode-icons:file-type-pdf2',
'fxemoji:clockwiserightwardsleftwardscirclearrows', 'fxemoji:clockwiserightwardsleftwardscirclearrows',
'fluent-color:chat-bubbles-question-24',
'fluent-color:chat-multiple-24',
] ]
export default defineConfig({ export default defineConfig({
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论