harmonyos

放假闲来无事，继续跟大家分享仓颉语言的开发教程，今天介绍一下自定义弹窗。仓颉语言中的自定义弹窗和ArkTs类似，但是还是有一些不同的地方。在仓颉中通过CustomDialogController实现自定义弹窗，在弹窗中使用构造函数CustomDialogControllerOptions来传递弹窗的所有参数,为大家贴一段演示代码： var dialogController: CustomDialogController = CustomDialogController(CustomDialogControllerOptions( builder: loadingdialog(), custom...

大家上午好，今天来聊一聊仓颉开发语言中的动画开发。仓颉中的动画通常有两种方式，分别是属性动画和显示动画，我们今天以下面的加载动画为例，使用显示动画和属性动画分别实现一下，看看他们有什么区别。显示动画显示动画是幽蓝君比较习惯使用的方式，它主要依赖animateTo方法来实现。首先我要现在页面上添加加载图片，并且将它的角度设置为变量。仓颉语言这里有一个奇怪的地方，角度属性只设置angle的话是无效的，必须同时设置z和angle： @State var angle:Float32 = 0.0 Column{ Image(@r(app.media.loading)) .width(70) .heigh...

听说Pura80要来了？感觉华为的新品像下饺子一样，让人目不暇接，每隔几天就有发布会看，真不错呀。节后第一天，为了缓解大家假期的疲惫，咱们今天做点简单的内容，就是商城的登录页面。其实这一次分享的仓颉语言商城应用沿用了之前ArkTs版本的商城页面，幽蓝君认为这个应用复杂程度和难度都很适中，适合大多数友友系统的学习仓颉语言。也能感受一下仓颉语言和Arkts在各个方面的不同之处。登录页面的代码就和Arkts非常类似，如果你不是对这两个语言非常熟悉甚至不容易看出这些细微的差别，但正是这些细微差别让人不知所措。比如颜色的写法，仓颉语言的枚举类型变成了大写，另外不支持字符串类型，但是支持UInt32类型，...

大家上午好，仓颉语言商城应用的开发进程已经过半，不知道大家通过这一系列的教程对仓颉开发是否有了进一步的了解。今天要分享的购物车页面：看到这个页面，我们首先要对它简单的分析一下。这个页面一共分为三部分，分别是导航栏、购物车列表和底部的结算栏。也能它们是column布局，那么怎么样让这三部分刚好撑满整个页面，有一个简单的办法：给导航栏和结算栏一个固定的高度，然后给List组件设置layoutWeight(1)属性即可。写一个简单的页面结构: Column{ Row{ //导航栏 } .width(100.percent) .height(60) List{ //购物车列表 } .width(100...

前些天发现一个问题，鸿蒙官方的进度条组件Progress虽然提供了比较丰富的功能，但是有时候还是不能满足开发的需要。比如有时候我需要在进度条上有个圆点来控制进度，Progress就没有提供这种样式，所以今天就跟大家分享一下自定义进度条的实现过程。这里我使用层叠布局，将黑色的总长度部分和白色部分进行层叠，白色部分的直线和圆点使用横向布局，当进度变化时只需要修改白色直线部分的长度，圆点会自动跟随移动。然后给圆点添加拖动手势，这样一个带圆点的进度条就完成了，比较简单，直接把封装好的完整代码贴在下面： import { componentUtils } from "@kit.ArkUI&qu...

今天继续为大家带来仓颉语言开发商城应用的实战教程，今天的内容是实现商品分类页。分类页面要在基本布局的基础上增加一些动态效果，比如点击状态的切换和两个列表容器的联动。下面为大家详细介绍。分类列表先来看左侧的分类列表，很明显是一个List容器，样式上比较简单，只有一个文本，不过它有个点击状态的切换效果。在添加组件之前，我们需要先请求到分类的数据，关于仓颉语言的网络请求上一篇文章已经分享过，下面再贴一下分类列表的网络请求具体代码，要注意的是，嵌套数据的修改需要使用ObservedArrayList修饰才能在页面上实时变化： @State var classList:ObservedArrayList...

大家好，今天要分享的是仓颉语言商城应用的搜索页。搜索页的内容比较多，都有点密集恐惧症了，不过我们可以从上至下将它拆分开来，逐一击破。导航栏搜索页的的最顶部是导航栏，由返回按钮和搜索框两部分组成,比较简单，具体实现代码如下： Row(6){ Image(@r(app.media.back)) .width(30) .height(30) .onClick({evet => Router.back()}) Row{ Search(value: "", placeholder: "搜索商品") .searchButton("搜索") ...

又到了高考的日子，幽蓝君在这里祝各位考生朋友冷静答题，超常发挥。今天要分享的内容是仓颉语言商城应用的个人中心页面，先看效果图：下面介绍下这个页面的实现过程。我们可以先分析下整个页面的布局结构。可以看出它是纵向的布局，整个页面由导航栏、个人资料、vip横条和我的订单几部分构成。导航栏我们遇到过很多次了，需要注意的地方就是让标题居中，返回图标靠左。最简单的办法让它俩不在一个层级上，互不影响，所以我们使用层叠布局实现： Stack { Text('个人中心') .fontSize(16) .fontWeight(FontWeight.Bold) .fontColor(Color.BLACK) Row...

大家好，今天来分享一下仓颉开发语言中的状态存储。主要介绍AppStorage和PersistentStorage两部分内容。AppStorageAppStorage是应用全局级的状态存储，可以在应用的任何地方随时使用。先介绍一下AppStorage的存储方法，有set和setOrCreate两种方式，区别是set只能设置已经创建了的字段的值，相当于修改值，而setOrCreate方法的作用是如果没有字段时会自动创建，所以我推荐大家使用setOrCreate方法。 let store1 = AppStorage.set('name', 'youlan'); let store2 = AppSto...

现在我能理解华为方面不断的鼓励大家在网络上贡献自己的教程。没有教程，没有参考文献，仓颉购物应用的开发过程真是举步维艰，每一步都是摸着石头过河，不过希望通过幽蓝君的文章能让大家少走一些弯路。今天就以购物应用的分类列表为例，分享在仓颉开发语言中如何进行网络请求，以及怎么把请求到的数据展示到应用上。网络权限网络权限在app开发中是一个默认规则，几乎在任何系统的app中进行网络请求之前都要获取网络权限，仓颉也不例外。在仓颉语言中网络权限的请求依然是在module.json5文件中，在module目录下增加网络请求权限： "requestPermissions": [{"n...

大家早上好，今天要分享的内容是仓颉开发语言中的生命周期。其实幽蓝君比较喜欢分享实战写代码，不太喜欢讲太理论的东西，今天之所以单独写一篇文章分享生命周期的内容，因为这部分内容如果不讲一下还真是容易踩坑。生命周期指的是页面或者组件从加载、显示到消失的过程，在这个过程中会有一些系统事件，我们可以在其中进行一些操作。比如ArkTs中有aboutToAppear()、onPageShow()等方法。那么仓颉中的生命周期是什么样的呢？如果你对仓颉毫不了解，只能顺着ArkTs的方式试着去写，你会发现仓颉中没有任何关于这部分的代码提示，然后你硬着头皮完全手写下aboutToAppear、onPageShow等...

经过前几天的分享，大家应该应该对uniapp开发鸿蒙应用的开发语法有了一定的了解，可以进行一些简单的应用开发，今天分享一下在使用uniapp开发鸿蒙应用时怎么运行到鸿蒙设备，并且在开发中怎么调试程序。运行Uniapp项目支持运行到鸿蒙真机和模拟器,不过在这之前你一定要先去AppGallery Connect官网创建一个应用，并且将包名复制。第二步，你如果是要运行到真机，就直接把手机连接到电脑。如果想要运行到模拟器，打开DevEco随便打开一个项目，启动模拟器。然后在HbuilderX的运行菜单下选择运行到鸿蒙，如果是第一次运行这里可能会需要下载真机运行插件然后会看到设备列表，这时候选择底部的配...

仓颉开发语言作为华为为鸿蒙系统自研的开发语言，虽然才发布不久，但是它承担着极其重要的历史使命。作为鸿蒙开发者，掌握仓颉开发语言将成为不可或缺的技能，今天我们从零开始，为大家分享仓颉语言的开发教程，今天要分享的是搭建开发环境。仓颉在DevEco-studio和VSCode都提供了开发插件，作为鸿蒙开发者我们可能更习惯使用DevEco-studio，所以今天就以DevEco-studio为例。首先需要下载仓颉插件，要注意仓颉插件和DevEco-studio的配套版本，我建议全都下载最新版本。如果您无法下载，可能是因为仓颉语言目前处于公开测试阶段，您需要报名参加公测，这个审核速度很快。下载后的Dev...

前两天分别实现了商城应用的首页和商品详情页面，今天要分享新的内容，就是这两个页面之间的相互跳转和传递参数。首先我们需要两个页面。如果你的项目中还没有第二个页面，可以右键cangjie文件夹新建仓颉文件：新建的文件里面没什么内容，我们给他添加上4个基础的引用，再简单添加个按钮： package ohos_app_cangjie_entry.page import ohos.base.* import ohos.component.* import ohos.state_manage.* import ohos.state_macro_manage.* @Entry @Component publ...

经过了几天的入门教程，我们终于进入到了仓颉开发语言的实战环节，今天分享的内容是实现商城应用的首页页面，效果图如下：首页的内容包括导航栏、轮播图、商品分类和商品列表，我们下面逐一介绍。导航栏仓颉语言中是没有导航栏组件的，我们需要自己去开发。此处的导航栏也比较简单，只有一个搜索框，仓颉中的常见组件我们已经在之前的文章中做了讲解。所以这里就直接Row容器下添加Search组件： Row { Search(placeholder: "搜索", controller: this.searchController) .height(38) }.width(100.percent).he...

一门新的开发语言在诞生初期，由于它本身的特性和使用人数暂时较少，会容易出现一些大家不太容易理解的问题，或者说有一些坑。今天就详细分享一下仓颉开发语言中的日志打印相关内容，带大家踩一踩坑。AppLog在新创建的项目中，Button的点击事件就写好了一行打印日志的代码：和ArkTs不同，仓颉语言中没有了console.log,这里用的是AppLog.info。这时候问题就出现了，很多同学发现点击按钮之后并没有打印任何东西，幽蓝君也一样，当时因为这个问题困扰了很久最终发现AppLog打印的内容只能在真机看到，模拟器上是看不到的。那么AppLog到底是什么呢，为什么会出现这种问题。仓颉语言无法通过co...

大家周末好呀，今天继续分享仓颉语言开发商城应用的实战教程，今天要做的是tabbar。大家都知道ArkTs有Tabs和TabContent容器，能够实现上图的样式，满足基本的使用需求。而仓颉就不同了，它虽然也有这两个组件，但是它的tabbar参数只支持传入图片或者文字，不能像ArkTs那样能传入组件,所以在仓颉语言中官方的tabbar局限性非常大。给大家实操讲解一下，下面是一段Tabs的基本写法： Tabs(BarPosition.End, this.controller){ TabContent(){ Text('页面1') } TabContent(){ Text('页面2’) } } 如果...

幽蓝君发现一个问题，仓颉开发语言距离发布马上一年了，一些知名App已经使用仓颉开发了许多功能，但是网络上关于仓颉开发语言的教程少之又少，系统性的教程更是没有，仓颉官网的文档也远远不如ArkTS详尽。现阶段对于想学习仓颉的友友来说非常困难，幽蓝君能做一个针对移动开发者的系列教程，从零开始到一个完整的应用，系统的讲述仓颉开发语言。希望能对大家有所帮助。今天介绍的是仓颉语言中的UI组件。昨天分享了如何搭建仓颉的开发环境，关于项目的目录结构幽蓝君觉得没有必要再长篇大论，因为和ArkTs非常相似，我们直接到main文件夹下找到index.cj,这就是项目的首页页面，里面有项目初始化的demo。按钮 Bu...

关于仓颉开发语言我们已经连续分享了很多天，相信大家对于仓颉开发语言已经有了一定的了解。今天我们继续进阶，分享一个仓颉开发语言中的自定义组件知识。本文案例就以上一篇文章中的自定义tabbar为例，因为我们自己开发的tabbar一直放在index.cj文件中总是不太好的，还是要把它拿出来封装一下。为了较大型项目的文件管理，我在cangjie文件夹下创建了components文件夹，然后在这里创建组件文件，我创建的是yltabbar.cj.创建文件之后，可以看到依然是初始化了一行代码，我们还是把四大引用拿过来，然后添加build方法，注意自定义组件就不需要@Entry来修饰了，只用@Componen...