手把手教你用C++在3516上玩應(yīng)用界面開(kāi)發(fā)

小嵌

手把手教你用C++在3516上玩應(yīng)用界面開(kāi)發(fā),   
手把手教你用C++在3516上玩應(yīng)用界面開(kāi)發(fā)

上圖是整個(gè)應(yīng)用跑起來(lái)的效果，整個(gè)邏輯是很簡(jiǎn)單的，如果是用js來(lái)寫(xiě)的話(huà)那就不值一提了，正是因?yàn)槭怯肅++來(lái)寫(xiě)的，所以出現(xiàn)了無(wú)數(shù)的坑。貌似在幾個(gè)鴻蒙的社區(qū)里沒(méi)看到過(guò)有人搞過(guò)類(lèi)似這種，所以作為第一個(gè)吃螃蟹的人我來(lái)了。不過(guò)這個(gè)螃蟹并不好吃！坑太多了。因?yàn)橘Y料幾乎沒(méi)有，官網(wǎng)上直接給你提示暫未開(kāi)放...

首先呢，
把該demo的hap包（點(diǎn)擊附件下載）放上來(lái) ，然后直接安裝就可以，安裝方法見(jiàn)下面鏈接：

1.官方鏈接：官方指導(dǎo)

2.大神鏈接：https://bbs.elecfans.com/jishu_2029369_1_1.html



大家看過(guò)這個(gè)安裝方法就可以知道，這是把C++應(yīng)用先編程so動(dòng)態(tài)庫(kù)，然后在打包成hap包，進(jìn)行安裝，首先我想在這塊分享一個(gè)我的想法，我的想法就是既然整套系統(tǒng)的源碼都可以了，為什么不能直接按照系統(tǒng)應(yīng)用的方法去搞，直接像系統(tǒng)應(yīng)用一樣去打進(jìn)源碼中去，就可以不用再手動(dòng)安裝，然而，浪費(fèi)了我一天時(shí)間，最終沒(méi)能實(shí)現(xiàn)，分析是卡在了簽名這一塊，因?yàn)槊總�(gè)系統(tǒng)應(yīng)用其實(shí)都有簽名文件，這塊確實(shí)沒(méi)理通，
有整明白的各路大神歡迎指教




下面我順著整個(gè)demo的代碼思路，講解所有代碼，并把所有資源上傳上來(lái)，然后我會(huì)盡量把我所遇到的坑，以及填坑的過(guò)程寫(xiě)出來(lái)，同時(shí)我也會(huì)說(shuō)我的一些想法，各路大神可以一起討論，或者批評(píng)我哪兒的思路是錯(cuò)的。



在開(kāi)始說(shuō)討論代碼之前，我提一下，在C++里寫(xiě)界面代碼也同樣有大家在鴻蒙里無(wú)論是用java還是js寫(xiě)應(yīng)用的生命周期方法（例如OnStart、OnStop生命周期函數(shù)等），當(dāng)然在android中也有。這里我也聽(tīng)過(guò)不少人說(shuō)，這就是android，其實(shí)這里我想說(shuō)一句，
這個(gè)生命周期函數(shù)的思想確實(shí)是比較優(yōu)秀的，harmony拿過(guò)來(lái)用是一件很正常的事情，牽扯不到抄襲android 。


1.demo代碼思路

        其實(shí)整個(gè)demo的大體來(lái)說(shuō)只有兩個(gè)功能：第一個(gè)回退功能，這個(gè)功能呢，就完全沒(méi)有資料了，我完全是從源碼中找的思路，第二個(gè)功能就是用了一個(gè)滑動(dòng)組件，然后再其上放了三個(gè)image組件，實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的照片查看功能。

       首先來(lái)看，無(wú)論要實(shí)現(xiàn)哪個(gè)功能，都碰到了一個(gè)問(wèn)題，就是讓組件能夠顯示圖片，這個(gè)是大坑，尤其是獲取圖片的資源路徑，我曾經(jīng)試過(guò)按照系統(tǒng)應(yīng)用的方式去搞，不過(guò)沒(méi)能成行


1.1 如何讓3516用C++去顯示一張圖片


首先我闡述下：顯示照片的原理，要顯示的照片是放在assets/entry/resources/base/media下，其中這個(gè)文件夾是會(huì)被打包進(jìn)hap包的，下一步就是能夠獲取到該文件夾的路徑，然后顯示出來(lái)就OK了，因?yàn)榉祷劓I的小箭頭圖標(biāo)就是圖片的顯示，所以我們以此為例來(lái)看圖片顯示的全過(guò)程：


1.1.1 首先定義一個(gè)實(shí)際存放照片的路徑，應(yīng)用名+照片路徑

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

復(fù)制代碼


1.1.2 調(diào)用GetSrcPath，獲得其完整路徑，這個(gè)路徑才是可以使用的路徑

• 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;
    
  
• }
  

復(fù)制代碼


1.1.3 調(diào)用SetSrc去顯示完成路徑

• backIcon->SetSrc（g_backIconAbsolutePath）;
  

復(fù)制代碼


PS：這是我摸索出來(lái)的顯示圖片的方法，各路大神有別的方法的話(huà)，分享一下唄

下面首先來(lái)看第一個(gè)返回功能的實(shí)現(xiàn)：


1.2 第一個(gè)回退功能的實(shí)現(xiàn)


1.2.1 首先新建一個(gè)UIImageView組件，并設(shè)置相關(guān)樣式

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

復(fù)制代碼


1.2.2 為該組件設(shè)置點(diǎn)擊事件

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

復(fù)制代碼


1.2.3 將上一步設(shè)置的點(diǎn)擊事件與組件進(jìn)行綁定,并將其加入根組件中

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

復(fù)制代碼


1.3 圖片滑動(dòng)功能的實(shí)現(xiàn)


首先闡述下實(shí)現(xiàn)的思路：先實(shí)現(xiàn)三個(gè)放照片的組件，然后將其放在swipe滑動(dòng)組件中，最后再將swipe滑動(dòng)組件放入根組件中


1.3.1 實(shí)現(xiàn)三個(gè)放照片的組件

• 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）;
  

復(fù)制代碼


1.3.2 實(shí)現(xiàn)swipe滑動(dòng)組件

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

復(fù)制代碼


1.3.3 將第一步實(shí)現(xiàn)的3個(gè)組件放入swipe，并將swipe加入根組件

• swipe->Add（backgroud0）;
    
  
• swipe->Add（backgroud1）;
    
  
• swipe->Add（backgroud2）;
    
  
• swipe->SetLoopState（true）;
    
  
• rootView_->Add（swipe）;
  

復(fù)制代碼








2.坑坑回顧


2.1 目前3516還不支持高分辨率圖片


這個(gè)之所以可以成為一個(gè)坑的原因就是它編譯沒(méi)問(wèn)題，燒錄沒(méi)問(wèn)題，最后點(diǎn)擊運(yùn)行的時(shí)候，才會(huì)出問(wèn)題，讓我一度以為swipe不支持UIImageView，實(shí)際上并不是，而是圖片的分辨率的原因。目前我用的是751*440


2.2 破解sprintf_s頭文件之謎


當(dāng)報(bào)了sprintf_s少頭文件的錯(cuò)誤時(shí)候，你去百度，打開(kāi)10個(gè)網(wǎng)頁(yè)你會(huì)看到11人告訴你它的頭文件是<stdio.h>,然并卵，它的頭文件是#include “securec.h“




......當(dāng)然絕對(duì)不止這么點(diǎn)兒


3.如何使用附件中的demo


3.1將代碼放入指定位置


將代碼放入“代碼目錄/applications/sample/camera“


3.2 修改build，指定文件夾編譯對(duì)應(yīng)的動(dòng)態(tài)庫(kù)


文件為：代碼目錄/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
    
  
• ]
    
  
• },
    
  
• {
  

復(fù)制代碼


3.3 然后將動(dòng)態(tài)庫(kù)，資源文件夾，config.json文件，先打包為zip包，然后再修改后綴名為hap，這樣就得到了一個(gè)香噴噴的hap包了




然后返回文章開(kāi)頭去看如何燒錄。。。。。


那就先寫(xiě)到這兒，有需要咨詢(xún)的某些細(xì)節(jié)歡迎留言