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

小嵌

手把手教你用C++在3516上玩应用界面开发,   
手把手教你用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 首先定义一个实际存放照片的路径，应用名+照片路径

• static const char* const BACK_ICON_PATH = “/catView/assets/entry/resources/base/media/ic_back.png“;
  

复制代码


1.1.2 调用GetSrcPath，获得其完整路径，这个路径才是可以使用的路径

• static char g_backIconAbsolutePath[MAX_PATH_LENGTH] = {0};
    
  
• const char* pathHeader = GetSrcPath（）;
    
  
• if（sprintf_s（g_backIconAbsolutePath,MAX_PATH_LENGTH,“%s%s“,pathHeader,BACK_ICON_PATH） < 0）{
    
  
• printf（“GalleryAbilitySlice::OnStart | g_backIconAbsolutePath error“）;
    
  
• return;
    
  
• }
  

复制代码


1.1.3 调用SetSrc去显示完成路径

• backIcon->SetSrc（g_backIconAbsolutePath）;
  

复制代码


PS：这是我摸索出来的显示图片的方法，各路大神有别的方法的话，分享一下呗

下面首先来看第一个返回功能的实现：


1.2 第一个回退功能的实现


1.2.1 首先新建一个UIImageView组件，并设置相关样式

• backIcon = new UIImageView（）;
    
  
• backIcon->SetPosition（0, 0）;
    
  
• backIcon->SetSrc（g_backIconAbsolutePath）;
    
  
• backIcon->SetTouchable（true）;
    
  
• backIcon->Resize（40,40）;
  

复制代码


1.2.2 为该组件设置点击事件

• auto onClick = [this] （UIView& view, const Event& event） -> bool {
    
  
• TerminateAbility（）;
    
  
• return true;
    
  
• };
  

复制代码


1.2.3 将上一步设置的点击事件与组件进行绑定,并将其加入根组件中

• backIconListener = new EventListener（onClick, nullptr）;
    
  
• backIcon->SetOnClickListener（backIconListener）;
    
  
• rootView_->Add（backIcon）;
  

复制代码


1.3 图片滑动功能的实现


首先阐述下实现的思路：先实现三个放照片的组件，然后将其放在swipe滑动组件中，最后再将swipe滑动组件放入根组件中


1.3.1 实现三个放照片的组件

• backgroud0 = new UIImageView（）;
    
  
• backgroud0->SetPosition（0,0）;
    
  
• backgroud0->SetSrc（g_backGround00AbsolutePath）;
    
  
• backgroud0->SetAutoEnable（false）;
    
  
• backgroud0->Resize（751,440）;
    
  
• 
    
  
• backgroud1 = new UIImageView（）;
    
  
• backgroud1->SetPosition（0,0）;
    
  
• backgroud1->SetSrc（g_backGround01AbsolutePath）;
    
  
• backgroud1->SetAutoEnable（false）;
    
  
• backgroud1->Resize（751,440）;
    
  
• 
    
  
• backgroud2 = new UIImageView（）;
    
  
• backgroud2->SetPosition（0,0）;
    
  
• backgroud2->SetSrc（g_backGround02AbsolutePath）;
    
  
• backgroud2->SetAutoEnable（false）;
    
  
• backgroud2->Resize（751,440）;
  

复制代码


1.3.2 实现swipe滑动组件

• swipe = new UISwipeView（UISwipeView::HORIZONTAL）;
    
  
• swipe->SetPosition（105,40）;
    
  
• swipe->Resize（751,440）;
  

复制代码


1.3.3 将第一步实现的3个组件放入swipe，并将swipe加入根组件

• swipe->Add（backgroud0）;
    
  
• swipe->Add（backgroud1）;
    
  
• swipe->Add（backgroud2）;
    
  
• swipe->SetLoopState（true）;
    
  
• 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

• “component“: [
    
  
• { “name“: “abilitykit_lite“, “dir“: “//foundation/aafwk/frameworks/ability_lite:aafwk_abilitykit_lite“, “features“:[ “enable_ohos_appexecfwk_feature_ability = true“ ] },
    
  
• { “name“: “abilityManager_lite“, “dir“: “//foundation/aafwk/frameworks/abilitymgr_lite:aafwk_abilityManager_lite“, “features“:[] },
    
  
• - { “name“: “aafwk_services_lite“, “dir“: “//foundation/aafwk/services/abilitymgr_lite:aafwk_services_lite“, “features“:[] }
    
  
• + { “name“: “aafwk_services_lite“, “dir“: “//foundation/aafwk/services/abilitymgr_lite:aafwk_services_lite“, “features“:[] },^M
    
  
• + { “name“: “cat_view“, “dir“: “//applications/sample/camera/catView:catView“, “features“: []}^M
    
  
• ]
    
  
• },
    
  
• {
  

复制代码


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




然后返回文章开头去看如何烧录。。。。。


那就先写到这儿，有需要咨询的某些细节欢迎留言