五大微信小程序开发IDE深度评测

简介:

微信小程序已经内测有一段时间了,笔者本着好奇加学习的心态写了几个小demo,虽然在MINA框架上并没有遇到太多的坑,但官方开发工具实在不敢恭维。

  • api提示不全,要一个个查api啊,写代码超级慢啊
  • 很多必备的快捷键都没有,比如全选关键字、快速复制一行等等
  • 颜色主题不能选?不喜欢白色风格怎么搞
  • 没有插件 没有插件 没有插件 重要的事情说三遍

无奈笔者走上了尝试各种IDE的旅途,现在说一下笔者对于IDE的需求或者设想:

  • 轻量级:我不喜欢那种类似Eclipse的庞然大物,即使出现类似工具我也不会去使用,因为其中90%的功能都不会被用到。
  • 可定制化的代码着色:代码着色是必备功能,如果支持颜色模板最好
  • 准确的代码提示:这个太重要了,大家懂得
  • 可调试:IDE可以进行调试或运行
  • 实时预览界面:由于应用开发与网页不同,实时预览必须在程序运行时才会将动态数据加载到界面,这块我不抱太大希望

针对上面几个需求,笔者前后尝试了目前市面上支持小程序开发的工具,呕心沥血总结如下,以供大家参考。

微信小程序官方开发工具

注意,这个小标题我并没有使用“IDE”字眼。因为在笔者眼中,它真的是个工具,而不是一个IDE。官方工具中的代码编辑功能,就是将vscode的代码编辑功能嵌入到工具中,不足以支撑开发。

优点

因为是官方工具所以有这其它第三方工具有这不可比拟的天然优势,如果不是他代码编辑功能太弱的话。

  • 官方工具,可调试,可预览
  • 基本的代码编辑、智能提示、调试等功能都有
  • 项目管理、创建、手机预览、代码提交审核
  • 官方维护更新

缺点

不好的地方也很明显,总体而言是一款工具而不是IDE。糟糕的代码编辑功能,写起代码非常别扭,这是我放弃它的最重要原因。

  • api提示不全,要一个个查api啊,写代码超级慢啊
  • 很多必备的快捷键都没有,比如全选关键字、快速复制一行等等
  • 颜色主题不能选?不喜欢白色风格怎么搞
  • 没有插件 没有插件 没有插件 重要的事情说三遍

总结

目前因为需要用到微信web开发工具进行小程序的创建、调试、查看、预览、上传,所以这个工具必不可少。但是代码编辑功能实在太差,推荐使用其它第三方代码编辑工具代替。

Sublime Text 3

说完官方工具,聊一聊我日常工作最常用的工具 sublime text 3,它定位于代码编辑器而不是IDE,试用了一下,在代码提示方面只能算得上一般般。

优点

  • 打开文件速度倍儿快、UI简洁大方
  • 代码编辑体验舒适、高效
  • 拥有大量插件,针对不同需求基本上能找到对应插件来满足
  • 第三方开发者开发小程序插件用于代码着色和代码提示

缺点

  • 没有调试,没有预览
  • 因为是第三方开发者编写的插件,代码提示也不是非常全面

总结

除了本身的代码编辑优势,对于小程序开发并没有什么实质性帮助,最终Sublime Text方案也被笔者放弃。

不得不吐槽 Sublime Text的这个插件,搞了好久才把它run起来,郁闷。

注:插件下载链接在文末

Vim + WEPT


Vim这个编辑器之神一直是我的装逼利器,关于vim的好我就不多说了,免得Emacs的人过来骂我。

网上有人已经开发了对应插件,叫做 Wxapp.vim 这个插件我简单用了一下,包含文件检测、智能补全、文档跳转、语法高亮、缩进、代码段、单词列表、语法检查等功能。总体来说还是不错的,但存在一个严重问题。笔者在做服务器开发的时候,基本使用Vim编程,在配合一些其他的插件和工具直接在终端运行调试。但微信小程序这个我用了半天不得不放弃,因为要经常在Vim和微信小程序官方工具之间来回切换,似的笔者极为烦躁。按照笔者一惯作风,使用Vim的时候就应该把鼠标扔掉。

但最终我还是发现了一个补救方案,下面会介绍一下。

优点

  • 代码高亮,代码提示等功能齐全。
  • 有小程序开发插件Wxapp.vim可以使用,上文已经提到

缺点

  • 无法调试预览
  • 另外一个问题在于很多人搞不定Vim,这货学习曲线优点高
  • UI和使用方式不符合大多数人的习惯

总结

'WEPT'这个货解决了我上面Vim说的痛点。

WEPT 是一个微信小程序实时开发环境,它的目标是为小程序开发提供高效、稳定、友好、无限制的运行环境。也就是说,它本身是一个实时运行环境,可以做到实时预览和调试。同时调试可以借助chrome浏览器完成。和前面Vim搭配完美解决了代码编辑到调试再到预览的问题。

这货不算是IDE,笔者也不做优点缺点分析了。总体来说,WEPT+VIM+Plugin 是个不错的解决方案。推荐大家使用。

注:插件下载链接在文末

WebStorm

WebStorm网上有个插件,可以实现代码提示,不能做调试和预览,并且属于重度工具,所以笔者没有使用WebStorm。喜欢厚重感的童鞋可以尝试一下这个工具。

优点

  • 有插件可以实现代码高亮,代码提示等功能
  • 有非常成熟和非常丰富的功能
  • 各种快捷键

缺点

  • 无法调试预览
  • 功能比较多、比较臃肿

总结

总结来说,webstorm和上述几个一样,代码编辑功能强大但是需要插件支持才可以开发小程序,而且体积臃肿。

注:插件下载链接在文末

Egret Wing

Wing这个东西算的上是笔者看到的第一个公司级别支持的IDE了,所以功能做的相当成熟。下载尝试了一下,就目前来说除了上面的Vim方案,这个应该是目前对比后最佳的IDE工具了。

优点

  • 支持代码提示,代码高亮
  • 实时预览和调试和切换不同分辨率预览
  • 居然支持项目创建?!
  • 支持新建page模板文件
  • 双周更新

缺点

  • 实时界面预览属于静态渲染,对于界面中的动态数据无法进行预览,只能在调试时进行预览。
  • 无法进行可视化拖拽生成界面(是我太贪心了么?)

总结

Wing是唯一一款支持实时预览功能的IDE,包括微信官方都没有实时预览而是需要编译后预览,对于大懒人的笔者来说有实时预览写界面的时候不要太爽!wing不但可以而且还可以创建项目,新建page模板,运行一下项目发现,这个预览界面和微信官方开发工具非常相似。优先推荐使用。

总结

整理个表,大家看自己心情选择。

环境/工具 简述 代码高亮 代码提示 调试 实时预览 软件/插件下载地址
官方工具 微信小程序官方工具 支持 极其弱 支持 支持 下载软件
Egret Wing 首款支持微信小程序开发的IDE。 支持 支持 支持 支持 下载软件
Sublime Text 3 Sublime Text需要安装插件。 支持 支持 不支持 不支持 插件
Webstorm WebStorm 重量级IDE 支持 支持 不支持 不支持 插件
vim + WEPT 强大的组合工具 支持 支持 支持 支持 Vim插件WEPT





作者:dily
来源:51CTO
目录
相关文章
|
4天前
|
人工智能 自然语言处理 小程序
技术小白如何利用DeepSeek半小时开发微信小程序?
通过通义灵码的“AI程序员”功能,即使没有编程基础也能轻松创建小程序或网页。借助DeepSeek V3和R1满血版模型,用户只需用自然语言描述需求,就能自动生成代码并优化程序。例如,一个文科生仅通过描述需求就成功开发了一款记录日常活动的微信小程序。此外,通义灵码还提供智能问答模式,帮助用户解决开发中的各种问题,极大简化了开发流程,让普通人的开发体验更加顺畅。
技术小白如何利用DeepSeek半小时开发微信小程序?
|
10天前
|
人工智能 自然语言处理 小程序
用户说 | 文科生的我用DeepSeek+AI程序员半小时开发了一个小程序
用户说 | 文科生的我用DeepSeek+AI程序员半小时开发了一个小程序
用户说 | 文科生的我用DeepSeek+AI程序员半小时开发了一个小程序
|
12天前
|
JSON 缓存 小程序
微信小程序组件封装与复用:提升开发效率
本文深入探讨了微信小程序的组件封装与复用,涵盖组件的意义、创建步骤、属性与事件处理,并通过自定义弹窗组件的案例详细说明。组件封装能提高代码复用性、开发效率和可维护性,确保UI一致性。掌握这些技能有助于构建更高质量的小程序。
|
17天前
|
自然语言处理 搜索推荐 小程序
微信公众号接口:解锁公众号开发的无限可能
微信公众号接口是微信官方提供的API,支持开发者通过编程与公众号交互,实现自动回复、消息管理、用户管理和数据分析等功能。本文深入探讨接口的定义、类型、优势及应用场景,如智能客服、内容分发、电商闭环等,并介绍开发流程和工具,帮助运营者提升用户体验和效率。未来,随着微信生态的发展,公众号接口将带来更多机遇,如小程序融合、AI应用等。
|
1月前
|
人工智能 开发框架 机器人
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
AstrBot 是一个开源的多平台聊天机器人及开发框架,支持多种大语言模型和消息平台,具备多轮对话、语音转文字等功能。
2848 15
AstrBot:轻松将大模型接入QQ、微信等消息平台,打造多功能AI聊天机器人的开发框架,附详细教程
|
1月前
|
人工智能 IDE 开发工具
从0到1彻底掌握Trae:手把手带你实战开发AI Chatbot,提升开发效率的必备指南!
Trae是字节跳动推出的一款免费的AI集成的开发环境,集成了Claude3.5与GPT-4o等主流AI模型,提供AI问答、智能代码生成、智能代码补全,多模态输入等功能。支持界面全中文化,为中文开发者提供了高效的开发体验
1469 10
从0到1彻底掌握Trae:手把手带你实战开发AI Chatbot,提升开发效率的必备指南!
|
2月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
49 0
|
2月前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
92 0
|
3月前
|
IDE 开发工具
【开发IDE升级】如何对IDEA版本进行升级
本文介绍了如何将 IntelliJ IDEA Ultimate 从 2020.2.2 版本升级到 2022.3.2 版本。主要内容包括准备工作、卸载旧版本和安装新版本的步骤。首先,从官网下载所需版本并备份旧版配置;接着,通过 Uninstall.exe 卸载旧版,保留配置和插件;最后,安装新版并完成激活。详细的操作步骤和截图帮助用户顺利完成升级过程。
3843 1
【开发IDE升级】如何对IDEA版本进行升级
|
3月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。

热门文章

最新文章