vscode插件
# Fx DevTools
Fx DevTools是vscode的插件,方便开发人员上传、新建、调试代码。
# 在vscode中安装Fx DevTools
打开vscode IDE
单击左侧活动栏的
扩展
项
- 在搜索栏中输入“fx-devtools”进行搜索,搜索成功后进行安装
# 创建项目
打开vscode IDE,通过 Ctrl+Shift+P (Windows)
或者 Cmd+Shift+P (macOS)
打开vscode命令面板,输入 Fx: Create Project
命令并执行。然后按照步骤进行,即可创建一个本地项目
# 登录租户
- 打开浏览器,进入纷享销客「后台管理」->「开发者证书」,新建开发者证书
- 打开vscode IDE,通过
Ctrl+Shift+P (Windows)
或者Cmd+Shift+P (macOS)
打开vscode命令面板,输入Fx: Login devtool
命令并执行,命令执行成功后会自动打开certification.json
文件
- 将新建的证书复制粘贴到
certification.json
文件中的certificate字段
并保存
- 任意拉取插件/组件,如果拉取成功,即可验证登录成功
注意:「开发者证书」需要内部申请才可开通
# 上传/新建/更新自定义插件/组件
新建组件文件 会在当前文件夹下生成所填写的文件名称的模版文件(xxx.wxml,xxx.wxss,xxx.js,xxx.json)
# 调试代码
该功能可以帮助开发人员实时调试相关代码,提高开发效率。
# 调试代码(PC)
- vscode打开项目(注意:需要打开创建项目的那个文件夹)
- 点击底部状态栏最右边的
Fx Dev
按钮,启动本地服务器。启动成功后,按钮显示Fx Dev Port: xxxx
- 打开浏览器,进入纷享销客应用,url增加
?debug=1
字符,使应用进入调试模式。
例如,某个页面的url为 https://www.fxiaoke.com/XV/UI/Home#paasapp/home/=/appId_CRM,我们将其修改为 https://crm.ceshi112.com/XV/UI/Home?debug=1#paasapp/home/=/appId_CRM 并刷新当前页即可进入调试模式
- 按
F12
打开浏览器控制,执行以下命令修改端口号(默认不需要修改。我们可以通过FxUI.debug.getConfig()
查看端口号是否一致,只有在不一致的时候才需要进行改)
FxUI.debug.setConfig({
port: xxxx //xxxx 为第二步中按钮显示的端口号
})
- 进入自定义插件影响的页面或者展示自定义组件的页面,每次修改完代码后,只需要重新进入该页面,最新的代码将会立即生效。
# 调试代码(小程序)
使用浏览器自带devtools调试