微信小程序可视化预览插件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. 根节点 <root>

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

2. 模版 <template>

3. 各类标签元素
   
   元素属性分为三类，通过不同的颜色进行区分，可让开发人员一目了然。

• 普通属性
  
• 绑定事件
  
• 指令
  

4. 正文
   
5. 注释
   

3.3.2基础操作

• 视图缩放
  位于编辑器右上角快捷工具，从左到?️依次为： 缩小，放大和重置（缩放比例为1.0，DOM移动在左上角起始位置）
  
• 元素展开/收起
  每个元素左边的原型按钮用于元素的展开/收起。收起时元素中的子元素将全部隐藏。快捷键为“空格键”

多行属性显示

3.3 搜索与代码跳转

提供2种方式打开搜索条：
（1）通过左边菜单栏的“搜索”菜单打开
（2）在预览视图中按Ctrl+F快捷键

当选中一个实体是，按Ctrl+F启动同类型搜素，例如：选中一个“view”元素，按下Ctrl+F会搜索名称中包含“view”的所有元素；选中一个“class”属性，按下Ctrl+F会搜索名称中包含“class”的所有属性；

通过左右箭头按钮遍历所有符合项，当被遍历的实体在屏幕之外时会自动移动到屏幕中间位置；

按每个实体的右侧箭头，会自动跳转到文本编辑器中对应的代码位置，并选中代码；

3.4 Wxml文件刷新

当通过文本编辑器修改了Wxml文件，切换回预览视图时，会提醒重新加载Wxml文件。