目录
目录
概述
华为快应用IDE是一款针对华为快应用的集成开发环境,它提供了华为快应用设计、开发、调试、测试、构建、打包发布等能力,以DevOps理念帮助你快速的开发华为快应用。
界面概览

主界面        

1、菜单栏
2、代码编辑器
3、Panel
4、资源管理器
5、实时预览框
6、组件库

说明    

可在快应用IDE首选项中更改颜色主题。

inspect界面        

debug界面        

创建项目
1、打开IDE,点击“文件”菜单,在下拉菜单中选择“新建项目”(或点击欢迎使用界面的“新建项目”),开启新建项目的窗口。
2、填入“项目名称”和“rpk包名”,在“工作空间”选择代码存放的硬盘路径,在“模板”选项中选择项目模板(窗口右侧可以看到已选择模板的概览),点击”创建”按钮,完成新建项目。

说明    

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

3.1新建工程.gif
工程初始化成功后,会在工程目录下生成标准化结构项目:
|—— .vscode        配置文件目录
|        |—— launch.json        配置文件
|—— sign        rpk包签名模块
|        |—— debug        调试签名文件目录,开发者可以自行替换签名文件
|                |—— certificate.pem        证书文件
|                |—— private.pem        私钥文件
|—— src项目源文件
|        |—— Common        公用的资源文件和组件文件
|                |—— logo.png        manifest.json中配置的icon
|        |—— Hello        页面目录
|                |—— hello.ux        页面文件,文件名不必与父文件夹相同
|        |—— app.ux        APP文件(编译自动修改,请勿改动)
|        |—— manifest.json        项目配置文件(如:应用描述、接口申明、页面路由等)
代码编辑

新建文件/新建文件夹        

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

语法高亮        

支持华为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>模块中用户自定义的方法。
   
4.3.1.2 1 组件属性值事件补全.gif    
●  Class属性:当前源文件<style>模块中自定义的样式。    
4.3.1.2 2 组件属性值类补全.gif    
●  枚举类型属性:属性所支持的值列表。    
4.3.1.2 3 组件属性值枚举补全.gif   
●  布尔类型属性:true和false。    
4.3.1.2 4 组件属性值布尔补全.gif   
●  字符串类型属性。    
4.3.1.2 5 组件属性补全.gif   
3、组件style属性值(内联样式):在style属性后输入“=” 后,即可触发样式智能提示,提示项为当前组件所支持的所有样式。    
4.3.1.3 1 内联样式补签.gif   
在样式key后输入“:”时,即可触发样式值的智能提示。    
4.3.1.3 2 内联样式值补全.gif    

注意        

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

script
1、系统接口:导入快应用所支持的模块后,当引用模块接口时,即可触发模块所支持的接口/属性的代码智能提示,选择其中一项,即可补全接口代码。    
4.3.2.1 系统接口补全.gif   
2、组件方法:使用this.$element(id)来获取组件dom对象,即可触发组件方法的的智能提示。    
4.3.2.2 组件方法补全.gif   
3、this对象:支持this的对象和方法的智能提示和补全。    
4.3.2.3 1 this方法补全.gif   4.3.2.3 2 this方法补全1.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

静态代码检查        

快应用项目打开时,会触发项目源码的全量代码检查,所有文件的检查结果显示在 PROBLEMS 面板。
如果一个源码文件有添加和修改,会触发实时检查,只更新该文件的检查结果。如果源码文件被删除,则实时清理被删除文件的检查结果。
●  定位提示
严重类错误以红色波浪线提示,警告类错误以绿色波浪线提示。
●  错误信息
鼠标悬浮于错误处,可提示具体错误信息和修正意见。“问题”面板显示所有打开文件的错误(所在文件、错误数量、错误信息和行列号)。
●  错误跳转
在“问题”面板,选中错误双击,可打开错误所在文件,鼠标停留在错误位置。
4.5.1 代码检查.gif
●  IDE检查项目
文件检查项
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、用户使用IDE编写快应用项目时,可以根据需求选择相应的适用组件。
2、将组件拖动至编辑器打开的ux文件中,通过移动鼠标可以上下滑动选中代码行放置组件,组件仅限于拖动至ux文件的<template></template>标签中。
3、拖拽编码完成后的变更:
1)通过import引入此组件;
2)调用此组件至拖动选中的代码行中;
3)写入组件文件夹。
4.10 拖拽自定义组件.gif
快应用IDE检查更新
1、打开快应用IDE工具后,自动检测与服务器匹配,给出相应提示
a、有新版本:存在更高版本,是否更新
b、最新版本:当前没有可用更新
2、手动点击帮助 > 检查更新(条件相同,提示相同)
手机引擎安装与更新
使用IDE的调试、实时预览、Inspect功能时需要连接手机。在启动这部分功能后,IDE首先会检查是否连接手机,然后检查是否安装引擎或者升级引擎。
1、快应用IDE检查手机是否连接成功,如果发现没有连接手机,将给出提示,在预览界面可通过链接跳转至连接方法说明。
2、手机连接成功后,给出提示后,将检查手机是否已安装引擎,引擎是否为最新版本,如果不是则给出提示,点击“安装”即安装最新版本的引擎。
3、在主菜单选择“帮助 > 检查引擎更新”可进行引擎的更新。
项目导入升级
快应用工程导入到IDE时会自动升级。
● 华为快应用IDE创建的工程,存在package.json,引入了第三方npm依赖库,未引用hap-toolkit,本地依赖库依赖不全。项目导入后升级步骤如下(fa升级流程),项目的编译构建可以通过项目中的依赖fa-toolkit实现,减少华为快应用IDE的消耗:
1、Package.json增加依赖项fa-toolkit,新增两个scripts命令;
2、执行NPM install;
● 联盟快应用开发工具创建的工程,存在package.json,有hap-toolkit工具依赖。项目导入后升级步骤如下(hap工程升级流程),支持联盟快应用项目:
1、Package.json增加依赖项,未存在添加,已存在比对版本,使用高版本:
a)Fa-toolkit tgz压缩包,指向IDE工程内部文件。
b)Hap-toolkit 为0.1.0,小于0.1.0版本自动升级。
c)Hap依赖项:
"hap-toolkit": "0.1.0",
"esprima": "^4.0.1",
"babel-loader": "^8.0.4"
   
2、Package.json增加Script项:
"server": "hap server",
"postinstall": "hap postinstall",
"debug": "hap debug",
"build": "hap build",
"release": "hap release",
"watch": "hap watch"
   
3、执行npm install,在线安装依赖。
● 工程目录中存在.mix文件或依赖mix-toolkit,提示用户升级。
点击升级,src目录下所有.mix文件修改后缀为.ux,并执行hap工程升级流程。若引用依赖mix-toolkit,替换为hap-toolkit
Npm
点击“启动NPM库”,项目按照fa升级流程流程升级,项目的编译构建可以通过项目中的依赖fa-toolkit实现,减少华为快应用IDE的消耗。
项目存在package.json文件,可以点击“安装依赖”。
Hap
1、点击启用联盟工具,项目(工程中没有package.json或者没有hap的依赖)按照hap升级流程升级,兼容联盟快应用项目:
2、安装依赖。
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签名。
连接设备

环境准备        

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的授权后重新插入手机。
局域网连接
1、保证PC和手机处在同一局域网,如果有必要的话,需要关闭防火墙。
2、开启网络ADB端口(TV设备不需要操作)。
1)打开终端Terminal,将目录切换至IDE目录 {installDir}/resource/app/extensions/deveco-debug/lib/toolkit
2)执行命令:
adb usb
adb tcpip 5555
PS:5555是端口号,可以修改
命令执行完成,请拔掉数据线,断开PC和手机的连接。
3、查找设备IP地址。
在手机中,选择“设置 > 系统 > 关于手机 > 状态信息”,查看“IP地址”,获取IPV4地址。

连接设备        

USB连接
确保设备USB已连接成功,启动IDE即可自动发现设备。
局域网连接
1、启动IDE,IDE未连接设备时,“预览”区域如图所示。
2、点击“局域网连接”,进入IP配置界面。
3、配置IP信息。
● 设备IP:配置“环境准备”时,在设备上配置的IP
● PC IP:配置“环境准备”时,PC配置的IP

注意    

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

4、点击“连接”按钮连接TV设备。
5、开发者也可以在配置文件手动修改IP地址。
1)点击“文件”菜单,在下拉菜单中选择“首选项 > 设置”,打开配置文件。
2)在配置文件中分别修改“workbench.deveco.adbIP”和“workbench.deveco.pcIP”,重新配置TV IP与PC IP的值。
真机预览
1、将手机与电脑成功连接,并打开“开发者调试”模式,打开“开发者模式”的方法请参见“华为手机如何打开开发者选项”。
2、在菜单栏的配置下拉框选择要编译的文件,点击“实时预览”按钮 ,页面右侧将出现手机预览界面,显示编译文件的效果。
在菜单栏的配置下拉框,更换编译的文件,可以分别预览rpk、卡片、页面的效果。
3、修改ux文件内容后,点击“保存”,工具将自动编译,通过日志输出编译结果,右侧手机预览将实时更新,显示修改后的内容。
4、点击刷新预览按钮可以刷新预览界面。
5、再次点击“实时预览”按钮,实时预览界面会先关闭,然后重新启动。
6、点击停止按钮,结束实时预览,手机预览界面关闭。
Tips:点击菜单栏“手机”按钮,可以对右侧的真机预览界面进行打开、关闭控制。
真机调试
1、选择调试文件。
2、点击调试开始按钮  开始调试。
3、查看调试服务启动过程中控制台的日志输出。
4、调试进程启动完成,启动调试窗口。
● 再次点击调试按钮,先关闭之前的调试窗口,然后重新启动
● 点击停止按钮,调试窗口关闭。
Inspect
1、选择需要运行的文件。
方式一:选择运行文件,点击inspect按钮
方式二:在主菜单里点击“构建 -> 手机运行快应用”。
2、编译打包并在输出窗口打印出打包日志。
3、检查全部通过后,引擎启动,在输出窗口打印出启动日志,快应用IDE弹出窗口展示手机上App画面,开发者还可以通过右侧的开发者工具查看元素。
4、元素审查。
5、控制台输出。
6、网络抓包。
7、点击停止按钮,Inspector窗口关闭。
远程真机
1、点击快应用IDE菜单栏中“设备”按钮,打开真机页面。
远程真机1.png
2、点击“远程”按钮,切换至远程真机页面。在弹出的WEB页面,输入已注册的vmall账号和密码进行登录,然后会跳出授权界面,点击“允许”则登录成功,可以回到快应用IDE界面进行远程真机调试。

注意    

● 云测登录后,远程真机不用再次登录。
● 每人每天使用远程真机时长为4小时。
● 无账号可以点击“注册账号”进行注册。
● 登录后如果没有远程真机列表,则切换后重试。
● 如果没有进行实名认证,请先进行实名认证。

远程真机2.png
远程真机3.png
远程真机4.png
远程真机5.png
3、在列表中选择一台可使用的手机,点击手机右侧的“使用”按钮以建立连接。
远程真机6.png
4、弹出手机界面后,点击手机内USB调试确认框,点击后右下角出现安装FastApp引擎的弹框,点击安装。(如不安装FastApp,则无法使用调试和实时预览功能。)
远程真机7.png
5、安装完成后(即手机内出现快应用加载器图标后),可使用调试与实时预览功能。(请参考“真机预览”和“真机调试”章节内容,使用方法和本地真机方式一致。)
远程真机8.png
查看应用日志
● 场景1:IDE启动时已经连接手机,IDE会自动启动读取快应用日志的进程, 请查看“OUTPUT”的“app console”面板。
● 场景2:IDE启动后连接手机,或者手机断连后再次接入手机,快应用日志将自动启动。
● 场景3:“app console”日志进程启动后,启动调试,快应用日志不会在“app console”输出,而是在调试窗口的开发者工具console终端输出。
页面

新建页面        

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

新增页面        

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

删除页面        

选中需要删除的页面,点击删除按钮,确认删除。
15.3 运行配置删除页面.gif

添加页面参数        

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

修改页面参数        

编辑页面参数值,完成后点击保存。

说明    

目前支持在新增配置页面和配置页面参数时在launch.json中配置页面参数。

15.5 运行配置修改页面参数.gif

删除页面参数        

选中页面,点击参数的删除按钮,确认删除。
15.6 运行配置删除页面参数.gif

运行页面        

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

调试页面        

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

debug包        

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

release包        

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

注意    

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

● 如果没有签名证书,则会先创建签名证书。
● 如果有签名证书,点击打包正式版本,将出现签名界面,可进行编辑version name和version number。
构建日志:
rpk包生成后将弹出rpk所在目录。
签名

签名目录        

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

签名管理        

运行菜单“构建”下的“生成证书”,即可打开签名管理向导。
● 用于对rpk包签名的正式签名文件不存在:引导用户创建签名文件。
● 存在用于对rpk包签名的正式签名文件:展示签名指纹和签名的相关信息。
17.2 创建证书.gif

签名配置        

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

打包正式版本流程加强        

若证书不存在,询问用户是否创建新证书,也可以导入已有证书。
17.4 打包正式版本流程加强.gif
卡片

新建卡片        

1、选择新建卡片入口。
● 在左侧资源管理器中,在src文件夹上右键选择“新建卡片”。
● 在菜单栏“文件”下选择“新建卡片”,打开新建卡片窗口。
● 在左侧资源管理器,点击“+”号选择“新建卡片”。
2、选择卡片类型,填写相关信息。
在“新建卡片”对话框,填写卡片名称、ID、卡片文件名等参数,选中一个卡片选项(点击“高级选项”可展开填写高级选项参数),填写完毕后点击“确定”。
3、新建卡片成功后,可在manifest.json和launch.json文件中看到widgets的相关配置。
为提升代码兼容性,创建卡片时,创建页面文件统一使用.ux后缀;打开工程,自动将原有卡片 wux 后缀文件修改为 ux 后缀。
18.1 新建卡片.gif

注意    

已在manifest.json中配置过的路径,不可作为新建卡片的文件夹路径。

例如下图中manifest.json已经配置了"path":"/c1",则不能选择“src/c1/”文件夹新建卡片,需要更改文件夹或者新建文件夹,如更改为"src/c2"/或"src/c1/d2/"。

添加卡片参数        

1、点击上方菜单栏下拉选项“配置”,进入卡片列表页面。
2、进入卡片列表,选择对应卡片,设置签名类型以及卡片的宽度,点击卡片名称右侧的添加按钮进行参数配置。
3、添加卡片参数,完成后保存。
18.2 添加卡片参数.gif

编辑卡片参数        

修改卡片参数信息,完成后点击保存。

说明    

目前支持在新建卡片页和manifest.json中配置卡片参数。

18.3 编辑卡片参数.gif

删除卡片参数        

点击卡片参数的删除按钮,点击确认删除参数。
18.4 删除卡片参数.gif

运行卡片        

方式一:在菜单栏下拉选项选择需要运行的卡片,菜单选择“构建 > 手机运行快应用”。
方式二:选择运行的卡片,点击  既可在手机上运行卡片。
18.5 运行卡片.gif

调试卡片        

1、点击菜单栏中的下拉选项,选择要调试的卡片。
2、点击调试按钮 ,即可启动调试服务进入debug界面。
18.6 调试卡片.gif
微信小程序转换快应用(beta)
提供将微信小程序转换为快应用的快捷工具。
1、菜单选择“文件 -> 导入微信小程序(beta)”。
2、选择微信小程序项目路径。
3、点击“导入微信小程序”,开始导入。
4、导入完成,查看转换日志,开始快应用开发。
19 小程序转换.gif
测试
测试会对9大问题进行检测:
● 崩溃:运行过程中出现类似“xx应用 已停止运行”的弹窗
● 无响应:运行过程中出现“xx应用 无响应”的弹窗
● 闪退:运行过程中某个操作导致非正常退出到桌面
● 运行错误:运行过程中某个操作产生了不符合预期的结果,可能是应用界面或后台逻辑不符合预期
● UI异常:页面控件显示不完全
● 无法回退:应用进入某个页面后无法退出该页面且无法退出应用(只能强行杀进程关闭)
● 黑白屏:页面存在全黑屏或全白屏
● js异常:java script 运行时出现异常
● 华为帐号登录: 支持华为帐号登录
1、菜单选择“文件 -> 新建项目”,填写项目信息,选择模板。
2、菜单选择“构建 -> 构建快应用”,生成rpk包。
3、点击菜单栏中的测试服务按钮 ,在弹出页面输入已注册的vmall帐号和密码进行登录,在弹出的授权页面点击“允许”则登录成功,此时可以返回快应用IDE界面创建测试任务。

注意    

1、如果没有Vmall帐号,请点击“注册账号”进行注册。
2、登录后如果没有测试服务的弹出框,请再次点击测试服务按钮。
3、如果没有进行实名认证 ,请先进行实名认证。

4、点击“+”提交测试任务,界面弹出创建rpk任务的确认框,点击“确定”。
5、界面提示 “run release”,工具进行打包正式版本rpk,打包完成后创建任务,界面提示创建成功后,任务列表刷新显示刚创建的任务信息。

注意    

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

5、等待10-20分钟后,待测试结束,可以点击报告按钮查看测试报告。
测试结束后,测试状态和测试报告按钮如下图所示。测试报告在测试中即可以点击查看。
6、查看测试报告详情。
文件夹新增设置子包
21 文件夹新增设置子包.gif
查看版本发行说明
每次版本更新之后,首次打开新版的IDE,版本发行说明都会自动弹出,介绍新版本的新功能或新特性。
忘记了版本新特性怎么使用,也可以通过打开帮助 → 点击发行说明弹出最新的发行说明。在每次发行说明的最下方,还有一个查看更多版本信息的在线链接,点击之后会通过浏览器打开页面,显示每一期版本的新特性。
22 查看版本发行说明.gif
支付签名校验
1、打开IDE,菜单选择“工具 > 支付签名校验”。
2、将传入的订单参数拷贝至“订单数据”,将申请支付服务时获取的“支付私钥”拷贝至“支付私钥”,点击“生成签名”。
通过查看“数据校验失败”的原因,根据错误信息定位问题。例如参数格式不正确、缺少必传参数、没有将签名信息正确赋值给sign等。
常用快捷键
作用Windows 快捷键Mac OS 快捷键
新建工程Ctrl + shift + N⇧ + ⌘ + N
保存文件Ctrl + S⌘ + S
保存所有文件Ctrl +K S⌥+ ⌘ + F
另存为Ctrl + shift + S⇧ + ⌘+S
关闭当前文件Ctrl + W⌘ + W
撤销Ctrl + Z⌘ + Z
反撤销Ctrl + Y⌘ + Y
复制Ctrl + C⌘ + C
复制路径Shift + Alt + C⌥ + ⌘ + C
剪切Ctrl + X⌘ + X
粘贴Ctrl + V⌘ + V
重命名f2Enter
删除右侧字符Ctrl + Delete⌥ + Fn + Delete
删除左侧字符Ctrl + Backspace⌥ + Delet
删除行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 + E⌘ + E
查找Ctrl + F⌘ + F
在文件中查找(搜索)Ctrl + Shift + F⇧ + ⌘ + F
替换Ctrl + H⌘ + F
在文件中替换Ctrl + Shift + H⇧ + ⌘ + H
托管Ctrl + Shift + G⇧ + ⌘ + G
关闭/打开资源管理器Ctrl + B⌘ + B
代码提示Alt + /Alt + /
输出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
:更多快捷键方式,请前往华为快应用IDE“首选项 > 键盘快捷方式”进行查看和编辑。