伪装狙击手

可视化微信小程序开发小助手-Troll (VS Code插件）

1.开场白

今天向大家推荐一个微信小程序开发辅助工具Troll For Wxml，这是一个VSCode插件。

Troll工具的主要优点：

能够把.wxml文件转变为可视化图形模式，开发人员就可以通过拖放来自由移动各个element和property，比在文本编辑器中使用Ctrl+C/Ctrl+V/Ctrl+X方便很多；
并不是替代文本编辑器，而是作为文本编辑器的辅助，可自由在文本编辑器和图形编辑器之间切换，开发人员可利用文本编辑和图形编辑的各自优势，提升工作效率；
提供比较常用的UI库（目前仅提供官方UI库，后续不断进行扩充）

2.安装

在Extension市场中搜索“Troll”就能找到它。

也可以在[https://github.com/guobinnew/vscode-troll/tree/wxml/release]下载VSIX文件，通过VS Code的“从 VSIX 安装…”命令来手动安装。

3.主要用法

3.1启动/切换Troll编辑器

目前支持2种方式启动：

在VS Code的Explorer中选择一个.wxml文件, 从右键菜单中中选择“Open Troll Editor”
在已打开的.wxml文件的文本编辑器中，点击顶部右边的工具图标

Troll编辑器成功打开后，会自动解析Wxml文件并转换为图形显示模式。编辑器的标签格式为wxml文件basename 和 .troll后缀组成，例如player.wxml文件的Troll编辑器标签名为 player.troll

注意：每个Wxml文件只能打开一个Troll编辑器

3.2编辑视图切换

Troll工具的目标并不是替代文本编辑器，而是作为文本编辑器的一个补充（文本编辑和图形编辑的各自优劣势网上有不少文章，这里不在啰嗦）。当开发新内容时，通过文本编辑器强大丰富的功能，让开发人员如行云流水一般的搭建页面；当对已有内容进行调整修改时，图形编辑器提供的拖放操作可以更方便地对页面DOM结构进行调整，比Ctrl+C/Ctrl+V方便很多。