文章目录

  • 📋前言
  • ⏬关于专栏
  • 🎯运行拷贝的新项目
  • 🎯关于报错:sass 依赖问题与代码报错
  • 🧩解决方法
  • 🧩补充(关于 /deep/ 和 ::v-deep)
  • 📌区别
  • 🧩意外情况
  • ❗注意
  • 📝最后



uniapp运行到ios一直卡在编译 uniapp debug_uni-app

📋前言

这篇文章的内容记录一下在运行 uni-app 项目的时候遇到的报错,以及解决报错的过程。报错原因是,拷贝新项目,在另一台电脑运行时出现的依赖报错,以及运行到微信开发者工具出现的报错等等。

⏬关于专栏

本篇文章是我的 uni-app 专栏的第二篇文章,这个专栏主要是分享和介绍从零到一学习和使用的 uni-app 的笔记和个人经验。通过个人的学习经验和工作经验来给大家分享关于 uni-app 开发的技巧,以及快速入门的诀窍等等。


🎯运行拷贝的新项目

凡事都有因果,首先我们来看下报错是如何生成的,以及分析为什么会出现这种报错的原因。首先在编译器(hbx)运行项目(项目以测试项目为名称),选择运行在微信开发者工具。运行后出现如下报错。

uniapp运行到ios一直卡在编译 uniapp debug_uniapp运行到ios一直卡在编译_02


我们从报错第一条开始看,可以发现报错的原因是 sass 的版本依赖问题。

uniapp运行到ios一直卡在编译 uniapp debug_uni-app_03


接下来针对这个报错,我们一步一步来解决这个报错,以及后续出现的报错。


🎯关于报错:sass 依赖问题与代码报错

首先我们可以看到运行到微信开发者工具后,并没有运行成功,而是出现了依赖问题的报错,如上图。其实很明显,我们看项目的目录,发现并没有 node_modules 这个依赖文件。出现这个原因只能说是粗心的原因了,通过窗口的报错可以发现是 sass 的依赖问题,一开始还认为是 sass 的版本问题,但是项目中根本没有 sass 的依赖。

uniapp运行到ios一直卡在编译 uniapp debug_debug_04


接下来,打开编译器的终端,安装相关依赖和 node_modules 包,使用如下的命令。

npm install node-sass

uniapp运行到ios一直卡在编译 uniapp debug_uniapp运行到ios一直卡在编译_05


我们可以看到项目目录中出现了 node_modules 包,以及终端窗口开始下载了。安装完成之后,我们重新运行到微信开发者工具。但是项目还是出现了运行报错,说明还有在代码上的报错问题,我们仔细看下图的报错信息,是因为项目中的部分代码的报错导致的。(项目在原电脑运行正常)

uniapp运行到ios一直卡在编译 uniapp debug_debug_06

🧩解决方法

全局搜索项目中的 /deep/ 然后全部替换成 ::v-deep 即可解决。

uniapp运行到ios一直卡在编译 uniapp debug_debug_07


然后再次运行,我们可以发现之前的报错没有出现了,说明问题解决了,运行窗口出现编译启动的消息提示了。

uniapp运行到ios一直卡在编译 uniapp debug_微信小程序_08


然后我们可以发现微信开发者工具打开了,并且运行了该项目,说明 uni-app 项目成功运行到微信开发者工具了。

uniapp运行到ios一直卡在编译 uniapp debug_微信小程序_09

🧩补充(关于 /deep/ 和 ::v-deep)

/deep/::v-deep 都是用于处理深度选择器(deep selector)的语法,用于在 Vue 组件中修改子组件中的样式。它们的主要作用是能够穿透子组件的 Shadow DOM 或者普通的组件边界,从而修改子组件中的样式。

📌区别

/deep/:这是旧版本的深度选择器语法,在 Vue 2 中使用。

::v-deep:这是 Vue 3 推荐使用的新版本深度选择器语法。它是为了取代 /deep/ 而引入的,并且可以达到相同的效果。使用 ::v-deep 可以更好地表达出你正在处理的是 Vue 组件的深度样式。

使用场景:

  • 当你需要在父组件中修改子组件的样式时,可以使用深度选择器语法。
  • 当子组件的样式被封装在组件作用域内,而你又需要修改子组件中的样式时,深度选择器就非常有用。

需要注意的是,在使用深度选择器时,要慎重考虑对子组件样式的修改,确保修改不会破坏组件的封装性和复用性。通常情况下,应该优先通过 props 或者事件来与子组件进行交互,而不是直接修改其样式。

🧩意外情况

如果运行成功后,弹出了微信开发者工具,但是没有打开运行的项目,说明还存在一些配置要处理。首先我们要从头开始排查是否缺漏了 uniapp 运行微信小程序准备操作。

  • 首先要打开manifest.json获取uni_appId。
  • 然后要打开微信开发者工具中的服务端口。
  • 然后还要在 Hbuilder 中配置微信开发者工具的路径。
  • 最后也是最重要的,查看运行的项目是否配置了 appid。

❗注意

然后说回,弹出了微信开发者工具,但是没有打开运行的项目这个特殊情况。原因是在于 appid 的问题,在运行其他人的项目或者在新电脑运行的时候,我们要把编译器上面配置好的 appid 先清空,然后再去运行,以游客身份的启动微信开发者工具,这样就可以解决这个问题了(亲测有效)。如果后续需要加上 appid 来开发,直接填上,在运行就没有这个问题了。