电子发烧友

征文#鸿蒙卡片-物联网DTU污水液位计卡片查看详情：https://bbs.elecfans.com/jishu_2106011_1_1.html5、HarmonyOSAPP开发-JS时钟练习尝试查看详情：https://bbs.elecfans.com/jishu_2104144_1_1.html

2021-06-29 11:30

一、基本情况具备JS与JAVA的入门级知识，初次接触HarmonyOS，学习时间一周以内。二、学习教程https://developer.huawei.com/con

2021-06-16 15:45

一、技术相关项目名称:jltf-SettingsAbilitty项目语言:js体验模板： SettingsAbilitty工具：deveco studio二、效果如下：三、开发体验过程第一步 建立项目新建一个js的应用项目，直接点击next进行下一步第二步修改部分代码主要部分：Hml部分 {{ title }} {{ list_group.value }} {{ list_group.value }} {{ tv_img_text }} Css部分.all { flex-direction: column; background-color: #f1f3f5;}.list_container { flex-direction: column;}.container_tv { display: none;}.content { justify-content: center;}@MEDIA screen and (device-type: tv) { .bar_container {display: none; } .title_container {width: 100%;text-align: left;margin: 24px 45px;height: 100px; } .title {font-weight: bold;font-size: 45px; } /** left */ .list_container {display: none; } .container_tv {display: flex;flex-direction: column;background-image: url("/common/Wallpaper.png"); } .list_tv_container {width: 100%; } .list_tv {margin-left: 24px; } .wearable_item {display: none; } .content_tv {height: 48px;background-color: #33f1f3f5;border-radius: 12px;margin: 6px 0;padding-left: 12px; } .content_tv_text {font-size: 18px;color: #E5FFFFFF; } /** right */ .content_img {flex-direction: column;justify-content: flex-start;align-items: center; } .img_box {margin-top: 76px;background-color: #808080;width: 180px;height: 180px; } .img_img {object-fit: contain;width: 180px;height: 180px; } .text_box {width: 100%;margin-top: 20px;justify-content: center; } .img_text {width: 280px;font-size: 18px;color: #99FFFFFF;text-align: center; }}@media screen and (device-type: wearable) { .bar_container {display: none; } .title_container {justify-content: center;height: 20%; } .title {font-size: 19px;font-weight: bold; } .content_img {display: none; } .list_container {display: none; } .container_tv {display: flex;flex-direction: column;background-color: black; } .list_tv_container {width: 100%;justify-content: center; } .list_tv {width: 90%; } .sub_item {justify-content: center;align-items: center; } .content_tv {justify-content: center; } .content_tv_text {display: none; } .wearable_item {flex-direction: column;align-items: center;justify-content: center; } .wearable_item_img {height: 5px; } .wearable_item_text {height: 48px;padding-bottom: 6px;justify-content: center; } .wearable_item_text_content {font-size: 19px;text-align: center; }}Js部分：const TAG = '[fragment_main]';export default { data: {title: "",array: [[1, 0], [1, 1], [1, 2], [2, 2], [2, 2], [2, 3], [3, 3], [3, 5]],list: [],tv_img_add: "common/profile.png",tv_img_text: "",file_data: [{ "image_add": "common/profile.png",},{ "image_add": "common/ic.png",},{ "image_add": "common/more.png",},{ "image_add": "common/add64.png",},{ "image_add": "common/add64.png",},{ "image_add": "common/add64.png",},{ "image_add": "common/add64.png",},{ "image_add": "common/add64.png",}] }, onInit() {this.title = this.$t('strings.title');this.list = [];this.tv_img_text = this.$t('strings.img_text_0');var str = 'strings.Setting';for (var i = 0; i < this.array.length; i++) {var resource = str + i;var dataItem = { value: this.$t(resource)};this.list.push(dataItem);} }, changeList($idx) {console.log(TAG + $idx);this.tv_img_add = this.file_data[$idx].image_add;this.tv_img_text = this.$t('strings.img_text_' + $idx);this.$element($idx).focus({focus: true}); }}第三步登录你的账号然后启动模拟器即可实现效果完整代码地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/SettingsAbility附件：

2021-08-09 09:40

`显示效果： 上下拖动改变选中的值 布局中的代码：&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;DirectionalLayout xmlns:ohos=&quot;http://schemas.huawei.com/res/ohos&quot; ohos:height=&quot;match_parent&quot; ohos:width=&quot;match_parent&quot; ohos:orientation=&quot;vertical&quot;&gt; &lt;TimePickerohos:id=&quot;$+id:time_picker&quot;ohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:normal_text_color=&quot;#007DFF&quot;ohos:normal_text_size=&quot;25fp&quot;ohos:operated_text_color=&quot;#FF9912&quot;ohos:shader_color=&quot;#00BFFF&quot;/&gt;&lt;/DirectionalLayout&gt;Slice文件中package com.example.jltftiyan5.slice;import com.example.jltftiyan5.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.aafwk.content.Intent;import ohos.agp.components.TimePicker;public class MainAbilitySlice extends AbilitySlice { @Override public void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);TimePicker timePicker = (TimePicker) findComponentById(ResourceTable.Id_time_picker);int hour = timePicker.getHour();int minute = timePicker.getMinute();int second = timePicker.getSecond();timePicker.setHour(19);timePicker.setMinute(18);timePicker.setSecond(12);timePicker.setTimeChangedListener(new TimePicker.TimeChangedListener() {@Overridepublic void onTimeChanged(TimePicker timePicker, int hour, int minute, int second) {}}); } @Override public void onActive() {super.onActive(); } @Override public void onForeground(Intent intent) {super.onForeground(intent); }}完整代码下载地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_TimePicker_component`

2021-03-20 12:26

一、说明使开发人员了解HarmonyOS中JS卡片的开发，包含卡片的创建、更新、删除功能以及事件控制等功能。二、效果图：完整代码地址：https://gitee.com/jltfcloudcn/jump_to/tree/feature/JSMovieCard

2022-07-26 15:23

创建一个新的工程当开始开发一个HarmonyOS应用时，首先需要根据工程创建向导，创建一个新的工程，工具会自动生成对应的代码和资源模板。如果创建的工程包含JS语言，请确保已经下载了JS SDK包

2020-09-18 15:30

`Switch是切换单个设置开/关两种状态的组件。我们体验效果如下。显示效果： 滑动按钮 代码如下：布局中&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;DirectionalLayout xmlns:ohos=&quot;http://schemas.huawei.com/res/ohos&quot; ohos:height=&quot;match_parent&quot; ohos:width=&quot;match_parent&quot; ohos:orientation=&quot;vertical&quot;&gt; &lt;Switchohos:id=&quot;$+id:btn_switch&quot;ohos:height=&quot;30vp&quot;ohos:width=&quot;60vp&quot;ohos:top_margin=&quot;40px&quot;ohos:left_margin=&quot;400px&quot;ohos:text_state_off=&quot;OFF&quot;ohos:text_state_on=&quot;ON&quot;/&gt;&lt;/DirectionalLayout&gt; 完整源码地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_switch_component`

2021-03-24 10:12

`ProgressBar用于显示内容或操作的进度。下面将进行对该组件简单的操作，通过添加不同的属性展示出不同的样式效果。如下：效果显示： 布局中的代码&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;DirectionalLayout xmlns:ohos=&quot;http://schemas.huawei.com/res/ohos&quot; ohos:height=&quot;match_parent&quot; ohos:width=&quot;match_parent&quot; ohos:orientation=&quot;vertical&quot; ohos:background_element=&quot;#FF5A5858&quot;&gt;&lt;Text ohos:height=&quot;match_content&quot; ohos:width=&quot;match_content&quot; ohos:text=&quot;创建ProgressBar效果&quot; ohos:text_size=&quot;22fp&quot; ohos:text_color=&quot;red&quot;/&gt; &lt;ProgressBarohos:progress_width=&quot;10vp&quot;ohos:height=&quot;60vp&quot;ohos:width=&quot;800px&quot;ohos:max=&quot;100&quot;ohos:min=&quot;0&quot;ohos:progress=&quot;60&quot;/&gt; &lt;Textohos:height=&quot;match_content&quot;ohos:width=&quot;match_content&quot;ohos:text=&quot;垂直ProgressBar效果。&quot;ohos:text_size=&quot;22fp&quot;ohos:text_color=&quot;red&quot;/&gt; &lt;Textohos:height=&quot;match_content&quot;ohos:width=&quot;match_content&quot;ohos:text=&quot;设置ProgressBar颜色效果。&quot;ohos:text_size=&quot;22fp&quot;ohos:text_color=&quot;red&quot;/&gt; &lt;ProgressBarohos:orientation=&quot;vertical&quot;ohos:top_margin=&quot;20vp&quot;ohos:height=&quot;150vp&quot;ohos:width=&quot;60vp&quot;ohos:progress_width=&quot;10vp&quot;ohos:max=&quot;100&quot;ohos:min=&quot;0&quot;ohos:progress=&quot;60&quot;ohos:background_instruct_element=&quot;#FFFFFF&quot;ohos:progress_element=&quot;#FF9900&quot;/&gt; &lt;Textohos:height=&quot;match_content&quot;ohos:width=&quot;match_content&quot;ohos:text=&quot;添加分割线效果。&quot;ohos:text_size=&quot;22fp&quot;ohos:text_color=&quot;red&quot;/&gt; &lt;ProgressBarohos:progress_width=&quot;10vp&quot;ohos:height=&quot;60vp&quot;ohos:width=&quot;800px&quot;ohos:max=&quot;100&quot;ohos:min=&quot;0&quot;ohos:progress=&quot;40&quot;ohos:divider_lines_enabled=&quot;true&quot;ohos:divider_lines_number=&quot;5&quot;/&gt; &lt;Textohos:height=&quot;match_content&quot;ohos:width=&quot;match_content&quot;ohos:text=&quot;设置提示文字效果。&quot;ohos:text_size=&quot;22fp&quot;ohos:text_color=&quot;red&quot;/&gt; &lt;ProgressBarohos:progress_width=&quot;10vp&quot;ohos:height=&quot;60vp&quot;ohos:width=&quot;800px&quot;ohos:max=&quot;100&quot;ohos:min=&quot;0&quot;ohos:progress=&quot;40&quot;ohos:divider_lines_enabled=&quot;true&quot;ohos:divider_lines_number=&quot;5&quot;ohos:progress_hint_text=&quot;40%&quot;ohos:progress_hint_text_color=&quot;#FFCC99&quot; /&gt;&lt;/DirectionalLayout&gt;完整代码地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_progressBar_component`

2021-03-29 14:31

`RoundProgressBar用于显示环形进度 代码如下&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;&lt;DirectionalLayoutxmlns:ohos=&quot;http://schemas.huawei.com/res/ohos&quot;ohos:height=&quot;match_parent&quot;ohos:width=&quot;match_parent&quot;ohos:orientation=&quot;vertical&quot;ohos:background_element=&quot;#FF000000&quot;&gt; &lt;DirectionalLayoutohos:height=&quot;0px&quot;ohos:width=&quot;match_parent&quot;ohos:weight=&quot;1&quot;&gt;&lt;RoundProgressBarohos:id=&quot;$+id:round_progress_bar&quot;ohos:height=&quot;200vp&quot;ohos:width=&quot;200vp&quot;ohos:progress_width=&quot;10vp&quot;ohos:progress=&quot;20&quot;ohos:progress_color=&quot;#47CC47&quot;ohos:layout_alignment=&quot;center&quot;/&gt; &lt;/DirectionalLayout&gt; &lt;DirectionalLayoutohos:height=&quot;0px&quot;ohos:width=&quot;match_parent&quot;ohos:weight=&quot;1&quot;&gt;&lt;RoundProgressBarohos:height=&quot;200vp&quot;ohos:width=&quot;200vp&quot;ohos:progress_width=&quot;10vp&quot;ohos:progress=&quot;20&quot;ohos:progress_color=&quot;#47CC47&quot;ohos:start_angle=&quot;45&quot;ohos:max_angle=&quot;270&quot;ohos:progress_hint_text=&quot;加载中。。。&quot;ohos:progress_hint_text_color=&quot;#007DFF&quot;ohos:layout_alignment=&quot;center&quot; /&gt; &lt;/DirectionalLayout&gt;&lt;/DirectionalLayout&gt;完整代码地址：https://gitee.com/jltfcloudcn/jump_to/tree/master/jltf_RoundProgressBar_component`

2021-03-29 14:29

?tid=0203378769001230333&fid=0101303901040230869相关推荐：HarmonyOS应用开发学习路线：https

2020-10-14 18:04