vue2升vue3，uniapp兼容鸿蒙app踩坑记录
前提：近来鸿蒙势头很好，公司的 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" : "你的鸿蒙模拟器安装路径" https://i-blog.csdnimg.cn/direct/b95caee28125461ba56bed93fe452959.png
https://i-blog.csdnimg.cn/direct/229992e061754ef29c7b80e137f6965f.png
3.2 下载模版，地址下
https://web-ext-storage.dcloud.net.cn/uni-app/harmony/zip/template-1.3.4.tgz
3.3 将你下载的模版，复制一份到你的vue3项目根目录下，如下图（我改了个名字，改成了hmpackage）
https://i-blog.csdnimg.cn/direct/7e96792571ec41a393aadb645a0de22f.png
https://i-blog.csdnimg.cn/direct/7c5ccf6ba3254abab4db23fcaa3974d7.png
3.4 打开鸿蒙模拟器，导入你vue3项目根目录的谁人模版，如下
https://i-blog.csdnimg.cn/direct/8867785689e34b3498e5b637357170b4.png
导入后，肯定等待 sync 后再操纵，右下角有个进度条，完成后进度条消失
https://i-blog.csdnimg.cn/direct/1ebd0da8dff64a908be60b2d9962db70.png
3.5 真机调试，右上角，点击装备管理器，假如没有模拟器，下载一个。点击运行，等待开机。
https://i-blog.csdnimg.cn/direct/e0cdd97910d44a7b9dc4aab23d6dbc33.pnghttps://i-blog.csdnimg.cn/direct/7bbb9fad66624b1c8ff0201f807937f1.png
https://i-blog.csdnimg.cn/direct/7d4f51e9fb054051b81f23ed1c5e556c.png
开机后，右上角就有了一个华为手机
https://i-blog.csdnimg.cn/direct/3dacaf3fb7ff44c7870c2cfb577169f7.png
3.6 配置签名，点击文件，打开项目结构，点击 Signing Configs，然后登录（sign in）
（假如项目结构页面为空，请参考鸿蒙模拟器，deveco studio中 project Structure 空白办理方式_deveco studio创建项目白屏-CSDN博客）
https://i-blog.csdnimg.cn/direct/3c1e7c47ce3b4a3eb0a5e76fd83546ee.png
https://i-blog.csdnimg.cn/direct/0fc699f8f2c64377b952247ac2be8e72.png
登录后，两个框勾选上，会主动生成签名，点击应用（apply），然后ok
https://i-blog.csdnimg.cn/direct/52e347dbc09b4695a2def29f678032ec.png
https://i-blog.csdnimg.cn/direct/a5a77b822e4f441ea684869d9b41f4d5.png
3.7 打开你的vue3项目，点击运行到鸿蒙模拟器（不要运行到内置浏览器！！！！，会报错的！！），假如没有这个选项，参考3.1，看看路径对不对呢
HBuilder 会主动打包整个项目到模版里，（我感觉类似于运行到微信小程序，主动打包到 unpackage 里一样。所以放入新的模版，肯定要重新再打包一下！模拟器运行的是，打包后的代码）
https://i-blog.csdnimg.cn/direct/09968576c5954c309ad32ae1c189a891.png
启动鸿蒙失败，请手动启动鸿蒙。不要慌，打开我们的鸿蒙模拟器，点击运行（打包后，就乐成啦）
https://i-blog.csdnimg.cn/direct/c8f14f28288f46efa59b2a0f708057e0.png
https://i-blog.csdnimg.cn/direct/83ab079c7c0c4cc388944ecd62abafaa.png
重点在这里，大部门人都能遇到的问题，发起好好看看！！（本人踩坑无数次）
运行中的问题：
1. 假如在 HBuilder X 中运行到鸿蒙模拟器过程中会报错，一般都是语法问题。
查抄代码语法，vue3只支持ES6 模块规范，不支持commonJS！！具体参考官网
uni-app官网 (dcloud.net.cn)
2. 鸿蒙模拟器打包后报错，报错具体路径假如是这个"entry\build\default\cache\default\default@CompileArkTS\esmodule"，那就删掉项目中的整个模版，重新执行上述 3.3 - 3.7。
（期间不不不要运行到内置浏览器！！！，假如运行到内置浏览器了，还会报错，我也不清晰什么缘故原由，我猜想是编译的时间，是不是主动改了模版里的文件，导致的报错）
https://i-blog.csdnimg.cn/direct/448d470a6da640049842ca8077936caf.png
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我！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]