公告列表
公告列表
收藏
回答

插件样式问题

问题类型 插件 AppID 插件版本号 AppID 操作系统 微信版本 基础库版本
Bug wx8c631f7e9f2465e1 任何版本号 wx5942babacc58b709 iOS 最新版本 3.11.1

聊天框的输入工具跑到上面去

/** @format */ import PageContainer from '@src/components/page-container' import { useSharePayloadListener } from '@src/hooks/paas/page-event' import { BlankSharePayload } from '@src/types/share' import { useShareAppMessage, navigateTo, navigateToMiniProgram, getSystemInfoSync } from '@tarojs/taro' import { View } from '@tarojs/components' import { useEffect, useState } from 'react' import './index.less' const plugin = requirePlugin('chatbot') as requirePlugin.ChatbotPlugin; const ChatRobotPage = () => { const [showChat, setShowChat] = useState(false) // 控制机器人显示/隐藏 const [windowHeight, setWindowHeight] = useState(0) // 控制机器人显示/隐藏 const [pluginInited, setPluginInited] = useState(false) // 标记插件是否初始化完成 // 1. 初始化插件：仅初始化，不直接显示组件 useEffect(() => { plugin.init({ appid: 'd7LGIH9NMFmokecnEbbWTLV24riI4Q', openid: 'oSyFa18e9r9tcCTQde_8hwIDmUbE', userHeader: 'https://res.wx.qq.com/mmspraiweb_node/dist/static/miniprogrampageImages/talk/rightHeader.png', userName: '客户', navHeight: 60, anonymous: true, success: () => { console.log('插件初始化成功'); setPluginInited(true); // 初始化成功，标记可显示 setTimeout(() => { const height = getSystemInfoSync().windowHeight // 获取屏幕高度 setWindowHeight(height) setShowChat(true) }, 3000); }, fail: (error) => { console.log('插件初始化失败', error); setPluginInited(false); } }) }, []) // 2. 模仿首页：手动触发显示（确保插件初始化后再渲染） const toggleChat = () => { if (!pluginInited) { Taro.showToast({ title: '机器人初始化中...', icon: 'none' }); return; } setShowChat(!showChat); }; // 3. 回调事件与首页保持一致 const chatOnFinish = () => { console.log('用户结束了对话'); setShowChat(false); }; const openWebview = (e) => { const url = e.detail; navigateTo({ url: `/pages/webview/index?url=${encodeURIComponent(url)}` }); }; const openMiniProgram = (e) => { const params = e.detail; navigateToMiniProgram({ appId: params.appId, path: params.path, success: () => console.log('跳转成功') }); }; // 分享相关（保持不变） const [sharePayload] = useSharePayloadListener<BlankSharePayload>({ defaultValue: { title: '', imageUrl: '' }, }) useShareAppMessage(() => sharePayload) return ( <View className='robot-container' > {/* 3. 新增：触发按钮（模仿首页悬浮按钮，确保初始化后再显示组件） */} {/* {!showChat && ( <View className="open-chat-btn" onClick={toggleChat}> 打开机器人 </View> )} */} {/* 4. 机器人组件：套容器，用首页同款样式（关键修复） */} {showChat && ( <chat className="chat-plugin-wrapper" navHeight={44} // 必传：你的自定义导航栏高度（44px） /> )} {/* 4. 初始化loading（可选，提升用户体验） */} {!showChat && ( <View className="init-loading"> <View className="loading-icon">加载中...</View> </View> )} </View> ) } export default ChatRobotPage
回答关注问题邀请回答
收藏

1 个回答

  • Koy
    Koy
    11-03

    解决了，被其他样式影响了

    11-03
    有用
    回复
请 登录 后发表内容
相关文档