手把手教你用C++在3516上玩应用界面开发

2021-1-25 21:10:37  285 harmonyos
分享

3516跑C++demo

3
本帖最后由 130106486 于 2021-2-3 15:44 编辑

手把手教你用C++在3516上玩应用界面开发
上图是整个应用跑起来的效果,整个逻辑是很简单的,如果是用js来写的话那就不值一提了,正是因为是用C++来写的,所以出现了无数的坑。貌似在几个鸿蒙的社区里没看到过有人搞过类似这种,所以作为第一个吃螃蟹的人我来了。不过这个螃蟹并不好吃!坑太多了。因为资料几乎没有,官网上直接给你提示暂未开放...
首先呢,把该demo的hap包(点击附件下载)放上来,然后直接安装就可以,安装方法见下面链接:
1.官方链接:官方指导
2.大神链接:https://bbs.elecfans.com/jishu_2029369_1_1.html

大家看过这个安装方法就可以知道,这是把C++应用先编程so动态库,然后在打包成hap包,进行安装,首先我想在这块分享一个我的想法,我的想法就是既然整套系统的源码都可以了,为什么不能直接按照系统应用的方法去搞,直接像系统应用一样去打进源码中去,就可以不用再手动安装,然而,浪费了我一天时间,最终没能实现,分析是卡在了签名这一块,因为每个系统应用其实都有签名文件,这块确实没理通,有整明白的各路大神欢迎指教

下面我顺着整个demo的代码思路,讲解所有代码,并把所有资源上传上来,然后我会尽量把我所遇到的坑,以及填坑的过程写出来,同时我也会说我的一些想法,各路大神可以一起讨论,或者批评我哪儿的思路是错的。

在开始说讨论代码之前,我提一下,在C++里写界面代码也同样有大家在鸿蒙里无论是用java还是js写应用的生命周期方法(例如OnStart、OnStop生命周期函数等),当然在android中也有。这里我也听过不少人说,这就是android,其实这里我想说一句,这个生命周期函数的思想确实是比较优秀的,harmony拿过来用是一件很正常的事情,牵扯不到抄袭android
1.demo代码思路
       其实整个demo的大体来说只有两个功能:第一个回退功能,这个功能呢,就完全没有资料了,我完全是从源码中找的思路,第二个功能就是用了一个滑动组件,然后再其上放了三个image组件,实现了一个简单的照片查看功能。
      首先来看,无论要实现哪个功能,都碰到了一个问题,就是让组件能够显示图片,这个是大坑,尤其是获取图片的资源路径,我曾经试过按照系统应用的方式去搞,不过没能成行
1.1 如何让3516用C++去显示一张图片
首先我阐述下:显示照片的原理,要显示的照片是放在assets/entry/resources/base/media下,其中这个文件夹是会被打包进hap包的,下一步就是能够获取到该文件夹的路径,然后显示出来就OK了,因为返回键的小箭头图标就是图片的显示,所以我们以此为例来看图片显示的全过程:
1.1.1 首先定义一个实际存放照片的路径,应用名+照片路径
  1. static const char* const BACK_ICON_PATH = "/catView/assets/entry/resources/base/media/ic_back.png";
复制代码

1.1.2 调用GetSrcPath,获得其完整路径,这个路径才是可以使用的路径
  1. static char g_backIconAbsolutePath[MAX_PATH_LENGTH] = {0};
  2. const char* pathHeader = GetSrcPath();
  3. if(sprintf_s(g_backIconAbsolutePath,MAX_PATH_LENGTH,"%s%s",pathHeader,BACK_ICON_PATH) < 0){
  4. printf("GalleryAbilitySlice::OnStart | g_backIconAbsolutePath error");
  5. return;
  6. }
复制代码

1.1.3 调用SetSrc去显示完成路径
  1. backIcon->SetSrc(g_backIconAbsolutePath);
复制代码

PS:这是我摸索出来的显示图片的方法,各路大神有别的方法的话,分享一下呗
下面首先来看第一个返回功能的实现:
1.2 第一个回退功能的实现
1.2.1 首先新建一个UIImageView组件,并设置相关样式
  1. backIcon = new UIImageView();
  2. backIcon->SetPosition(0, 0);
  3. backIcon->SetSrc(g_backIconAbsolutePath);
  4. backIcon->SetTouchable(true);
  5. backIcon->Resize(40,40);
复制代码

1.2.2 为该组件设置点击事件
  1. auto onClick = [this] (UIView& view, const Event& event) -> bool {
  2. TerminateAbility();
  3. return true;
  4. };
复制代码

1.2.3 将上一步设置的点击事件与组件进行绑定,并将其加入根组件中
  1. backIconListener = new EventListener(onClick, nullptr);
  2. backIcon->SetOnClickListener(backIconListener);
  3. rootView_->Add(backIcon);
复制代码

1.3 图片滑动功能的实现
首先阐述下实现的思路:先实现三个放照片的组件,然后将其放在swipe滑动组件中,最后再将swipe滑动组件放入根组件中
1.3.1 实现三个放照片的组件
  1. backgroud0 = new UIImageView();
  2. backgroud0->SetPosition(0,0);
  3. backgroud0->SetSrc(g_backGround00AbsolutePath);
  4. backgroud0->SetAutoEnable(false);
  5. backgroud0->Resize(751,440);

  6. backgroud1 = new UIImageView();
  7. backgroud1->SetPosition(0,0);
  8. backgroud1->SetSrc(g_backGround01AbsolutePath);
  9. backgroud1->SetAutoEnable(false);
  10. backgroud1->Resize(751,440);

  11. backgroud2 = new UIImageView();
  12. backgroud2->SetPosition(0,0);
  13. backgroud2->SetSrc(g_backGround02AbsolutePath);
  14. backgroud2->SetAutoEnable(false);
  15. backgroud2->Resize(751,440);
复制代码

1.3.2 实现swipe滑动组件
  1. swipe = new UISwipeView(UISwipeView::HORIZONTAL);
  2. swipe->SetPosition(105,40);
  3. swipe->Resize(751,440);
复制代码

1.3.3 将第一步实现的3个组件放入swipe,并将swipe加入根组件
  1. swipe->Add(backgroud0);
  2. swipe->Add(backgroud1);
  3. swipe->Add(backgroud2);
  4. swipe->SetLoopState(true);
  5. rootView_->Add(swipe);
复制代码




2.坑坑回顾
2.1 目前3516还不支持高分辨率图片
这个之所以可以成为一个坑的原因就是它编译没问题,烧录没问题,最后点击运行的时候,才会出问题,让我一度以为swipe不支持UIImageView,实际上并不是,而是图片的分辨率的原因。目前我用的是751*440
2.2 破解sprintf_s头文件之谜
当报了sprintf_s少头文件的错误时候,你去百度,打开10个网页你会看到11人告诉你它的头文件是<stdio.h>,然并卵,它的头文件是#include "securec.h"

......当然绝对不止这么点儿
3.如何使用附件中的demo
3.1将代码放入指定位置
将代码放入"代码目录/applications/sample/camera"
3.2 修改build,指定文件夹编译对应的动态库
文件为:代码目录/build/lite/product/ipcamera_hi3516dv300.json
  1. "component": [
  2. { "name": "abilitykit_lite", "dir": "//foundation/aafwk/frameworks/ability_lite:aafwk_abilitykit_lite", "features":[ "enable_ohos_appexecfwk_feature_ability = true" ] },
  3. { "name": "abilityManager_lite", "dir": "//foundation/aafwk/frameworks/abilitymgr_lite:aafwk_abilityManager_lite", "features":[] },
  4. - { "name": "aafwk_services_lite", "dir": "//foundation/aafwk/services/abilitymgr_lite:aafwk_services_lite", "features":[] }
  5. + { "name": "aafwk_services_lite", "dir": "//foundation/aafwk/services/abilitymgr_lite:aafwk_services_lite", "features":[] },^M
  6. + { "name": "cat_view", "dir": "//applications/sample/camera/catView:catView", "features": []}^M
  7. ]
  8. },
  9. {
复制代码

3.3 然后将动态库,资源文件夹,config.json文件,先打包为zip包,然后再修改后缀名为hap,这样就得到了一个香喷喷的hap包了

然后返回文章开头去看如何烧录。。。。。
那就先写到这儿,有需要咨询的某些细节欢迎留言

catView.zip

325.95 KB, 下载次数: 1, 下载积分: 积分 -1 分

catView.zip

330.23 KB, 下载次数: 1, 下载积分: 积分 -1 分

绿波电龙 2021-1-26 09:45:59
凯哥出连载,下一集啥时候?
回复

举报

黄少浪 2021-1-28 14:33:18
就一个hap包?代码呢??
回复

举报

秦智凯 2021-1-29 18:04:03
兄弟我有两个附件,第二个就是代码咧,作为一个崇尚开源的人,怎么会抠抠索索不给代码呢!
回复

举报

评论

您需要登录后才可以回帖 登录 | 注册

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

最新文章

快速回复 返回顶部 返回列表