HarmonyOS JS卡片之“星座运势”卡片开发

开发 前端 OpenHarmony
JSUI部分,主要是一些布局和样式类,是无法进行数据处理的。做一些弱交互的卡片是非常棒的。Java部分主要也就是用到了三个函数。

[[424569]]

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

前言

本人是JS攻城狮,java属于初学状态,写的不好的地方还请多多指教!

为什么决定开发一个星座运势服务卡片?

主要有以下几点:

  • 老年人和女性都比较关心运势,卡片类型刚好能够清晰展示运势,同时也不需要太多操作,与服务卡片理念契合(弱交互、强服务)。
  • 聚合api上刚好有相应接口,可以直接调用,比较方便。

实现效果

实现了三个卡片(2X2、2X4、4X4)和一个内容页,基于api6开发(API 6目前只支持运行在Phone设备的模拟器上,其它设备暂不支持运行),如何使用API 6点击查看

卡片使用原子化布局实现,根据卡片规格自适应。

内容页可查询关注的星座,调用接口来获取运势。

创建项目

搭建环境,下载开发工具并安装。下载和安装官方文档

打开安装好的DevEco Studio软件,创建项目。官方文档

HarmonyOS JS卡片之“星座运势”卡片开发-鸿蒙HarmonyOS技术社区
HarmonyOS JS卡片之“星座运势”卡片开发-鸿蒙HarmonyOS技术社区

填写创建的工程信息 官方文档

  • Project Type:工程的类型。
  • Service:原子化服务。原子化服务调试、运行时,在设备桌面上没有应用图标、免安装的。
  • Application:传统方式需要安装的应用。
  • Compatible API Version:兼容的SDK最低版本。
  • Show in Service Center:是否在服务中心露出。如果Project Type为Service,则会同步创建一个2*2的服务卡片模板。
HarmonyOS JS卡片之“星座运势”卡片开发-鸿蒙HarmonyOS技术社区
  • 创建好的模板,我们主要会用到以下目录:
HarmonyOS JS卡片之“星座运势”卡片开发-鸿蒙HarmonyOS技术社区

卡片JSUI部分

hml部分

布局

HarmonyOS JS卡片之“星座运势”卡片开发-鸿蒙HarmonyOS技术社区

代码

  1. <div class="normal_container" > 
  2. <!--    2X2 2X4 布局--> 
  3.     <div class="container_top" @click="clickToApp" > 
  4. <!--    2X2 布局--> 
  5.         <div class="top_left"
  6.             <div class="left_item"
  7.                 <text class="left_item_text conName"
  8.                     {{ conName }} 
  9.                 </text> 
  10.             </div> 
  11.             <div class="left_item"
  12.                 <text class="left_item_text conDate"
  13.                     {{ conDate }} 
  14.                 </text> 
  15.             </div> 
  16.             <div class="conAll left_item"
  17.                 <div class="s_score"
  18.                     <text class="left_item_text label_2X2"
  19.                         综合 
  20.                     </text> 
  21.                     <image class="s_star_2X2" for="{{ conAllStarY }}" src="/common/starY.png"></image> 
  22.                     <image class="s_star" for="{{ conAllStarN }}" src="/common/starN.png"></image> 
  23.                 </div> 
  24.             </div> 
  25.             <div class="conPari left_item"
  26.                 <text class="left_item_text" > 
  27.                     速配星座 
  28.                 </text> 
  29.                 <text class="left_item_text conPari_text"
  30.                     {{ conPari }} 
  31.                 </text> 
  32.             </div> 
  33.         </div> 
  34. <!--    2X4 布局--> 
  35.         <div class="top_right"
  36.             <image src="{{ imgSrc }}" class="con_image" ></image> 
  37.         </div> 
  38.     </div> 
  39. <!--    4X4 布局半部分--> 
  40.     <div class="container_bottom" @click="clickToApp" > 
  41.         <div class="list_item item_line_top" > 
  42.             <div class="s_score"
  43.                 <text class="label"
  44.                     爱情 
  45.                 </text> 
  46.                 <image class="s_star" for="{{ conLoveStarY }}" src="/common/starY.png"></image> 
  47.                 <image class="s_star" for="{{ conLoveStarN }}" src="/common/starN.png"></image> 
  48.             </div> 
  49.             <div class="s_score" style="margin-left: 40px;" > 
  50.                 <text class="label"
  51.                     理财 
  52.                 </text> 
  53.                 <image class="s_star" for="{{ conMoneyStarY }}" src="/common/starY.png"></image> 
  54.                 <image class="s_star" for="{{ conMoneyStarN }}" src="/common/starN.png"></image> 
  55.             </div> 
  56.         </div> 
  57.         <div class="list_item"
  58.             <div class="s_score"
  59.                 <text class="label"
  60.                     工作 
  61.                 </text> 
  62.                 <image class="s_star" for="{{ conWorkStarY }}" src="/common/starY.png"></image> 
  63.                 <image class="s_star" for="{{ conWorkStarN }}" src="/common/starN.png"></image> 
  64.             </div> 
  65.             <div class="s_score" style="margin-left: 40px;" > 
  66.                 <text class="label"
  67.                     健康 
  68.                 </text> 
  69.                 <image class="s_star" for="{{ conHealthStarY }}" src="/common/starY.png"></image> 
  70.                 <image class="s_star" for="{{ conHealthStarN }}" src="/common/starN.png"></image> 
  71.             </div> 
  72.         </div> 
  73.         <div class="item_line_bottom" > 
  74.             <div class="s_score"
  75.                 <text class="label"
  76.                     幸运数字 
  77.                 </text> 
  78.                 <text class="score_text"
  79.                     {{ conNumber }} 
  80.                 </text> 
  81.             </div> 
  82.             <div class="s_score" style="margin-left: 78px;" > 
  83.                 <text class="label"
  84.                     幸运颜色 
  85.                 </text> 
  86.                 <text class="score_text"
  87.                     {{ conColor }} 
  88.                 </text> 
  89.             </div> 
  90.         </div> 
  91.         <div class="list_item_more" > 
  92.             <div class="list_item_box1"
  93.                 <text class="item_title_text"
  94.                     综合概述 
  95.                 </text> 
  96.             </div> 
  97.             <div class="list_item_box2"
  98.                 <text class="item_sub_text"
  99.                     {{ conSummary }} 
  100.                 </text> 
  101.             </div> 
  102.         </div> 
  103.     </div> 
  104. </div> 

开发过程的问题

  • hml文本文字必须写在text标签中

  1. <text>文字</text> 
  • hml 动态数据不可以一下 写两个

  1. <text >// 只会渲染第一个 
  2.     {{ conName }} {{ conData }}  
  3. </text> 
  4. <text > // 不支持,直接当文本处理 
  5.     {{ conName + conDate }} 
  6. </text> 
  • hml文件中的{{}},动态数据不支持表达式,比如 5 - 1;
  1. <div if="{{ flag - 1}}"
  2. <div if="{{ !flag}}"
  • list list-item 标签中无法触发点击事件

  1. <list @click="handle"> // 无法触发 
  2.     <list-item> 
  3. </list> 

css部分

代码部分

  1. .normal_container { 
  2.     width: 100%; 
  3.     height: 100%; 
  4.     display: flex; 
  5.     flex-wrap: wrap; 
  6.     background: linear-gradient(to right, #6a11cb 0%, #667eea 100%); 
  7. .container_top{ 
  8.     display: flex; 
  9. /*2X2 布局样式 */ 
  10. .top_left{ 
  11.     width: 165px; 
  12.     height: 150px; 
  13.     display-index: 3; 
  14.     display: flex; 
  15.     flex-direction: column
  16.     padding: 12px 10px; 
  17. .left_item{ 
  18.     margin-top: 8px; 
  19. .left_item_text{ 
  20.     font-size: 16px; 
  21.     color: #ffffff; 
  22. .conDate{ 
  23.     font-size: 14px; 
  24. .conPari_text{ 
  25.     font-size: 18px; 
  26.     margin-left: 6px; 
  27. .s_star_2X2{ 
  28.     width: 16px; 
  29.     height: 16px; 
  30.     margin-left: 2px; 
  31. .label_2X2{ 
  32.     margin-right: 8px; 
  33.     font-size: 16px; 
  34.     color: #fff; 
  35. /*2X4 布局样式右 */ 
  36. .top_right{ 
  37.     width: 150px; 
  38.     height: 150px; 
  39.     display-index: 2; 
  40.     display: flex; 
  41.     align-items: center; 
  42.     justify-content: center; 
  43. .con_image{ 
  44.     width: 120px; 
  45.     height: 120px; 
  46.     border-radius: 70px; 
  47.     border: 4px solid #fdfbfb; 
  48. /*4X4 布局样式下 */ 
  49. .container_bottom{ 
  50.     width: 100%; 
  51.     display-index: 1; 
  52.     padding: 0px 10px; 
  53.     display: flex; 
  54.     flex-direction: column
  55. .list_item{ 
  56.     margin-bottom: 6px; 
  57. .list_item_more{ 
  58.     display: flex; 
  59.     flex-direction: column
  60. .list_item_box2{ 
  61.     width: 100%; 
  62.     height: 80px; 
  63.     margin-top: -5px; 
  64. .item_title_text{ 
  65.     font-size: 18px; 
  66.     color: #fff; 
  67.     padding: 8px 0 0px; 
  68. .item_sub_text{ 
  69.     font-size: 14px; 
  70.     color: #fff; 
  71. /*配套使用*/ 
  72.     text-overflow: ellipsis; 
  73.     max-lines: 3; 
  74. /*配套使用*/ 
  75.     line-height: 22px; 
  76. .item_line_bottom{ 
  77.     border-bottom: 1px solid #eee; 
  78.     padding-bottom: 8px; 
  79. .item_line_top{ 
  80.     border-top: 1px solid #eee; 
  81.     padding-top: 8px; 
  82. /* 通用样式 */ 
  83. /* 评分星 */ 
  84. .s_score{ 
  85.     display: flex; 
  86.     align-items: center; 
  87. .s_star{ 
  88.     width: 14px; 
  89.     height: 14px; 
  90.     margin-left: 2px; 
  91. .label{ 
  92.     margin-right: 8px; 
  93.     font-size: 14px; 
  94.     color: #fff; 
  95. .score_text{ 
  96.     font-size: 14px; 
  97.     color: #fff; 
  98.     margin-left: 6px; 

遇到的问题

  • css boder-raduis 不支持百分比
  • css 不支持 嵌套
  1. .divClass .text{} // 不支持 
  • css font-size color 不支持继承,font-size color等文本必须写在text标签内,写在父级就不会相应
  • css 不支持大部分伪类选择器(:nth-child(n)、:before、:after)

json部分

  1.   "data": { 
  2.     "imgSrc""/common/constellation/天蝎.jpg"
  3.     "conName""天蝎座"
  4.     "conDate""2021年07月27日"
  5.     "conPari""金牛座"
  6.     "conNumber": 1, 
  7.     "conColor""古铜色"
  8.     "conSummary""有些思考的小漩涡,可能让你忽然的放空,生活中许多的细节让你感触良多,五味杂陈,常常有时候就慢动作定格,想法在某处冻结停留,陷入一阵自我对话的沉思之中,这个时候你不喜欢被打扰或询问,也不想让某些想法曝光,个性变得有些隐晦。"
  9.     "conAllStarY": [], 
  10.     "conAllStarN": [], 
  11.     "conLoveStarY": [], 
  12.     "conLoveStarN": [], 
  13.     "conMoneyStarY": [], 
  14.     "conMoneyStarN": [], 
  15.     "conWorkStarY": [], 
  16.     "conWorkStarN": [], 
  17.     "conHealthStarY": [], 
  18.     "conHealthStarN": [] 
  19.   }, 
  20.   "actions": { 
  21.     "clickToApp": {// 跳转事件,跳转到相应内容页 
  22.       "action""router"
  23.       "abilityName""com.example.fortune.MainAbility"
  24.       "params": { 
  25.         "message"""// 点击传递数据 
  26.       } 
  27.     } 
  28.   } 

遇到的问题

  • json中定义数组,如 “conAllStarY”: [“Y”, “Y”], 在java中动态修改它为[“Y”, “Y”, “Y”, “Y”],则实际渲染出来有问题。打印出来的数组正确,for循环出来的数组只有两位。最后将初始数组改为空数组才解决了这个bug。

  1. <text>{{ conWorkStarY }}</text> 
  2. <text for="{{conWorkStarY}}" >a</text> 

结果:

[“Y”, “Y”, “Y”, “Y”]aa

java代码逻辑

公共类

  1. public class UpdataJSData { 
  2.     private static final HiLogLabel TAG = new HiLogLabel(HiLog.DEBUG, 0x0, UpdataJSData.class.getName()); 
  3.     // 数据请求 
  4.     public static void getJsonData(String constellation, ZZRCallBack.CallBackString callBackName ) { 
  5.         String url = "http://web.juhe.cn:8080/constellation/getAll"
  6.         Map<String,String> map = new HashMap<>(); 
  7.         map.put("key""9d075905a3e1c33224ac5bb42f4de458"); 
  8.         map.put("consName", constellation); 
  9.         map.put("type""today"); 
  10.         ZZRHttp.get(url, map, callBackName); 
  11.     } 
  12.     // 将请求到的数据更新到fortuneData中,并返回回去 
  13.     public static ZSONObject setJson(String response) { 
  14.         ZSONObject fortuneData = ZSONObject.stringToZSON(response); 
  15.         int error_code = fortuneData.getIntValue("error_code"); 
  16.         if (error_code == 0) { 
  17.             HiLog.info(TAG,"返回的数据正确,设置js中的json数据"); 
  18.             String[][] all = formatConversion(fortuneData.getString("all")); 
  19.             String[][] love = formatConversion(fortuneData.getString("love")); 
  20.             String[][] money = formatConversion(fortuneData.getString("money")); 
  21.             String[][] work = formatConversion(fortuneData.getString("work")); 
  22.             String[][] health = formatConversion(fortuneData.getString("health")); 
  23.             HiLog.info(TAG,health.toString()); 
  24.             fortuneData.put("imgSrc""/common/constellation/" + fortuneData.getString("name").toString().substring(0, 2) + ".jpg"); 
  25.             fortuneData.put("conName", fortuneData.getString("name"));// 星座名称 
  26.             fortuneData.put("imgSrc""/common/constellation/" + fortuneData.getString("name").toString().substring(0, 2) + ".jpg");// 星座图片路径拼接 
  27.             fortuneData.put("conName", fortuneData.getString("name"));// 星座名称 
  28.             fortuneData.put("conDate", fortuneData.getString("datetime"));// 当前事件 
  29.             fortuneData.put("conPari", fortuneData.getString("QFriend"));// 速配星座 
  30.             fortuneData.put("conNumber", fortuneData.getString("number"));// 幸运数组 
  31.             fortuneData.put("conColor", fortuneData.getString("color"));// 幸运颜色 
  32.             fortuneData.put("conSummary", fortuneData.getString("summary"));// 描述信息 
  33.             fortuneData.put("conAllStarY"all[0]);// 综合评分 标记星 
  34.             fortuneData.put("conAllStarN"all[1]);// 综合评分 未标记星 
  35.             fortuneData.put("conLoveStarY", love[0]);// 爱情评分 标记星 
  36.             fortuneData.put("conLoveStarN", love[1]);// 爱情评分 未标记星 
  37.             fortuneData.put("conMoneyStarY", money[0]);// 理财评分 标记星 
  38.             fortuneData.put("conMoneyStarN", money[1]);// 理财评分 未标记星 
  39.             fortuneData.put("conWorkStarY"work[0]);// 工作评分 标记星 
  40.             fortuneData.put("conWorkStarN"work[1]);// 工作评分 未标记星 
  41.             fortuneData.put("conHealthStarY", health[0]);// 健康评分 标记星 
  42.             fortuneData.put("conHealthStarN", health[1]);// 健康评分 未标记星 
  43.         } else { 
  44.             HiLog.info(TAG,"请求出错,code=" + error_code); 
  45.         } 
  46.         return fortuneData; 
  47.     } 
  48.     // 对分数数据进行封装,转换为二维数组 
  49.     private static String[][] formatConversion(String star) { 
  50.         int myData = Integer.parseInt(star); 
  51.         int myDataY = myData / 20; 
  52.         int myDataN = 5 - myDataY; 
  53.         HiLog.info(TAG,"star=" + star + "myDataY=" + myDataY + "      myDataN=" + myDataN); 
  54.         String myListY[] = new String[myDataY]; 
  55.         String myListN[] = new String[myDataN]; 
  56.         for(int i = 0; i < myDataY; i++) { 
  57.             myListY[i] = "Y"
  58.         } 
  59.         for(int i = 0; i < myDataN; i++) { 
  60.             myListN[i] = "N"
  61.         } 
  62.         String[][] myList = {myListY, myListN}; 
  63.         return myList; 
  64.     } 

数据初始化

  • 创建卡片时,调用MainAbility中onCreateForm方法
  • 实现代码
  1. protected ProviderFormInfo onCreateForm(Intent intent) { 
  2.         HiLog.info(TAG, "更新数据:onCreateForm"); 
  3.         ProviderFormInfo providerFormInfo = new ProviderFormInfo(); 
  4.         long formId = intent.getLongParam(AbilitySlice.PARAM_FORM_IDENTITY_KEY, INVALID_FORM_ID); 
  5.         String formName = intent.getStringParam(AbilitySlice.PARAM_FORM_NAME_KEY); 
  6.         int dimension = intent.getIntParam(AbilitySlice.PARAM_FORM_DIMENSION_KEY, DEFAULT_DIMENSION_2X2); 
  7.         HiLog.info(TAG, "onCreateForm: formId=" + formId + ",formName=" + formName); 
  8.         FormControllerManager formControllerManager = FormControllerManager.getInstance(this); 
  9.         FormController formController = formControllerManager.getController(formId); 
  10.         formController = (formController == null) ? formControllerManager.createFormController(formId, 
  11.                 formName, dimension) : formController; 
  12.         if (formController == null) { 
  13.             HiLog.error(TAG, "Get null controller. formId: " + formId + ", formName: " + formName); 
  14.             return null
  15.         } 
  16.         // 调用公共类中获取数据,传入一个callback方法 
  17.         UpdataJSData.getJsonData("处女座", new ZZRCallBack.CallBackString() { 
  18.             public void onFailure(int code, String errorMessage) { 
  19.                 //http访问出错了,此部分内容在主线程中工作; 
  20.                 //可以更新UI等操作,请不要执行阻塞操作。 
  21.                 HiLog.info(TAG,"更新数据:数据请求失败"+code+","+errorMessage); 
  22.             } 
  23.             public void onResponse(String response) { 
  24.                 //http访问成功,此部分内容在主线程中工作; 
  25.                 //可以更新UI等操作,但请不要执行阻塞操作。 
  26.                 HiLog.info(TAG,"更新数据:数据请求成功"); 
  27.                 ZSONObject fortuneData = setJson(response); 
  28.                 try { 
  29.                     HiLog.info(TAG,"更新数据"); 
  30.                     updateForm(formId, new FormBindingData(fortuneData)); 
  31.                 } catch (FormException e) { 
  32.                     HiLog.info(TAG,"更新数据失败"); 
  33.                 } 
  34.             } 
  35.         }); 
  36.         return providerFormInfo; 

采用定时刷新,星座运势不需要周期性刷新

  • config.js 中设置定时刷新的时间
  1. "forms": [ 
  2.     { 
  3.     "scheduledUpdateTime""10:12", // 定时刷新时间点 
  4.     "updateEnabled"true, // 是否周期性刷新 
  5.     "updateDuration": 0, 
  6.     ... 
  7.     } 
  • 定时刷新会触发widget->WidgetImpl文件的updateFormData方法
  1. public void updateFormData(long formId, Object... vars) { 
  2.      HiLog.info(TAG, "更新数据"); 
  3.      UpdataJSData.getJsonData("双鱼座", new ZZRCallBack.CallBackString() { 
  4.          public void onFailure(int code, String errorMessage) { 
  5.              //http访问出错了,此部分内容在主线程中工作; 
  6.              //可以更新UI等操作,请不要执行阻塞操作。 
  7.              HiLog.info(TAG,"数据请求失败"+code+","+errorMessage); 
  8.          } 
  9.          public void onResponse(String response) { 
  10.              //http访问成功,此部分内容在主线程中工作; 
  11.              //可以更新UI等操作,但请不要执行阻塞操作。 
  12.              HiLog.info(TAG,"数据请求成功"); 
  13.              ZSONObject fortuneData = setJson(response); 
  14.              try { 
  15.                  HiLog.info(TAG,"更新数据"); 
  16.                  ((MainAbility)context).updateForm(formId, new FormBindingData(fortuneData)); //调用MainAbility的方法updateForm(),并将formBindingData作为第二个实参 
  17.              } catch (FormException e) { 
  18.                  HiLog.info(TAG,"更新数据失败"); 
  19.              } 
  20.          } 
  21.      }); 
  22.  } 

内容页部分

  • 内容页布局比4X4的卡片多了个输入框,可进行星座搜索
  • 内容页布局和css同卡片比较相似,这边就贴一下js代码
  1. import http from '@ohos.net.http';// 导入http 
  2. export default { 
  3.     data: { 
  4.         conName: "天蝎座"
  5.         options: { 
  6.             key"9d075905a3e1c33224ac5bb42f4de458"
  7.             type: "today" 
  8.         }, 
  9.         url: ""
  10.         conData: { 
  11.             name"天蝎座"
  12.             datetime: "2021年7月28号"
  13.             img: "/common/images/constellation/天蝎.jpg"
  14.             QFriend: "金牛"
  15.             number: "4"
  16.             color: "粉色"
  17.             summary: "有些思考的小漩涡,可能让你忽然的放空,生活中许多的细节让你感触良多,五味杂陈,常常有时候就慢动作定格,想法在某处冻结停留,陷入一阵自我对话的沉思之中,这个时候你不喜欢被打扰或询问,也不想让某些想法曝光,个性变得有些隐晦。" 
  18.         }, 
  19.         responseData: {} 
  20.     }, 
  21.     onInit() { 
  22.         this.getHttp();// 发送请求 
  23.     }, 
  24. //    输入框改变触发 
  25.     changeCon(v) { 
  26.         this.conName = v.value; 
  27.         console.log(v.value+ 'change conName'); 
  28.     }, 
  29.     getHttp() { 
  30.         this.url = `http://web.juhe.cn:8080/constellation/getAll?key=${this.options.key}&consName=${this.conName}&type=${this.options.type}` 
  31.         let httpRequest = http.createHttp(); 
  32.         httpRequest.request(this.url, { 
  33.           method: 'GET' 
  34.         },(err, data) => { 
  35.           if (err == null) { 
  36.             let conData = JSON.parse(data.result); 
  37.             console.log('Result:' + data.result); 
  38.             if (conData.error_code == 0) { 
  39.                 conData.img = `/common/images/constellation/${(conData.name).slice(0, 2)}.jpg` 
  40.                 conData.allY = this.getNewArr(conData.all"Y"); 
  41.                 conData.allN = this.getNewArr(conData.all"N"); 
  42.                 conData.healthY = this.getNewArr(conData.health, "Y"); 
  43.                 conData.healthN = this.getNewArr(conData.health, "N"); 
  44.                 conData.loveY = this.getNewArr(conData.love, "Y"); 
  45.                 conData.loveN = this.getNewArr(conData.love, "N"); 
  46.                 conData.moneyY = this.getNewArr(conData.money, "Y"); 
  47.                 conData.moneyN = this.getNewArr(conData.money, "N"); 
  48.                 conData.workY = this.getNewArr(conData.work"Y"); 
  49.                 conData.workN = this.getNewArr(conData.work"N"); 
  50.                 this.conData = conData; 
  51.             } else { 
  52.                 console.error("请求失败"); 
  53.             } 
  54.           } else { 
  55.             console.log('error:' + JSON.stringify(err)); 
  56.           } 
  57.         }); 
  58.     }, 
  59. //    数字转化为数组不然for循环不出来 
  60.     getNewArr(score, type){ 
  61.         score = parseInt(parseInt(score) / 20); 
  62.         let arr = []; 
  63.         if (type === "N") { 
  64.             console.log('type' + type) 
  65.             score = 5 - score; 
  66.             for (var i = 0; i < score; i++) { 
  67.                 arr.push(type); 
  68.             } 
  69.         } else { 
  70.             for (var i = 0; i < score; i++) { 
  71.                 arr.push(type); 
  72.             } 
  73.         } 
  74.         return arr; 
  75.     } 
  • 需要注意hml中for循环时,最好绑定tid,不然会复用。
  • 搜索框的value不是双向绑定的,这边需要监听个change事件,来改变value。
  • js部分数据请求时,采用api6,需要自己更改配置设置为兼容api6 官方文档

总结

  • JSUI部分,主要是一些布局和样式类,是无法进行数据处理的。做一些弱交互的卡片是非常棒的。
  • Java部分主要也就是用到了三个函数。onStart:主要做一些js方事件处理。onCreateForm:创建卡片的时候需要。updateFormData:定时刷新和周期性刷新会走到这里
  • 卡片开发目前来说bug还是挺多,限制也挺多的,期待做的越来越好。

源码地址

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-09-15 10:19:15

鸿蒙HarmonyOS应用

2023-11-16 09:47:55

ArkTS鸿蒙

2021-07-22 08:45:47

鸿蒙HarmonyOS应用

2021-08-23 10:12:41

鸿蒙HarmonyOS应用

2021-08-18 10:06:33

鸿蒙HarmonyOS应用

2021-06-21 15:21:52

鸿蒙HarmonyOS应用开发

2021-07-28 14:59:08

鸿蒙HarmonyOS应用

2023-08-04 17:24:43

2022-04-24 15:26:38

服务卡鸿蒙

2021-06-24 14:41:16

鸿蒙HarmonyOS应用

2022-05-09 11:52:38

Java卡片服务卡片

2021-07-20 09:58:16

鸿蒙HarmonyOS应用

2023-04-07 09:20:55

2021-08-20 14:23:14

鸿蒙HarmonyOS应用

2023-06-20 15:45:15

服务卡片鸿蒙

2022-07-26 15:04:11

表情包卡片JS

2021-01-27 11:35:34

高级持续威胁APT网络安全

2021-06-23 16:05:05

鸿蒙HarmonyOS应用

2021-08-23 11:03:54

鸿蒙HarmonyOS应用

2021-08-16 14:42:28

鸿蒙HarmonyOS应用
点赞
收藏

51CTO技术栈公众号