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

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

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

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

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

今天要分享的依然是使用uniapp跨平台开发鸿蒙应用的系列教程，今天要做的是实现首页的商品列表，效果图如下：图片今天的内容分为两部分，一部分是中间的商品分类，还有下方商品列表，不过这两部分其实是相同的布局方式，都是网格布局。在鸿蒙原生开发中我们都使用过grid组件进行网格布局，然后通过columnsTemplate、rowsTemplate、rowsGap、columnsGap等属性来设置网格的行数、列数、大小、间距等样式。在uniapp中也有网格布局，使用方式也和ArkTs有异曲同工之妙。我们先看一下商品分类部分怎么实现。Uniapp没有Grid容器，写法是使用view容器存放组件，在样式选...

大家好，今天依然为大家带来鸿蒙跨平台开发教程的分享，我们本系列的教程最终要做一个购物应用，通过这个项目为大家分享uniapp开发鸿蒙应用从配置开发环境到应用打包上架的完成过程。昨天的文章实现了应用首页的轮播图，其中涉及到为轮播图设置样式，放一小段代码带大家回顾一下： .swiper-item{ width: 100%; height: 100%; display: block; text-align: center; } 对于有css基础的同学来说这段代码很简单，但是对于初学者同学来说可能会不是很明白，今天幽蓝君就为大家分享一下uniapp开发鸿蒙时的样式选择器。所谓样式选择器，就是为组件设置...

过去几天的文章中我们讲过了如何创建跨平台项目，如何进行基础的布局、如何实现自定义导航栏等等，通过这一系列的文章教程，我们最终要实现一个购物app，今天我们要做购物应用首页的轮播图部分。对于轮播图uniapp提供了相应的组件swiper，并且是支持鸿蒙应用的，这样就非常方便了。我们简单写一个有三页内容的轮播图，首先定义轮播图和每一个元素的样式： .swiper{ width: 100%; height: 140px; } .swiper-item{ width: 100%; height: 100%; display: block; } 现在在页面上添加轮播图： <swiper class...

大家好，前两天讲了Uniapp开发鸿蒙应用时的基础布局和自定义导航栏，都是仅限于页面上的开发。今天我们尝试进行一些数据上的操作，借此分享一下选项式API和组合式API的内容。我们初始化的首页项目代码，它的脚本代码部分通常是这样的： <script> export default { data() { return { title: 'Hello', } }, onLoad() { }, methods: { } } </script> 可以看到它分为三部分，顾名思义，data部分用来存放数据，onLoad是页面加载时执行的事件，methods中用来存放事件方法。写一个简...

连续分享了几天的Uniapp跨平台开发鸿蒙应用教程的文章，相信大家对跨平台开发已经有了初步的了解，今天分享一下跨平台开发中的自定义导航栏。在Hbuilder的初始化项目中是自带了导航栏的，这是一个全局的导航栏，它的样式设置和修改是在全局的配置文件pages.json中进行。现在打开pages.json文件，在globalStyle中有一些关于导航栏的属性，我们尝试修改一下： { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": &...

前两天的文章内容对uniapp开发鸿蒙应用做了一些详细的介绍，包括配置开发环境和项目结构目录解读，今天我们正式开始写代码。入门新的开发语言往往从Hello World开始，Uniapp的初始化项目中已经写好了一个简单的demo，这里就不再赘述，我们直接从布局开始说起。Uniapp的布局方式和鸿蒙原生语言ArkTs有所不同，但又颇为神似。幽蓝君之前总结过，所有的布局方式无非只有三种，横向、竖向和层叠，其他所有的布局方式都由这三种衍生而来，Uniapp也不例外。ArkTs中有Row()、Column()、Stack()、Flex()这几个基础的布局容器组件，更复杂一些的还有像List()、Grid...

昨天的文章介绍了使用uniapp跨平台鸿蒙应用时如何配置开发环境和运行调试项目,今天介绍一下uniapp项目目录的结构。可能对于从事移动开发的友友来说，uniapp的项目结构看起来有一些陌生，它更接近于前端项目，新建的uniapp项目结构是这样的：上面的两个文件夹pages中存放的是项目的页面，static则是存放静态资源的文件。打开pages文件夹，可以看到项目初始化的index文件，这就是项目的初始化页面，里面有一个简单的Hello World项目代码，运行项目的时候可以看到。继续往下吗看，App.vue文件打开可以看到它里面存放了项目的生命周期函数，比如项目启动、项目退出等等。index...

之前写过使用uniapp开发鸿蒙应用的教程，简单介绍了如何配置开发环境和运行项目。那时候的HbuilderX还是4.22版本，小一年过去了HbuilderX的正式版本已经来到4.64，历经了多个版本的更新后，跨平台开发鸿蒙应用的体验大幅提升。今天再次跟大家分享一下使用uniapp开发鸿蒙的使用教程。这次的开发体验最大的感觉是非常的方便快捷，你甚至不需要打开DevEco studio，直接使用Hbuilder就可以连接真机进行调试，还有自动的实时编译更新，非常友好。首先，你需要去AppGallery Connect创建一个新的应用，填写应用名称和包名之后创建应用，包名我们一会需要用到。接下来下载...

前两天幽蓝君在ohpm仓库上传了自己的第一个三方库，完整体验了一下ohpm的上传流程，感觉还是比较繁琐的，所以把上传流程和一些注意事项分享给大家。先介绍一下怎么开发一个三方库，在项目名称右键，新建Module，选择static library，在命名时尽量使用小写字母，避免大写。创建之后项目中会出现三方库目录，你可以在这编写你的三方库代码，开发完之后，还有一些工作要做。首先在三方库目录的oh-package.json5文件中配置一下必要信息：name:名称version：版本号description：描述main：入口author：作者license：开源协议另外，再创建三个新的文件，并认真填...