前端开发 骡子快跑如何嵌入网站 骡子快跑Web组件调用教程|Duuu笔记
需通过HTML脚本加载与DOM挂载集成骡子快跑Web组件：一、在
中以type="module"和defer引入CDN JS；二、在容器内声明如果您希望在自己的网站中集成
骡子快跑
的功能，使其以轻量级Web组件形式运行，则需通过标准HTML脚本加载与DOM挂载方式实现。以下是具体嵌入步骤：
一、引入骡子快跑核心JS文件
该步骤用于加载骡子快跑的运行时环境与基础组件定义，确保后续调用具备执行上下文。必须确保脚本在页面DOM就绪前完成加载，否则组件初始化将失败。
1、在网页的
标签内添加以下 script 标签：
2、设置
src
属性为官方提供的稳定CDN地址，例如：
https://cdn.luozikuaipao.com/sdk/v1.2.0/lkp-web.js
。
3、为 script 标签添加
type="module"
属性，以启用ES模块支持。
4、添加
defer
属性，保证脚本在HTML解析完成后执行但不阻塞渲染。
二、声明并配置Web组件标签
该步骤通过自定义元素语法声明组件实例，并传入必要参数以控制其行为与外观，所有属性均为字符串类型，需按规范书写。
1、在目标容器（如
）内部插入
标签。
2、为该标签添加
data-app-id
属性，并填入您在骡子快跑平台申请的唯一应用标识符。
3、添加
data-theme
属性，可选值为
"light"
或
"dark"
，用于指定界面主题。
4、添加
data-autostart
属性，设为
"true"
可使组件加载后立即启动运行。
三、通过JavaScript动态创建组件实例
该方法适用于需要根据用户交互或状态变化动态插入组件的场景，绕过静态HTML声明，由JS控制生命周期。
1、使用
document.createElement("lkp-runner")
创建组件元素对象。
2、调用
element.setAttribute()
方法依次设置
data-app-id
、
data-theme
和
data-mode
（可选值：
"inline"
或
"popup"
）。
像素蛋糕PixCake
像素级AI图像精修软件
下载
3、获取目标挂载节点，例如
document.getElementById("lkp-container")
。
4、执行
container.appendChild(element)
完成挂载。
四、监听组件内部事件并响应
该步骤允许开发者捕获组件触发的关键状态变更，如启动、暂停、完成或错误，从而执行自定义逻辑。
1、在组件挂载完成后，使用
element.addEventListener()
监听
"lkp:ready"
事件，确认组件已初始化完毕。
2、监听
"lkp:started"
事件，表示任务已进入执行阶段。
3、监听
"lkp:completed"
事件，该事件携带
detail.result
对象，包含输出数据。
4、监听
"lkp:error"
事件，检查
detail.code
与
detail.message
进行异常处理。
五、设置跨域与CSP兼容性策略
该步骤确保在启用内容安全策略（CSP）的站点中，骡子快跑资源仍可正常加载与执行，避免被浏览器拦截。
1、在
中添加
script-src
指令，包含
https://cdn.luozikuaipao.com
及其子域名。
2、若组件需发起网络请求，还需在
connect-src
中加入对应API域名，例如：
https://api.luozikuaipao.com
。
3、启用
worker-src
并指定相同CDN地址，以支持内部Web Worker运行。
4、确保服务器响应头中未设置冲突的CSP策略，否则HTML内联策略将被忽略。
