微信小程序可视化预览插件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>无需创建,也不能删除
在这里插入图片描述

  1. 模版 <template>

在这里插入图片描述

  1. 各类标签元素
    在这里插入图片描述
    元素属性分为三类,通过不同的颜色进行区分,可让开发人员一目了然。
  • 普通属性
    在这里插入图片描述
  • 绑定事件
    在这里插入图片描述
  • 指令
    在这里插入图片描述
  1. 正文
    在这里插入图片描述
  2. 注释
    在这里插入图片描述

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文件。
在这里插入图片描述

©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值