vue2升vue3,uniapp兼容鸿蒙app踩坑记录

news2025/3/10 21:06:54

前提:最近鸿蒙势头很好,公司的 uniapp vue2 项目,要兼容鸿蒙app就开始了我的uniapp转鸿蒙踩坑之旅,请看下文(注意下文都是在uniapp开发基础上)

1. 首先鸿蒙开发只支持Vue3,不支持Vue2、不支持plus、但支持nvue。所以,新建vue3项目。

我自己是新建一个vue3空白项目,在原vue2项目中复制相关文件到vue3中去,进行兼容性调整修改。

2. 下载鸿蒙模拟器,参考uniapp官网,注意事项,在下载前,关闭杀毒软件!再下载

运行和发行 | uni-app官网 (dcloud.net.cn)

3. 如何将uniapp项目运行到鸿蒙模拟器 (顺序不能颠倒!!!)

3.1  HBuilder X 配置,点击顶部工具,点击设置,打开源码视图

在用户设置中增加 ,如下图

"harmony.devTools.path" : "你的鸿蒙模拟器安装路径" 

3.2 下载模版,地址下

 https://web-ext-storage.dcloud.net.cn/uni-app/harmony/zip/template-1.3.4.tgz

3.3  将你下载的模版,复制一份到你的vue3项目根目录下,如下图(我改了个名字,改成了hmpackage)

3.4  打开鸿蒙模拟器,导入你vue3项目根目录的那个模版,如下

导入后,一定等待 sync 后再操作,右下角有个进度条,完成后进度条消失

3.5  真机调试,右上角,点击设备管理器,如果没有模拟器,下载一个。点击运行,等待开机。

开机后,右上角就有了一个华为手机

3.6  配置签名,点击文件,打开项目结构,点击 Signing Configs,然后登录(sign in)

(如果项目结构页面为空,请参考鸿蒙模拟器,deveco studio中 project Structure 空白解决方式_deveco studio创建项目白屏-CSDN博客)

登录后,两个框勾选上,会自动生成签名,点击应用(apply),然后ok

3.7  打开你的vue3项目,点击运行到鸿蒙模拟器(不要运行到内置浏览器!!!!,会报错的!!),如果没有这个选项,参考3.1,看看路径对不对呢

HBuilder 会自动打包整个项目到模版里,(我感觉类似于运行到微信小程序,自动打包到 unpackage 里一样。所以放入新的模版,一定要重新再打包一下!模拟器运行的是,打包后的代码)

启动鸿蒙失败,请手动启动鸿蒙。不要慌,打开我们的鸿蒙模拟器,点击运行(打包后,就成功啦)

重点在这里,大部分人都能遇到的问题,建议好好看看!!(本人踩坑无数次)

运行中的问题:

1. 如果在 HBuilder X 中运行到鸿蒙模拟器过程中会报错,一般都是语法问题。

检查代码语法,vue3只支持ES6 模块规范,不支持commonJS!!具体参考官网

uni-app官网 (dcloud.net.cn)

2.  鸿蒙模拟器打包后报错,报错具体路径如果是这个"entry\build\default\cache\default\default@CompileArkTS\esmodule",那就删掉项目中的整个模版,重新执行上述 3.3 - 3.7。

(期间不不不要运行到内置浏览器!!!,如果运行到内置浏览器了,还会报错,我也不清楚什么原因,我猜想是编译的时候,是不是自动改了模版里的文件,导致的报错)

3.  运行后打开的页面是空白问题,首先尝试重新编译uniapp项目,并重启模拟器或真机,如果依然白屏或闪退,那可能是你项目中有用到了鸿蒙不支持的组件或者api,可以尝试pages.json进行代码二分法排查(删除一半页面如果正常了代表被删除的那一半页面中有造成白屏或闪退的页面)。

官网这么说的,我用了,有效!!在pages.json中删除多余页面,我只留了一个入口页面,一步步排查

如果部分空白,检查你的页面中是否有以下错误

v-for v-if 不要在一个标签中同时使用!

页面中不要用 plus.***,不支持!!

uni.$ 等全局变量,也可能有问题,注释掉或删除试试!

还有一些 uniapp 特有的api,例如 uni.createSelectorQuery(), uni.createInnerAudioContext() , uni.getRecorderManager() 等等....鸿蒙不支持,建议好好检查一下 !

具体语法,参考官网,官网说的很清楚  uni-app官网 (dcloud.net.cn)

分享一个查错小 tips,如果一部分页面空白,可以先把空白的页面,方法删掉再次运行,其次是引入的文件,组件之类的,再是页面,这样方便定位错误位置。

我用的版本HBuilderX 4.24,新版本好像又有新变化,服了(吐槽)...具体看官网运行和发行 | uni-app官网 (dcloud.net.cn)

如果还有问题,欢迎评论区q我!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2311763.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DeepSeek × 豆包深度整合指南:工作流全解析

DeepSeek 豆包深度整合指南:工作流全解析 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,可以分享一下给大家。点击跳转到网站。 https://www.captainbed.cn/ccc 文章目录 DeepSeek 豆包深度整合指南:工…

海思Hi3516DV300交叉编译opencv

OpenCV是一个开源的跨平台计算机视觉库,支持C、Python等多种语言,适用于图像处理、目标检测、机器学习等任务。其核心由C编写,高效轻量,提供实时视觉处理功能,广泛应用于工业自动化、医疗影像等领域。 1 环境准备 1…

[FE] React 初窥门径(五):React 组件的加载过程(commit 阶段)

1. 回顾 前一篇文章我们看到,ReactDOM.render 总共包含这些步骤, 然后介绍了 performSyncWorkOnRoot 做的事情,它主要做了两件事, renderRootSync 可称之为 render 阶段:创建了一颗 Fiber Tree(包含 html …

java环境部署

java环境部署 一、准备工作 jrejdkeclipse jdk下载:21和1.8-----官网:Oracle:Java 下载 |神谕 该处选择要依据自身的系统类型选择下载 idea的下载安装:IntelliJ IDEA | Other Versions 二、安装 三、环境配置 四、使用 五、i…

100天精通Python(爬虫篇)——第115天:爬虫在线小工具_Curl转python爬虫代码工具(快速构建初始爬虫代码)

文章目录 一、curl是什么?二、爬虫在线小工具(牛逼puls)三、实战操作 一、curl是什么? 基本概念:curl 支持多种协议,如 HTTP、HTTPS、FTP、SFTP 等,可用于从服务器获取数据或向服务器发送数据&a…

python-leetcode-解决智力问题

2140. 解决智力问题 - 力扣(LeetCode) 这道题是一个典型的 动态规划(Dynamic Programming, DP) 问题,可以使用 自底向上 的方式解决。 思路 定义状态: 设 dp[i] 表示从第 i 题开始,能获得的最高…

SpireCV荣获Gitee 最有价值开源项目称号

什么是GVP? GVP全称Gitee Valuable Project,意思为Gitee最有价值开源项目。作为GVP称号的获得者,SpireCV在开源社区中展现出了卓越的实力和影响力,为开源软件的发展和推广做出了积极的贡献。 这一荣誉不仅充分肯定了过去阿木实验…

数据结构基础(一)

文章目录 1 数据结构基础1.1 什么是程序?1.2 数据、数据元素、数据项、数据对象1.3 基本的逻辑结构 2 算法效率2.1 时间复杂度2.1.1 循环执行次数2.1.2 大O(n)表示法 2.2 空间复杂度 1 数据结构基础 1.1 什么是程序? ​ 程序 数据结构 + 算…

⭐算法OJ⭐N-皇后问题 II【回溯剪枝】(C++实现)N-Queens II

⭐算法OJ⭐N-皇后问题【回溯剪枝】(C实现)N-Queens 问题描述 The n-queens puzzle is the problem of placing n n n queens on an n n n \times n nn chessboard such that no two queens attack each other. Given an integer n, return the num…

项目管理工具 Maven

目录 1.Maven的概念 1.1​​​​​什么是Maven 1.2什么是依赖管理 1.3什么是项目构建 1.4Maven的应用场景 1.5为什么使用Maven 1.6Maven模型 2.初识Maven 2.1Maven安装 2.1.1安装准备 2.1.2Maven安装目录分析 2.1.3Maven的环境变量 2.2Maven的第一个项目 2.2.1按照约…

国产编辑器EverEdit - 宏功能介绍

1 宏 1.1 应用场景 宏是一种重复执行简单工作的利器,可以让用户愉快的从繁琐的工作中解放出来,其本质是对键盘和菜单的操作序列的录制,并不会识别文件的内容,属于无差别无脑执行。 特别是对一些有规律的重复按键动作,…

“双碳”背景下,企业应该如何提升能源效率?

在当今竞争激烈的市场环境中,企业不仅需要优化成本,还需积极响应国家的能源政策,减少对环境的影响。提升工业能源效率正是实现这一双重目标的关键。中国近年来大力推进“双碳”目标(碳达峰、碳中和),并出台…

文献学习——考虑混合储能系统选择的基于改进蜂群算法的热电联产微网多目标经济优化调度

摘要:在考虑混合储能系统模型选择的基础上,基于改进的人工蜂群算法(ABC),建立了冷热电联产微电网经济优化的多目标调度模型。为了对以往研究中的单目标模型进行升级,将模型的优化目标设定为微电网的日发电调…

nnMamba:基于状态空间模型的3D生物医学图像分割、分类和地标检测

摘要 本文提出了一种基于状态空间模型(SSMs)的创新架构——nnMamba,用于解决3D生物医学图像分割、分类及地标检测任务中的长距离依赖建模难题。nnMamba结合了卷积神经网络(CNN)的局部特征提取能力与SSMs的全局上下文建…

安科瑞新能源充电桩解决方案:驱动绿色未来,赋能智慧能源

安科瑞顾强 引言 在“双碳”目标与新能源汽车产业高速发展的双重驱动下,充电基础设施正成为能源转型的核心环节。安科瑞电气股份有限公司凭借在电力监控与能效管理领域20余年的技术积淀,推出新一代新能源充电桩解决方案,以智能化、高兼容性…

使用开源OPUS-MT模型进行文本翻译(python)

1. 环境准备 pip install transformers 2. 下载机器翻译模型: 2.1 代码从hugging face平台下载 from transformers import MarianMTModel, MarianTokenizer# 指定模型名称 model_name "Helsinki-NLP/opus-mt-zh-en" # 中译英模型# 下载并保存分词器到…

Elastic如何获取当前系统时间

文章目录 1. 使用 _ingest.timestamp 在 Ingest Pipeline 中获取当前时间2. 使用 Painless Script 获取当前时间3. 使用 now 关键字在查询中获取当前时间4. 使用 date 类型字段的默认值5. 使用 Kibana 的 Dev Tools 查看当前时间6. 使用 date 聚合获取当前时间7. 使用 Elastics…

jenkins配置连接k8s集群

jenkins配置连接k8s集群 前言 我这边jenkins是在一个服务器里面,k8s集群在其他服务器,实现连接 首先jenkins下载有k8s插件 进入配置页面 获取k8s-api-server地址 对应k8s服务器执行 kubectl config view --minify -o jsonpath{.clusters[0].cluste…

如何选择缓存模式?

如何选择缓存模式 当一个系统引入缓存后,最大的挑战之一便是如何确保缓存与后端数据库的一致性。目前,常见的解决方案主要有Cache Aside、Read/Write Throught和Write Back这三种缓存更新策略。 Read/Write Throught策略 读操作方面,如果缓…

网络安全配置截图 网络安全i

网络安全概念及规范 1.网络安全定义 网络安全的概述和发展历史 网络安全 广义的网络安全:Cyber Security(网络空间安全) 网络空间有独立且相互依存的信息基础设施和网络组成,包括互联网、电信网、计算机系统、嵌入式处理器和控…