uniappX 需求强已经出现 微信登录、分享、打开微信小程序需求，大家可以投票，顶起来，官方的插件才是靠谱的选择

地址： https://vote.dcloud.net.cn/#/?name=uni-app%20x

我只认可官方插件，顶起来

鸿蒙的开发思路就是： 声明式UI + TS 这种模式用着很舒服呢

flutter3-win-deepseek：最新研发 flutter3.32+dio+deepseek-v3+window_manager 接入 deepseek-v3 大模型。支持侧边栏收缩、本地会话存储、代码块高亮、代码块横向滚动、表格边框线、图片100%宽度渲染、图片预览、链接跳转。

技术栈

• 开发工具：VScode
• 技术框架：flutter3.32.0+dart3.8.0
• 对话大模型：deepseek-v3
• 流请求：dio^5.8.0+1
• 窗口管理：window_manager^0.5.0
• 托盘管理：system_tray^2.0.3
• 路由/状态管理：get^4.7.2
• 存储服务：get_storage^2.1.1
• markdown解析：flutter_markdown^0.7.7
• 高亮组件：flutter_highlight^0.7.0
• 环境变量配置：flutter_dotenv^5.2.1

项目特性

1. 支持侧边栏收缩/展开
2. 支持多轮对话、代码高亮、本地存储会话
3. 支持代码块横向滚动、复制代码功能
4. 支持图片100%宽度渲染、在线图片预览
5. 支持网络链接跳转、表格功能
6. 自定义无边框窗口、托盘图标

项目框架目录

flutter3-winseek桌面端ai对话系统已经更新到我的原创作品集。
flutter3.32+deepseek+dio客户端ai流式对话Exe

如果想要了解更多的技术实现细节的话，可以去看看下面这篇分享文章。
flutter3-winseek客户端AI实例|Flutter3.32+DeepSeek流式ai对话模板Exe

热文推荐

flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手
uniapp+vue3+deepseek+uv-ui跨端实战仿deepseek/豆包流式ai聊天对话助手
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板
Vue3-DeepSeek-Chat流式AI对话|vite6+vant4+deepseek智能ai聊天助手
flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例
Vite5+Electron聊天室|electron31跨平台仿微信EXE客户端|vue3聊天程序
Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版OS管理系统
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈

HarmonyOS 应用开发实战指南

1. 开篇：为什么选择 HarmonyOS？

最近在开发鸿蒙应用时，发现很多开发者都在问：为什么要选择 HarmonyOS？这里分享一下我的看法：

1. 生态优势

   • 华为手机用户基数大，市场潜力大
   • 开发者支持力度大，文档更新及时
   • 应用场景丰富，从手机到智能家居都有覆盖

2. 技术优势

   • 分布式架构确实好用，一次开发多端运行
   • 性能表现不错，特别是启动速度
   • 安全机制做得很到位，对开发者友好

3. 开发体验

   • Vue 3 开发模式，上手快
   • TypeScript 支持，代码质量有保障
   • 原生能力调用方便，API 设计合理

2. 为什么选择 uni-app x 开发鸿蒙应用？

2.1 降低开发门槛

1. 不用学鸿蒙原生开发

   • 不用学 ArkTS，省时省力
   • 不用研究鸿蒙原生组件，直接用 Vue 组件
   • 不用适应鸿蒙特有的开发模式，保持原有开发习惯

2. 用熟悉的技术栈

   • Vue 3 语法，写起来顺手
   • TypeScript 类型检查，减少 bug
   • 组件化开发，代码复用方便

3. 上手快

   • 有 Vue 经验的直接开干
   • 学习成本低，一周就能上手
   • 遇到问题社区都能找到答案

2.2 开发效率提升

1. 跨平台开发

   • 一套代码，iOS、Android、鸿蒙都能跑
   • 不用为每个平台写一套代码
   • 维护成本大大降低

2. 组件库丰富

   • 内置组件够用，不用重复造轮子
   • 自定义组件方便，复用性强
   • 社区组件多，能解决大部分需求

3. 工具链完善

   • HBuilderX 开发体验好
   • 调试方便，问题定位快
   • 插件生态丰富，开发效率高

2.3 实际开发优势

1. 代码维护

   • 代码风格统一，团队协作方便
   • 目录结构清晰，找文件快
   • 代码复用性强，减少重复工作

2. 性能表现

   • 性能接近原生，用户体验好
   • 渲染机制优化得不错
   • 内存管理做得好，不容易卡顿

3. 发布部署

   • 打包流程简单，一键发布
   • 版本管理方便，回滚容易
   • 更新机制完善，用户无感知

2.4 实际案例分享

1. 开发周期

   • 原生开发：2-3个月
   • uni-app x：1个月搞定
   • 效率提升：50%以上

2. 团队配置

   • 原生开发：需要专门的鸿蒙工程师
   • uni-app x：前端工程师就能干
   • 人力成本：省了30%以上

3. 维护成本

   • 原生开发：要维护多套代码
   • uni-app x：一套代码搞定
   • 维护效率：提升40%以上

2.5 踩过的坑

1. 性能优化

   • 组件不要嵌套太深
   • 注意内存泄漏问题
   • 长列表要用虚拟列表

2. 兼容性

   • 不同设备表现可能不一样
   • 横竖屏切换要测试
   • 不同系统版本要适配

3. 原生能力

   • API 可能有兼容性问题
   • 错误处理要做好
   • 权限申请要规范

3. 开发环境准备

3.1 必需工具

1. DevEco Studio

   • 下载地址：https://developer.harmonyos.com/cn/develop/deveco-studio
   • 建议版本：最新稳定版

2. HBuilderX

   • 下载地址：https://www.dcloud.io/hbuilderx.html
   • 建议版本：3.8.0 及以上
   • 安装注意：需要安装 uni-app x 插件

3.2 环境配置

# 检查 Node.js 版本  
node -v  # 建议 16.x 以上  

# 检查 npm 版本  
npm -v   # 建议 8.x 以上  

# 安装 uni-app x 命令行工具  
npm install -g @dcloudio/uni-app-x-cli

4. 实战：系统信息展示应用

4.1 项目结构

project/  
├── src/  
│   ├── pages/  
│   │   └── index/  
│   │       ├── index.uvue    # 主页面  
│   │       └── index.uts     # 页面逻辑  
│   │     
│   ├── static/              # 静态资源  
│   └── manifest.json        # 项目配置  
└── package.json

4.2 核心代码实现

4.2.1 页面结构（index.uvue）

<template>  
  <view>  
    <!-- 顶部标题 -->  
    <view class="header">  
      <text class="title">系统信息</text>  
    </view>  

    <!-- 系统信息展示区 -->  
    <scroll-view class="system-info" scroll-y="true">  
      <!-- 应用信息卡片 -->  
      <view class="info-section">  
        <text class="section-title">应用信息</text>  
        <view class="info-item">  
          <text class="label">应用名称：</text>  
          <text class="value">{{systemInfo.appName}}</text>  
        </view>  
        <!-- 其他应用信息... -->  
      </view>  

      <!-- 其他信息卡片... -->  
    </scroll-view>  
  </view>  
</template>

4.2.2 业务逻辑（index.uts）

// 系统信息接口定义  
interface SystemInfo {  
  // 应用信息  
  appId: string;  
  appName: string;  
  appVersion: string;  
  // ... 其他属性  
}  

export default {  
  data() {  
    return {  
      systemInfo: {} as SystemInfo  
    }  
  },  

  onLoad() {  
    // 获取系统信息  
    this.getSystemInfo()  
  },  

  methods: {  
    getSystemInfo() {  
      uni.getSystemInfo({  
        success: (res: SystemInfo) => {  
          this.systemInfo = res  
          console.log('系统信息获取成功：', res)  
        },  
        fail: (err) => {  
          console.error('系统信息获取失败：', err)  
          uni.showToast({  
            title: '获取系统信息失败',  
            icon: 'none'  
          })  
        }  
      })  
    }  
  }  
}

4.3 样式优化

/* 卡片样式 */  
.info-section {  
  margin: 10px;  
  padding: 15px;  
  background-color: #fff;  
  border-radius: 8px;  
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);  
}  

/* 标题样式 */  
.section-title {  
  font-size: 16px;  
  font-weight: bold;  
  color: #333;  
  margin-bottom: 12px;  
  padding-bottom: 8px;  
  border-bottom: 1px solid #eee;  
}  

/* 信息项样式 */  
.info-item {  
  margin: 8px 0;  
  display: flex;  
  align-items: center;  
}  

.label {  
  color: #666;  
  width: 100px;  
  font-size: 14px;  
}  

.value {  
  color: #333;  
  flex: 1;  
  font-size: 14px;  
  word-break: break-all;  
}

5. 开发经验分享

5.1 常见坑点

1. 系统信息获取

   • 某些设备可能不支持部分属性
   • 需要做好空值处理
   • 建议添加错误处理

2. 界面适配

   • 不同设备屏幕尺寸差异大
   • 需要适配横竖屏
   • 注意安全区域

3. 性能优化

   • 避免频繁获取系统信息
   • 合理使用缓存
   • 注意内存管理

5.2 调试技巧

1. 日志输出

   // 开发环境日志  
   if (process.env.NODE_ENV === 'development') {  
   console.log('调试信息：', data)  
   }

2. 错误处理

   try {  
   // 可能出错的代码  
   } catch (error) {  
   console.error('错误信息：', error)  
   uni.showToast({  
   title: '操作失败',  
   icon: 'none'  
   })  
   }

5.3 发布注意事项

1. 版本号管理

   • 遵循语义化版本
   • 记录更新日志
   • 做好版本兼容

2. 性能测试

   • 多设备测试
   • 压力测试
   • 内存泄漏检测

3. 安全考虑

   • 敏感信息加密
   • 权限最小化
   • 数据安全存储

6. 进阶开发

6.1 原生能力调用

// 调用相机示例  
uni.chooseImage({  
  count: 1,  
  success: (res) => {  
    console.log('图片选择成功：', res)  
  }  
})  

// 调用传感器示例  
uni.startAccelerometer({  
  interval: 'game',  
  success: () => {  
    console.log('加速度传感器启动成功')  
  }  
})

6.2 性能优化实践

1. 图片优化

   • 使用适当的图片格式
   • 控制图片大小
   • 实现懒加载

2. 列表优化

   • 使用虚拟列表
   • 分页加载
   • 数据缓存

3. 启动优化

   • 减少启动时加载
   • 使用预加载
   • 优化资源加载

7. 实用资源

7.1 开发工具

• DevEco Studio：https://developer.harmonyos.com
• HBuilderX：https://www.dcloud.io
• 调试工具：Chrome DevTools

7.2 学习资源

• 官方文档：https://developer.harmonyos.com
• 示例代码：https://github.com/harmonyos
• 技术社区：https://developer.huawei.com

7.3 开发规范

• 代码规范：ESLint + Prettier
• 提交规范：Git Commit Message
• 文档规范：Markdown

8. 结语

通过这个实战项目，我们学习了：

1. 如何搭建开发环境
2. 如何获取系统信息
3. 如何优化界面展示
4. 如何处理常见问题

希望这个指南能帮助您更好地开发 HarmonyOS 应用。记住：

• 保持代码简洁
• 注重用户体验
• 重视性能优化
• 持续学习进步

如果您有任何问题，欢迎在评论区讨论。祝您开发愉快！

flutter3-deepseek-chat：原创基于flutter3.27+dio+deepseek-v3+markdown 接入 DeepSeek-V3 会话大模型。支持本地会话存储、支持markdown代码块高亮、代码块横向滚动、表格边框线、图片100%宽度渲染、图片预览、链接跳转。

使用技术

• 技术框架：flutter3.27.1+dart3.6.0
• AI对话模型：deepseek-v3
• 网络请求：dio^5.8.0+1
• 路由/状态管理：get^4.7.2
• 本地存储：get_storage^2.1.1
• markdown解析：flutter_markdown^0.7.7
• 高亮插件：flutter_highlight^0.7.0

项目功能

1. Flutter3+DeepSeek流式打字效果
2. Flutter3.27搭建项目，接入DeepSeek-V3，对话更丝滑
3. 支持手机端/桌面端显示
4. 支持代码块高亮、多轮上下文会话、本地存储对话
5. 支持代码块横向滚动、代码复制
6. 支持图片宽度100%渲染、在线图片预览功能
7. 支持链接跳转
8. 支持表格显示功能

项目框架结构

目前flutter3_deepseek跨平台ai项目已经发布到我的原创作品集。
Flutter3+DeepSeek-V3跨平台AI流式输出聊天模板

如果想要了解更多的技术实现细节的话，可以去看看下面这篇分享文章。
flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手

往期热文

uniapp+vue3+deepseek+uv-ui跨端实战仿deepseek/豆包流式ai聊天对话助手
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板
Vue3-DeepSeek-Chat流式AI对话|vite6+vant4+deepseek智能ai聊天助手
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例
Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版OS管理系统
Vite5+Electron聊天室|electron31跨平台仿微信EXE客户端|vue3聊天程序

如果是全栈的兄弟们，就是本地环境的接口是会报这个错的，换成公网的接口就行了，不知道是bug还是什么，对于集成本地环境的兄弟不太友好

targetSDK 34
在AndroidManifest.xml中先关闭调试：

<meta-data  
            android:name="DCLOUD_DEBUG"  
            android:value="false" />

点Run
在生成apk后再打开调试，选择：Build -> Generate App Bundles or APKs -> Generate APKs
这样生成的基座在HBuilder中就可以正常显示静态资源文件了

主要的实现方法

export function defineStore<T>(name : string, obj : T) : T {  
    let storage = uni.getStorageSync(name);  
    if (storage instanceof UTSJSONObject) {  
        let data = JSON.parse<T>(JSON.stringify(storage));  
        if (data != null) {  
            let newVal = data as T;  
            obj = reactive(newVal);  
        }  
    }  
    watch(obj as any, () => {  
        uni.setStorage({  
            key: name,  
            data: obj as any  
        });  
    }, {  
        deep: true  
    })  
    return obj;  
}

调用示例：

type UserStore = {  
    initReady : boolean;  
    userInfo: UTSJSONObject;  
}  
export const app = defineStore("app", reactive<UserStore>({  
    initReady: false,  
    userInfo:{}  
}))

页面中app.xxx就是响应式，参考官方文档：https://doc.dcloud.net.cn/uni-app-x/tutorial/store.html#%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F%E4%B8%8E%E7%8A%B6%E6%80%81%E7%AE%A1%E7%90%86
如果没有这种处理，app每次启动的时候，状态都会重置。加了后数据就能本地持久化了。

项目介绍

> TuiPlus UI组件库 —— 全面兼容最新设计理念。本次重构不仅着眼于功能的提升，更深入探索用户体验的无限可能。我们的组件库致力于打造一个既全面又精致的UI设计平台，强调设计的精致度和扩展性，始终将用户体验放在首位。在细节的打磨上，我们精益求精，自豪地呈现——TuiPlus UI组件库。

> 创新与差异 —— 新版增加了UTS版图表，裁剪等众多组件，我们的专注点在于提供丰富且独特的组件。每一款组件都是经过匠心独运的设计和优化，确保性能卓越。特别是我们的UTS图表组件，采用高性能的canvas技术，实现了无需webview嵌套的纯canvas绘制，带来了行业领先的流畅度和响应速度。TuiPlus UI组件库全面支持iOS、Android以及Web/H5三端，无缝适配多种屏幕尺寸和形态，包括长屏、宽屏、PC、折叠屏和横屏，满足不同场景下的多样化需求。

!

TuiPlus文档地址：https://life.yundie.xyz/t-uvue-ui/docs/index.html

功能特性快速了解

TuiPlus扫码下载体验

web在线体验

安卓下载链接

简介
掌握真实项目开发技能！
本源码提供了一个完整的、已经实现的记账应用程序，使用了流行的uni-app-x框架进行前端构建，配合Apifox定义的API接口完成所有前后端交互逻辑。这不仅是一个学习如何在uni-app-x中创建高效、用户友好的界面的机会，更是一次深入了解实际项目开发流程的宝贵经验。
适合人群
无论是初学者还是有一定基础的开发者，这套源码都是提升技能的理想选择。对于那些渴望深入理解uni-app-x以及移动应用开发的人来说，这无疑是一笔值得投资的知识财富。

获取源码

参考文档

uni-app x 原生 SDK Android 版
文档中的flatDir { dirs('./plugins/') }单引号需要改成双引号，否则会报错

uniappx - 离线自定义基座

Uniappx 离线打包配置
社区这位老哥的文章配合官方的文档一起使用比较好。

HMS Core 官网文档

华为 ScanKit Example
这里我参考的是DefaultView-kotlin

example插件地址

懒人版：直接下载我的示例项目。
android studio example

正式开始

下载 android studio 2023.2.1 Patch 2

最新版或许也可以，不过尽量保持一致好吧
记得安装到其他盘，c 盘足够大可以无视

修改 gradle 安装路径，c 盘足够大可以无视

先添加一下环境变量

点击左上角的图标，点击 File,点击 setting

找到 Gradle,替换路径点击 Apply,点击 OK

JDK

Gradle JDK 17

创建一个 hello world 项目

File->New->New Project

项目信息，尽量保持一致,点击 Finish

创建好之后就是这样的

修改一下Gradle Version 和 Android Gradle Plugin Version

点击File-> Project Structure

先换代理然后点击Sync Project with Gradle Files (这个应该就是拉依赖的意思)
https\://mirrors.cloud.tencent.com/gradle/

启动项目先看看效果
<font color=red>图片中usb调试写错了use</font>

good呀 启动成功了

创建uniappx模块

以下操作请打开官方文档操作,方便复制文字内容
官网文档
社区文档

下载uniappx SDK

复制SDK/libs 到 uniappx/libs
<font color=red>这里不要全部都复制，会报错，请按照官网说的来。图片说明我就不改了</font>

在 uniappx下的build.gradle 文件中添加以下依赖

继续在 uniappx下的build.gradle 文件中添加 aaptOptions

将上面下载的sdk里的plugins文件夹复制到项目根目录（和uniappx同层）

在uniappx模块的build.gradle下添加插件io.dcloud.uts.kotlin的依赖

修改项目的settings.gradle

修改项目的gradle.properties

修改app模块下的AndroidMainfest.xml

修改uniappx模块下的AndroidMainfest.xml

继续修改app模块的build.gradle

到这里已经配置的差不多了，接下来配置uts模块插件，也就是我们的华为scanKit

新建uts模块

File->New->New Module

在项目的build.gradle中添加依赖

在x-scan模块的build.gradle中添加依赖

修改uniappx模块的build.gradle

修改app模块的build.gradle

继续修改settings.gradle 添加华为maven仓地址

修改x-scan模块下的AndroidMainfest.xml

最后打开hbuilderx

选择发行->app-android/ios 本地打包->生成本地打包app资源
然后只需要选择android即可

将与appid同名的文件夹复制到uniappx/src/main/assets/apps下

将unpackage/resources/app-android/uniappx/app-android/src下的所有文件复制到uniappx/src/main/java下

将unpackage/resources/app-android/uni_modules/x-scan/utssdk/app-android/src下的文件夹复制到
x-scan/src/main/java下

运行

用手机扫码测试出现扫码结果

正常情况下你可以在x-scan/src/main/java/index.kt中调试你的代码，然后同步到hbuilderx中，全部完成之后可以使用云打包项目即可

报错总结

1. Could not resolve all dependencies for configuration ':classpath'.
   我这边是maven配置的地址将http改成https
2. Minimum supported Gradle version is 7.3.3. Current version is 5.6.4.
   按照提示升级一下
3. 使用chooseImage会报错
   将uniappx sdk中的uni-media-release.aar复制到libs中即可。这里的libs就是上面说的libs

在小米 14 上跳转会员中心能正常跳转 小米10和小米pad5上无法正常显示页面 直接白屏