微信小程序可视化预览插件Outline For Wxml

1.简介

今天向大家推荐一个微信小程序可视化预览插件Outline For Wxml。

主要功能：

• 能够把.wxml文件转变为可视化图形模式，直观查看模版结构；
• 从图形元素切换到对应文本代码；
• 查找遍历功能；

2.安装

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

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

3.主要用法

3.1启动/切换Outline预览

目前支持2种方式启动：

1. 在VS Code的Explorer中选择一个.wxml文件, 从右键菜单中中选择“Open Troll Preview”
   
2. 在已打开的.wxml文件的文本编辑器中，点击顶部右边的工具图标
   
   Outline预览视图成功打开后，会自动解析Wxml文件并转换为图形显示模式。编辑器的标签格式为wxml文件basename 和 .outline后缀组成，例如player.wxml文件的Troll编辑器标签名为 player.outline
   
   注意： 每个Wxml文件只能打开一个Outline预览视图

3.2编辑视图切换

• 切换到Troll编辑，方法同3.1小节

• 切换到文本编辑，点击左侧菜单项

3.3图形操作

Troll工具采用图形化的拖放操作来调整页面DOM结构，在介绍操作之前，首先说明一下主要的图形元素类型。

3.3.1基本图元

1. 根节点

无需多说。补充说明一点，根模版元素无需创建，也不能删除

2. 模版