3.3.2VPA卡片开发模型

开发模型

本节介绍了开发VPA卡片时的数据模型及redux结构。

卡片 Props

本节主要介绍卡片Props的数据结构，以及每个字段的含义。

interface CardProps {
  /* 
    步骤
    1 代表远程组件
        1.1 代表当前处于本地开发模式
            1.11 代表在本地开发模式中找到了该 vpaUIResourceID 对应的组件，加载本地组件
            1.12 代表在本地开发模式中没有找到该 vpaUIResourceID 对应的组件，加载远程组件
        1.2 代表生产模式下，直接检查和加载远程组件
    2 代表系统组件，直接加载
 */
  step?: number
/*
    卡片的详细数据
    可能包含text、title、showData、componentType、keyword等字段。卡片类型不同，所包含的内容不同
 */
  data?: any
  
  id?: string   // 卡片唯一标识
  modelID?: React.Component<{}, {}, any> | string | number   // 卡片modelID
  
  useLocalDevCard ?: any // 本地开发卡片的名称
  vpaUIResourceID ?: any // 远程组件ID
}

redux结构

本节主要介绍项目中的 redux 结构提供了哪些 action 供开发者调用，以及每个 action 的作用。

在页面中使用action的方式：

import { dispatch } from '../../redux/store'
import settingSlice from '../../redux/msgListSlice'

dispatch(settingSlice.actions.setVoice('on'))

settingSlice

  • setVoice
    • payload: 'on' | 'off'
    • 说明：设置声音
  • setLongPressToSpeak
    • payload: true | false
    • 说明：设置长按收音/自动收音
  • setAppCurrentTheme
    • payload: 'dark' | 'light' | 'automatic'
    • 说明：设置颜色模式

相关常量名

  • VOICE_ON_KEY : 语音开关
  • LONG_PRESS_TO_SPEAK_KEY : 长按收音开关
  • APP_CURRENT_THEME_KEY : 应用颜色模式
  • APP_THEME : 应用颜色
  • AUTO_RECORD_KEY : 自动收音开关 (已弃用)

inputSlice

  • setValue
    • payload: string
    • 说明：设置输入框内容
  • setMode
    • payload: 'keyboard'|'mic'
    • 说明：设置键盘/语音输入
  • setState
    • payload: { value: string, mode: 'keyboard'|'mic' }
    • 说明：设置键盘/语音输入和输入框内容

msgListSlice

  • addMsg
    • payload: CardWrapperProps
    • 说明：添加一条响应消息
  • addISay
    • payload: CardWrapperProps
    • 说明：添加一条发送消息
  • showTips
    • payload: CardWrapperProps
    • 说明：显示“您可以这样问”
  • addMeta
    • payload: CardWrapperProps
    • 说明：添加meta信息，用于标记“OpenApp”卡片状态
  • setMeta
    • payload: { id, key, value }
    • 说明；设置meta信息，如设置指定“OpenApp”卡片为 已打开 状态
  • setAllLoaded
    • payload: CardWrapperProps
    • 说明：设置所有“OpenApp”卡片为 已打开 状态
interface CardWrapperProps {
  id: string
  data: {
    modelID: modelIDType
    data?: any
    text?: string
    vpaUIResourceID?: string
    $nextTick?: string
  }
  modelID?: React.Component | string | number
  forceRemote?: boolean
}

StateSlice

  • setNetwork
    • payload: '2g' | '3g' | '4g' | 'wifi' | ''
    • 说明；设置网络类型, 为空时代表断开网络
  • setIsLoading
    • payload: boolean
    • 说明：设置是否正在加载

helloAndHelpSlice

  • setData
    • payload: array
    • 说明：设置帮助页面的数据
是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24