JetBrains IDE上架开发微信小程序的官方插件

一直以来，小程序开发者必须安装第三方插件，才能在 JetBrains IDE 中进行小程序开发。在 JetBrains Marketplace 上，有关插件已有约 50 万下载量。

对于这个在中国快速发展的特色开发需求，最近 JetBrains 官方开发并上线了一款专用于微信小程序开发的插件（插件名称：WeChat Mini Program）。让开发者无需离开熟悉的开发环境，就能轻松上手微信小程序的开发工作。在保持开发习惯一致性的同时，大幅提高开发效率。

今天的文章，我们就以小程序开发者较常使用的 WebStorm 为演示环境，带大家了解这款全新官方插件的主要功能，以及您可以如何帮助我们让这个插件越来越强大。

准备工作

在正式开始之前，请先安装 WebStorm 及微信小程序插件。现在您可以免费使用 WebStorm 进行非商业用途的开发。

安装 JetBrains IDE 最简单快捷的方式：

JetBrains Toolbox App 一键自动安装！

没有下载 Toolbox App 的小伙伴可以先在官网免费下载 Toolbox App。下载安装完成后，打开 Toolbox App，在 IDE 清单里选择 WebStorm，点击右边的安装（Install）按钮即可一键完成安装。

为了保持 WebStorm 本体的轻量，微信小程序的功能以插件的形式提供。安装好 WebStorm 后，请先在 IDE 的 Marketplace 里下载并安装插件。开启 WebStorm 后，点选欢迎页左方的插件 Tab 后，点选右边上方的 Marketplace Tab，并在搜索框里搜索 “wechat mini program”（由 JetBrains s.r.o. 开发的官方插件）。出现结果后，点击插件名称右方的 ”安装” 按钮，即可完成插件安装的步骤。

另外，为了方便在开发过程中预览成果，也请安装由腾讯官方提供的微信开发者工具。安装完成后，为了方便开发，推荐以分离窗口 + 置顶的方式将模拟器置于桌面左方，并以 WebStorm 开启相同项目后置于桌面右方，即可无缝以 WebStorm 开发微信小程序项目并实时预览页面成果。

快速上手亮点功能

开发微信小程序可简单区分为逻辑层及视图层两块，其中逻辑层主要使用 JavaScript 开发，而视图层则由 WXML（WeiXin Markup language：用于描述页面的结构）与 WXSS（WeiXin Style Sheet：用于描述页面的样式）编写。另外，视图层还可使用 WXS（WeiXin Script：小程序脚本语言）结合 WXML，动态构建出页面的结构。

由于 WebStorm 原生就支持 JavaScript 等前端语言及工具，因此在这篇文章里，我们会专注在 WebStorm 微信小程序插件对 WXML、WXSS 及 WXS 语法的支持。

WXML（WeiXin Markup language）

语法支持

WXML 是专为微信小程序框架设计的一套标签语言，其结合了组件、事件等功能，可以构建出页面的结构。现在，通过 WebStorm 的微信小程序插件，IDE 能识别 WXML 语法并提供语法高亮。

当输入 《 符号时，WebStorm 能提示组件名称及支持的属性。在输入 class 属性内容时，WebStorm 也能自动提示对应的 WXSS 的样式名称。当将鼠标焦点在 WXML 组件名称上时，WebStorm 会自动弹出快速文档方便您查阅标记用法及说明。而当输入 》 符号时，WebStorm 也能自动补全。通过这些功能，除了能减少因打字而发生的错误外，也可以让您在开发组件结构时更高效。

从逻辑层发送数据到视图层显示，是开发微信小程序时的常见需求。现在 WebStorm 能识别 Page 对象的 data 数据绑定，当您在 JavaScript 内声明数据内容后，在 WXML 文件输入代码时，IDE 能提示绑定的变量名称清单并依选择自动完成。

在开发微信小程序时， wx 指令（directives）可用于控制 WXML 的行为。这些指令可以实现条件渲染、循环渲染等常用功能。在编辑 WXML 文件时，WebStorm 可自动补全 wx 指令名称，包括 wx:for、wx:if、wx:elif、wx:else、wx:for-item、wx:for-index、wx:key 等，并且支持这些指令的语法高亮。

另外，事件是微信小程序框架里，视图层与逻辑层之间的通讯方式。WebStorm 能识别在 JavaScript 里声明的事件处理函数，并在编辑 WXML 的属性时自动补全，让开发者在绑定组件及事件处理函数时更方便。

WXSS（WeiXin Style Sheet）

语法支持

比起近似于 HTML、负责组件结构的 WXML，WXSS 则更像是 CSS，用于描述组件样式。为了让广大的前端开发者更容易适应 WXSS，其语法具有 CSS 大部分特性，并在 CSS 之上扩展了尺寸单位及样式导入等特性。WebStorm 的微信小程序插件，针对 WXSS 的这些特殊性，也提供相应的语法支持。

在 .wxss 文件里，使用 @import 语句可以导入外联样式表，WebStorm 除了能提示样式表的路径外，搭配转至声明快捷键（Mac：⌘+B 或 Win/Linux：Ctrl+B）更可以快速导航到对应的 WXSS 文件。这种跳转能力也能从 .wxss 转至使用到的 .wxml 文件中，非常方便。

在您编辑模板时，WebStorm 的微信小程序插件也支持 WXSS 的 style 及 class 语法。除了能提示样式名称外，也能自动补全从 JavaScript 绑定数据的变量名称，减少打字时间并降低发生错误的机会。

WXS（WeiXin Script）

脚本支持

除了 WXML 及 WXSS 外，WebStorm 也支持 WXS 语法。WXS 是内嵌在 WXML 中的脚本段，可以在 WXML 语法中内嵌脚本，丰富 WXML 中的数据预处理能力，或是编写简单的 WXS 事件响应函数。在 .wxml 文件里，WebStorm 除了可以解析嵌入式的 WXS 脚本，支持 WXML 标记中 src 属性的文件引用，还能在模板中自动补全 module 名称。

现在就开始使用并分享您的反馈

通过这篇文章的介绍，相信您已经感受到官方小程序开发插件能让您的开发工作如虎添翼。前阵子我们刚更新了 WebStorm 的授权模式，对于非商业用途，例如学习、开源项目开发、教学内容创作或业余爱好开发，您现在可以免费使用 WebStorm！