开源基础软件社区

除轻量级智能穿戴设备，现鸿蒙支持的手机、汽车、TV、手表、平板等属于富鸿蒙，在JS语言的项目中也有Java模块，并提供了JS跨语言调用Java方法的技术。现需要实现查看商品评论时，统计出长评、中评和短评的比例，这里将评论数据请求来后调用Java进行计算。JS调用Java有Ability方式和InternalAbility方式两种，前者可以被不同的JS方法调用，后者适用于与JS业务逻辑关联性强，响应时延要求高的服务。这里采用Ability的方式。1、新...

在项目开发中，有些业务需求是需要通过多个组件共同实现的。为了便于模块化管理，减少代码的冗余，我们可以使用自定义组件，将多个组件融合成为一个组件。这部分官方文档中个人感觉讲述的不够详细和连贯，在此做一个总结。1、新建组件在项目工程目录上右键,New,JSComponent即可新建一个组件，目录自动生成在js文件夹中，与default平级。2、前端设计自定义组件的目录结构和页面一致，这里做一个购物车中可以增加和减少商品个数的...

1、list加载更多如果在list中需要展示的数据非常多，那么一次性获取全部数据并显示，对于后端服务器和前段渲染的性能都是很大的负担，浪费资源且页面加载速度会很慢。在网页端做分页普遍是用户点击“上一页”，“下一页”进行翻页，而移动端设备一般是在滑动到页面底端后加载下一页数据，并将数据接在列表底部。在list组件中，可以通过onscrollbottom属性绑定事件并处理。视觉效果上来看数据是连续的，但其中已经触发了一次翻页...

在应用开发时，我们常需要将一些数据缓存到本地，以提升用户体验。比如在一个电商的app中，如果希望用户登录成功后，下次打开app可以自动登录，就需要将用户信息存储到缓存中。鸿蒙JS开发模式提供了操作数据缓存的API，首先需导入storage模块。importstoragefrom'system.storage';添加缓存的API为storage.set()，指定key和value，在用户登录成功后将用户名和密码缓存到本地：登录login(){fetch.fetch({url:this.url+"userloginp...

在项目中，页面之间的路由跳转是十分普遍的。鸿蒙JS开发提供了四种页面跳转的方式（轻量级智能穿戴仅支持replace()），之前的帖子中也有涉及到一些，本文将详解这四个API并与微信小程序中类似的页面跳转方式做比较。鸿蒙页面路由需导入router模块。importrouterfrom'system.router';1、router.push()&wx.navigateTo()这两个方法都是压栈式跳转，即将跳转到的目标页面“压”在源页面上，源页面不销毁，按返回键即可返回源页面。r...

在进入APP时，通常都会有一个欢迎界面，用于展示APP的名称、logo，并预先加载部分数据。既然是欢迎页面，自然少不了一些动画元素。简单运用了CSS3和JS的动画效果，progress组件以及倒计时撸了一个欢迎页面。直接上效果：1、基于CSS3的动画效果1.1给动画元素设置animation属性。animationname：动画名animationduration：动画持续时间animationdelay：动画开始前延迟时间animationiterationcount：动画重复次数animationtimingfu...

春节在家回看了张荣超老师的“从零开发鸿蒙小游戏APP“直播课（https:harmonyos.51cto.comactivity17），听完后在手机设备上完善了功能并实现了一个简单的2048小游戏。这其中涉及到canvas和stack组件，在此做一些笔记。效果图：1、canvas组件画布组件，微信小程序也有，可以在其中动态绘制图形和文字等。在2048游戏中，不同的数字对应的背景颜色都不同，如果使用动态样式，判断和渲染对性能的要求会很高。<canvasclass"content"...

牛年将至，祝大家行行无bug，页页soeasy～在微信小程序中，提供了form组件，可以将input、picker、slider、button等全部放在form中，并设置name属性实现类似html的表单提交功能。鸿蒙js目前是没有form组件的，因此我们需要在提交时手动获取输入框、选择框等的值，自行构建数据对象。1、登录模块这里接着上一篇，通过dialog组件实现了模态登录和注册的窗口。登录窗口的效果如下：每一行中，放置图标和input输入框。input使用的是...

1、menu弹出菜单这是微信小程序没有的一个组件，提供了一个可唤起的轻量级弹出菜单。menu的子组件为option。<menuid"userMenu"onselected"menuSelect"><optionvalue"login">登录<option><optionvalue"register">注册<option><menu>在hml中写好菜单，但这时启动app是不会显示出来的，且不会占用任何页面空间。menu需要在方法中被唤起，因此需要设置id属性。这里通过点击“点击登录注册“文本框唤起菜单：<textif"{{!userInfo}}"o...

1、swiper轮播图微信小程序的swiper组件中只能放置swiperitem，而鸿蒙js的swiper组件中可以放置除list之外的任意组件，功能更强大。除之前讲过用swiper结合自定义tabbar实现底部菜单分页功能，swiper最常用的就是首页的轮播图了。swiper的属性可见官方文档（https:developer.harmonyos.comcndocsdocumentationdocreferencesjscomponentscontainerswiper0000000000611533），开发者工具在duration属性的代码提示是有bug的，这里...

1、tabs,tabbar,tabcontent上章说到，鸿蒙的list组件仅能支持竖向滚动，无法实现横向滚动。如果需要作出可横向滚动的顶部菜单栏，鸿蒙提供了tabs组件。tabs配合两个子元素组件tabbar和tabcontent，即可很轻松地实现顶部菜单+内容切换效果。tabbar的子元素为text，tabcontent的子元素为div。hml：<divclass"container"><tabsclass"tabs"><tabbar><blockfor"{{tabBar}}"><text>{{$item.name}}<text><block><tabbar><tabcontent><b...

1、可滚动区域在许多场景中，页面会有一块区域是可滚动的，比如这样一个简单的每日新闻模块：上面的新闻类型是一块可横向滚动的区域，下方新闻列表是一块可竖向滚动的区域。在微信小程序中，使用scrollview组件即可实现。那么在鸿蒙js组件中，想要实现可滚动的区域，则是使用list组件。list仅支持竖向滚动，横向滚动要用tabs，将在下篇博客讲解。2、list+listitem这里以本地新闻模块为例，数据请求自天行数据接口（https:www.ti...

在微信小程序中，若需要向远程服务器请求数据，使用wx.request接口即可。那么在鸿蒙js开发中，请求远程服务器需要如下几步：1、在config.json配置网络权限和信任域名。网络权限的配置是在module.reqPermissions中，配置以下三个权限。工具有提示，还是比较友好的。"module":{"reqPermissions":[{"name":"ohos.permission.GETNETWORKINFO"},{"name":"ohos.permission.SETNETWORKINFO"},{"name":"ohos.permission.INTERNET"}],......

1、鸿蒙的数据绑定微信小程序的数据绑定是类似于Vue的，wxml文件用{{}}和对应js文件中的data对象中的属性进行绑定。<viewclass"city">{{now.location.name}}市<view>data:{now:{location:{name:"南京"},}}那么鸿蒙中是否也是这样绑定呢？尝试在hml文件的div标签中使用{{}}绑定js文件中的属性值，但却什么都没有显示。<!错误代码><divclass"container"><divclass"top"><divclass"topItem">{{t1}}<div><divclass"topItem">{{t2}}<...

1、macos的鸿蒙环境搭建华为官方文档：https:developer.harmonyos.comcndocsdocumentationdocguidesinstallationprocess0000001071425528官方文档已经说明的比较详细了，我是使用macos的开发者，在创建一个js项目后，Gradle下载完成，报出了如下错误：看起来像是华为镜像仓中找不到包，百度必应都没搜到这种错误，但我感觉还是Gradle的问题。点击DevEcoStudioPreferenceBuild...GradleGradleuserhome，IDE自带的目录是带".m2"的...