仿微信,使用鸿蒙ArkUI + ArkTS(API9)开发实现

由于目前所有的手机最高只到API9,我还没有基于API10的开发板用于调试,所以,代码均使用API9实现,后面API10发布后再看要不要更新了

只是用于学习鸿蒙API,代码规范以及质量就不要在意了~

样式与逻辑上,尽可能的与微信一致,但介于鸿蒙在自定义程度的局限性上,以及个人水平问题,无法做到完全一致

相关技术说明

组件说明

  • 常用容器组件 Column、Row、Flex、Stack、RelativeContainer
  • 常用基础组件 Button、Text、Image、Toggle、Slider、TextArea、TextInput、Blank、Divider
  • 列表组件 List、Grid、AlphabetIndexer
  • 其他组件 Swiper、Tabs、ImageAnimator、Badge、Panel、QRCode
  • 绘制组件 Circle、Line、Path
  • 媒体组件 Video

自定义组件

  • PatternView

    这里不得不吐槽一下鸿蒙,原来是想直接用自带的手势密码,但自带的问题有点多,两个密码的连接线途径的密码,会强制选择,因而,无法实现 02/20/06/60/… 这样的的密码顺序

  • 微信语音输入组件

动画使用

  • 帧动画(ImageAnimator)
  • 属性动画(animation)
  • 显示动画(animationTo)
  • 转场动画(pageTransition)

功能说明

  • 微信主页面【微信】【通讯录】【发现】【我】
  • 聊天页面
    • 支持表情图文混排(API9只能自己实现,API10会有官方的实现方式)
    • 支持多种消息类型显示
    • 支持发送纯文字消息,语音消息,视频文件,图片文件
    • 支持播放语音、视频

​ 这里又要吐槽下,bindContextMenu 的强制边框,还有鸿蒙现在对输入法开/关以及监听支持很差,虽然提供有接口,但貌似都无效

  • 聊天设置页、联系人信息页、联系人信息编辑页
  • 我 -> 服务 -> 手势密码页
  • 我 -> 个人信息 -> 二维码名片页

开发计划

UI 相关的都玩一遍

不仅仅是界面展示,将相关可执行交互实现

数据来源:本地写死 > 本地数据库 > 在线假数据(不存在的Doge)

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

<think>好的,用户的问题是从微信小程序开发转向使用ArkTS进行鸿蒙开发的难度如何,需要做一个上手难度的对比。首先,我需要了解微信小程序和ArkTS各自的技术栈和开发环境,然后找出它们之间的异同点,进而分析转换的难点和可能的适应过程。 微信小程序主要使用的是JavaScript或TypeScript,结合WXML和WXSS进行开发,属于前端技术栈,而ArkTS鸿蒙的UI开发框架,基于TypeScript,但扩展了声明式UI和状态管理等特性。两者的语法基础相似,但UI构建方式差异较大,小程序用的是模板语言,ArkTS则是声明式UI,可能需要用户调整思维方式。 接下来要考虑开发工具和生态。微信开发者工具是用户熟悉的,而鸿蒙的DevEco Studio可能需要重新适应,包括配置和调试流程。另外,鸿蒙API和组件可能与小程序不同,比如网络请求、设备能力调用等,需要学习新的API文档。 然后,用户可能关心的性能优化、多端适配等问题也需要覆盖。ArkTS针对鸿蒙设备有更好的性能优化,但可能需要处理不同设备的适配,而小程序本身是跨平台的,但受限于微信环境。 还要参考提供的引用内容,特别是引用3中提到鸿蒙API设计有借鉴iOS和Android,但有自己的特性,这可能导致开发者在迁移过程中需要理解新的设计理念。同时,引用2提到鸿蒙生态的成长,可能需要社区和文档的支持,但目前可能不如微信小程序成熟,学习资源可能有限。 最后,需要总结难度点,比如语法过渡相对容易,但UI开发API使用需要重新学习,同时开发工具和生态的适应也是挑战。建议分步骤学习,从基础语法到UI构建,逐步深入,并利用现有资源加快上手速度。</think>从微信小程序开发转向ArkTS鸿蒙开发的上手难度可分为技术栈过渡、开发模式差异、生态适配三个维度分析: ### 一、技术栈对比 1. **语言基础** - 小程序:基于JavaScript/TypeScript + WXML/WXSS - ArkTS:基于TypeScript扩展的声明式语法,保留TS 90%特性 *相似点*:变量声明、函数式编程等基础语法可直接迁移 *差异点*:ArkTS强制类型检查更严格,需掌握`@Entry`、`@Component`等装饰器语法[^3] 2. **UI开发范式** - 小程序:基于模板语言的数据绑定(如`{{value}}`) - ArkTS:声明式UI + 状态驱动更新(如`@State`响应式变量) ```typescript @Entry @Component struct Index { @State count: number = 0 // 响应式状态管理 build() { Column() { Text(`Count: ${this.count}`) .onClick(() => { this.count++ }) } } } ``` ### 二、开发环境差异 | 维度 | 微信小程序 | ArkTS鸿蒙 | |--------------|----------------------|---------------------| | IDE工具 | 微信开发者工具 | DevEco Studio | | 调试方式 | 基于Webview远程调试 | 本地模拟器/真机调试 | | 构建流程 | 自动编译打包 | 需配置模块化依赖 | | API调用 | wx.*命名空间 | 鸿蒙系统能力接口 | ### 三、核心难点突破 1. **UI构建思维转换** - 需从模板驱动转向**组件树声明式构建**,理解`Row/Column/Stack`等布局容器 - 掌握`ForEach`循环渲染与`if/else`条件渲染的TSX语法 2. **系统能力对接** - 设备功能调用需替换为鸿蒙API(如文件系统`ohos.file`、传感器`ohos.sensor`) - 网络请求从`wx.request`改为`@ohos.net.http`模块实现 3. **状态管理升级** - 小程序通过`setData`更新视图,ArkTS通过`@State/@Prop/@Link`装饰器实现自动响应式更新 - 复杂场景需结合`AppStorage`实现跨组件状态共享 ### 四、学习路径建议 1. 先掌握ArkUI组件库(30+基础组件) 2. 实践HarmonyOS Ability开发(UIAbility/ServiceAbility) 3. 通过[方舟开发框架](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/arkts-overview-0000001634099654)文档强化TS扩展语法 4. 使用DevEco Studio的[双向预览器](https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ohos-deveco-studio-user-guide-0000001774120913)加速布局调试
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值