跳到主要内容
版本：1.11.1

基于Widget的定制化开发方案

获取代码仓库权限（更新中）​

目录结构（更新中）​

色彩方案​

默认提供的组件并不引用样式文件，需要手动引入vars.less和index.module.less。 主题色请参考vars.less文件。

如何开发一个插件​

插件系统向开发者提供了Widget Core中完整的能力，让开发者可以通过调用Core的API和数据，丰富Widget功能或实现复杂业务逻辑。

一个Widget插件应主要包括：

  • 一个可以接收配置信息的JS函数
  • 该函数返回一个接收Widget Core实例的JS函数
  • 监听或发送事件以完成业务逻辑

以“初始化时插入一条hello world消息”的插件为例：

// 一个可以接收配置信息的JS函数
export default function myPlugin(config: any) {
  const formatedConfig = Object.assign({
    createdTime: Date.now()
  }, config)
  // 该函数返回一个接收Widget Core实例的JS函数
  return function (context: ContextModel) {
    // 监听或发送事件以完成业务逻辑
    context.on('didInitial', function(context: ContextModel, payload: any) {
      // e.g:
      context.appendUserMessage({
        _id: 'myPluginFirstMessage',
        comp: ({text}) => <div>{text}</div>,
        content: { text: 'hello world!' }
      })
      
      context.emit('myPluginGotInitialed', { foo: 'bar', formatedConfig })
      
      // do something else 
    })
  }
}

如需完成更多功能，可参考：

  • API文档：使用更多功能和数据来实现业务。
  • 插件文档：通过加载更多插件强化Widget提供的功能。
  • ChatUI文档：解锁更多底层配置信息。

如何开发一个定制化项目​

要开发一个定制化项目，可以从已有模板中挑选适合改造的，或使用基础组件重新开发一套。

改造已有模板​

通过Fork已有模板进行二次开发。

  1. 初始化项目
yarn
  1. 本地调试
yarn dev
  1. 打包，打包后的文件会在dist文件夹中，将对应文件发布到项目所需地址。
yarn build
note

一般私有部署项目会放在客户的OSS或项目中，需要和客户沟通。

直接使用Widget Core开发​

1. 创建项目：​

可使用已有的项目或用yarn create创建项目，以vite模板为例：

# 使用vite的react-ts模板创建项目
yarn create vite --template react-ts

# 进入项目，项目默认名称为vite-project
cd ./vite-project

# 安装依赖包
yarn

# 获取Widget Core
yarn add lc-widget-core

更多设置可以参考创建第一个Vite项目。

2. 加载Widget Core:​

你可以直接使用model.init来初始化model及其数据，并对外暴露可复用的初始化方法，实现接入不同用户或渠道等。

import { model } from 'lc-widget-core'

function initMyWidget({userInfo}) {
  model.init({userInfo})
}

window.initMyWidget = initMyWidget

// init when you want it
initMyWidget({
  name: 'ready_player_one'
})

3. 加载预置对话框​

import { SDKComp } from 'lc-widget-core'

export default function() {
  return <SDKComp />
}

4. 打包发布​

将dist中的文件交给业务需要的地方即可

yarn build

预设模板​

模板一​

template1

模板二​

template2