WebStrom开发微信小程序

WebStorm配置微信小程序全攻略
最新推荐文章于 2025-09-12 10:34:05 发布
原创 最新推荐文章于 2025-09-12 10:34:05 发布 · 置顶 · 1.9w 阅读 · 57 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#小程序

本文详细介绍了如何在WebStorm中配置微信小程序的步骤，包括安装微信开发者工具，新建小程序项目，查看APPID，以及在WebStorm中配置.wxml和.wxss文件类型，安装代码提示插件，实现代码智能补全，让微信小程序开发更加高效流畅。

文章目录

WebStrom配置微信小程序

一、安装微信开发者工具

1、安装

点击微信开发工具进入下载界面，选择适合电脑系统的版本进行下载。
在这里插入图片描述

2、新建小程序项目

新建一个项目->项目名称->填写小程序名字，目录->本地存放小程序的文件路径，APPID->第三步，开发模式->小程序，初始模板->默认模板，语言->JavaScript。
在这里插入图片描述

3、如何查看APPID

开发->开发管理->开发设置->开发者ID->APPID(小程序ID)
在这里插入图片描述

4、进入小程序开发

项目新建完成后，进入小程序开发界面，最左边是手机端模拟界面（可选择适应机型），中间是小程序的目录文件和配置文件，最右边是编写代码的区域，以及下面的控制台区域，可以运行和调试代码。

最低0.47元/天 解锁文章
【微信小程序】使用webstorm进行开发，支持代码提示高亮等
杨迪龙的博客
06-29 5973
最近有负责小程序开发的同事离职，无奈接手项目，使用过微信小程序的官方开发工具的同学应该都知道，这玩意做得有多差，写起代码来相当难受。作为一个android开发，最熟悉的莫过于android studio了，而android studio来自于jetbrains的IDEA，并且了解到jetbrains上还有个webstorm是专门用于web开发的，就希望能这个开发工具上开发微信小程序。幸运的是，在插件市场发现了小程序开发的支持插件，但使用后还是有些问题： 经过一番查找，在微信官方的GitHub上找到了小程序的
基于Taro的微信小程序开发(简单流程)
记不住所以写下来
12-06 2516
打开package.json文件，找到 “dev:weapp” ，点击绿色的运行按钮，点击Run。在本机想要存放项目的位置建立一个空文件夹，进入文件夹后，在当前位置打开cmd窗口。进入Taro官方文档，选择想要使用的版本，选择安装方式(本文使用npm)。打开项目后，WebStorm提示安装依赖，点击确认即可自动安装相关依赖。选择当前项目路径，AppID选择测试号，后端不使用云服务，点击创建即可。使用其他编辑器，如VS Code也是可以的。使用如下命令可以查看npm的全局安装。点击编译，即可看到默认的界面。
webstorm开发微信小程序
qq_41662119的博客
08-01 997
小程序开发的editor我就不多说了，很多开发人员都有过吐槽，当然我个人觉得关键还要看习惯，我觉得是差不多的。但是呢，webstor作为前端开发的神器，如果不会用他实现小程序的开发，那就有点娄了。 汉化版的webstorm中的 settings是进不去的，因此先价格汉化包去掉 现在微信开发工具中将项目初始化创建好，开着不要关闭，因为我们需要利用微信小程序的开发工具进行...
手把手教你安装微信小程序开发工具，Uniapp开发框架 + HBuilderX + WebStorm开发工具安装，2026，保姆级教程
最新发布
在职AI算法工程师，擅长计算机视觉，YOLO目标检测、分割等，擅长web、pyqt界面可视化，好内容持续更新中，来这里跟大家一起学习，共同进步
09-12 1894
手把手教你安装微信小程序开发工具，Uniapp开发框架 + HBuilderX + WebStorm开发工具安装，2026，保姆级教程
WebStorm 开发微信小程序
qq_26285567的博客
07-16 607
HBuilderX 的替代方案。
让你的「微信小程序」运行在Chrome浏览器上，让我们使用WebStorm
热门推荐
Phodal's zenthink
09-27 2万+
「微信小程序」的开发框架体验起来，还不错——自带了UI框架。但是问题是他的IDE，表现起来相当的糟糕——其实主要是因为，我当时买WebStorm License买了好多年。所以，我觉得他的IDE真不如我这个付费好用。而且，作为一个拥护自由和开源的 「GitHub 中国区首席Markdown程序员」。微信在「微信小程序」引导着Web开向封闭，我们再也不能愉快地分享我们的代码了。如果我们放任下去，未来的
webstorm开发微信小程序代码提醒(webstorm开发工具)
03-29
作者：Miaoz0070，来自原文地址  使用了微信提供的开发工具是真心难用，卡顿厉害、中英文切写注释换相当不爽、还没办法多开窗口，相信大家也遇到过这种现象。 下边我们介绍下webstorm来开发微信小程序的一些配置：   1.首先FileType下Cascading Style Sheet 添加*.wxss (此图片来源于网络，如有侵权，请联系删除! )   2.FileType下HTML 添加*.wxml (此图片来源于网络，如有侵权，请联系删除! )   3.将其中的wecharCode.jar下载下来，然后在webStorm 的 File -> import settings 中导入即
Webstorm 支持微信小程序开发插件 Wechat mini program support
LlanyW的专栏
06-02 8067
File-> Settings->Plugins 选择Marketplace: 输入Wechat ,搜索，然后选择第二个，点击 ：Install ,新目录右键：page或者componet， 直接生成4套件文件。微信小程序语法支持，rpx 单位报错解决。然后就是等待安装完成 ，apply即可。页面添加完成之后会在。中自动注册这个页面。
webstorm+小程序相配合来开发小程序
浩星
06-09 6376
​ webstorm可以安装的一个小程序插件：wechat-miniprogram-plugin，来实现小程序语法的高亮，并识别 rpx 这种小程序专有单位，还可以实现跟开发者工具中一些类似的操作功能
使用WebStrom开发 微信小程序步骤
qq_29491123的博客
04-23 1269
8.到此为止了, 去试试吧, WebStrom里面写代码保存, 就可以实现在微信开发者工具里面实时刷新了。1.注册小程序(略)4.安装Less支持。
像VUE一样写微信小程序-深入研究wepy框架
03-29
微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力，越来越多企业加入小程序开发。 小程序于M页比相比，有以下优势：1、小程序拥有更多的能力，包括定位、录音、文件、媒体、各种硬件能力等，想...
webstorm微信小程序插件.7z
07-23
将其中的wecharCode.jar 下载下来，然后在webStorm 的 File -> import settings 中导入即可
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
01-03
1.下载阿里图标，解压出来之后有个.css文件 　　 　　然后复制这css里面的所有代码 2.新建一个wxss文件，例如我新建的就是iconfont.wxss，然后把刚才复制的所有代码，复制到这个文件里面去。 3.在需要使用到图标的页面导入该wxss文件。例如： 这样在该wxml页面就可以使用图标了 总结 以上所述是小编给大家介绍的在webstorm开发微信小程序之使用阿里自定义字体图标 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
实现微信小程序的wxml文件和wxss文件在webstrom的支持
08-30
微信小程序是一种轻量级的应用开发框架，由腾讯推出，它使用特定的WXML（WeiXin Markup Language）和WXSS（WeiXin Style Sheets）语言进行界面构建，结合JavaScript进行业务逻辑处理。WebStorm是一款强大的...
Webstorm 入门级玩转uni-app 项目-微信小程序+移动端项目方案
LlanyW的专栏
08-23 2万+
3. 首次启动肯定是报错了，需要配置自己的DClound APPID， 微信小程序APPID。这个appid号可以用微信者开发工具打开编译出来微信项目，生成一个测试号，然后复制过来。创建一个新项目，选择uniapp,默认模版是演示用，有一些ui组件，常用功能封装。我选择了第二个，有试用30天，安装重启webstorm之后。1.先配置微信开发者工具，HBuilder安装目录。启动完成 之后，在微信开发者工具模拟看效果。2.添加运行项目配置，然后点击运行。第一个是不收费，第二个收费。配置完成之后重新，运行。
webstorm设置微信小程序开发
人无远虑,必有近忧.
05-25 390
文章目录配置识别wxss文件配置识别wxml文件 配置识别wxss文件 File–>Settings–>Editor–>File Types–>cascading style sheet–>添加 *.wxss 的识别 配置识别wxml文件 File–>Settings–>Editor–>File Types–>HTML–>添加 *.wxml 的识别 ...
Webstorm支持微信小程序开发配置
红星的专栏
03-18 4763
场景 前端开发习惯使用 Webstorm ，但默认无法识别 .wxml .wxss 格式文件， 其实微信小程序的工程文件与 Vue 十分接近，可以通过直接添加相应扩展名即可实现。 .wxml 对应于 Cascading Style Sheet（即 CSS） .wxss 对应于 Vue.js Template（即 Vue） 此处默认已经安装了 Webstorm 。 方法 依次点开 File -...
校园助手微信小程序开发详解
### 微信小程序开发基础 微信小程序是基于微信平台的应用程序，其特点在于无需下载安装，即开即用，用完即走，能够提供即时通讯、内容浏览、生活服务等多种服务。微信小程序支持使用JavaScript、WXML（类似HTML的...
评论 5
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小蜜蜂127

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值