开发者工具宿主接入

背景

开发者工具扩展提供宿主在开发者工具内的最小集、端能力的实现，小程序开发者在开发者工具内的宿主环境调试时，是必须要宿主方实现的功能。

常用路径

vendor文件夹地址

开发者工具的资源目录，不同系统和工具版本不一致，具体规则如下：

• windows(%USERPROFILE%是你的用户目录)
  • 正式版本： %USERPROFILE%\AppData\Roaming\百度开发者工具\cli\vendor
  • rc 版本： %USERPROFILE%\AppData\Roaming\百度开发者工具-rc\cli\vendor
• mac
  • 正式版本： ~/Library/Application Support/百度开发者工具/cli/vendor
  • rc版本： ~/Library/Application Support/百度开发者工具-rc/cli/vendor

日志文件地址

• windows (%USERPROFILE%是你的用户目录)
  • 正式版本： %USERPROFILE%\AppData\Roaming\百度开发者工具\log.log
  • rc 版本： %USERPROFILE%\AppData\Roaming\百度开发者工具-rc\log.log
• mac
  • 正式版本： ~/Library/Logs/百度开发者工具/log.log
  • rc版本： ~/Library/Logs/百度开发者工具-rc/log.log

命令行启动命令

对于 rc 版本，需要在目录和可执行文件的名字 开发者工具/swan-ide-gui 后面，添加 -rc

• windows
  • 快捷方式：在后面添加 --host --console 参数来启动工具 【推荐】
  • cmd： ${安装目录}\百度开发者工具.exe --host --console
    完整命令类似 %USERPROFILE%\AppData\Local\Programs\swan-ide-gui\百度开发者工具.exe --host --console
• mac
  • ${安装目录}/百度开发者工具.app/Contents/MacOS/百度开发者工具 --host --console
    完整命令类似 /Applications/百度开发者工具.app/Contents/MacOS/百度开发者工具 --host --console

快速开始

要实现一个新的 api，需要在开发者工具模拟器扩展中添加一个 api 的实现，同时在框架的 extensionJs 中添加一个新的api描述。下面简述如何快速添加一个api

• 安装2.2.4以上版本的开发者工具
• 下载 demo示例
• 到 vendor 文件夹下，创建 demo-program-extension 目录，并复制 demo 内的extensionJs/1.0.0 到目录中。
  复制后的目录结构如下：

1
2
3
4
5

└── vendor 
        └── demo-program-extension    
                    └──  1.0.0
                           ├──  extension.js
                           └──  extension.css

• 通过上面提供的命令行方式打开开发者工具 【一定要通过命令行加参数打开】
• 打开一个小程序工程，在工具栏中打开宿主配置管理中心，选择加载本地宿主，打开demo/ide/demo目录，关闭宿主配置管理中心，切换成示例 APP 宿主
• 等待编译完成后，在调试器 console 中输入swan.demo.demo({data:{test: 1}，success:console.log})，可以看到输出了 api 中返回的内容。

ps：如果开发其他本地宿主，将目录和配置中的demo替换成你自己的宿主名。

接入流程图