2020征文-鸿蒙智能手表【纯干货】手把手教你JS开发智能表应用

开发 前端
今天为什么有时间写这篇文章呢?因为我的智能手表应用已经开发、联调、测试完毕了,马上要上架啦。

前言

本人于9月中旬,开始接触鸿蒙。那时候还只是抱着尝新的心态,跟着官方文档,写出了TV版的hello world和Lite Wearable的hello world,现在回想起来,还是有点激动。

到了9月下旬,公司收到了华为寄过来的搭载鸿蒙系统的智能手表,因为某种原因,智能表开发的任务落到了我头上。我是前端开发,说实话,当时接到这个任务时候,其实没多少底,毕竟不懂APP开发的流程,虽说鸿蒙支持JS开发,但其实心里也清楚,里面应该还是有很多坑要踩的,事实证明,坑是真的多。哈哈哈。

今天为什么有时间写这篇文章呢?因为我的智能手表应用已经开发、联调、测试完毕了,马上要上架啦。

话不多说,让我们进入正题。

配置

1、准备工作(下载、安装、环境配置、创建项目等)

这个过于简单,就毋庸赘言了,请参考官方文档

生成的目录结构,就是这个样子。对于安卓开发来讲,应该是很熟悉的,但对于前端来讲,就很懵逼啊。

什么gradle文件,这是啥啊,咦,为什么还有java,我不是选择的js模板呢?很是疑惑。先不管了,硬着头皮干。


2、config.json权限列表配置(fetch、network等)

鸿蒙应用里,image标签想要使用https的外链资源,必须要配置权限,同理,fetch接口请求也是如此。

我自己在开发过程中,是配置了网络请求的权限,以及网络状态的权限。

  1. "reqPermissions": [ 
  2.   { 
  3.     "name""ohos.permission.GET_NETWORK_INFO" 
  4.   }, 
  5.   { 
  6.     "name""ohos.permission.GET_WIFI_INFO" 
  7.   }, 
  8.   { 
  9.     "name""ohos.permission.INTERNET"
  10.   }, 
  11. ], 

 3、离线签名与签名配置 (用于真机调试)

如果用不到真机调试,可忽略这一步。

请参考文档

编辑器的版本不一样,使用的密钥文件不一样。有的是.p12,有的是.jks。

如果你生成的是jks,那么你可能需要转换p12,笔者就转过,可自行百度。

申请开发者证书和调试 Profile

request.json 如下:

  1.  
  2. "developerRequest": { 
  3.  
  4. "Applicant""XXXX"
  5.  
  6. "ApplicationName""XXXX"
  7.  
  8. "CN""XXXX"
  9.  
  10. "validYear""1" 
  11.  
  12. }, 
  13.  
  14. "provisionRequest": { 
  15.  
  16. "debug-info": { 
  17.  
  18. "device-ids": [ 
  19.  
  20. "" // 调试真机的UDID 
  21.  
  22.  
  23. }, 
  24.  
  25. "permissions": { 
  26.  
  27. "restricted-permissions": [ 
  28.  
  29. "harmonyos.permission.ANSWER_PHONE_CALLS" 
  30.  
  31.  
  32. }, 
  33.  
  34. "bundle-name""你的包名"
  35.  
  36. "developer-id""你的开发者ID" 
  37.  
  38.  

 然后将你生成csr、p12还有这个request.json一并发给华为的人,然后他们会给你cer和p7b的文件,你直接导入就行了。


至此,真机调试的准备工作我们就已经完成了。

真机调试打出来的包是hap包,如果要上架的话,必须是.app的文件,所以我们还要在项目配置里,导入这些证书等,同上一步操作。


4、集成 Wear Engine SDK(手表和APP通讯)

APP和手表都要集成对应的SDK,才能通讯

添加编译依赖

1、联系华为接口人获取 SDK。

2、将 SDK 解压后,把 SDK 中的 har 包放在项目\entry\ libs 目录下。

3、打开应用级的 build.gradle 文件。


4、在“dependencies ”中添加如下编译依赖,,然后同步。


5、生成穿戴设备侧签名证书指纹、设备检测

手表侧要配置APP的指纹和包名,APP侧要配置手表侧的指纹和包名

请参考文档

手表侧配置APP的包名和指纹代码如下


6、编译构建生成HAP或者生成APP

请参考文档

开发

开发倒没有什么好说的,就是正常的前端那一套,布局、样式、逻辑。需要注意的是,设备的分辨率是454*454,圆形屏幕,需要留出安全距离。

如果手表需要和手机APP进行交互的话,JS的能力比较弱,需要依赖JAVA来做中转。

JAVA代码不是我写的,直接照抄的官方文档,然后让安卓客户端改造了一下。

我做的这个项目就是这么做的,目录如下:


还有一点要注意的,JAVA不能主动向JS发送消息,需要JS主动才行。手机和手表信息同步时候,需要用户信息,我们的做法是:手机端登陆后,会向我的手表发一个用户身份信息,手表侧的JAVA代码能接收到,但是JS收不到,这个时候我的做法是在手表侧的JS做一个轮询,向JAVA去索取登录信息。一般的做法就是setInterval,但是我发觉这个setInterval在鸿蒙里并不生效,我很绝望,最后我采用了递归。就是手表在onShow生命周期里,不停的调用PA能力(可参考文档),如果拿到了用户信息,就缓存到本地,停止调用,然后发送fetch请求,拿到服务端的数据。这样一个数据同步就完成了。

说到缓存,也有一个小坑,这个value值,一定要是字符串,本来我的res就是字符串,但是直接写,会报错,必须用JSON.stringify()转一下。


调用PA能力的代码如下:

JAVA先注册一个CalcInternalAbility,供JS调用。


JS调用该方法,如下,value就是JAVA的返回值。

调试

这里主要讲JS的调试

JS打印调试信息,一般都是console.log(),但是这个编辑器里推荐使用console.info()。

一旦程序开始运行时候,控制台里会不停的打印一些信息,完全看不懂,我们想要看看我们的JS代码执行到那个环节了,也不能很清晰的找到,推荐我自己用的方法。


这样我们就可以在控制台清楚的看到自己的打印信息,也就知道代码执行到哪一步了。

结尾

整个项目开发过程中,坑还是挺多的,但是没办法,毕竟刚出来。

但只要是在慢慢变好,那就未来可期,

虽然华为诸多磨难,但鸿蒙仍需背负"小小"的使命感,

经历过更多磕碰,鸿蒙才会更加厚重,

希望喜欢鸿蒙的人能继续喜欢鸿蒙,不喜欢鸿蒙的人能慢慢尝试接受鸿蒙。

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-11-24 16:02:57

鸿蒙HarmonyOS应用

2020-12-23 09:58:37

HarmonyOSHAPAPP

2019-05-05 11:47:09

TypeScript开发Node.js

2021-02-26 11:54:38

MyBatis 插件接口

2022-04-19 10:45:28

自动化签名鸿蒙app操作系统

2017-12-01 05:01:35

WiFi干扰无线网络

2010-04-29 09:49:26

代码提示SQL Server

2021-01-13 14:00:24

鸿蒙hi3518开发

2011-05-03 15:59:00

黑盒打印机

2011-01-10 14:41:26

2020-12-29 09:59:01

鸿蒙HarmonyOS智能家居

2011-04-28 09:23:36

REST

2017-09-08 15:12:25

智能手表智能眼镜VR

2011-02-22 13:46:27

微软SQL.NET

2021-12-28 08:38:26

Linux 中断唤醒系统Linux 系统

2024-04-02 08:58:13

2024-03-05 18:27:43

2014-12-11 16:32:38

应用安全Web应用缓存控制头域

2012-01-11 13:40:35

移动应用云服务

2021-07-09 17:27:58

ButterKnife工具APT
点赞
收藏

51CTO技术栈公众号