输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档开发者中心
我的
话题首页
快应用开发资源汇总

快应用开发资源汇总

本帖最后由 欢乐的小机友 于 2018-8-18 13:15 编辑

快速入门
了解项目的运行流程：编译时编译项目、运行时预览效果，掌握基本概念：项目产出rpk文件
通过本节，你将学会：

  • 创建项目
  • 安装依赖
  • 编译项目
  • 安装rpk包
  • 预览效果
创建项目
创建项目前，请先安装toolkit工具和调试器。如未安装，详见文档环境搭建
安装toolkit工具后，可通过全局hap命令创建一个项目模板，如下所示:
  1. hap init <ProjectName>
复制代码
其中为自定义的项目名称，如hap init demo
命令执行后，会在当前目录下创建文件夹，作为项目根目录
这个项目已经包含了项目配置与示例页面的初始代码，项目根目录主要结构如下：
  1. ├── sign                      rpk包签名模块
  2. │   └── debug                 调试环境
  3. │       ├── certificate.pem   证书文件
  4. │       └── private.pem       私钥文件
  5. ├── src
  6. │   ├── Common                公用的资源和组件文件
  7. │   │   └── logo.png          应用图标
  8. │   ├── Demo                  页面目录
  9. │   |   └── index.ux          页面文件，可自定义页面名称
  10. │   ├── app.ux                APP文件，可引入公共脚本，暴露公共数据和方法等
  11. │   └── manifest.json         项目配置文件，配置应用图标、页面路由等
  12. └── package.json              定义项目需要的各种模块及配置信息
复制代码
目录的简要说明如下：

  • src：项目源文件夹
  • sign：签名模块，当前仅有debug签名，如果内测上线，请添加release文件夹，增加线上签名；签名生成方法详见文档编译工具
安装依赖
在项目根目录下，运行如下命令安装模块到node_modules目录
npm install
注意：
如果开发者在后续操作中遇到报错Cannot find module ´.../node_modules/hap-tools/webpack.config.js´，请运行一次hap update --force（执行完毕后不需要按照提示再次运行npm install）
这是由于高版本的npm（如：NodeJS v8版本使用npm5）在npm install时，会校验node_modules目录，并删除其中的hap-tools文件夹，从而导致报错；开发者运行hap update --force，会重新复制hap-tools文件夹到node_modules中
编译项目手动编译项目
在项目的根目录下，运行如下命令进行编译打包，生成rpk包
  1. npm install
复制代码
编译打包成功后，项目根目录下会生成文件夹：build、dist

  • build：临时产出，包含编译后的页面js，图片等
  • dist：最终产出，包含rpk文件。其实是将build目录下的资源打包压缩为一个文件，后缀名为rpk，这个rpk文件就是项目编译后的最终产出
自动编译项目
如果希望每次修改源代码文件后，都自动编译项目，请使用如下命令：
npm run watch安装rpk包
编译项目产出了rpk包后，请打开手机调试器。安装调试器详见文档环境搭建
若打开调试器无法点击按钮，请升级手机系统到最新版本或安装平台预览版。安装平台预览版详见文档环境搭建
调试器可使用后，就可以在调试器上安装rpk包了。支持以下两种安装方式，开发者可根据场景选择其一
扫码安装

  • 适用场景：高频率更新rpk包
  • 优点：自动更新rpk包，方便快捷
  • 缺点：需要开发者启动HTTP服务器，并确保手机与PC在同一局域网
1 启动HTTP服务器
在终端中新建一个窗口，进入项目的根目录运行如下命令，启动本地服务器（默认端口为12306）
  1. npm run server
复制代码
自定义端口（如：8080）
  1. npm run server -- --port 8080
复制代码
2 在手机上预览运行效果
配置HTTP服务器地址有两种方式，以下两者选其一即可：

  • 打开调试器 --> 点击"扫码安装"，扫描终端窗口中的二维码即可完成配置（若扫描不成功，可在浏览器中打开页面：http://localhost:，扫描页面中的二维码）
  • 打开调试器 --> 点击右上角menu --> 设置，输入终端窗口中提示的HTTP服务器地址
配置完成后，可点击在线更新唤起平台运行rpk包
若提示安装失败，请检查执行npm run server的终端窗口是否正常运行
本地安装

  • 适用场景：仅预览效果或低频率更新rpk包
  • 优点：只需将rpk包复制到手机中，本地安装选择rpk包即可
  • 缺点：需手动更新rpk包
1 复制rpk包到手机中
将/dist目录下编译产出的rpk包通过USB数据线或其他方式，复制到手机文件系统中
2 本地安装rpk包
打开调试器 --> 点击"本地安装"，选择手机文件系统中的rpk包，并自动唤起平台运行rpk包，查看效果
预览效果
安装成功后，效果如下：
总结
了解项目的目录结构，编译时通过编译工具产出rpk文件，运行时通过调试器安装rpk文件；打通整个流程后，开发者就可以边开发边预览效果了

【资源来源转载，如侵权请联系删除】


点赞
收藏
回复
5
分享
举报
浏览1025 发布于2018-08-18 05:13未知归属地
全部评论
最多点赞
最新发布
最早发布
其余内容具体地址分享出来吧 链接进入
5楼回复于2018-08-18 05:28 未知归属地
页面路由接口声明
无需声明
导入模块
  1. import router from '@system.router' 或 const router = require('@system.router')
复制代码

接口定义router.push(OBJECT)
跳转到应用内的某个页面
参数：


示例：
  1. // launch phone app
  2. router.push({
  3.   uri: 'tel:10086'
  4. })
  5. // open page by path
  6. router.push({
  7.   uri: '/about',
  8.   params: {
  9.     testId: '1'
  10.   }
  11. })
  12. // open page by name
  13. router.push({
  14.   uri: 'About',
  15.   params: {
  16.     testId: '1'
  17.   }
  18. })
复制代码
新增下面的用法：
  1. // open web page
  2. router.push({
  3.   uri: 'http://www.example.com'
  4. })
  5. // install apk
  6. router.push({
  7.   uri: 'internal://cache/example.apk'
  8. })
复制代码
router.replace(OBJECT)
跳转到应用内的某个页面，当前页面无法返回
参数：

示例：
  1. router.replace({
  2.   uri: '/test',
  3.   params: {
  4.     testId: '1'
  5.   }
  6. })
复制代码

router.back()
返回上一页面
参数：
无
示例：
  1. // A页面
  2. router.push({
  3.   uri: 'B'
  4. })
  5. // B页面
  6. router.push({
  7.   uri: 'C'
  8. })
  9. // C页面通过back，将返回B页面
  10. router.back()
  11. // B页面通过back，将返回A页面
  12. router.back()
复制代码

router.clear()
清空所有历史页面记录，仅保留当前页面
参数：
无
示例：
  1. router.clear()
复制代码

router.getLength()
获取当前页面栈的页面数量
返回值:
类型
说明

Number页面数量示例：
  1. var length = router.getLength()
  2. console.log(`page's length = ${length}`)
复制代码

router.getState()
获取当前页面状态
返回参数：
参数名
类型
说明

indexNumber当前页面在页面栈中的位置
nameString当前页面的名称
pathString当前页面的路径示例：
  1. var page = router.getState()
  2. console.log(`page index = ${page.index}`)
  3. console.log(`page name = ${page.name}`)
  4. console.log(`page path = ${page.path}`)
复制代码


展开全部
4楼回复于2018-08-18 05:27 未知归属地
日志打印接口声明
无需声明
导入模块
无需导入
接口定义console.debug/log/info/warn/error(message)
打印一段文本
参数：
示例：
  1. for (var i = 0; i < 5; i++) {
  2.   console.log(`Hello, You've called me ${i} times.`)
  3. }
  4. console.log('I want to print a number: 123456')
复制代码


3楼回复于2018-08-18 05:23 未知归属地
本帖最后由 欢乐的小机友 于 2018-8-18 13:22 编辑

应用上下文接口声明
无需声明
导入模块
  1. import app from '@system.app' 或 const app = require('@system.app')
复制代码

接口定义
  1. app.getInfo()
复制代码
获取当前应用信息
参数：
无


extra

  • type=shortcut

    • scene：三级来源，表示快捷方式创建的场景，值为 dialog（平台内部策略Dialog弹窗创建）、api（API接口调用创建）、web（H5站接入流量切换，浏览时创建）、other
    • original：原始来源 source，表示快捷方式创建时的来源

示例：console.log(JSON.stringify(app.getInfo()))
2楼回复于2018-08-18 05:19 未知归属地
接口概述类型同步
同步接口立即返回调用结果
示例：
  1. console.log(JSON.stringify(app.getInfo()))
复制代码
异步
异步接口不会立即返回调用结果，在异步接口任务完成后执行某些操作，可选择以下方式之一：

  • 使用回调函数
  • 使用Promise 1010+
使用回调函数
开发者可以在调用异步接口的实参中传递相应的回调函数；回调函数会在接口任务完成时根据状态执行回调。任意回调函数最多执行一次
异步接口支持的回调函数：其中，success、fail、cancel三个回调函数是互斥的，每次接口调用会执行这三个回调函数中的一个，且仅执行一次；之后再调用complete回调函数一次
示例：
  1. prompt.showContextMenu({
  2.   itemList: ['item1', 'item2'],
  3.   itemColor: '#ff33ff',
  4.   success: function (data) {
  5.     console.log('handling success')
  6.   },
  7.   fail: function (data, code) {
  8.     console.log(`handling fail, code = ${code}`)
  9.   },
  10.   cancel: function () {
  11.     console.log('handling cancel')
  12.   },
  13.   complete: function () {
  14.     console.log('handling complete')
  15.   }
  16. })
复制代码

使用Promise 1010+
支持调用异步接口返回Promise实例，开发者可以在返回的Promise实例上使用then, catch方法绑定回调函数
Promise实例的状态是resolve（成功）还是reject（失败），依赖于异步接口任务执行的结果。若任务成功，则Promise实例的状态为resolve；否则，Promise实例的状态为reject
使用方法：
只有在调用异步接口的实参中不传递任何回调函数时，才会返回一个Promise实例
若在调用异步接口的实参中，某个属性（如：success）的值为函数，则调用异步接口的返回值为undefined，切换至上面介绍的使用回调函数模式
因此，在框架中不能同时使用回调函数和使用Promise
在Promise实例的then方法中，可传入两个参数：

  • 第一个参数为resolve（成功）的回调函数，对应异步接口支持的回调函数中的success和callback。参数的data属性为返回的数据
  • 第二个参数为reject（失败）的回调函数，对应异步接口支持的回调函数中的cancel或fail。失败的回调函数的参数比成功的回调函数多一个code属性，用于判断具体状态。若code为100，对应cancel；若code大于或等于200，对应fail
示例：
  1. const promise = prompt.showContextMenu({
  2.   itemList: ['item1', 'item2'],
  3.   itemColor: '#ff33ff'
  4. })
  5. promise.then((res) => {
  6.   console.log(`异步接口返回的数据：${res.data}`)
  7. }, (res) => {
  8.   console.log(`异步接口返回的数据：${res.data}`)
  9.   console.log(`异步接口返回的状态码：${res.code}`)
  10.   if (res.code === 100) {
  11.     // 对应异步接口支持的回调函数中的cancel
  12.   }
  13.   else if (res.code >= 200) {
  14.     // 对应异步接口支持的回调函数中的fail
  15.   }
  16. })
复制代码

订阅
订阅接口不会立即返回调用结果，开发者需要在实参中传递相应的回调函数；回调函数会在接口任务完成时执行回调；由于是订阅类型，回调函数可能执行多次
订阅接口支持的回调函数：
参数名
类型
说明

callbackFunction回调，每次订阅的对象变化时，都会被执行
failFunction失败回调，返回错误信息和错误代码。若文档未特别说明，错误代码为200。若返回其他错误代码，参见具体的接口文档
以监听地理位置（geolocation.subscribe）为例：

  • 调用geolocation.subscribe监听地理位置的改变，则每次地理位置发生改变，都会调用传入的callback回调，返回新的位置信息
  • 若用户拒绝授予权限，会调用fail回调函数并结束接口调用，callback回调函数永远不会被调用
示例：
  1. geolocation.subscribe({
  2.   callback: function (data) {
  3.     console.log(`handling success: longitude = ${data.longitude}, latitude = ${data.latitude}`)
  4.   },
  5.   fail: function (data, code) {
  6.     console.log(`handling fail, code = ${code}`)
  7.   }
  8. })
复制代码

使用接口的注意事项
执行回调函数时判断页面状态
由于异步和订阅接口不会在调用后立即返回结果，而是一段时间后执行回调函数并携带返回结果作为参数；因此，执行回调函数时，调用接口的页面，会属于以下三种状态之一：

  • 显示中（用户正在阅读的页面）：this.$valid && this.$visible
  • 已隐藏（加载新页，导致页面被隐藏）：this.$valid && !this.$visible
  • 已销毁（退出当前页面，页面被销毁）：!this.$valid && !this.$visible
若执行回调函数时，调用接口的页面已隐藏或已销毁，则存在以下问题：

  • 若页面已隐藏，在回调函数中更新ViewModel中的数据，会驱动页面视图更新，无意义的降低性能；建议在回调函数中缓存数据，当页面再次进入显示状态时，再更新ViewModel中的数据
  • 若页面已销毁，页面中的ViewModel也会销毁，在回调函数中更新ViewModel中的数据可能会引起报错；建议在回调函数中先判断页面状态，若页面已被销毁，则直接退出
提示：关于页面状态$valid、$visible，参见script脚本
示例：
  1. geolocation.getLocation({
  2.   success: function (data) {
  3.     if (this.$valid && this.$visible) {
  4.       // 页面仍在显示中
  5.     }
  6.     else if (this.$valid && !this.$visible) {
  7.       // 页面已隐藏
  8.     }
  9.     else {
  10.       // 页面已销毁
  11.     }
  12.   }.bind(this),
  13.   fail: function (data, code) {
  14.     console.log(`handling fail, code = ${code}`)
  15.   }
  16. })
复制代码
取消无意义的订阅
订阅接口的回调函数可能会被多次调用。若页面已隐藏或已销毁，仍继续订阅，既会影响框架的响应速度，也会造成内存泄露。因此，建议在页面被销毁后取消订阅
在页面销毁后取消订阅有以下两种方式：

  • 方式一：在页面生命周期onDestroy中取消订阅
  • 方式二：在订阅接口的回调函数中，先判断页面状态，若页面已被销毁，取消订阅
示例：
  1. export default {
  2.   onDestroy () {
  3.     // 方式一：在页面生命周期onDestroy中取消订阅
  4.     geolocation.unsubscribe()
  5.   },
  6.   onReady() {
  7.     // 订阅，监听地理位置
  8.     geolocation.subscribe({
  9.       callback: function (data) {
  10.         // 方式二：在订阅接口的回调函数中，先判断页面状态，若页面已被销毁，取消订阅
  11.         if (!this.$valid) {
  12.           geolocation.unsubscribe()
  13.         }
  14.         console.log(`handling success: longitude = ${data.longitude}, latitude = ${data.latitude}`)
  15.       }.bind(this),
  16.       fail: function (data, code) {
  17.         console.log(`handling fail, code = ${code}`)
  18.       }
  19.     })
  20.   }
  21. }
复制代码

注：若在应用生命周期中调用订阅接口，只要应用仍然在运行，订阅都是有效的；建议当不再需要订阅时，主动取消订阅
常见错误代码


展开全部
1楼回复于2018-08-18 05:18 未知归属地
写回答
新增插入模板功能
一键使用模板，快速填写内容，轻松发帖～
知道了
  • 为了保障您的信息安全，请勿上传您的敏感个人信息（如您的密码等信息）和您的敏感资产信息（如关键源代码、签名私钥、调试安装包、业务日志等信息），且您需自行承担由此产生的信息泄露等安全风险。
  • 如您发布的内容为转载内容，请注明内容来源。

我要发帖子

了解社区公约，与您携手共创和谐专业的开发者社区。
HarmonyOS Developer
友情链接
华为官网
消费者业务网站
华为商城
HarmonyOS
华为终端云空间
华为云
华为开发者联盟 版权所有 ©2026
增值电信业务经营许可证 : 苏B2-20130048号
苏ICP备17040376号苏公安网备 32011402010933号
问题反馈|
使用条款|
华为开发者联盟用户协议|
关于华为开发者联盟与隐私的声明|
Cookies|
开源软件声明