
文档真是够够的,研究都要找瞎也没看到哪儿有UTS插件导出接口名称的定义全是类型定义
interface.uts
作为整个插件的入口声明 文档找了个遍也没看到怎么定义每个函数的名称 通篇都是类型 ,类型导出也是犯愁
插件申明文件中 export type和export type 对外都不可见,尝试用 export class (本不应该用class,这里没有具体实现)
结果 编译运行开始报错平台实现没找到导出的类型
然后在接口声明一个 接口 去平台目录实现 好家伙接口中要返回的类型必须 改成接口里面声明的接口 外面又看不到接口中导出的 interface
只能用typ 导出 t ype导出了 实现的时候需要一个class 去实现返回封装 好家伙类型又报错
interface.uts
export/open/public/ interface IResult {
x:number
y:number;
close():void
}
export interface IPlugins {
a():void
b():Promise<IResult>
}
web/index.uts
class IResultWebImpl implements IResult {
//
}
PluginsWebImpl implements IPlugins {
//...
}
// page/index.uts;
import * as P from '@/uni_modules/xx'
P.b().then(r:P.IResult ) {
// .....
}
外部使用的始终是 接口定义的不关心实现 这种模式很难实现吗?
简化一下
interface.uts
export/open/public/ interface IResult {
x:number
y:number;
close():void
}
// export interface IPlugins { 省略掉
export function a ():void
export function b ():Promise<IResult>
// }
或者使用 internal open public protected declare 等等标记 一下 应该不是多难得事情
面向接口而非实现 不是首要遵守的吗 为什么那么折腾
interface.uts
作为整个插件的入口声明 文档找了个遍也没看到怎么定义每个函数的名称 通篇都是类型 ,类型导出也是犯愁
插件申明文件中 export type和export type 对外都不可见,尝试用 export class (本不应该用class,这里没有具体实现)
结果 编译运行开始报错平台实现没找到导出的类型
然后在接口声明一个 接口 去平台目录实现 好家伙接口中要返回的类型必须 改成接口里面声明的接口 外面又看不到接口中导出的 interface
只能用typ 导出 t ype导出了 实现的时候需要一个class 去实现返回封装 好家伙类型又报错
interface.uts
export/open/public/ interface IResult {
x:number
y:number;
close():void
}
export interface IPlugins {
a():void
b():Promise<IResult>
}
web/index.uts
class IResultWebImpl implements IResult {
//
}
PluginsWebImpl implements IPlugins {
//...
}
// page/index.uts;
import * as P from '@/uni_modules/xx'
P.b().then(r:P.IResult ) {
// .....
}
外部使用的始终是 接口定义的不关心实现 这种模式很难实现吗?
简化一下
interface.uts
export/open/public/ interface IResult {
x:number
y:number;
close():void
}
// export interface IPlugins { 省略掉
export function a ():void
export function b ():Promise<IResult>
// }
或者使用 internal open public protected declare 等等标记 一下 应该不是多难得事情
面向接口而非实现 不是首要遵守的吗 为什么那么折腾

uniappX 需求强已经出现 微信登录、分享、打开微信小程序需求,大家可以投票,顶起来,官方的插件才是靠谱的选择
uniappX 需求强已经出现 微信登录、分享、打开微信小程序需求,大家可以投票,顶起来,官方的插件才是靠谱的选择
地址: https://vote.dcloud.net.cn/#/?name=uni-app%20x
我只认可官方插件,顶起来
uniappX 需求强已经出现 微信登录、分享、打开微信小程序需求,大家可以投票,顶起来,官方的插件才是靠谱的选择
地址: https://vote.dcloud.net.cn/#/?name=uni-app%20x
我只认可官方插件,顶起来

uni-app 能否搞一套声明式UI呢,声明式UI是趋势呢,能极大的提高开发效率呢
鸿蒙的开发思路就是: 声明式UI + TS 这种模式用着很舒服呢
鸿蒙的开发思路就是: 声明式UI + TS 这种模式用着很舒服呢

flutter3.32调用deepseek客户端ai流式模板
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
项目特性
- 支持侧边栏收缩/展开
- 支持多轮对话、代码高亮、本地存储会话
- 支持代码块横向滚动、复制代码功能
- 支持图片100%宽度渲染、在线图片预览
- 支持网络链接跳转、表格功能
- 自定义无边框窗口、托盘图标
项目框架目录
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聊天语音/朋友圈
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
项目特性
- 支持侧边栏收缩/展开
- 支持多轮对话、代码高亮、本地存储会话
- 支持代码块横向滚动、复制代码功能
- 支持图片100%宽度渲染、在线图片预览
- 支持网络链接跳转、表格功能
- 自定义无边框窗口、托盘图标
项目框架目录
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聊天语音/朋友圈

unipp---HarmonyOS 应用开发实战
HarmonyOS 应用开发实战指南
1. 开篇:为什么选择 HarmonyOS?
最近在开发鸿蒙应用时,发现很多开发者都在问:为什么要选择 HarmonyOS?这里分享一下我的看法:
-
生态优势
- 华为手机用户基数大,市场潜力大
- 开发者支持力度大,文档更新及时
- 应用场景丰富,从手机到智能家居都有覆盖
-
技术优势
- 分布式架构确实好用,一次开发多端运行
- 性能表现不错,特别是启动速度
- 安全机制做得很到位,对开发者友好
-
开发体验
- Vue 3 开发模式,上手快
- TypeScript 支持,代码质量有保障
- 原生能力调用方便,API 设计合理
2. 为什么选择 uni-app x 开发鸿蒙应用?
2.1 降低开发门槛
-
不用学鸿蒙原生开发
- 不用学 ArkTS,省时省力
- 不用研究鸿蒙原生组件,直接用 Vue 组件
- 不用适应鸿蒙特有的开发模式,保持原有开发习惯
-
用熟悉的技术栈
- Vue 3 语法,写起来顺手
- TypeScript 类型检查,减少 bug
- 组件化开发,代码复用方便
-
上手快
- 有 Vue 经验的直接开干
- 学习成本低,一周就能上手
- 遇到问题社区都能找到答案
2.2 开发效率提升
-
跨平台开发
- 一套代码,iOS、Android、鸿蒙都能跑
- 不用为每个平台写一套代码
- 维护成本大大降低
-
组件库丰富
- 内置组件够用,不用重复造轮子
- 自定义组件方便,复用性强
- 社区组件多,能解决大部分需求
-
工具链完善
- HBuilderX 开发体验好
- 调试方便,问题定位快
- 插件生态丰富,开发效率高
2.3 实际开发优势
-
代码维护
- 代码风格统一,团队协作方便
- 目录结构清晰,找文件快
- 代码复用性强,减少重复工作
-
性能表现
- 性能接近原生,用户体验好
- 渲染机制优化得不错
- 内存管理做得好,不容易卡顿
-
发布部署
- 打包流程简单,一键发布
- 版本管理方便,回滚容易
- 更新机制完善,用户无感知
2.4 实际案例分享
-
开发周期
- 原生开发:2-3个月
- uni-app x:1个月搞定
- 效率提升:50%以上
-
团队配置
- 原生开发:需要专门的鸿蒙工程师
- uni-app x:前端工程师就能干
- 人力成本:省了30%以上
-
维护成本
- 原生开发:要维护多套代码
- uni-app x:一套代码搞定
- 维护效率:提升40%以上
2.5 踩过的坑
-
性能优化
- 组件不要嵌套太深
- 注意内存泄漏问题
- 长列表要用虚拟列表
-
兼容性
- 不同设备表现可能不一样
- 横竖屏切换要测试
- 不同系统版本要适配
-
原生能力
- API 可能有兼容性问题
- 错误处理要做好
- 权限申请要规范
3. 开发环境准备
3.1 必需工具
-
DevEco Studio
- 下载地址:https://developer.harmonyos.com/cn/develop/deveco-studio
- 建议版本:最新稳定版
-
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 常见坑点
-
系统信息获取
- 某些设备可能不支持部分属性
- 需要做好空值处理
- 建议添加错误处理
-
界面适配
- 不同设备屏幕尺寸差异大
- 需要适配横竖屏
- 注意安全区域
-
性能优化
- 避免频繁获取系统信息
- 合理使用缓存
- 注意内存管理
5.2 调试技巧
-
日志输出
// 开发环境日志 if (process.env.NODE_ENV === 'development') { console.log('调试信息:', data) }
-
错误处理
try { // 可能出错的代码 } catch (error) { console.error('错误信息:', error) uni.showToast({ title: '操作失败', icon: 'none' }) }
5.3 发布注意事项
-
版本号管理
- 遵循语义化版本
- 记录更新日志
- 做好版本兼容
-
性能测试
- 多设备测试
- 压力测试
- 内存泄漏检测
-
安全考虑
- 敏感信息加密
- 权限最小化
- 数据安全存储
6. 进阶开发
6.1 原生能力调用
// 调用相机示例
uni.chooseImage({
count: 1,
success: (res) => {
console.log('图片选择成功:', res)
}
})
// 调用传感器示例
uni.startAccelerometer({
interval: 'game',
success: () => {
console.log('加速度传感器启动成功')
}
})
6.2 性能优化实践
-
图片优化
- 使用适当的图片格式
- 控制图片大小
- 实现懒加载
-
列表优化
- 使用虚拟列表
- 分页加载
- 数据缓存
-
启动优化
- 减少启动时加载
- 使用预加载
- 优化资源加载
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. 结语
通过这个实战项目,我们学习了:
- 如何搭建开发环境
- 如何获取系统信息
- 如何优化界面展示
- 如何处理常见问题
希望这个指南能帮助您更好地开发 HarmonyOS 应用。记住:
- 保持代码简洁
- 注重用户体验
- 重视性能优化
- 持续学习进步
如果您有任何问题,欢迎在评论区讨论。祝您开发愉快!
HarmonyOS 应用开发实战指南
1. 开篇:为什么选择 HarmonyOS?
最近在开发鸿蒙应用时,发现很多开发者都在问:为什么要选择 HarmonyOS?这里分享一下我的看法:
-
生态优势
- 华为手机用户基数大,市场潜力大
- 开发者支持力度大,文档更新及时
- 应用场景丰富,从手机到智能家居都有覆盖
-
技术优势
- 分布式架构确实好用,一次开发多端运行
- 性能表现不错,特别是启动速度
- 安全机制做得很到位,对开发者友好
-
开发体验
- Vue 3 开发模式,上手快
- TypeScript 支持,代码质量有保障
- 原生能力调用方便,API 设计合理
2. 为什么选择 uni-app x 开发鸿蒙应用?
2.1 降低开发门槛
-
不用学鸿蒙原生开发
- 不用学 ArkTS,省时省力
- 不用研究鸿蒙原生组件,直接用 Vue 组件
- 不用适应鸿蒙特有的开发模式,保持原有开发习惯
-
用熟悉的技术栈
- Vue 3 语法,写起来顺手
- TypeScript 类型检查,减少 bug
- 组件化开发,代码复用方便
-
上手快
- 有 Vue 经验的直接开干
- 学习成本低,一周就能上手
- 遇到问题社区都能找到答案
2.2 开发效率提升
-
跨平台开发
- 一套代码,iOS、Android、鸿蒙都能跑
- 不用为每个平台写一套代码
- 维护成本大大降低
-
组件库丰富
- 内置组件够用,不用重复造轮子
- 自定义组件方便,复用性强
- 社区组件多,能解决大部分需求
-
工具链完善
- HBuilderX 开发体验好
- 调试方便,问题定位快
- 插件生态丰富,开发效率高
2.3 实际开发优势
-
代码维护
- 代码风格统一,团队协作方便
- 目录结构清晰,找文件快
- 代码复用性强,减少重复工作
-
性能表现
- 性能接近原生,用户体验好
- 渲染机制优化得不错
- 内存管理做得好,不容易卡顿
-
发布部署
- 打包流程简单,一键发布
- 版本管理方便,回滚容易
- 更新机制完善,用户无感知
2.4 实际案例分享
-
开发周期
- 原生开发:2-3个月
- uni-app x:1个月搞定
- 效率提升:50%以上
-
团队配置
- 原生开发:需要专门的鸿蒙工程师
- uni-app x:前端工程师就能干
- 人力成本:省了30%以上
-
维护成本
- 原生开发:要维护多套代码
- uni-app x:一套代码搞定
- 维护效率:提升40%以上
2.5 踩过的坑
-
性能优化
- 组件不要嵌套太深
- 注意内存泄漏问题
- 长列表要用虚拟列表
-
兼容性
- 不同设备表现可能不一样
- 横竖屏切换要测试
- 不同系统版本要适配
-
原生能力
- API 可能有兼容性问题
- 错误处理要做好
- 权限申请要规范
3. 开发环境准备
3.1 必需工具
-
DevEco Studio
- 下载地址:https://developer.harmonyos.com/cn/develop/deveco-studio
- 建议版本:最新稳定版
-
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 常见坑点
-
系统信息获取
- 某些设备可能不支持部分属性
- 需要做好空值处理
- 建议添加错误处理
-
界面适配
- 不同设备屏幕尺寸差异大
- 需要适配横竖屏
- 注意安全区域
-
性能优化
- 避免频繁获取系统信息
- 合理使用缓存
- 注意内存管理
5.2 调试技巧
-
日志输出
// 开发环境日志 if (process.env.NODE_ENV === 'development') { console.log('调试信息:', data) }
-
错误处理
try { // 可能出错的代码 } catch (error) { console.error('错误信息:', error) uni.showToast({ title: '操作失败', icon: 'none' }) }
5.3 发布注意事项
-
版本号管理
- 遵循语义化版本
- 记录更新日志
- 做好版本兼容
-
性能测试
- 多设备测试
- 压力测试
- 内存泄漏检测
-
安全考虑
- 敏感信息加密
- 权限最小化
- 数据安全存储
6. 进阶开发
6.1 原生能力调用
// 调用相机示例
uni.chooseImage({
count: 1,
success: (res) => {
console.log('图片选择成功:', res)
}
})
// 调用传感器示例
uni.startAccelerometer({
interval: 'game',
success: () => {
console.log('加速度传感器启动成功')
}
})
6.2 性能优化实践
-
图片优化
- 使用适当的图片格式
- 控制图片大小
- 实现懒加载
-
列表优化
- 使用虚拟列表
- 分页加载
- 数据缓存
-
启动优化
- 减少启动时加载
- 使用预加载
- 优化资源加载
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. 结语
通过这个实战项目,我们学习了:
- 如何搭建开发环境
- 如何获取系统信息
- 如何优化界面展示
- 如何处理常见问题
希望这个指南能帮助您更好地开发 HarmonyOS 应用。记住:
- 保持代码简洁
- 注重用户体验
- 重视性能优化
- 持续学习进步
如果您有任何问题,欢迎在评论区讨论。祝您开发愉快!
收起阅读 »
基于flutter3.27接入deepseek跨平台ai对话实例
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
项目功能
- Flutter3+DeepSeek流式打字效果
- Flutter3.27搭建项目,接入DeepSeek-V3,对话更丝滑
- 支持手机端/桌面端显示
- 支持代码块高亮、多轮上下文会话、本地存储对话
- 支持代码块横向滚动、代码复制
- 支持图片宽度100%渲染、在线图片预览功能
- 支持链接跳转
- 支持表格显示功能
项目框架结构
目前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聊天程序
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
项目功能
- Flutter3+DeepSeek流式打字效果
- Flutter3.27搭建项目,接入DeepSeek-V3,对话更丝滑
- 支持手机端/桌面端显示
- 支持代码块高亮、多轮上下文会话、本地存储对话
- 支持代码块横向滚动、代码复制
- 支持图片宽度100%渲染、在线图片预览功能
- 支持链接跳转
- 支持表格显示功能
项目框架结构
目前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聊天程序

uniapp x开发用uni.request发送请求一直报602001 "errMsg": "request system error" js端可运行 【已解决】
如果是全栈的兄弟们,就是本地环境的接口是会报这个错的,换成公网的接口就行了,不知道是bug还是什么,对于集成本地环境的兄弟不太友好
如果是全栈的兄弟们,就是本地环境的接口是会报这个错的,换成公网的接口就行了,不知道是bug还是什么,对于集成本地环境的兄弟不太友好

关于uni-app X项目离线打包自定义基座不显示静态资源的解决方法
targetSDK 34
在AndroidManifest.xml中先关闭调试:
<meta-data
android:name="DCLOUD_DEBUG"
android:value="false" />
点Run
在生成apk后再打开调试,选择:Build -> Generate App Bundles or APKs -> Generate APKs
这样生成的基座在HBuilder中就可以正常显示静态资源文件了
targetSDK 34
在AndroidManifest.xml中先关闭调试:
<meta-data
android:name="DCLOUD_DEBUG"
android:value="false" />
点Run
在生成apk后再打开调试,选择:Build -> Generate App Bundles or APKs -> Generate APKs
这样生成的基座在HBuilder中就可以正常显示静态资源文件了

【经验分享】uniappX中实现类似pinia-plugin-persist-uni的本地数据缓存
主要的实现方法
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每次启动的时候,状态都会重置。加了后数据就能本地持久化了。
主要的实现方法
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】简洁高效 uniapp x UI组件库重磅发布,原生uts插件加持,保障流畅体验,助力快速开发,打造优质原生应用。
项目介绍
> 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在线体验
安卓下载链接
项目介绍
> 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记账App完整源码&ApiFox接口实战项目
简介
掌握真实项目开发技能!
本源码提供了一个完整的、已经实现的记账应用程序,使用了流行的uni-app-x框架进行前端构建,配合Apifox定义的API接口完成所有前后端交互逻辑。这不仅是一个学习如何在uni-app-x中创建高效、用户友好的界面的机会,更是一次深入了解实际项目开发流程的宝贵经验。
适合人群
无论是初学者还是有一定基础的开发者,这套源码都是提升技能的理想选择。对于那些渴望深入理解uni-app-x以及移动应用开发的人来说,这无疑是一笔值得投资的知识财富。

uniappx 离线打包(主要是使用android studio 调试代码,而不是使用云打包次数)
参考文档
uni-app x 原生 SDK Android 版
文档中的flatDir { dirs('./plugins/') }
单引号需要改成双引号,否则会报错
Uniappx 离线打包配置
社区这位老哥的文章配合官方的文档一起使用比较好。
华为 ScanKit Example
这里我参考的是DefaultView-kotlin
懒人版:直接下载我的示例项目。
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模块
以下操作请打开官方文档操作,方便复制文字内容
官网文档
社区文档
复制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中,全部完成之后可以使用云打包项目即可
报错总结
- Could not resolve all dependencies for configuration ':classpath'.
我这边是maven配置的地址将http改成https - Minimum supported Gradle version is 7.3.3. Current version is 5.6.4.
按照提示升级一下 - 使用chooseImage会报错
将uniappx sdk中的uni-media-release.aar复制到libs中即可。这里的libs就是上面说的libs
参考文档
uni-app x 原生 SDK Android 版
文档中的flatDir { dirs('./plugins/') }
单引号需要改成双引号,否则会报错
Uniappx 离线打包配置
社区这位老哥的文章配合官方的文档一起使用比较好。
华为 ScanKit Example
这里我参考的是DefaultView-kotlin
懒人版:直接下载我的示例项目。
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模块
以下操作请打开官方文档操作,方便复制文字内容
官网文档
社区文档
复制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中,全部完成之后可以使用云打包项目即可
报错总结
- Could not resolve all dependencies for configuration ':classpath'.
我这边是maven配置的地址将http改成https - Minimum supported Gradle version is 7.3.3. Current version is 5.6.4.
按照提示升级一下 - 使用chooseImage会报错
将uniappx sdk中的uni-media-release.aar复制到libs中即可。这里的libs就是上面说的libs