youlanjihua的博客

今天就浅浅模仿一下小红书app，主要是底部tab栏和主页部分。幽蓝君最近发现小红书是个好东西，一定要多逛。

鸿蒙系统提供了文字识别的能力，支持简体中文、英文、日文、韩文、繁体中文五种语言。实现步骤为初始化文字识别服务、将图片转换为PixelMap、文字识别、释放OCR服务。首先从相册或者拍照获取图片，这一部分在之前的文章里有介绍，有疑问的同学可以查看这篇文章。

关于导航栏部分，可以看到它是一个渐变的颜色，而且延伸到了屏幕顶端，这种样式系统的导航栏不太容易实现，需要我们自定义导航栏，这个导航栏在上一篇文章中有过介绍，大家可以直接下载使用。这一周忙到起飞，只能在周末发个文章。今天的内容比较简单，是一个招聘app，适合新手友友参考，大佬们可以直接忽略。这是一个比较常见的应用，大家做这类应用建议大家先分析一下应用和页面的结构，避免写完发现错了又改。这代码不会自动换行了，难受。

鸿蒙提供了系统导航栏Navigation,它支持很多属性的修改，但是应用需求更加灵活多变，比如有的导航栏有背景图片，有的导航栏要求渐变色，有的导航栏需要随时隐藏和显示等等。首先想到的是使用SpaceBetween对齐方式，但是这种对齐方式是相对于两侧内容的对齐，只有左右内容长度一致的情况下标题才能居中。上面的代码首先定义导航栏的高度是70，然后留出了顶部的状态栏区域，并设置了背景渐变色。这样的话当左侧也有自定义的内容时，计算两侧内容的长度，使用较大的值作为他俩的长度，标题就可以绝对居中了。

界面部分比较简单，大体分为导航栏、历史搜索、猜你想搜和热搜榜几个部分，历史搜索采用用户首选项进行存储数据。

下面就是歌词同步滚动的问题，在播放音乐的时候肯定会有一个计时器，歌词滚动同样使用这个计时器，计时器计数改变时，找到对应的歌词，并计算该行歌词的行数和偏移量，进行画布滚动，就可以实现歌词的同步滚动了，我们还可以对歌词的透明度进行绘制，实现渐隐渐出的效果。现在歌词文件不太好找，没关系，我们可以自己做。内容中除了要有歌词文本之外，还要有每一行歌词出现的时间点，大家按照这种格式创建就可以，就是一行一行写比较麻烦。

而在console中这一部分是默认的，我们可以认为console就是对hilog的封装，需要我们自定义的内容少了，所以它用起来更加简单。在日常开发中打印日志是调试程序非常常用的操作，在鸿蒙的官方文档中介绍了hilog这种方式，有些前端转过来的友友发现console.log也可以进行日志打印。从后半部分来看他们俩好像没有什么区别，但前半部分略有不同。以上就是这两种方式的优缺点，要是问幽蓝君更推荐哪一种，当然还是hilog，在大型项目中对日志进行统一的管理是很有必要的，而且这也是官方文档比较推荐的方式。

鸿蒙系统提供了WebSocket库，使用它可以很方面的实现即时聊天功能，今天就使用WebSocket来实现一个完整的聊天功能。由于返回的消息为富文本，我这里加了一个正则过滤html标签，然后把它们存到数组里便于展示。以上就是一个即时聊天功能的实现过程。

现在尝试在工程目录下新建一个features文件夹，然后在features文件夹右键，新建Module，这里给了四个选项，第一个选项会创建一个可以独立编译的项目，这通常用于一个项目的不同版本，我们今天要选择的是最后一个Static Library，命名注意要小写,完成之后可以看到模块目录下有一些资源和配置文件。这个写法非常有讲究，前面是名字，这个名字要和组件目录中oh-package.json5文件里的name一致，后面是以file开头的组件目录，然后就可以在页面中进行引用了。

幽蓝君的实现思路是这样的，将弹框的起始位置设置在评论按钮上，弹框的尺寸尤其是宽度设置为0，在动画的过程中，让弹框的x坐标不断左移，同时宽度增加，这样看起来就像是从评论按钮中滑出来。弹出动画做完了，内容部分很简单，就几个表情，下面要做的事情是长按表情放大，不仅长按会放大，长按之后滑动到表情上也会放大，所以我判断这是一个组合手势，长按手势和滑动手势的组合。接下来，最难的部分来了，点击表情进行评论的时候，除了弹框消失以外，它还有一个发射的效果，发射一串表情到评论按钮里，这玩意怎么实现呢。开篇点题，今天玩点花的。

ArkUI-X看起来像是鸿蒙官方的框架，在DevEco中就可以安装和使用，而且会ArkUI就可以开发安卓和、iOS和鸿蒙三个平台的app，下面简单介绍一下它的用法。之前写过使用uniapp的跨平台开发鸿蒙项目，今天分享一下开发体验更友好的跨平台开发框架ArkUI-X。这个框架我也没有太深入使用，只是感觉比uniapp的方式更加方便，所以分享给大家。

卡片是元服务的一种快捷操作和入口，现在我们尝试常见一个卡片，在entey文件夹右键新建Dynamic Widget，创建完成之后可以发现工程目录中除了新建的卡片，还新增了entryformability文件夹，这是卡片的生命周期函数。之前写过关于元服务的文章，大家对元服务应该也有一定的了解，它是一种更加高效便捷的应用形式，免安装，有独立的入口，说的简单一点就像是把微信小程序放到系统层面，相比微信小程序更加快捷，因为连微信也不用打开了。需要告诉大家的是，元服务和卡片是两套进程，并不能直接进行通信。

Video组件提供了工具栏和全屏方法，不过效果不好，非常丑陋，实际项目中我们通常需要自定义工具栏，全屏也通过设置组件的宽高尺寸来实现，我这里就简单添加一个全屏按钮，下面演示一下如何对视频进行横竖屏切换。页面搭建以首页为例，很明显这是一个List页面，不过每一个部分都可以左右滑动，顶部banner部分是支持翻页的，所以使用Swiper组件实现，其他部分均使用Scroll组件实现。最近忙忙活活写了不少教程，但是总感觉千篇一律，没什么意思，大家如果有感兴趣的项目可以私信给幽蓝君写一写。今天分享一个电影App。

上次分享过一次注册登录的页面开发，不过不牵扯数据，今天加上数据存储实现一个完整的注册登录流程。手机号验证完成之后，对密码进行验证，这个比较简单，两次输入一致，6位数就行了。数据存储方式采用比较常用的本地存储方式，用户首选项来实现。同样的，以后所有的异步操作我们都可以采用这种方式。

接下来我们要处理它的颜色变化。首先是首页的导航栏，这个导航栏看起来没什么特别，不过它是一个可以变化的导航栏，在页面滑动的过程中，导航栏的背景色会从透明变为白色。昨天Mate70的官方预热直接引起网络爆炸，现在预约人数已经两百多万了，大家都这么有米吗。页面虽然看起来比较复杂，但是仔细分析一下并不难，下面跟大家分享一下本项目的一些难点。系统的导航栏无法满足需求，所以我们需要自定义一个导航栏。今天跟大家分享一个银行app实战教程。以上就是本项目的一些难点。

ComponentV2和@Component一样，都用于装饰自定义组件，但是@ComponentV2内部只能使用全新的状态变量装饰器，比如@Local、@param、@Once、@Event、@Provider、@Consumer等。@Event也和@Param有关系，因为@Param修饰的变量无法从内部修改，但是有时它又需要修改，那怎么办呢，@Event装饰的事件负责告诉父组件，再由父组件进行修改。和@Local相反，@Param表示组件从外部传入的状态，它是为了父子组件之间的数据能够进行同步。

今天分享一个幽蓝君自己在开发中的小技巧，就是封装一个通用工具类，之前大家如果下载过幽蓝君的代码可能也会发现这个东西。比如我们在开发中有一些比较常用的颜色、尺寸或者方法，都可以用一个类封装起来，这样不仅使用方便，统一修改也更加方便。其他的常用方法大家可以根据自己的需要进行补充，是不是很方便。不但如此，在其他项目中，你也可以把这个文件直接拖过去使用。

今天分享的实战教程是一款记账app，最近分享的项目都是纯页面，没有服务端，没有数据接口，因为鸿蒙开发主要就是写页面，都是前端嘛。幽蓝君每次都要重复一下，我们拿到一个项目或者一个页面，要先分析它的大体结构然后再着手写代码。首页部分主要是导航栏和一个List组件，导航栏部分比较简单就不啰嗦了，直接看主要内容部分。下面为大家分享本项目的开发教程，其实主要是首页部分，第二个页面比较简单。以上就是这个项目的一些难点，其他的没什么好说的，很简单。

本项目是基于api12开发的2048游戏，游戏的逻辑是当用户向某个方向滑动时，将该方向相邻且相等的数字相加，同时在空白区域的随机位置生成一个随机数字。游戏中的数字越大，分数越高。在游戏逻辑的实现中，关键在于检测游戏中的空白格和相邻数字的相加操作，以及将它们放置到数组中对应的位置。这就是游戏的基本逻辑，比较简单，适合初学者学习。

本文主要通过抽奖转盘小项目讲解在鸿蒙开发中如何使用画布组件Canvas绘制图形和文字，以及转圈动画的实现。好了，界面大功告成。这是之前写过的一个项目，后来删掉了，现在适配到api12重新发布，友友们按需查阅。以上就是整个转盘的开发过程，