跳到主要内容
版本:1.10.0

基于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