目录
概述 界面概览 创建项目 项目导入升级 |--低版本IDE创建的工程(引入了fa-toolkit) |--联盟快应用开发工具创建的工程 卡片 |--Hag卡片开发 |----新建卡片工程 |----组件拖拽编辑 |----基础样式库 |----卡片实时预览 |--新建卡片(当前不支持Hag卡片) |----新建卡片 |----添加卡片参数 |----编辑卡片参数 |----删除卡片参数 |----运行卡片 |----调试卡片 页面 |--新建页面 |--新增页面 |--删除页面 |--添加页面参数 |--修改页面参数 |--删除页面参数 |--运行页面 |--调试页面 代码编辑 |--新建文件/新建文件夹 |--语法高亮 |--智能提示/自动补全 |----template |----script |----style |----代码片段 |----Pair-Tags自动补全 |--标签对重命名 |--静态代码检查 |--快捷修复 |--引用/定义查找和跳转 |----组件事件点击跳转 |----变量定义点击跳转 |----文件/网页引用点击跳转 |----样式类选择器点击跳转 |--悬浮提示 |--源码格式化 |--拖拽组件编程 Npm Hap 调试设备 |--本地真机 |----USB连接 |----局域网连接 |--远程真机 |--模拟器 |--多设备调试 快应用运行平台设置 |--运行平台设置 |--分辨率设置 编译调试 |--实时编译 |--真机调试 |--Inspect 签名 |--签名目录 |--签名管理 |--签名配置 |--打包正式版本流程加强 打包 |--debug包 |--release包 云测试(兼容性测试) |--提交云测试 |--查看云测试报告 一键发布(beta) 版本更新及发行说明 常用快捷键
目录
概述 界面概览 创建项目 项目导入升级 |--低版本IDE创建的工程(引入了fa-toolkit) |--联盟快应用开发工具创建的工程 卡片 |--Hag卡片开发 |----新建卡片工程 |----组件拖拽编辑 |----基础样式库 |----卡片实时预览 |--新建卡片(当前不支持Hag卡片) |----新建卡片 |----添加卡片参数 |----编辑卡片参数 |----删除卡片参数 |----运行卡片 |----调试卡片 页面 |--新建页面 |--新增页面 |--删除页面 |--添加页面参数 |--修改页面参数 |--删除页面参数 |--运行页面 |--调试页面 代码编辑 |--新建文件/新建文件夹 |--语法高亮 |--智能提示/自动补全 |----template |----script |----style |----代码片段 |----Pair-Tags自动补全 |--标签对重命名 |--静态代码检查 |--快捷修复 |--引用/定义查找和跳转 |----组件事件点击跳转 |----变量定义点击跳转 |----文件/网页引用点击跳转 |----样式类选择器点击跳转 |--悬浮提示 |--源码格式化 |--拖拽组件编程 Npm Hap 调试设备 |--本地真机 |----USB连接 |----局域网连接 |--远程真机 |--模拟器 |--多设备调试 快应用运行平台设置 |--运行平台设置 |--分辨率设置 编译调试 |--实时编译 |--真机调试 |--Inspect 签名 |--签名目录 |--签名管理 |--签名配置 |--打包正式版本流程加强 打包 |--debug包 |--release包 云测试(兼容性测试) |--提交云测试 |--查看云测试报告 一键发布(beta) 版本更新及发行说明 常用快捷键
概述
华为快应用IDE是一款针对华为快应用的集成开发环境,它提供了华为快应用设计、开发、调试、测试、构建、打包发布等能力,以DevOps理念帮助你快速的开发华为快应用。
界面概览
首次打开IDE时界面如下。
界面概览.png
创建工程后界面分布:
1、菜单栏
2、代码编辑器
3、Panel
4、资源管理器
5、组件面板
6、实时预览框
界面分布.png
创建项目
1、打开IDE,点击“文件”菜单,在下拉菜单中选择“新建项目”(或点击欢迎使用界面的“新建项目”),开启新建项目的窗口。
2、填入“项目名称”和“rpk包名”,在“工作空间”选择代码存放的硬盘路径,在“模板”选项中选择项目模板(窗口右侧可以看到已选择模板的概览),点击”创建”按钮,完成新建项目。

说明    

rpk包名的命名规则:长度3~100字符,支持小写英文字母和数字,必须包含点(.),推荐采用com.company.module格式。

创建项目.gif
工程初始化成功后,会在工程目录下生成标准化结构项目:
|—— .quickapp        配置文件目录
|        |—— launch.json        配置文件
|—— src项目源文件
|        |—— Common        公用的资源文件和组件文件
|                |—— logo.png        manifest.json中配置的icon
|        |—— Hello        页面目录
|                |—— hello.ux        页面文件,文件名不必与父文件夹相同
|        |—— i18n        资源定义文件
|                |—— en.json        各语言地区的资源定义文件
|                |—— zh.json        各语言地区的资源定义文件
|        |—— app.ux        APP文件(编译自动修改,请勿改动)
|        |—— manifest.json        项目配置文件(如:应用描述、接口声明、页面路由等)
 工程文件组织.png
项目导入升级

低版本IDE创建的工程(引入了fa-toolkit)        

快应用IDE打开历史创建的引入了低版本fa-toolkit的工程,会自动检测给出升级提示,升级fa-toolkit替换package.json,并重新安装依赖。
引导升级含fa的工程.gif

联盟快应用开发工具创建的工程        

联盟快应用开发工具创建的工程。
导入后升级步骤如下(hap工程升级流程):
1、IDE会自动向package.json增加以下依赖项,未存在添加,已存在比对版本,使用高版本:
a)fa-toolkit tgz压缩包,指向IDE工程内部文件。
b)hap-toolkit 为0.6.8。
2、IDE会自动向package.json增加以下Script项:
"postinstall": "hap postinstall",

"debug": "hap debug",

"hap-update": "hap update",

"fa-build": "node node_modules/webpack/bin/webpack.js --config ./node_modules/fa-toolkit/webpack.config.js",

"fa-watch": "node node_modules/webpack/bin/webpack.js --watch --config ./node_modules/fa-toolkit/webpack.config.js"    
3、点击npm下拉菜单中的npm install,在线安装依赖。
卡片

Hag卡片开发        

新建卡片工程
1、以管理员身份启动华为快应用IDE。
2、点击新建卡片工程菜单(Ctrl+Shift+J):文件 -> 新建项目 -> 新建卡片项目。
3、输入应用名称和RPK包名,及选择项目工作区间。
4、选择卡片模板。
5、点击“确定”按钮,新建卡片工程。

注意    

不可编辑或删除卡片页面中的widgetid属性,否则将导致组件拖拽和模拟预览不可用。

卡片工程文件组织:
|—— .quickapp        配置文件目录
|        |—— launch.json        配置文件
|—— src项目源文件
|        |—— common        公用的资源文件和组件文件
|                |—— component        卡片引用的组件分包,拖拽的组件也会添加到这个目录
                     |—— css        公共样式目录
                              |—— basic.scss        华为卡片基础样式库
                                       |—— i18n        国际化目录
         |—— empty        卡片页面目录
|                 |—— empty.ux        页面文件,文件名不必与父文件夹相同
|        |—— app.ux        APP文件(编译自动修改,请勿改动)
|        |—— manifest.json        项目配置文件(如:应用描述、接口声明、页面路由等)
5.1.1 新建卡片工程.gif
组件拖拽编辑
1、光标聚焦在需要编辑的文件或标签处。
2、在组件面板中的自动搜索结果中,选择组件并拖拽到需要编辑的位置。
3、出现提示可编辑提示信息时,释放拖拽动作,被拖拽组件即可编辑到当前文件中,模拟预览即时刷新。

注意    

● 当无提示信息或者提示警告信息时,释放拖拽,组件不会被编辑到卡片中。
● 禁止修改组件分包文件名,否则将导致组件拖拽编辑不可用。

5.1.2 拖拽编辑.gif
基础样式库
basic.scss基础样式文件在卡片模板项目的路径:\src\common\css\basic.scss
强烈推荐使用这些样式声明,避免卡片UI不适配EMUI的问题。
使用方式如下图。
基础样式库.png
卡片实时预览
对于hag卡片工程,预览区默认使用无设备模拟预览,支持即时预览、切换主题、调节字体和显示大小。可在预览下拉框中切换到其他可用设备预览。
5.1.4 步骤1 模拟预览操作.gif
以下是切换到本地真机预览的步骤:
1、连接本地真机,预览区自动切换到真机。
5.1.4 步骤2 连接真机.gif
2、点击实时预览按钮,等待真机实时预览启动完毕。
5.1.4 步骤3 真机实时预览.gif
3、在下拉框中可切换回模拟预览。
5.1.4 步骤4模拟预览切换.gif

新建卡片(当前不支持Hag卡片)        

新建卡片
1、选择新建卡片入口。
● 在左侧资源管理器中,在src文件夹上右键选择“new widget”。
● 在菜单栏“文件”下选择“新建卡片”,打开新建卡片窗口。
● 在左侧资源管理器,点击“+”号选择“新建卡片”。
2、选择卡片类型,填写相关信息。
在“新建卡片”对话框,填写卡片名称、ID、卡片路径、卡片文件名等参数,选中一个卡片模板(点击“高级选项”可展开填写高级选项参数),填写完毕后点击“确定”。
3、新建卡片成功后,可在manifest.json和launch.json文件中看到widgets的相关配置。
新建卡片.gif
添加卡片参数
1、点击上方菜单栏下拉选项“配置”,进入卡片列表页面。
2、进入卡片列表,选择对应卡片,设置签名类型以及卡片的宽度,点击卡片名称右侧的添加按钮 添加卡片按钮.png 进行参数配置。
3、添加卡片参数,完成后保存。
新增卡片参数.gif
编辑卡片参数
1、点击上方菜单栏下拉选项“配置”,进入卡片列表页面。
2、进入卡片列表,选择对应卡片,设置签名类型以及卡片的宽度,点击卡片名称右侧的编辑按钮 编辑卡片按钮.png 进行参数配置。
3、修改卡片参数,完成后保存。

说明    

目前支持在新建卡片页和卡片配置界面中中编辑卡片参数。

修改卡片参数.gif
删除卡片参数
点击卡片参数的删除按钮,点击确认删除参数。
删除卡片参数.gif
运行卡片
方式一:在菜单栏下拉选项选择需要运行的卡片,菜单选择“构建 > 手机运行快应用”。
方式二:选择运行的卡片,点击  即可在手机上运行卡片。
运行卡片.gif
调试卡片
1、点击菜单栏中的下拉选项,选择要调试的卡片。
2、点击调试按钮 ,即可启动调试服务进入debug界面。
调试卡片.gif
页面

新建页面        

1、新建页面。
● 选择菜单“文件 -> 新建页面”,新建页面。
● 通过资源管理器,打开当前工程的src目录,右键选择“新建页面”。
● 在资源管理器点击“+”号,选择“新建页面”。
2、在弹出窗口填写页面文件名、页面路径信息,选择页面分类,目前页面分六个类别,每个分类下面有不同的页面模板。比如:选择阅读分类,阅读下方有11个模板可供选择,默认选中第一个,点击左右的箭头,进行查看其它模板。选中一个模板,点击“高级选项”可选填其中参数。填写完毕后点击“确定”。
3、查看创建的页面代码文件。
新建页面.gif

新增页面        

1、点击上方菜单栏下拉选项“配置”,进入配置列表界面。
2、点击页面右侧的加号按钮进入到新增配置页界面。
3、点击下拉框,选中其中对应的文件uri,点击确定。
4、点击确定按钮,对应的页面会被添加到左侧的页面列表中,右侧页面返回到启动参数列表界面。
新增页面.gif

删除页面        

选中需要删除的页面,点击删除按钮,确认删除。
删除页面.gif

添加页面参数        

1、选中页面,点击添加参数按钮“+”。
2、输入参数名称和参数值,确认保存。
添加页面参数.gif

修改页面参数        

1、点击上方菜单栏下拉选项“配置”,进入配置列表界面。
2、点击页面右侧的加号按钮进入到新增配置页界面。
3、选中页面,点击修改参数按钮 修改参数按钮.png
4、编辑页面参数值,完成后点击保存。

说明    

目前支持在新增配置页面中配置页面参数。

修改页面参数.gif

删除页面参数        

1、点击上方菜单栏下拉选项“配置”,进入配置列表界面。
2、点击页面右侧的加号按钮进入到新增配置页界面。
3、选中页面,点击删除参数按钮 删除参数按钮.png
删除页面参数.gif

运行页面        

1、点击菜单栏的下拉按钮选择需要运行的页面。
2、点击  即可在手机上运行页面。
运行页面.gif

调试页面        

1、点击菜单栏的下拉按钮选择需要调试的页面。
2、点击调试按钮 ,即可启动调试服务进入debug界面。
调试页面.gif
代码编辑

新建文件/新建文件夹        

方式一:在主菜单选择“文件 > 新建文件”进行新建。
方式二:在资源管理中的指定路径右击,选择“新建文件”或者“新建文件夹”进行新建。

语法高亮        

支持华为ux语言语法高亮,包含template模板、style样式(css、less和scss)和script脚本。
4.2 语法高亮.gif

智能提示/自动补全        

template
1、组件:输入Emmet简短表达式或“<”,会触发代码提示,选择其一,即可插入组件代码片段。    
4.3.1.1 组件补全emmet.gif   
4.3.1.1 组件补全1.gif   
2、组件属性/事件:输入属性/事件关键字,即可触发属性/事件智能提示,提示项为当前组件所支持的所有属性和事件。
在属性后输入“=”或在属性值引号内按快捷键“Alt+/”,即可触发属性值智能提示。
代码提示项:
●  事件类属性:当前源文件<script>模块中用户自定义的方法。
   
代码编辑:事件类属性.gif    
●  Class属性:当前源文件<style>模块中自定义的样式。    
4.3.1.2 2 组件属性值类补全.gif    
●  枚举类型属性:属性所支持的值列表。    
代码编辑:枚举类型属性.gif   
●  布尔类型属性:true和false。    
4.3.1.2 4 组件属性值布尔补全.gif   
●  字符串类型属性。    
代码编辑:字符串属性.gif   
3、组件style属性值(内联样式):
在style属性后输入“=” 后,即可触发样式智能提示,提示项为当前组件所支持的所有样式。    
代码编辑style内联样式.gif   
在样式key后输入“:”时,即可触发样式值的智能提示。    
4.3.1.3 2 内联样式值补全.gif    

注意        

在style属性值双引号内按代码提示快捷键“Alt+/”,也可触发style属性值的智能提示。

script
1、系统接口:导入快应用所支持的模块后,当引用模块接口时,即可触发模块所支持的接口/属性的代码智能提示,选择其中一项,即可补全接口代码。    
系统接口.gif   
2、组件方法:使用this.$element(id)来获取组件dom对象,即可触发组件方法的的智能提示。    
4.3.2.2 组件方法补全.gif   
3、this对象:支持this的对象和方法的智能提示和补全。    
4.3.2.3 1 this方法补全.gif   
style
1、样式:输入样式关键字或按代码提示快捷键“Alt+/”,即可触发样式智能提示,提示项是快应用所支持的所有样式。    
4.3.3.1 style样式补全.gif   
2、样式值:在样式key后输入“:”或按代码提示快捷键“Alt+/”,即可触发样式值的智能提示。    
4.3.3.2 style样式值补全.gif   
3、颜色提示器:支持颜色预览,并可以打开颜色提示器自定义颜色。    
4.3.3.3 颜色提示器.gif    
代码片段
输入代码片段关键字,即可触发代码片段提示,选择其中一项,即可自动补全代码。
1、导入系统模块
●  输入import关键字
   
4.3.4.1 1 import补全.gif   
●  输入require关键字    
4.3.4.1 2 require补全.gif   
●  输入系统模块关键字    
4.3.4.1 3 import模块补全.gif   
2、对象/方法/生命周期接口    
4.3.4.2 对象方法生命周期接口.gif   
3、日志打印接口    
4.3.4.3 日志打印接口.gif   
4、条件循环语句    
4.3.4.4 条件循环语句.gif   
Pair-Tags自动补全
IDE对于如下成对的标记支持自动补全:
●  尖括号<>
●  大括号{ }
●  中括号[ ]
●  括号( )
●  双引号" "
●  单引号' '
●  注释符<!-- -->,/* */
●  标签</>

标签对重命名        

光标置于标签名上,按快捷键 “F2”,在弹出的输入框内输入新的标签名,回车。
4.4 标签对重命名.gif

静态代码检查        

IDE会对js文件、ux文件、manifest.json以及ability.xml进行实时秒级的静态代码检查。
快应用项目打开时,会触发项目源码的全量代码检查,所有文件的检查结果显示在 PROBLEMS 面板。
如果一个源码文件有添加和修改,会触发实时检查,只更新该文件的检查结果。如果源码文件被删除,则实时清理被删除文件的检查结果。
●  定位提示
严重类错误以红色波浪线提示,警告类错误以绿色波浪线提示。
●  错误信息
鼠标悬浮于错误处,可提示具体错误信息和修正意见。“问题”面板显示所有打开文件的错误(所在文件、错误数量、错误信息和行列号)。
●  错误跳转
在“问题”面板,选中错误双击,可打开错误所在文件,鼠标停留在错误位置。
4.5.1 代码检查.gif
●  IDE检查项目
文件检查项
import跨包依赖检查,以下情况报错:
●  主包依赖子包
●  子包依赖其他子包
template文件根节点组件检查(数量,有效性)
规范组件支持检查
template最多只能有一个根节点,不能为block。
组件关系检查(父组件和子组件),目前支持特定父组件的组件有span、list-item、tab-bar、tab-content、option。
子组件的数量检查。
组件属性是否支持检查。
组件必填属性检查。
组件属性值有效性检查。
组件属性值不为空检查(警告)
组件属性默认值检查(提示)
组件内联样式是否支持检查
组件内联样式值有效性检查(包含空值检查)
组件内联样式默认值检查(警告)
组件标签未关闭检查(ux组件支持自关闭和对称关闭)
组件标签名大写检查(警告)
组件ID唯一性检查
组件属性唯一性检查
组件事件方法未定义检查
style样式格式检查
不支持样式检查
样式值有效性检查(包含空值检查)
样式默认值检查(警告)
script数据对象有效性检查(只能使用data、props、public、protected、private、propsDefault)
快应用系统接口支持/接口参数检查
组件方法检查
● API Level检查:根据manifest.json的minPlatformVersion的设置,检查整个快应用项目所使用的组件、样式、接口等是否被运行时的引擎平台支持。
● 卡片源码检查(*.ux文件):除以上ux通用检查规则外,卡片新增以下检查规则。
ux卡片中不能使用的组件检查
卡片中不能使用的样式检查
卡片中不能使用的接口检查(app.ux定义的公共接口和其他接口)
卡片中不能引用本地图片资源文件检查
卡片中不能操作global对象原型的检查
● manifest.json文件静态检查:除了json通用检查规则外,manifest.json新增了一些检查规则,主要包括以下几项,详情请参见“manifest文件”。
manifest.json必填字段及合法字段检查
字段值类型检查
默认值告警
● jshint检查
依赖于开源工具jshint,实时快速检查快应用项目中js文件和ux文件中script模块源码。
1、检查项.jshintrc
如果快应用项目根目录下没有 .jshintrc 文件,则启用以下默认检查项。开发者可在快应用项目根目录下新建 .jshintrc 文件,配置想要的检查项。检查项参考:https://jshint.com/docs/options/
"esversion": 6, //支持 es6 语法
"node": true, //Node.js, js运行在node环境下,允许使用nodejs的全局变量,例如console, require等
"strict": false, //强制使用ES5的严格模式,快应用不使用,设置为false
"bitwise": true, //禁用位运算符(如^,&等)
"curly": true, //if和while等语句中使用{}来明确代码块
"eqeqeq": true, //使用===和!==替代==和!=
"freeze": true, //禁止复写原生对象(如Array, Date)的原型
"immed": true, //匿名函数的使用方式,表达式的值是函数的结果,而不是函数本身
"latedef": 'nofunc', //变量定义前禁止使用, nofunc表示忽略函数声明
"noarg": true, //禁止使用arguments.caller和arguments.callee
"noempty": true, //禁止出现空的代码块
"nocomma": true, //此选项禁止使用逗号运算符。如果误用,逗号运算符可能会掩盖语句的值并促使错误的代码
"nonew": true, //禁止使用构造器
"undef": true, //禁止使用不在全局变量列表中的未定义的变量
"unused": 'vars', //禁止定义变量却不使用
"asi": true, //允许省略分号
"laxbreak": true, //允许不安全的行中断(与laxcomma配合使用)
"laxcomma": true, //允许逗号开头的编码样式
"multistr": true, //允许多行字符串
"sub": true, //允许person[‘name’], 也可以使用 person.name
"expr": true //允许应该出现赋值或函数调用的地方使用表达式
   
2、忽略检查范围 .jshintignore
如果快应用项目根目录下没有 . jshintignore 文件,则启用以下默认的忽略正则。开发者可在快应用项目根目录下新建 . jshintignore文件,配置想要忽略检查的文件/文件夹,正则规则与 .gitignore 相同。.gitignore 正则参考:https://git-scm.com/docs/gitignore
'**/build/**',
'**/node_modules/**'
   
3、实时/全量检查特性
除了通用检查特性外,jshint检查会在 .jshintrc 和 .jshintignore 文件有添加/修改/删除时,触发实时全量检查。

快捷修复        

鼠标放置于错误处,就会出现黄色小灯泡图标,点击小灯泡(Ctrl + Enter),就会弹出提议的快捷修复项。选择其中一项,即可快速修复错误。
4.6 快捷修复.gif

引用/定义查找和跳转        

组件事件点击跳转
光标放置在事件方法引用的位置,按住Ctrl键后单击或者选择右键菜单->转到定义,可以跳转到事件方法定义的位置(script内)。    
4.7.1 事件跳转.gif   
变量定义点击跳转
光标放置在变量引用的位置,按住Ctrl键后单击或者选择右键菜单->转到定义,可以跳转到变量定义的位置(script内)。    
4.7.2 数据绑定跳转.gif   
文件/网页引用点击跳转
在template、script和style里import导入的工程文件和template内的文件源引用,如文件存在,则有下划线显示,提示该文件是一个有效的链接。按住Ctrl键后单击,即可在编辑框中打开文件并跳转到此文件中或在浏览器中打开网站。    
4.7.3 文件跳转1.gif    
4.7.3 文件跳转2.gif    
样式类选择器点击跳转
鼠标放置组件class属性值之间,按住Ctrl键并单击,即可跳转到类选择器声明所在处。    
4.7.4 样式类跳转.gif   

悬浮提示        

将鼠标光标停留在快应用组件、接口或样式上,会弹出介绍说明。如果有Reference链接,点击即可跳转到快应用在线规范网页。
● 组件/样式
4.8.1 组件样式悬浮提示.gif
● 接口/对象
包括:快应用接口、生命周期、数据对象、Broadcast消息通道、全局接口。
4.8.2 接口悬浮提示.gif
● manifest
4.8.3 manifest悬浮提示.gif

源码格式化        

按快捷键“Alt+Shit+F”格式化源码,支持格式化js、ux和json文件。
4.9 格式化.gif

拖拽组件编程        

IDE当前已支持6个常用基础组件,用户拖拽组件图标到IDE代码编辑区UX文件的<template></template>标签中,能自动生成对应组件代码(在非卡片模版工程中才展示组件库面板)。具体操作如下:
1、将组件拖动至编辑器打开的ux文件中,通过移动鼠标可以上下滑动选中代码行放置组件。组件仅限于拖动至ux文件的<template></template>标签中,并且,提示了可插入信息才能插入。
2、拖拽编码完成后的变更:
a)通过import引入此组件;
b)调用此组件至拖动选中的代码行中;
c)写入组件文件夹。
拖拽组件编程.gif
Npm
1、点击“启动NPM库”,IDE会自动向项目中添加fa-toolkit以及package.json。
2、手动向package.json中添加项目所需依赖后,点击“安装依赖”,项目可通过fa-toolkit实现依赖下载,减少华为快应用IDE的消耗。
npm.gif
Hap
1、点击启用联盟工具。
2、安装依赖。
安装依赖.png
3、安装联盟开发工具。
点击安装,如果没有连接手机会提示未连接手机。手机连接后,如果手机上已存在联盟调试器且版本最新,提示“无可用的更新”。手机上调试器版本低或者不存在调试器,提示安装。
4、启动HTTP调试服务器。
将启动一个HTTP Server,提供devtools页面的请求,PC机与手机调试器交互的功能启动成功后,终端会输出一个二维码(PC机的服务器地址),或者开发者也可以通过浏览器访问服务器主页地址查看该二维码,如:http://localhost:12306;
5、自动编译项目。
启动文件监视器,每次修改工程文件时,会自动编译,并在手机端刷新。
6、释放资源(释放npm run watch,npm run server等服务)。
7、生成开发rpk包。
编译后的工程目录在/build;生成的应用路径为/dist/.rpk。
8、打包正式版本。
发布程序包前需要增加release签名。

hap.gif

调试设备

本地真机        

USB连接
环境准备
1、请确保手机已经通过USB连接电脑,并打开“开发者模式”。具体操作请参照“华为手机如何打开开发者选项”处理。
2、请确认adb与手机连接成功。
1)打开终端Terminal,将目录切换至IDE目录 {installDir}/resource/app/extensions/deveco-debug/lib/toolkit。
2)执行 adb devices 命令。
● 若 List of devices attached 下出现手机信息并且以device结尾,则说明adb已监控到手机。
● 若List of devices attached 无信息输出,手机编号后结尾为offline,则表示adb没有与手机连接成功,此时进行调试、预览、inspect均会提示无法找到手机的错误。建议重启手机或者撤销USB的授权后重新插入手机。
设备接入
确保设备USB已连接成功,启动IDE即可自动发现设备,授权后即可显示投屏,并检测引擎给出安装/更新提示。
USB连接的设备检测安装引擎.gif
局域网连接
环境准备
1、保证PC和手机处在同一局域网,如果有必要的话,需要关闭防火墙。
2、开启网络ADB端口(TV设备不需要操作)。
1)打开终端Terminal,将目录切换至IDE目录 {installDir}/resource/app/extensions/deveco-debug/lib/toolkit
2)执行命令:
adb usb
adb tcpip 5555
说明:5555是端口号,可以修改。
命令执行完成,请拔掉数据线,断开PC和手机的连接。
3、查找设备IP地址。
在手机中,选择“设置 > 系统 > 关于手机 > 状态信息”,查看“IP地址”,获取IPV4地址。
查找设备IP地址.png
设备接入
1、启动IDE,点击“可用设备”,在下拉框中选择点击“局域网连接”,进入IP配置界面。
2、配置IP信息。
● 设备IP:配置“环境准备”时,在设备上配置的IP:port
● PC IP:配置“环境准备”时,PC配置的IP

注意    

设备 IP与PC IP请务必保证在同一网段。

3、点击“连接”按钮连接设备。
4、开发者也可以在配置文件手动修改IP地址。
1)点击“文件”菜单,在下拉菜单中选择“首选项 > 设置”,打开配置文件。
2)在配置文件中分别修改“workbench.deveco.adbIP”和“workbench.deveco.pcIP”,重新配置设备IP与PC IP的值。
5、局域网连接的设备断开:在可用设备下拉列表中点击设备后的×即可断开局域网设备连接。
局域网连接.gif

远程真机        

1、点击快应用IDE右上角菜单栏“可用设备”右侧下拉框,点击“远程设备”选项。
2、如果没有登录IDE,会弹出用户登录的Web页面,用户输入已注册的vmall帐号和密码进行登录,然后会跳出授权界面,点击“允许”则登录成功。

注意    

● 无帐号可以点击“注册帐号”进行注册。
● 如果没有进行实名认证,请先进行实名认证。
● IDE登录后可使用远程真机和云测服务。
● 每人每天使用远程真机服务时长为4小时。

3、在弹出的远程真机选择界面会自动刷新出可用设备,用户可以根据Resolution、EMUI Version、Android Version、Series和Areas等类型对真机设备进行过滤,也可以通过中间的搜索框进行搜索。
4、用户选定好一款手机后,鼠标移至对应手机卡片上,会出现悬浮的“RUN”按钮。点击按钮,IDE中会打开远程真机投屏。如果手机投屏中弹出“是否允许USB调试” 对话框,点击确认。
5、远程真机投屏打开后,若引擎有更新会提示更新引擎,确认后可自动获取新版本的引擎安装,安装成功弹出提示后,用户可以使用远程真机进行实时编译、调试(请参考“编译调试”章节。)点击远程真机投屏右侧工具条的“窗口化”按钮,可将真机投屏弹出。
远程真机连接.gif

模拟器        

1、点击IDE右上角的设备下拉框,选择模拟器,弹出模拟器列表。
2、使用前请先安装JDK1.8版本和Android SDK。安装完成后,按照提示配置SDK的路径。配置成功后,进入到模拟器列表界面。
3、点击模拟器列表的新增按钮,按照提示流程完成新建模拟器。
4、模拟器列表里面的Action选项里,分别有运行,编辑,和删除三个按钮,可以对模拟器进行操作。其中编译操作与创建操作类似,删除按钮会弹出确认删除选项,点击确认即可完成删除。点击运行按钮,会运行一个车机模拟器,车机模拟器可以跟IDE连接,进行实时编译,inspect,debug调试等操作。
模拟器.gif

多设备调试        

当接入了多个设备时,在“可用设备”下拉列表中找到想用的设备投屏,即可切换到所选的设备,进行编译调试。

注意    

● 新设备接入时,(若正在执行编译调试)编译调试将立即自动停止,投屏会自动切换到新接入的设备。
● 设备断开时,投屏区域将显示可用设备列表中的第一个设备显示投屏。

多设备调试.gif
快应用运行平台设置
IDE界面新增一个下拉框选项用于配置所连设备的运行平台以及编译预览时的分辨率,默认显示为手机/平板。

运行平台设置        

IDE连上设备后,界面会根据当前设备上的快应用加载器或设备类型所属平台进行切换。当设备上的平台不属于我们所需的平台的时候,我们可以按照自己的实际情况进行切换。切换平台后,会弹出提示安装新的快应用加载器,安装完成后设备上的运行平台就完成了切换。
运行平台设置.gif

分辨率设置        

下拉框选项的最后一项为配置项,点击配置,弹出运行平台配置界面。配置界面可以配置各个平台上运行时所使用的分辨率,另外手机/平板平台还可以设置快应用发布地区。设置完成后,点击应用按钮,写入配置。如果当前设备正在运行或调试项目,将会重启运行或调试。
分辨率设置.gif
编译调试

实时编译        

1、将手机与电脑成功连接,并打开“开发者调试”模式,打开“开发者调试模式”的方法请参见“华为手机如何打开开发者选项”。
2、在菜单栏的配置下拉框选择要编译的文件,点击“实时预览”按钮 ,页面右侧将出现手机预览界面,显示编译文件的效果。
在菜单栏的配置下拉框,更换编译的文件,可以分别预览首页、卡片、页面的效果。
3、修改ux文件内容后,点击“保存”,工具将自动编译,通过日志输出编译结果,右侧手机预览将实时更新,显示修改后的内容。
4、再次点击  按钮,实时预览界面会先关闭,然后重新启动。
5、点击  按钮,结束实时编译,常驻投屏关闭快应用加载器页面。
实时编译.gif
Tips:点击菜单栏“手机”按钮 ,可以对右侧的真机预览界面进行打开、关闭控制。

真机调试        

1、选择调试文件。
2、点击调试开始按钮  开始调试,查看调试服务启动过程中控制台的日志输出。
3、调试进程启动完成,打开DEVTOOL调试面板,点击右下角弹出按钮可将devtool面板单独展示。
4、再次点击调试按钮,关闭调试。右侧常驻投屏关闭快应用加载器页面显示手机界面,日志输出“Debug service has been closed”。
5、点击停止按钮或停止调试按钮,调试关闭。
真机调试.gif

Inspect        

1、选择运行文件,点击inspect按钮 ,编译打包并会在输出窗口打印出日志。
2、检查全部通过后,引擎启动,在输出窗口打印出启动日志,快应用IDE弹出窗口展示手机上App画面。开发者还可以通过右侧的开发者工具进行查看元素、控制台输出、网络抓包等操作。
3、点击停止按钮或者Inspect按钮,Inspector窗口关闭。
inspect.gif
签名

签名目录        

|—— sign
|        |—— debug        调试签名文件目录
|                |—— certificate.pem        证书文件
|                |—— private.pem        私钥文件
|        |—— release        正式签名文件目录
|                |—— certificate.pem        证书文件
|                |—— private.pem        私钥文件

签名管理        

运行菜单“工具”下的“生成证书”或者点击菜单栏的指纹按钮(快捷键Ctrl+shift+C),即可打开签名管理向导。
● 用于对rpk包签名的正式签名文件不存在:引导用户创建签名文件。
● 存在用于对rpk包签名的正式签名文件:展示签名指纹和签名的相关信息。
签名管理.gif

签名配置        

1、点击卡片列表下拉框配置按钮,进入签名设置页面。
2、根据需要选择不同的签名类型,默认是debug。
签名配置.gif

打包正式版本流程加强        

若证书不存在,询问用户是否创建新证书,也可以导入已有证书。
打包

debug包        

点击菜单“构建”,点击下拉菜单”构建快应用”,打包debug版本rpk。在“输出”窗口可以查看构建结果。
构建成功,则在“输出”窗口打印COMPILE RESULT:SUCCESS,构建包在工程下的dist文件夹中。
debug包.png
构建失败,则在“输出”窗口以红色文字打印COMPILE RESULT:FAIL以及错误个数和错误描述。
构建失败.png
在“问题”窗口查看error和warning具体所在行。
问题窗口.png

release包        

点击菜单“构建”,点击下拉菜单”打包正式版本”,打包release版本rpk。

注意    

● debug工程自动创建的debug签名是公开签名,无法保证安全性。请勿使用在正式版本上。
● 打包正式版本,必须使用正式签名。

● 如果没有签名证书,则会先创建签名证书。
● 如果有签名证书,点击打包正式版本,将出现签名界面,可进行编辑version name和version number。
构建release包.gif
云测试(兼容性测试)

提交云测试        

帐号已登录,点击测试服务按钮 测试服务按钮.png,在弹出的云测试记录界面点击加号,会自动打包生成正式版本rpk并提交测试。界面提示创建成功后,任务列表刷新显示刚创建的任务信息。
创建云测试任务.gif

注意    

提交测试后,列表会显示刚提交的任务,如果没有显示,请点击“刷新”按钮。

查看云测试报告        

查看云测试报告.gif
兼容性测试会执行10-20分钟,具体根据实际手机的空闲情况来定。
测试会对9大问题进行检测:
● 崩溃:运行过程中出现类似“xx应用 已停止运行”的弹窗
● 无响应:运行过程中出现“xx应用 无响应”的弹窗
● 闪退:运行过程中某个操作导致非正常退出到桌面
● 运行错误:运行过程中某个操作产生了不符合预期的结果,可能是应用界面或后台逻辑不符合预期
● UI异常:页面控件显示不完全
● 无法回退:应用进入某个页面后无法退出该页面且无法退出应用(只能强行杀进程关闭)
● 黑白屏:页面存在全黑屏或全白屏
● js异常:java script 运行时出现异常
● 华为帐号登录: 支持华为帐号登录
一键发布(beta)
1、点击快应用IDE菜单栏的“应用发布 -> 一键发布”(Windows可以使用快捷键Ctrl+Shift+D打开,Mac可以使用Shift+command+D打开)。
一键发布.png
2、填入对应快应用的appid,以及对应的客户端ID和密钥,然后点击授权获取快应用的信息。如果还没有appid可以点击“创建新应用”跳转到开发者联盟新建。
appid获取方法:
一键发布2.png
客户端ID、密钥获取方法:
没有显示API客户端时,可以点击“创建API客户端”,点击“操作”下“复制”按钮进行复制。
一键发布3.png
3、上传应用图标、rpk包,填写应用描述、一句话简介等带有红色※的必填项,点击提交保存信息。如果漏填了必填项就提交,IDE会依次自动检查,并在IDE右下角给出提示。

注意    

● 在上传推荐截图的时候,要按照图片的分辨率依次上传,不可以跳过前面的图片更新。
● 付费项选择付费更新提交时要先开通付费服务、商户服务,并进行实名认证。
   开通付费服务、商户服务方法见:https://developer.huawei.com/consumer/cn/devservice/doc/2050105。

4、提交后再点击旁边的“发布应用”按钮,即可选择发布升级时间,填写渠道ID、提审发布备注信息,进行提交审核发布。

注意    

提审发布备注可不填,但如若填写,必须输入10-300个字符。

版本更新及发行说明
每次版本更新之后,首次打开新版的IDE,版本发行说明都会自动弹出,介绍新版本的新功能或新特性。
如忘记了怎么使用版本新特性,也可通过打开“帮助” → 点击“发行说明”,弹出最新的发行说明。在每次发行说明的最下方,还有一个查看更多版本信息的在线链接,点击之后会通过浏览器打开页面,显示每一期版本的新特性。
版本更新说明.gif
常用快捷键
作用Windows 快捷键Mac OS 快捷键
新建工程Ctrl + Shift + N⇧ + ⌘ + N
保存文件Ctrl + S⌘ + S
保存所有文件Ctrl +K S⌥ + ⌘ + S
另存为Ctrl + Shift + S⇧ + ⌘ + S
关闭当前文件Ctrl + W⌘ + W
撤销Ctrl + Z⌘ + Z
反撤销Ctrl + Y⇧ + ⌘ + Z
复制Ctrl + C⌘ + C
复制路径Shift + Alt + C⌥ + ⌘ + C
剪切Ctrl + X⌘ + X
粘贴Ctrl + V⌘ + V
重命名f2Enter
删除右侧字符Ctrl + Delete⌥ + Fn + Delete
删除左侧字符Ctrl + Backspace⌥ + Delete
删除行Ctrl + Shift + K⇧ + ⌘ + K
删除行注释Ctrl + K   Ctrl + U⌘ + K  ⌘ + U
代码左缩进Ctrl + [⌘ + [
代码右缩进Ctrl + ]⌘ + ]
格式化代码Shift + Alt + F⇧ + ⌥ + F
切换自动换行Alt + Z⌥+ Z
代码上移一行Alt + ⬆⌥ + ⬆
代码下移一行Alt + ⬇⌥ + ⬇
复制并向上粘贴Shift + Alt + ⬆⇧ + ⌥ + ⬆
复制并向下粘贴Shift + Alt + ⬇⇧ + ⌥ + ⬇
转到文件Ctrl + P⌘ + P
查找Ctrl + F⌘ + F
在文件中查找(搜索)Ctrl + Shift + F⇧ + ⌘ + F
替换Ctrl + H⌥ + ⌘ + F
在文件中替换Ctrl + Shift + H⇧ + ⌘ + H
托管Ctrl + Shift + G^ + ⌘ + G
关闭/打开资源管理器Ctrl + B⌘ + B
代码提示Alt + / + /
快捷修复Alt + Enter + Enter
输出Ctrl + Shift + U⇧ + ⌘ + U
问题Ctrl + Shift + M⇧ + ⌘ + M
调试控制台Ctrl + Shift + Y⇧ + ⌘ + Y
调试F5F5
开始执行 Ctrl + F5 ^ + F5
inspect运行Ctrl + F6⌘ + F6
运行HAG DemoCtrl + F7⌘ + F7
构建Ctrl + F8⌘ + F8
打包Ctrl + F9⌘ + F9
清除构建Ctrl + F10⌘ + F10
证书指纹Ctrl + Shift + C⇧ + ⌘ + C
测试Ctrl + Shift + T⇧ + ⌘ + T
发布Ctrl + Shift + P⇧ + ⌘ + P
:更多快捷键方式,请前往QuickApp IDE“首选项 > 键盘快捷方式”进行查看和编辑。