IDEA使用Uniapp Tool插件开发小程序,无需启动HBuilderX亦可完成工作

创作启发

由于使用IntelliJ IDEA开发项目已经很长时间了,期间也会经常用到HBuilderX开发微信小程序,但是始终有种感觉不舒服,因为需要频繁在JDEA+HBuilderX+微信开发者工具三者之间切换,比较麻烦,所以就萌生了“能不能在IDEA中编写代码,启动项目后就能直接在微信小程序看效果”的想法,一找资料果然有大神开发的Uniapp Tool插件可以使用,经过测试可行。
需要说明一下,大神开发的各个版本并非高版本向低版本兼容,据我测试下来发现,每个Uniapp Tool版本都有对应的IDEA版本,如果你下载的Uniapp Tool版本不是对应支持的IDEA版本,那也是使用不了的。该项目仍在持续更新,最新版v1.0.19-252.1已经适配IDEA252.2版本。

介绍完背景,那就废话不多说,直接上手

一、安装插件

有三种方式可以安装插件:
方式1:IDEA开发工具 。打开IDEA开发工具,在Settings -> Plugins -> Marketplace中搜索插件“Uniapp Tool”,找到后点击install安装即可。如下图所示:

方式2:IDEA插件市场下载。 可能得科学上网(更快),或者不科学上网,但是绝对很慢,访问IDEA插件市场,根据需求下载相关版本的Uniapp Tool插件,下载后的zip压缩包无需解压,打开IDEA开发工具,一直找到方式1中的Plugins,点击右边的小齿轮,从磁盘安装插件,如果是适配了你当前IDEA版本的Uniapp Tool,则是能直接导入,如果不是适配版本(也就是当前你的IDEA用不了的版本),则无法导入,如下图所示:
补充内容: 如果你下载的zip压缩包无法导入进IDEA中,还可以手动修改插件的源码进行尝试导入,但这并不一定能解决插件不能使用的问题(能导入,但不能使用),可以试试,或许在后续的改进更新版中开发者能够解决版本兼容的问题。
方法: 解压这个压缩包,进入到lib目录下,使用压缩软件打开(我测试使用的是360压缩)文件较大的那个.jar文件,接着依次打开里面的META-INF/plugin.xml,修改如下图所示位置的版本号。

方式3:从github下载。这个似乎也得科学上完,不然也比较慢,打开github地址,查找相应版本进行下载后同方式2那样导入IDEA中即可。

二、使用插件

我们的IDEA安装好插件之后,依次打开Settings -> Tools -> Uniapp,如果你安装的Uniapp Tool版本是当前IDEA适配的版本,那么在此处就能正确打开“Uniapp”这个工具。如下图所示:
配置说明: 1.HBuilderX目录,即HBuilderX的安装目录;2.微信开发者工具目录,即调试微信小程序的开发者工具的安装目录,如果你有抖音支付宝小程序的开发工具也可补全;3.子项目,这项配置指的是你的项目结构有一个大项目,里面包含了多个小项目的情况,为了提升性能,可以关闭此项。其它的按照默认就行。

三、使用Uniapp Tool插件启动项目

按照以上步骤一顿操作下来,插件的安装和配置已经成功了,现在就是激动人心的时刻,启动项目了。
启动之前强调一点,如果项目你根据我的方式一步一步来的,项目依然启动不成功,并提示不是UniApp项目无法启动,那么有两种可能,1 你的项目的确不是UniApp项目,2 是UniApp项目(通过脚手架CLI创建或通过HBuilderX创建),此时强烈建议 你删除项目根目录下的 .ieda文件夹,删除后基本就能解决项目识别的问题。
如下图所示:
如上配置好项目启动条件后,点击Run项目启动成功,即可实现在IDEA中修改代码,且不必打开HBuilderX,亦能渲染到微信开发者工具的解决办法,并且同HBuilderX一样,修改代码后,依然能够差量编译,无需重启服务。此时此刻,嘴角已经不自觉的上扬起来
如下图所示为个人项目成功的演示:

按照以上步骤,相信你的IDEA也能够正常运行小程序代码了,接下来就愉快的在IDEA中修改代码,然后到微信开发者工具中去看效果吧!

好了,这就是我今天的分享,也是一种记录,希望能够帮助到有需要的小伙伴,多多点赞转发+关注哦。尊重原创,若转载,请注明出处。

转载请说明出处内容投诉
CSS教程网 » IDEA使用Uniapp Tool插件开发小程序,无需启动HBuilderX亦可完成工作

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买