devbox
菜鸟追梦旅行
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

android studio 联网、_用鸿蒙 2.0 beta 版写了一个物联网应用手机APP

作者：菜鸟追梦旅行 | 2024-03-16 08:21:25

赞

踩

andriod studio上做的apk华为的鸿蒙系统
来源| https:// blog.alpaca.run

1.前言

其实鸿蒙2.0今年在9月份的时候已经发布，只不过那个时候只能开发手表和电视应用，还不支持手机。

那个时候在掘金也写过体验鸿蒙电视应用开发的文章，点击下面即可看到：

鸿蒙2.0发布，让我给大家整个活

43805596ece80c48d1054c8420694cc3.png
第一次看我文章的小伙伴可以关注一下我，顺便关注一下我的专栏：Android高级开发专栏 ，每天更新各种技术干货，分享更多最热程序员圈内事。
Android高级技术专栏​zhuanlan.zhihu.com
f77e176dd791e793ec290f449d522508.png

而现在能给手机端开发了，于是去了华为HarmonyOS Developer网站，下载了最新的HUAWEI DevEco Studio:

https://developer.harmonyos.com/cn/develop/deveco-studio

创建项目，就看到了可以选择手机端开发了

59d5ac5bf8630cab168d164049f87bfe.png

之前为了折腾下阿里云的serverless，就做了一个物联网小项目,还起了个Alpaca IOT的名字

简单来说就是给我家里的树莓派和工位上的树莓派接上dht11温度传感器

3106cd0bfb4306abc11de25158fccbc7.png

然后把采集到的温湿度数据上传到我自己写的阿里云serverless应用

之后撸一个前端页面，从我自己写的阿里云serverless应用里读取温湿度数据，显示下来。

然后把这个网页部署到服务器，就是下面的链接

Alpaca IOT:https://iot.alpaca.run/

网站如图所示

162572c343e06b1cb0227680ca17a8bf.png

所以我现在的工作，就是把我这个前端网页的业务，移植到鸿蒙app上

2.新建项目

选择手机开发项目，然后项目的目录就出来了。

598c39b2a730269749e45bd2e03e2d48.png

当然了，第一件事并不是写代码，而是去弄一个运行鸿蒙系统的虚拟机（其实流程和Android Studio是一样的），这样我写的代码才有地方跑

2cd4d147487063f30c52f74d3aa4135f.png

ca1ec0136477d991759e4996ea7a7b86.png

然后砰的一下，一个运行鸿蒙os的虚拟手机就跑起来了。

d97bbc65988db94f64c918a1a1d3207a.png

其实这玩意并不是真的运行在我本地的鸿蒙虚拟机，而是一个远程桌面而已，所以待会写出来的代码，估计是跑在远程的华为机器，然后以远程桌面的形式返回回来 所以体验有点不好，因为远程传输的画面很糊，操作起来也卡（不是系统卡，而是远程桌面网不好的话有延时） 好了，既然虚拟机跑起来了，就直接执行项目代码吧，然后一个hello world出来了，说明运行成功。

6a177ab53c8c4c4e5e9077b183be6995.png

由于我只是个卑微的前端菜，而鸿蒙又支持js开发，所以我就用js开发了，然后顺便也对比下开发过程中和前端的区别，然后点进去源码的js文件夹，实现这个hello world的其实也是靠三座大山（hml、css、js） 他们的初始代码如下:

  • hml: 理解成变种的html语法，大体和html一样，不过会有一点区别
  1. <!- index.hml -->
  2. <div class="container">
  3.     <text class="title">
  4.         {{ $t('strings.hello') }} {{title}}
  5.     </text>
  6. </div>
  • JavaScript: 标准ECMA,就是js运行时会和浏览器的有一点区别（比如一些api不一定能直接用）
  1. // index.js
  2. export default {
  3.     data: {
  4.         title: ""
  5.     },
  6.     onInit() {
  7.         this.title = this.$t('strings.world');
  8.     }
  9. }
  • css: 基本没发现和普通css有什么区别
  1. /* index.css */
  2. .container {
  3.     flex-direction: column;
  4.     justify-content: center;
  5.     align-items: center;
  6. }
  7.  
  8. .title {
  9.     font-size: 100px;
  10. }

看了下和小程序的模式类似，基本上也是h5+js+css,大体上和前端开发的区别不大，也是走的MVVM数据驱动视图那套模式，就是api和一些细节不一样，基本上可以说会Vue的就能上手。所以一开始我不看文档，直接复制粘贴不加工，看看能不能“无痛移植” 结果发现不行，就我发现的，和前端网页相比，有以下区别

hml

  • 1、这里的布局只有flex和grid(默认flex)，所以默认的前端html传统文档流在这里会垮掉（比如div标签并不会换行，换行操作要靠设置flex相关属性）
  • 2、文字内容要用标签包起来，不包的话文字不会显示出来

f80853c61d74c7318ff3d5dfa3ad5a39.png

js

  • 如图，看来貌似这里的js运行时不支持async/await（有没有Promise没试过，看来貌似要地狱回调）
  • 看来一些api也不能直接用，比如fetch，后来看了下开发文档想要搞网络请求要从@system.fetch引,而且引过来的fetch只能靠回调拿数据

22d5d6386491e80476bd102769117882.png

css

  • 大致相同，就我发现的可能这里的css规则会更严格，比如我想设置背景色我用background不行，必须要background-color

所以我后面把开发文档看了一遍，基本上和小程序一样，总体架子不变，只有少量的区别，要根据文档修修改改才能把前端业务移植过来。

3.开始移植

先给你看看我原来前端页面代码是怎样的（可能你们会觉得我这里的html语法怪异，因为我这个网页是基于ef.js弄得）

  1.    <!DOCTYPE html>
  2. <html>
  3.     <header>
  4.         <title>Alpaca IOT</title>
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
  6.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  7.         <style>
  8.             body { 
  9.                 background-color: black;
  10.                 color: white;
  11.             }
  12.  
  13.             #app {
  14.                 height: 95vh;
  15.                 display: -webkit-flex; /* Safari */
  16.                 display: flex;
  17.                 flex-direction: row;
  18.                 flex-wrap: wrap;
  19.                 justify-content: center;
  20.                 align-items: center;
  21.                 align-content: center;
  22.             }
  23.  
  24.             #app .auther {
  25.                 position: fixed;
  26.                 bottom: 40px;
  27.                 font-size: 16px;
  28.                 cursor: pointer;
  29.             }
  30.  
  31.             #app .auther a {
  32.                 text-decoration:none;
  33.                 color: white
  34.             }
  35.  
  36.             #app .auther a:hover {
  37.                 text-decoration:solid;
  38.                 color: #f90;
  39.             }
  40.  
  41.             #app .time {
  42.                 position: fixed;
  43.                 bottom: 15px;
  44.                 font-size: 16px;
  45.             }
  46.  
  47.             #app .content{
  48.                 width: 350px;
  49.                 text-align: center;
  50.                 padding: 5px;
  51.                 margin: 25px 20px;
  52.                 background: #f90;
  53.                 border-radius: 8px;
  54.                 color: black;
  55.             }
  56.  
  57.             #app .title {
  58.                 font-size: 30px;
  59.                 margin-bottom: 10px;
  60.             }
  61.  
  62.             #app .data-box {
  63.                 display: flex;
  64.                 flex-direction: row;
  65.                 flex-wrap: wrap;
  66.                 justify-content: space-around;
  67.             }
  68.  
  69.             #app .data-box .text{
  70.                 font-size: 24px;
  71.             }
  72.  
  73.             #app .data-box .num{
  74.                 font-size: 30px;
  75.             }
  76.  
  77.         </style>
  78.     </header>
  79.     <body>
  80.         <div id="app"></div>
  81.         <script src="https://alpaca.cdn.bcebos.com/js/ef.js"></script>
  82.         <script>
  83.             const { t } = ef;
  84.             // 创建ef对象
  85.             const app = new t`
  86.             >div.content
  87.                 >div.title
  88.                     .家里实时温湿度
  89.                 >div.data-box
  90.                     >div
  91.                         >span.text
  92.                             .温度：
  93.                         >span.num
  94.                             .{{home_temperature}}
  95.                         >span.symbol
  96.                             .°C
  97.                     >div
  98.                         >span.text
  99.                             .湿度：
  100.                         >span.num
  101.                             .{{home_humidity}}
  102.                         >span.symbol
  103.                             .%
  104.             >div.content
  105.                 >div.title
  106.                     .工位实时温湿度
  107.                 >div.data-box
  108.                     >div
  109.                         >span.text
  110.                             .温度：
  111.                         >span.num
  112.                             .{{comp_temperature}}
  113.                         >span.symbol
  114.                             .°C
  115.                     >div
  116.                         >span.text
  117.                             .湿度：
  118.                         >span.num
  119.                             .{{comp_humidity}}
  120.                         >span.symbol
  121.                             .%
  122.             >div.auther
  123.                 >a
  124.                     #href = https://github.com/AlpacaBi
  125.                     #target="_blank"
  126.                     .@Alpaca Bi
  127.             >div.time
  128.                 .最后更新时间： {{time}}
  129.             `
  130.             // alicloud serverless 接口
  131.             const url = "https://1055462284844024.cn-shenzhen.fc.aliyuncs.com/2016-08-15/proxy/alpaca-iot/alpaca-temp/getData"
  132.             // 从接口拿数据赋给ef对象的data层
  133.             const updateData = async() => {
  134.                 let res = await fetch(url)
  135.                 let resData = await res.json()
  136.                 app.$data = {
  137.                     home_temperature: resData.home.temperature,
  138.                     home_humidity: resData.home.humidity,
  139.                     comp_temperature: resData.comp.temperature,
  140.                     comp_humidity: resData.comp.humidity,
  141.                     time: (new Date()).toLocaleString()
  142.                 }
  143.             }
  144.             updateData()
  145.             // 把ef对象挂载在dom树上
  146.             app.$mount({target: document.getElementById('app')})
  147.             // 每15秒更新一次数据
  148.             setInterval("updateData()", 60000);
  149.         </script>
  150.     </body>
  151. </html>

后来磕磕碰碰，就只改了这3个文件，就好了，修改后的代码如下（你们可以看看和普通前端有什么区别）

  • index.hml
  1. <!- index.hml -->
  2. <div class="container">
  3.   <div class="content">
  4.       <div class="title">
  5.           <text class="text">家里实时温湿度</text>
  6.       </div>
  7.       <div class="data-box">
  8.           <div>
  9.               <text class="text">温度:</text>
  10.               <text class="num">{{home_temperature}}</text>
  11.               <text class="symbol">°C</text>
  12.           </div>
  13.           <div>
  14.               <text class="text">湿度:</text>
  15.               <text class="num">{{home_humidity}}</text>
  16.               <text class="symbol">%</text>
  17.           </div>
  18.       </div>
  19.   </div>
  20.   <div class="content">
  21.       <div class="title">
  22.           <text class="text">工位实时温湿度</text>
  23.       </div>
  24.       <div class="data-box">
  25.           <div>
  26.               <text class="text">温度:</text>
  27.               <text class="num">{{comp_temperature}}</text>
  28.               <text class="symbol">°C</text>
  29.           </div>
  30.           <div>
  31.               <text class="text">湿度:</text>
  32.               <text class="num">{{comp_humidity}}</text>
  33.               <text class="symbol">%</text>
  34.           </div>
  35.       </div>
  36.   </div>
  37. </div>
  • index.js
  1. // index.js
  2. import fetch from '@system.fetch';
  3. export default {
  4.   data: {
  5.       home_temperature: 0,
  6.       home_humidity: 0,
  7.       comp_temperature: 0,
  8.       comp_humidity: 0,
  9.   },
  10.   onInit() {
  11.       let _this = this
  12.       // 阿里云serverless接口
  13.       const url = "https://1055462284844024.cn-shenzhen.fc.aliyuncs.com/2016-08-15/proxy/alpaca-iot/alpaca-temp/getData"
  14.       // 每60秒向阿里云serverless读取数据并更新到前端页面
  15.       setInterval(function() {
  16.           fetch.fetch({
  17.               url: url,
  18.               success: function(response) {
  19.                   const resData = JSON.parse(response.data)
  20.                   _this.home_temperature = resData.home.temperature
  21.                   _this.home_humidity = resData.home.humidity
  22.                   _this.comp_temperature = resData.comp.temperature
  23.                   _this.comp_humidity = resData.comp.humidity
  24.               },
  25.               fail: function(data, code) {
  26.                   console.log('fail callback')
  27.               },
  28.           });
  29.       }, 60 * 1000)
  30.   }
  31. }
  • index.css
  1.  /* index.css */
  2. .container {
  3.    height: 100%;
  4.    flex-direction: row;
  5.    flex-wrap: wrap;
  6.    justify-content: center;
  7.    align-items: center;
  8.    align-content: center;
  9.    background-color: black;
  10. }
  11.  
  12. .container .content{
  13.    width: 600px;
  14.    flex-wrap: wrap;
  15.    align-items: center;
  16.    padding: 10px;
  17.    margin: 25px 20px;
  18.    background-color: #f90;
  19.    border-radius: 8px;
  20.    color: black;
  21. }
  22.  
  23. .container .content .title {
  24.    width: 580px;
  25.    margin-bottom: 20px;
  26. }
  27.  
  28. .container .content .title .text {
  29.    width: 580px;
  30.    text-align: center;
  31.    font-size: 60px;
  32. }
  33.  
  34. .container .content .data-box {
  35.    flex-direction: row;
  36.    flex-wrap: wrap;
  37.    justify-content: space-around;
  38. }
  39.  
  40. .container .content .data-box .text{
  41.    font-size: 48px;
  42. }
  43.  
  44. .container .content .data-box .num{
  45.    font-size: 60px;
  46. }

然后我的鸿蒙物联网APP Alpaca IOT就这样跑起来啦！！！

8cc173bedb0e6098b19577ecc99e40d4.png

现在既然做出来了，最后一步，就是打包app了，怎么打包我就不说了，也就是按几个菜单而已，最后就打包出hap后缀的安装包了。

67005d20b8de4a71f253378d69797356.png

所以从现在开始，我可以说自己是开发过鸿蒙APP的工程师了！！！

ps.一个开发过程中遇到的一个小插曲

f02a07287ae04564f910ccf21e37b3a4.png

4.其实有些事情还没做好

发现了吗，我上面一直都是对着远程的华为设备进行隔空操作，哪怕APP也打包出来了，也没地去安装。

所以很核心的问题来了，要跑在真手机上才有意义！！！

还好昨天华为就公测招募华为鸿蒙OS 2.0手机开发者Beta版，支持Mate 30 / P40系列OTA升级。

9c3281d5c36c87be4888d32c7abbbf36.png

而我恰好也有一台P40PRO，符合设备要求，所以我也提了申请了！！！

f3335a514eb33d8eef7cd53b64022811.png

等到申请通过，我的手机就可以OTA升级到鸿蒙系统，到时候把我刚刚打包的APP跑到我的手机上，再更新相关内容。另外如果有人的设备刚好符合要求，有兴趣升级到鸿蒙OS的,点击这里即可申请

5.最后

看到这里你们肯定要打我，标题鸿蒙物联网APP说的那么高大上，现在看来无非就是做了个前端，每60秒往后端拿数据而已，随便一个前端菜都能做。

这个时候估计不少大佬都要开始嘲讽我了:就这？？？

所以想想看，连我这种前端菜也能有模有样弄个还能用的APP，而且我还觉得不难，那么那些有着安卓开发经验的大佬岂不是随随便便都能搞出一堆有用的应用，所以意义就在这里了。

最后，在这里我也分享一份干货，由大佬收录整理的Android学习PDF+架构视频+源码笔记，还有高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。

如果你需要的话，可以在【GitHub】自行获取。

漫漫开发之路，我们只是其中的一小部分……

只有不断的学习、进阶，才是我们的出路！才跟得上时代的进步！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/248181
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号