日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
HarmonyOS服務(wù)卡片—?dú)垔W會卡片

想了解更多內(nèi)容，請?jiān)L問：

創(chuàng)新互聯(lián)是一家集網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、網(wǎng)站頁面設(shè)計(jì)、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)的建站公司，已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗(yàn),以探求精品塑造與理念升華,設(shè)計(jì)最適合用戶的網(wǎng)站頁面。 合作只是第一步，服務(wù)才是根本,我們始終堅(jiān)持講誠信，負(fù)責(zé)任的原則，為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場環(huán)境中,互促共生。

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.

引言

2021年7月23日，東京奧運(yùn)會開幕，中國國歌響徹東京，最終拿下38枚金牌、88枚獎(jiǎng)牌。

2021年8月24日，東京殘奧會開幕，中國殘疾運(yùn)動(dòng)員出征東京，精彩正在繼續(xù)…

需求分析

奧運(yùn)會是國民最關(guān)注的體育賽事，無論是穩(wěn)扎穩(wěn)打的乒乓球，還是獨(dú)占鰲頭的跳水，我們對體育賽事和參賽選手都如數(shù)家珍，然而十幾天后的殘奧會卻鮮為人知。本APP旨在為用戶打造一款能夠快速了解殘奧會動(dòng)態(tài)和相關(guān)知識的應(yīng)用，讓更多人關(guān)注到殘奧會，關(guān)注這群同樣為國家爭取榮譽(yù)的運(yùn)動(dòng)員們。

主要功能介紹

長按殘奧會服務(wù)卡片應(yīng)用，點(diǎn)擊服務(wù)卡片選項(xiàng)，即可顯示已開發(fā)的服務(wù)卡片。根據(jù)三種不同規(guī)格尺寸的服務(wù)卡片，可以分別查看殘奧會獎(jiǎng)牌榜、殘奧會賽事、以及殘奧會的中國運(yùn)動(dòng)員信息。具體如下：

1、服務(wù)卡片(2×2)

2×2的卡片樣式為東京殘奧會會標(biāo)，效果如下圖1所示：

圖1 2×2卡片樣式

點(diǎn)擊該卡片即可跳轉(zhuǎn)至獎(jiǎng)牌榜頁面，查看各國獎(jiǎng)牌數(shù)量。如圖2所示：

圖2 獎(jiǎng)牌榜

2、服務(wù)卡片(2×4)

在2×4的卡片中，左邊對東京殘奧會吉祥物進(jìn)行展示;右邊選取了四個(gè)東京殘奧會賽事圖片進(jìn)行展示，效果如圖3所示：

圖3 2×4卡片樣式

點(diǎn)擊卡片即可進(jìn)入應(yīng)用的主界面查看具體項(xiàng)目，主界面如圖4所示：

圖4 主界面

點(diǎn)擊主界面中的任意一個(gè)賽事圖標(biāo)即可進(jìn)入賽事的詳情界面，如圖5所示：

圖5 賽事項(xiàng)目簡介

3、服務(wù)卡片(4×4)

在4×4的卡片中，上方展示的是東京殘奧會吉祥物，下方展示的是我們選取的參加本次殘奧會的中國運(yùn)動(dòng)員圖片。點(diǎn)擊卡片即可進(jìn)入主界面查看各位中國運(yùn)動(dòng)員的詳細(xì)信息。

圖6 4×4卡片樣式

技術(shù)實(shí)現(xiàn)

一.創(chuàng)建工程

打開DevEco Studio，點(diǎn)擊File→New→New Project;選擇Empty Ability(Java);點(diǎn)擊”Next“按鈕;即可進(jìn)入項(xiàng)目配置界面。在此界面中，Project Name項(xiàng)目名稱可自定義，此處命名為ParalympicGamesCard;Project Type項(xiàng)目類型選擇應(yīng)用Application;Package Name包名會根據(jù)前面的信息自動(dòng)生成;Save Location存儲路徑可自行設(shè)置;Compatible API Version可兼容的API版本此處選擇版本4;Device Type設(shè)備類型選擇Phone。在完成配置信息設(shè)置后，點(diǎn)擊”Finish“按鈕，即可成功創(chuàng)建項(xiàng)目。具體配置信息可參考圖7。

圖7 配置項(xiàng)目

二.殘奧會服務(wù)卡片實(shí)現(xiàn)

1.卡片生成

1)在項(xiàng)目包名上點(diǎn)擊右鍵，選擇New→Service Widget。

圖8 創(chuàng)建卡片

2)選擇服務(wù)卡片種類，用戶可以選擇Template下任意一種模板，選中后點(diǎn)擊Next。

圖9 選擇模板

3)配置服務(wù)卡片信息。其中Service Widget Name卡片名稱可以自定義;Description詳細(xì)信息用戶也可以自定義;Ability默認(rèn)會使用MainAbility;Type類型可以根據(jù)實(shí)際開發(fā)情況選擇JAVA或者JS語言;Support Dimensions支持的樣式可以勾選后兩個(gè)，這樣就可以得到22、24、4*4三種尺寸的服務(wù)卡片。點(diǎn)擊”Finish“按鈕即可完成服務(wù)卡片的創(chuàng)建。

圖10 配置服務(wù)卡片

2.卡片布局

本APP中三種卡片的布局分別在下圖紅框的xml文件中進(jìn)行配置，文件名的尾數(shù)如”2_2“表示的是2*2服務(wù)卡片的布局文件，其余兩個(gè)尾數(shù)分別為”2_4“和”4_4“的xml文件同理。

圖11 xml文件

下面以2*2服務(wù)卡片為例講解布局的實(shí)現(xiàn)。界面包含一張Image圖片和一個(gè)Text文本框，將Text的文字設(shè)置為“殘奧會獎(jiǎng)牌榜”，并通過height、width、margin等設(shè)置兩個(gè)控件的高度、寬度、間隔等屬性。

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
    3. 
  
  
  
  
  3.     ohos:height="match_parent" 
    4. 
  
  
  
  
  4.     ohos:width="match_parent" 
    5. 
  
  
  
  
  5.     ohos:id="$+id:layout_2x2" 
    6. 
  
  
  
  
  6.     ohos:background_element="#FFFFFF" 
    7. 
  
  
  
  
  7.     ohos:remote="true"> 
    8. 
  
  
  
  
  8.    
  
  
  
  
  9.        ohos:height="100vp" 
    10. 
  
  
  
  
  10.        ohos:width="100vp" 
    11. 
  
  
  
  
  11.        ohos:image_src="$media:aoyunhui" 
    12. 
  
  
  
  
  12.        ohos:horizontal_center="true" 
    13. 
  
  
  
  
  13.        ohos:scale_mode="zoom_start" 
    14. 
  
  
  
  
  14.        ohos:start_margin="12vp" 
    15. 
  
  
  
  
  15.        ohos:top_margin="25vp"/> 
    16. 
  
  
  
  
  16.    
  
  
  
  
  17.        ohos:height="match_content" 
    18. 
  
  
  
  
  18.        ohos:width="match_parent" 
    19. 
  
  
  
  
  19.        ohos:align_parent_bottom="true" 
    20. 
  
  
  
  
  20.        ohos:bottom_margin="15vp" 
    21. 
  
  
  
  
  21.        ohos:end_margin="15vp" 
    22. 
  
  
  
  
  22.        ohos:orientation="vertical" 
    23. 
  
  
  
  
  23.        ohos:start_margin="12vp"> 
    24. 
  
  
  
  
  24.       
  
  
  
  
  25.            ohos:id="$+id:title" 
    26. 
  
  
  
  
  26.            ohos:height="match_content" 
    27. 
  
  
  
  
  27.            ohos:width="match_parent" 
    28. 
  
  
  
  
  28.            ohos:text="殘奧會獎(jiǎng)牌榜" 
    29. 
  
  
  
  
  29.            ohos:text_color="#130c0e" 
    30. 
  
  
  
  
  30.            ohos:text_size="20fp" 
    31. 
  
  
  
  
  31.            ohos:text_weight="500" 
    32. 
  
  
  
  
  32.            ohos:top_margin="0vp" 
    33. 
  
  
  
  
  33.            ohos:truncation_mode="ellipsis_at_end"/> 
    34. 
  
  
  
  
  34.      
    35. 
  
  
  
  
  35.  
    36.

3.卡片信息創(chuàng)建、更新、刪除

對卡片進(jìn)行操作時(shí)，需要對創(chuàng)建的卡片信息進(jìn)行持久化操作，以便再次獲取或更新卡片實(shí)例時(shí)能夠直接使用，即需要存儲卡片信息。主要采用對象關(guān)系型數(shù)據(jù)庫來實(shí)現(xiàn)，需要重寫如下幾個(gè)函數(shù)：表示創(chuàng)建卡片的回調(diào)函數(shù)onCreateForm()、表示更新卡片信息的onUpdataForm()、以及表示銷毀卡片和刪除卡片信息onDeleteForm()?？ㄆ枰拇鎯π畔ǎ嚎ㄆ琁D、卡片名稱、卡片尺寸大小(22、24、4*4)，這些回調(diào)函數(shù)在創(chuàng)建服務(wù)卡片時(shí)即可自動(dòng)生成?；卣{(diào)函數(shù)代碼如下：

 
 
 
 
    
  
  
  
  
  1. //創(chuàng)建卡片 
    2. 
  
  
  
  
  2. @Override 
    3. 
  
  
  
  
  3. protected ProviderFormInfo onCreateForm(Intent intent) { 
    4. 
  
  
  
  
  4.     HiLog.info(TAG, "onCreateForm"); 
    5. 
  
  
  
  
  5.     long formId = intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY, INVALID_FORM_ID); 
    6. 
  
  
  
  
  6.     String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY); 
    7. 
  
  
  
  
  7.     int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_2X2); 
    8. 
  
  
  
  
  8.     HiLog.info(TAG, "onCreateForm: formId=" + formId + ",formName=" + formName); 
    9. 
  
  
  
  
  9.     FormControllerManager formControllerManager = FormControllerManager.getInstance(this); 
    10. 
  
  
  
  
  10.     FormController formController = formControllerManager.getController(formId); 
    11. 
  
  
  
  
  11.     formController = (formController == null) ? formControllerManager.createFormController(formId, 
    12. 
  
  
  
  
  12.             formName, dimension) : formController; 
    13. 
  
  
  
  
  13.     if (formController == null) { 
    14. 
  
  
  
  
  14.         HiLog.error(TAG, "Get null controller. formId: " + formId + ", formName: " + formName); 
    15. 
  
  
  
  
  15.         return null; 
    16. 
  
  
  
  
  16.     } 
    17. 
  
  
  
  
  17.     return formController.bindFormData(); 
    18. 
  
  
  
  
  18. } 
    19. 
  
  
  
  
  19.  
    20. 
  
  
  
  
  20. //更新卡片 
    21. 
  
  
  
  
  21. @Override 
    22. 
  
  
  
  
  22. protected void onUpdateForm(long formId) { 
    23. 
  
  
  
  
  23.     HiLog.info(TAG, "onUpdateForm"); 
    24. 
  
  
  
  
  24.     super.onUpdateForm(formId); 
    25. 
  
  
  
  
  25.     FormControllerManager formControllerManager = FormControllerManager.getInstance(this); 
    26. 
  
  
  
  
  26.     FormController formController = formControllerManager.getController(formId); 
    27. 
  
  
  
  
  27.     formController.updateFormData(formId); 
    28. 
  
  
  
  
  28. } 
    29. 
  
  
  
  
  29.  
    30. 
  
  
  
  
  30. //刪除卡片 
    31. 
  
  
  
  
  31. @Override 
    32. 
  
  
  
  
  32. protected void onDeleteForm(long formId) { 
    33. 
  
  
  
  
  33.     HiLog.info(TAG, "onDeleteForm: formId=" + formId); 
    34. 
  
  
  
  
  34.     super.onDeleteForm(formId); 
    35. 
  
  
  
  
  35.     FormControllerManager formControllerManager = FormControllerManager.getInstance(this); 
    36. 
  
  
  
  
  36.     formControllerManager.deleteFormController(formId); 
    37. 
  
  
  
  
  37. } 
    38.

4.將卡片在桌面上創(chuàng)建快捷方式

下面我們講解如何在桌面上創(chuàng)建三種不同尺寸卡片的快捷方式。

第一步：長按APP圖標(biāo)，點(diǎn)擊服務(wù)卡片。如圖12所示：

圖12 點(diǎn)擊服務(wù)卡片

第二步：用戶將喜愛的卡片選擇“添加到桌面”，如圖13所示：

圖13 添加到桌面

第三步：用戶選擇喜歡的卡片添加到桌面上，則桌面會出現(xiàn)對應(yīng)的服務(wù)卡片。如圖14所示：

圖14 添加桌面效果

5.卡片的點(diǎn)擊跳轉(zhuǎn)

點(diǎn)擊 22服務(wù)卡片后默認(rèn)跳轉(zhuǎn)至獎(jiǎng)牌榜顯示頁面，24服務(wù)卡片默認(rèn)跳轉(zhuǎn)至主界面，再點(diǎn)擊主界面的各賽事圖標(biāo)按鈕進(jìn)入賽事項(xiàng)目詳情頁面。下面詳細(xì)介紹一下如何實(shí)現(xiàn)上述提到的頁面跳轉(zhuǎn)功能。

1)AoyunhuiwidgetImpl文件設(shè)置

在widght文件下的AoyunhuiwidgetImpl卡片設(shè)置文件中，需要重寫bindFormData()方法。通過switch…case…方式控制跳轉(zhuǎn)的具體指向，當(dāng)卡片尺寸為22時(shí)，跳轉(zhuǎn)指向的Ability名稱為MainAbility2;當(dāng)卡片尺寸為24時(shí)，跳轉(zhuǎn)指向的Ability名稱為MainAbility。

圖15AoyunhuiwidgetImpl文件位置

 
 
 
 
    
  
  
  
  
  1. @Override 
    2. 
  
  
  
  
  2. public ProviderFormInfo bindFormData() { 
    3. 
  
  
  
  
  3.     ...... 
    4. 
  
  
  
  
  4.     switch (dimension){//用于控制跳轉(zhuǎn)的具體指向 
    5. 
  
  
  
  
  5.         case DEFAULT_DIMENSION_2X2: 
    6. 
  
  
  
  
  6.             abilityName= "MainAbility2";//跳轉(zhuǎn)指向頁面的Ability名稱 
    7. 
  
  
  
  
  7.             componentProvider=new ComponentProvider();//2*2尺寸 
    8. 
  
  
  
  
  8.     componentProvider.setIntentAgent(ResourceTable.Id_layout_2x2,startAbilityIntentAgent(abilityName)); 
    9. 
  
  
  
  
  9.             break; 
    10. 
  
  
  
  
  10.         case DIMENSION_2X4: 
    11. 
  
  
  
  
  11.             abilityName="MainAbility";//跳轉(zhuǎn)指向頁面的Ability名稱 
    12. 
  
  
  
  
  12.             componentProvider=new ComponentProvider();//2*4尺寸   componentProvider.setIntentAgent(ResourceTable.Id_layout_2x4,startAbilityIntentAgent(abilityName)); 
    13. 
  
  
  
  
  13.     break; 
    14. 
  
  
  
  
  14.     } 
    15.

2)MainAbility2Slice文件設(shè)置

在MainAbility2Slice文件中，調(diào)用webview()方法，將url地址作為入?yún)魅敕椒ㄖ校瓿稍O(shè)置需要跳轉(zhuǎn)的獎(jiǎng)牌榜網(wǎng)頁url地址，實(shí)現(xiàn)點(diǎn)擊2*2卡片后跳轉(zhuǎn)至獎(jiǎng)牌榜顯示頁面的效果。

 
 
 
 
    
  
  
  
  
  1. public void onStart(Intent intent) { 
    2. 
  
  
  
  
  2.     ... 
    3. 
  
  
  
  
  3. super.setUIContent(ResourceTable.Layout_ability_main2); 
    4. 
  
  
  
  
  4.     String url="https://www.baidu.com/s?ie=utf-8&fr=bks0000&wd=%E5%A5%A5%E8%BF%90%E4%BC%9A%E5%A5%96%E7%89%8C%E6%A6%9C";//跳轉(zhuǎn)至獎(jiǎng)牌榜 
    5. 
  
  
  
  
  5.     ... 
    6. 
  
  
  
  
  6.     webview(url); 
    7. 
  
  
  
  
  7. } 
    8.

3)MainAbilitySlice文件設(shè)置

第一步：主界面布局

APP的主界面布局定義在ability_main.xml文件中，界面包含7個(gè)Image圖片和6個(gè)Text文本框。其中，7個(gè)Image圖片包括一個(gè)首頁裝飾圖和六個(gè)賽事項(xiàng)目圖標(biāo);6個(gè)Text文本框用于顯示賽事項(xiàng)目的名稱。在設(shè)置好各控件的相關(guān)屬性之后，通過setUIContent()方法將ability_main.xml文件設(shè)置為APP的主界面布局。代碼如下，布局效果可參考圖16。

 
 
 
 
    
  
  
  
  
  1. super.setUIContent(ResourceTable.Layout_ability_main); 
    2.

圖16 主界面布局

第二步：主界面跳轉(zhuǎn)至賽事項(xiàng)目詳情界面

在MainAbilitySlice文件的onStart()方法中，通過findComponentById()的方法，實(shí)現(xiàn)上面1)AoyunhuiwidgetImpl文件設(shè)置小節(jié)中提到的賽事項(xiàng)目的定位。以舉重項(xiàng)目為例，在主界面中，獲取“舉重”項(xiàng)目的圖片控件，并為其設(shè)置onClick()點(diǎn)擊跳轉(zhuǎn)事件，將跳轉(zhuǎn)指向的Ability名稱withAbilityName()設(shè)置為舉重頁面的Ability，即WeightliftingAbility，實(shí)現(xiàn)點(diǎn)擊舉重圖片后跳轉(zhuǎn)至舉重項(xiàng)目詳情頁面的效果，具體代碼如下：

 
 
 
 
    
  
  
  
  
  1. public void onStart(Intent intent) { 
    2. 
  
  
  
  
  2.     ... 
    3. 
  
  
  
  
  3.     findComponentById(ResourceTable.Id_juzhong).setClickedListener(new Component.ClickedListener() {//獲取舉重項(xiàng)目的圖片控件 
    4. 
  
  
  
  
  4.         @Override 
    5. 
  
  
  
  
  5.         public void onClick(Component component) {//為舉重圖片設(shè)置點(diǎn)擊事件 
    6. 
  
  
  
  
  6.             Intent secondIntent = new Intent(); 
    7. 
  
  
  
  
  7.             secondIntent.setOperation(new Intent.OperationBuilder() 
    8. 
  
  
  
  
  8.                     .withBundleName("com.huawei.ParalympicGamesCard") 
    9. 
  
  
  
  
  9.                     .withAbilityName("com.huawei.ParalympicGamesCard.WeightliftingAbility")//將跳轉(zhuǎn)指向的Ability名稱設(shè)置為舉重的Ability 
    10. 
  
  
  
  
  10.                     .build()); 
    11. 
  
  
  
  
  11.             startAbility(secondIntent); 
    12. 
  
  
  
  
  12.         } 
    13. 
  
  
  
  
  13.     }); 
    14.

第三步：舉重項(xiàng)目詳情界面WeightliftingAbilitySlice

WeightliftingAbilitySlice舉重項(xiàng)目詳情界面實(shí)現(xiàn)原理和第一步主界面實(shí)現(xiàn)原理相似。在ability_weightlifting.xml文件中界面包含Image圖片和Text文本框控件，其中圖片用來存放舉重比賽照片，Text文字用來存放舉重項(xiàng)目的文字介紹。在完成設(shè)置各控件屬性后，通過setUIContent()方法將ability_weightlifting.xml文件設(shè)置為舉重項(xiàng)目詳情界面布局。舉重項(xiàng)目詳情界面效果可參考圖17。

 
 
 
 
    
  
  
  
  
  1. super.setUIContent(ResourceTable.Layout_ability_weightlifting); 
    2.

圖17 舉重項(xiàng)目詳情界面

想了解更多內(nèi)容，請?jiān)L問：

和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.


本文名稱：HarmonyOS服務(wù)卡片—?dú)垔W會卡片
文章出自：http://m.5511xx.com/article/dhgoogc.html