二次开发入口

本文章关联的视频教程链接：https://www.shanhaibi.com/video/1231.html

本教程主要介绍在山海鲸可视化软件中将二次开发代码跟软件进行连接的操作过程，二次开发代码使用JavaScript语言，接下来以“按钮”组件为例进行说明。

1. 操作步骤

1.1 添加组件

打开山海鲸可视化软件，新建一个空白项目，添加一个“按钮”组件。

1.2 添加脚本

选中组件，在右侧属性面板中点击“代码”，在二次开发界面添加脚本。系统会自动创建一个基础的代码模板。

【温馨提示】通常只需添加一个脚本即可，但是在代码较多，且代码需要解耦的情况下可以添加多个脚本。通过不同的脚本，可以将整个代码分成几个大的模块，更方便管理 。

1.3 是否启用

该功能默认是开启状态，可手动关闭。开启后，二次开发脚本中的update 函数会被调用；关闭后，二次开发脚本中的update 函数不会被调用。

【温馨提示】如果我们的二次开发脚本中不包含update 函数，则该功能不会对脚本有任何影响。

1.4 添加代码

点击新建后，系统会自动创建一个基础的代码模板。也可以点击代码文件框替换为其他本地的二次开发代码文件。

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

class Demo {
  // 组件开发教程  https://www.shanhaibi.com/docs/v1/lpm4t547so6rp0vs/
  // 更多设置项请看教程 https://www.shanhaibi.com/docs/v1/lsr5n1dmndqtxwgm/
  /**
   * 生命周期函数 组件开始载入
  */
  init() {

  }

  /**
   * 生命周期函数 当前二开所处看板加载完成
   */
  ready() {

  }

  /**
   * 生命周期函数 会在ready()后启用
   * 启用后每帧调用，性能消耗较多，建议隔一段时间触发以及只做一些轻量操作
   */
  update() {

  }

  /**
   * 生命周期函数 组件销毁时调用，一般在此处清空监听事件
   */
  destroy() {

  }
}
export default Demo;

【温馨提示】这里需要注意代码格式，“export”后面必须跟“default”。

1.5 自定义设置项

详细的自定义设置项设置请参考自定义属性面板教程。

1.6 修改代码

如果需要修改代码，可以点击代码文件框后的图标，选择打开文件，我们这里选择用 VSCode 打开，就可以开始编辑代码了：

1.7 代码刷新

代码修改完并保存后，可以点击代码文件框后的图标，选择刷新。系统就会加载并执行最新的代码文件。关闭项目后重新打开也会自动刷新。

2. 调试方式

使用以下代码，在属性值被修改时打印信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

/*
支持以下调试打印方法:
console.log
console.info
console.warn
console.error
*/
class PropertySample {
  //公开属性，会生成设置项
  setting = Paragraph.default("山海鲸是一站式可视化平台", {
    rows: 2, //输入框默认显示2行
  });
  onPropertyChanged(property) {
    if (property == "setting") {
      //返回填入的字符串
      console.log(this.setting.value);
    }
  }
}
export default PropertySample;

在项目编辑界面，点击右下角的调试窗按钮，打开控制台

修改自定义属性后，查看打印信息：