返回发烧友论坛
发 帖  

[]【HarmonyOS HiSpark AI Camera试用连载 】第三篇：一个漂亮的UI界面

智龙斋
2020-11-14 19:19:03
阅读量0
试用界面HarmonyOSHiSparkCamera
0
0
`
写一个UI界面

DevEco Studio这个软件直接在官网下载即可，贴出地址。
软件：https://developer.harmonyos.com/cn/develop/deveco-studio
软件文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/tools_overview-0000001053582387


新建项目
微信截图_20201114130257.png

填写项目名称和路径
微信截图_20201114130338.png

创建完成后会自动编译，出现了错误
微信截图_20201114130409.png
进入下面的路径修改gradle的版本号
原版本的版本号是：gradle-5.4.1-all.zip

修改为：gradle-6.5-all.zip
微信截图_20201114130436.png

修改后，点击右上角的Try Again即可
微信截图_20201114130515.png
根据官网的文档，修改config.json文件
1：将“deviceType”的取值修改为"smartVision"。

2：在abilities数组内新增“visible”属性，取值设置为“true”
微信截图_20201114130641.png

按照下面的路径进行DEBUG编译
微信截图_20201114130805.png

编译完成后会在build路径下生成 .hap文件
微信截图_20201114130854.png

右键点击.hap文件后选择Show in Explorer即可打开相关文件夹
微信截图_20201114130908.png
.hap文件是鸿蒙应用的安装包，相当于安卓的APK文件，下面要把安装包安装到AIC上。

这里就要用到bm文件，此文件是在code源码的out路径下，按下图的路径即可找到。连同安装包直接复制到TF中即可，AIC设备插入TF后需要reset,重启后才可以进行安装。
微信截图_20201114131434.png
进入安装包相关的路径依次输入下面的命令（test.hap是我的安装包）
  1. ./bm set -s disable
  2. ./bm set -d enable
  3. ./bm install -p test.hap
复制代码
微信截图_20201114131516.png
微信截图_20201114131528.png
微信截图_20201114131539.png
微信截图_20201114131603.png

安装成功后在屏幕上就可以出现test应用的图标了
进入应用后只显示了一半
c8f427f9ae4f5321b57563bf5621d2c.jpg
需要修改index.css文件中
.container{}中的
width参数改为960px

height参数改为480px

一个简单的Hello World就诞生了



下面将页面升级，添加更多复杂的组件，先看看效果
2b9470affb4a7e771030afb87b25fb8.jpg
174ae5a383fc93a4d1bca97e082d947.jpg


三个文件的代码放出来
index.hml
  1. <div class="container">
  2.     <div class="header">
  3.         <image class="back" src="common/ic_back.png"></image>
  4.         <text class="title">
  5.             退出
  6.         </text>
  7.     </div>
  8.     <div class="header1">
  9.         <swiper class="swiper-style">
  10.             <image class="image-mode" src="{{$item}}" for="{{imageList}}"></image>
  11.         </swiper>
  12.         <div class="detail_button">
  13.             <div class="detail1">
  14.                 <input class="btn1" type="button" value="按钮一"></input>
  15.             </div>
  16.             <div class="detail2">
  17.                 <input class="btn2" type="button" value="按钮二"></input>
  18.             </div>
  19.         </div>
  20.     </div>
  21. </div>
复制代码

index.css
  1. .container {
  2.     flex-direction: column;
  3.     width: 960px;
  4.     height: 480px;
  5. }
  6. .header {
  7.     width: 960px;
  8.     height: 72px;
  9.     background-color: #040404;
  10. }
  11. .back {
  12.     width: 36px;
  13.     height: 36px;
  14.     margin-left: 39px;
  15.     margin-top: 23px;
  16. }
  17. .title {
  18.     width: 120px;
  19.     height: 40px;
  20.     margin-top: 20px;
  21.     margin-left: 21px;
  22.     color: #e6e6e6;
  23. }
  24. .header1 {
  25.     height: 408px;
  26.     width: 960px;
  27. }
  28. .swiper-style {
  29.     flex-direction: column;
  30.     height: 300px;
  31.     width: 600px;
  32.     margin-left: 50px;
  33.     margin-top: 50px;
  34. }
  35. .image-mode {
  36.     flex-direction: column;
  37.     height: 300px;
  38.     width: 600px;
  39.     margin-left: 50px;
  40.     margin-top: 50px;
  41. }
  42. .detail_button {
  43.     flex-direction: column;
  44.     width: 260px;
  45.     height: 400px;
  46. }
  47. .detail1 {
  48.     width: 260px;
  49.     height: 80px;
  50.     margin-left: 40px;
  51.     margin-top: 50px;
  52.     flex-direction: column;
  53. }
  54. .btn1 {
  55.     width: 180px;
  56.     height: 80px;
  57.     margin-top: 0px;
  58.     margin-left: 0px;
  59.     background-color: #1a1a1a;
  60.     color: #1085CE;
  61. }
  62. .btn1:active {
  63.     background-color: #888888;
  64. }
  65. .detail2 {
  66.     width: 260px;
  67.     height: 80px;
  68.     margin-left: 40px;
  69.     margin-top: 100px;
  70.     flex-direction: column;
  71. }
  72. .btn2 {
  73.     width: 180px;
  74.     height: 80px;
  75.     margin-top: 0px;
  76.     margin-left: 0px;
  77.     background-color: #1a1a1a;
  78.     color: #1085CE;
  79. }
  80. .btn2:active {
  81.     background-color: #888888;
  82. }
复制代码
index.js
  1. import app from '@system.app'

  3. export default {
  4.     data: {
  5.         imageList: [
  6.             '/common/1.jpg',
  7.             '/common/2.jpg',
  8.         ]
  9.     },
  10.     exitApp() {
  11.     console.log('start exit');
  12.     app.terminate();
  13.     console.log('end exit');
  14.     },
  15. }
复制代码
代码添加完成后，需要在default文件夹下新建common文件夹存放图片资源，一共有三张图片
common.rar
(90.51 KB, 下载次数: 0)


  

下期预告：

                 下次给大家出一篇有关摄像头的应用


`
微信图片_20201114180850.jpg
举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友