安装开发者工具-VSCode 插件

lighting 推荐 VSCode 作为开发编辑器,并提供了 VSCode 插件,帮助开发者更加快速、高效地开发light工程:

  • lighting:脚手架插件(最新版本1.0.x)
  • Light Snippets:代码提示插件

安装方法

  1. 安装最新版本的 VSCode 编辑器
  2. 在VSCode的扩展面板中搜索插件名称lighting,点击安装并重新加载面板。

使用方法

【工程创建】插件安装成功后,点击编辑器左侧的light图标,可激活插件进入Light工程管理界面,初次打开工程管理界面的时候,会出现一个欢迎页,点击按钮 或点击界面上的 图标可创建或打开一个Light工程。

【工程创建】选择新建一个工程,依次根据提示选择一个工程类型-输入工程名字-选择工程存放路径,最后会在选择的路径下创建一个对应工程名字的light工程文件夹。

工程创建成功后,会在左侧LIGHT工程管理列表中新增一条记录,鼠标放到列表上可删除工程,点击 按钮可进入到工程开发界面,即资源管理器。如果是APP工程点击 按钮可进行APP信息的配置。

【APP信息配置-平台授权】
点击导入平台授权文件按钮,可将LIGHT_LICENSE文件导入到工程的native文件夹下。

【APP信息配置-界面UI】
点击对应的图片可上传logo、启动图和引导图。

点击选择字体按钮可将字体图标文件放到工程native文件夹下,用于主页面功能中菜单的图标配置,窗体中可选择窗体导航的类型、可配置导航以及菜单的背景、字体颜色等,色值提供可输入和可选择(点击色块即可选择)2种方式。

【APP信息配置-主页面功能】
点击添加功能配置按钮可创建多个菜单,无菜单模式只需创建一个主页面功能即可。

【APP信息配置-插件配置】
插件配置由用户按格式自由输入,输入成功后点击保存即可,点击查看配置模板按钮,可查看完整的插件配置模板。

插件配置模板页面中,点击使用配置模板按钮,可将模板内容带入插件配置页面供用户使用,点击返回按钮,将直接返回插件配置页面。

【APP信息配置-APP安全】
直接点击开关按钮,可实时修改安全配置各配置项。

现在,点击 工程管理界面的 按钮进入到工程开发界面。在light工程文件夹根目录下右键鼠标可进行编译运行、打包、生成代码以及开启联机调试操作。

【编译配置】点击编译运行,会出现一个编译运行的命令列表,初次打开只有一条默认配置,直接点击命令即可运行,也可点击 新建一个配置 自定义命令。

【编译配置】点击新建一个配置后进入编译配置界面,可以启用自定义插件、指定资源输出目录、自定义端口号,也可在其他项中直接输入指令自定义配置命令,最后输入配置名称后点击保存按钮即可,保存成功后,下次点击编译运行按钮的时候,命令列表中将新增此条命令。(打包命令配置同理)

【编译运行】在编译配置命令列表中选择一条命令运行,编辑器的右下方会显示编译日志,编译成功后,会自动打开浏览器,在编辑器的下方状态栏会出现一个 一键停止运行所有编译中的项目 按钮,点击可停止运行项目,注意:这里无法单独停止个别项目,只能一键停止所有运行中的项目。

【打包】在打包配置命令列表中选择一条命令运行,在编辑器的右下方会显示打包日志。

【生成代码】点击生成代码按钮可生成代码,在编辑器的右下方会显示生成日志。

【开启联机调试】点击开启联机调试按钮,编辑器的右下方会显示开启联机调试的日志,成功开启后,会自动打开浏览器的联机调试二维码,同时,下方的状态栏也会出现一个停止调试的按钮,点击可断开联机调试。

【快捷键】插件提供了快捷键功能:ctrl+shift+c (快速创建工程),ctrl+d(快速打开联机调试),其他快捷键功能将持续更新中。

Light Snippets:代码提示插件

vscode:v1.8.0+

Light Snippets 提供了包括 核心框架JSNative框架内置模块light-sdklighting-uilight-chart 的代码提示。无需记忆繁多的api,只要敲几个字母,即可自动生成一大段代码。

使用方法

  • 核心框架

  • JSNative框架内置模块

  • light-sdk

  • lighting-ui

  • light-chart

注:此插件依赖于vue语法,请先安装 vetur 插件,以正常使用此插件。