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

[[357491]]

创新互联公司专注于舟山网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供舟山营销型网站建设，舟山网站制作、舟山网页设计、舟山网站官网定制、微信平台小程序开发服务，打造舟山网络公司原创品牌,更为您提供舟山网站排名全网营销落地服务。

想了解更多内容，请访问：

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

https://harmonyos./#zz

前言

本人于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.   
  
  
  
  2.   { 
    3.   
  
  
  
  3.     "name": "ohos.permission.GET_NETWORK_INFO" 
    4.   
  
  
  
  4.   }, 
    5.   
  
  
  
  5.   { 
    6.   
  
  
  
  6.     "name": "ohos.permission.GET_WIFI_INFO" 
    7.   
  
  
  
  7.   }, 
    8.   
  
  
  
  8.   { 
    9.   
  
  
  
  9.     "name": "ohos.permission.INTERNET", 
    10.   
  
  
  
  10.   }, 
    11.   
  
  
  
  11. ], 
    12.

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

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

请参考文档

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

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

申请开发者证书和调试 Profile

request.json 如下：

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

 然后将你生成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代码执行到那个环节了，也不能很清晰的找到，推荐我自己用的方法。

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

结尾

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

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

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

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

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

想了解更多内容，请访问：

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

https://harmonyos./#zz

当前标题：2020征文-鸿蒙智能手表【纯干货】手把手教你JS开发智能表应用
网站链接：http://www.36103.cn/qtweb/news27/22627.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站设计知识

分类信息网站

微信小程序开发　　 　成都网站建设　　 　乐山做网站　　 　APP定制开发　　 　手机网站设计　　 　重庆服务器托管　　 　成都小程序制作　　 　防护网厂　　 　绵阳电信机房　　 　成都网站设计　　 　创新互联重庆　　 　达州网站建设　　 　广安搬家公司　　 　成都门户网站建设　　 　做网站公司　　 　雅安托管服务器　　 　腾讯香港免备案空间　　 　教育网站设计方案　　 　德阳电信机房　　 　网站设计制作