3. 编辑器
因为快应用支持的css样式局限，在开发过程中，使用我们普通的编辑器，不容易看到错误提示。推荐一款编辑器：华为快应用IDE。下图为该编辑器的效果，如果遇到不支持的样式，会在该样式下显示红色波浪线，鼠标移到样式上，会显示警告原因和写法建议。
目前也出了官方IDE，打包什么的会比较方便，开发者可根据个人需求选择相应编辑器。
三.项目文件
1. 目录结构
安装toolkit工具后，可通过全局hap命令创建一个项目模板，如下所示:
命令执行后，会在当前目录下创建文件夹，作为项目根目录 项目根目录主要结构如下：
├── sign rpk包签名模块
└── debug 调试环境
└── certificate.pem 证书文件
└── private.pem 私钥文件
├── src
├── Common 公用的资源和组件文件
└──logo.png 应用图标
├── Demo 页面目录
└── index.ux 页面文件，可自定义页面名称
├── app.ux APP文件，可引入公共脚本，暴露公共数据和方法等
└── manifest.json 项目配置文件，配置应用图标、页面路由等
└── package.json 定义项目需要的各种模块及配置信息
目录的简要说明如下：
src：项目源文件夹
sign：签名模块（当前仅有debug签名，如果内测上线，请添加release文件夹，增加线上签名）
2. 配置文件配置
manifest.json为快应用项目配置文件，根据一个示例（官方示例）简单介绍下相关配置
{
"package": "com.company.unit", 应用包名
"name": "appName", 应用名称
"icon": "/Common/icon.png", 应用图标
"versionName": "1.0", 应用版本名称
"versionCode": 1, 应用版本号
"minPlatformVersion": 1000, 支持的最小平台版本号
"features": [{ "name": "system.network" }], 接口列表
"permissions": [{ "origin": "*" }],
"config": { 统配置信息
"logLevel": "off"
},
"router": { 路由信息
"entry": "Hello",
"pages": {
"Hello": {
"component": "hello",
"path": "/",
"filter": {
view": {
"uri": "https?://.*"
}
}
}
}
},
"display": { UI 显示相关配置
"backgroundColor": "#ffffff",
"fullScreen": false,
"titleBar": true,
"titleBarBackgroundColor": "#000000",
"titleBarTextColor": "#fffff",
"pages": {
"Hello": {
"backgroundColor": "#eeeeee",
"fullScreen": true,
"titleBarBackgroundColor": "#0000ff",
"titleBarText": "Hello"
}
}
}
}
四.调试
1.WIFI 调试
如果手机与 PC 在同一局域网，可以使用 WIFI 调试，步骤如下：
（1）在项目根目录下执行如下命令，启动 HTTP 调试服务器
npm run server
服务启动成功后，命令行终端和调试服务器主页可以看到提供扫描的二维码
（2）手机快应用调试器中关闭开启USB调试
手机快应用调试器点击扫码安装按钮，扫码安装待调试的 rpk 文件
手机快应用调试器中点击开始调试按钮，开始调试
2.USB 调试
USB 调试模式不需要手机与 PC 在同一局域网，需要在调试过程中手机通过 USB 连接 PC，步骤如下：
（1）在项目根目录下执行如下命令，启动 HTTP 调试服务器：
npm runserver
（2）手机开启设置 --> 开发者选项--> USB调试
（3）手机快应用调试器选中开启USB调试，手机USB 连接到 PC
（4）手机快应用调试器中点击在线更新按钮，安装待调试的 rpk 文件
（5）手机快应用调试器中点击开始调试按钮，开始调试
3.实时预览更新效果
需要同时打开两个终端，一个执行npm run watch，另一个启动服务npm run server，默认端口为12306。
也可以自定义端口，例如：npm run server -- --port 8080。
五.开发
现在可以开始愉快的踩坑之路了~
1.template篇
1）标签使用受限，其中，div等标签中不能直接输入文本，文本必须写在span或text标签中
2）如果组件的props使用驼峰定义，那么在传递数据时要使用-连接。eg：testProp，使用时，要写成test-prop，否则无法传值
3）tabs组件不允许嵌套使用，若需两级tab，需自己编写
4）list组件中，list-item组件需要设置type属性，需要注意的是，如果是不同的item，要设置不同的type属性，否则会出现DOM结构错乱
官方文档中也提到了要慎用if指令
2.style篇
1）快应用的单位是px，该单位已实现各种屏幕自适应，比如默认设计稿宽度750px，则此时样式1px=设计稿1px
2）最不方便之处，就是css样式支持的太有限，下面列出较常用典型的几点，更多可自行查阅官方文档：
（1）由于快应用默认为flex布局，而flex的默认值方向为水平，所以，div套div布局，其中的子元素都是水平排列的，如需垂直排列，须自行另外设置
eg：除了颜色没写任何样式，结构和显示效果请看图
（2）颜色：如果要写16进制色值的话，遇到可简写的色值需要写成完整的6位，不建议3位简写，比如要写成： #999999;不能写成：#999
（3）单边框:光写border-top的简写不起作用，但是可以分开写:border-style、border-top-color、border-top-width
（4）position仅支持none|fixed两个值，且父容器为、时不生效
（5）display仅支持flex|none两个值
3.script篇
1）数据请求方法，成功时返回的不是json对象，需要用JSON.parse转换一下，否则取不出值
2）input输入框使用时，不能直接取value，需要通过event.text获取
3）this.key= value / this.$set(‘key’, value)区别
eg：在初始的data中，只设置了info为空对象，点击按钮时，设置info.aa
如下图两种写法：
（1） 直接写this.info.aa，页面上没有变化，仍然是undefined
（2） 写成this.$set(‘info.aa’，‘aaa’)，页面上显示出了aaa
其实也就是vue官方文档的那句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。所以需要使用$set方法去添加属性
4）picker组件，改变选项值做操作的话，需要重新更新数组才能触发视图更新，例如：使用concat方法
5）写个选中状态功能，数据层级太深的话，不起作用
6）全局方法，写在app.ux中，其他地方调用时，用this.$app.方法名 就可以了
7）比如我们需要实现一些dom操作，可以使用this.$element(id名称)方法，注意仅可以通过id获取DOM，且获取到的元素，跟我们传统的DOM不一样。例如，想要动态加样式，不能通过这种方式
8）调用父组件的某个方法，可通过this.$parent().方法名 调用
9）页面之间传递参数，用官方给的方法就挺好用
10）通常CMD引入模块（import）时，多处引用，模块只初始化一次，快应用中会多次初始化，导致多处引用同一个模块但指针指向不同对象
六.打包及发布
1.编译工具
1）编译打包工程
在工程的根目录下运行
npm runbuild
编译后的工程目录在/build
生成的应用路径为/dist/.rpk
2）增加 release 签名
通过 openssl 命令等工具生成签名文件private.pem、certificate.pem，例如：
opensslreq -newkey rsa:2048 -nodes -keyout private.pem -x509 -days 3650 -outcertificate.pem
在工程的 sign 目录下创建 release 目录，将私钥文件 private.pem 和证书文件 certificate.pem 拷贝进去
3）发布程序包
发布程序包前需要增加release签名，然后在工程的根目录下运行
npm runrelease
生成的应用路径为/dist/.release.rpk
如果需要临时使用 debug 签名，可以使用
npm runrelease -- --debug
2.IDE发布
1）生成证书。点击快应用面板的【生成证书】按钮, 按提示输入相关信息
2）生成发布用 RPK。点击【发布 rpk包】按钮, 生成成功的话会弹出对应的文件夹
