您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

使用代码块直接创建组件模板

HBuilderX 是 Dcloud 团队推出的一款非常强大的 Web开发工具,里面包含了许多助手,可以帮助我们的完成项目开发。

其中我们最常用到的是块,本来需要敲打一大段,使用块的话,我们只需要简单敲写几个字母,再选择块回车就可以了。

比如我们前面小节讲的条件编译,在 <template> 中是下面这样的。
实例:

<!-- #ifdef H5 -->
<!-- #endif -->

<script> 中是下面这样的。
实例:

// #ifdef H5
// #endif

每次写条件编译都要这样一串,并且还要注意在不同下使用不用的注释符号,而我们使用块的话,直接输入 ifdef,选择 #ifdef 选项回车,如下图:

再选择相应的平台回车就可以了,如下图:

除了 ifdef 之外,还有许多其他的常用的块,了解掌握之后,可以减轻我们开发过程中这些没太有必要的重复工作,有效提高开发效率。下面我们来看看如何使用系统帮我们预置的一些常用块。

HBuilderX已经认帮我们内置了许多常用的块,我们点击栏-工具-块设置,就可以查看不同语言的块了。

比如我们选择 HTML 块,就会出现当前 <template> 中的块,如下图:

点击栏-工具-块设置-vue块,可以看到下面这两段关于条件编译的块源码。
实例:

"#ifdef": {
        "body": [
            "<!-- #ifdef ${1:APP-PLUS/APP-VUE/APP-NVUE/MP/MP-ALIPAY/MP-BAIDU/MP-WEIXIN/MP-QQ/MP-TOUTIAO/MP-360/H5/QUICKAPP-WEBVIEW-HUAWEI/QUICKAPP-WEBVIEW-UNION/QUICKAPP-WEBVIEW} -->",
            "$0",
            "<!-- #endif -->"
        ],
        "prefix": "ifdef",
        "project": "",
        "scope": "source.vue.html"
    },
    "#ifndef": {
        "body": [
            "<!-- #ifndef ${1:APP-PLUS/APP-VUE/APP-NVUE/MP/MP-ALIPAY/MP-BAIDU/MP-WEIXIN/MP-QQ/MP-TOUTIAO/MP-360/H5/QUICKAPP-WEBVIEW-HUAWEI/QUICKAPP-WEBVIEW-UNION/QUICKAPP-WEBVIEW} -->",
            "$0",
            "<!-- #endif -->"
        ],
        "prefix": "ifndef",
        "project": "",
        "scope": "source.vue.html"
    },

2.2 块源码解析
我能上面贴出的块,两个条件编译的块,分别是 ifdefifndef

每个块都几个配置项,这两个块包含的配置项分别是 “body”、“prefix”、“project”、“scope”,当然还有一些其他的配置项,下面我们来通过这些配置项了解一下块源码。

上面中的"#ifdef"、"#ifndef"`就是 “key” 配置项。这个配置项必须是唯一的。

到时候在中输入块触发字符时,出现在助手列表中的名字就是 “key” 配置项。

上面中的"ifdef""ifndef"就是 “prefix” 配置项。这个配置项是块的触发字符。比如,我们在中敲写 ifdef,就会触发条件编译的块。

“body” 配置项里面包含的就是块的了,也就是敲打块触发字符后,会的。这个有几个比较特殊的格式,我们后面小节讲块时会详细讲到。

“triggerAssist” 配置项认为 false,可以不设置,当设置为 true 时,表示该块输入到文档后立即在第tabstop上触发,拉出助手。

“project” 配置项用来配置块在什么项目类型下生效。可取值有:、Web、App、Wap2App。如果不设置,说明该块在所有的项目类型下都生效。

比如我们设置 "project": "",说明该块只在 项目下生效。

如果我们设置"project": “,Web”,说明该快在 和 Web 项目下面生效,两个项目类型之间用英文逗号(,)隔开

“scope ” 配置项是用来规定块的作用域的,比如 "scope": "source.vue.html" 表示块作用于 .vue 中。

这个配置项是用来描述块的,便于我们了解块的作用。

我们现在已经找到了块源码,并且指导了块各配置的含义,现在来根据这些源码来应用这些块吧~

系统帮我们预设的块有4个,点击栏-工具-块设置就可以看到,分别是 块(html.json)、css块(css.json)、javascript块(javascript.json)、vue块(vue.json)。

我们使用块的时候,在中输入块的 ”prefix” 配置项,就会触发这个块。

比如我们想要输入 <text></text> ,只需要输入 text 再回车就可以了。

还有两个比较的:

如果输入块触发,没有触发块,可以注意一下面的问题。

直接粘贴触发,不会触发块,可以粘贴后删掉最后字符,再重新输入,就会成功触发块;

在模式下输入触发,回车之后,不会触发块,需要在英文模式下输入;

对应的作用域不对,每个块都有对应的作用域,比如 css.json 中的块不会在 <template> 中触发。

本小节主要给大家介绍了如何查看块源码,以及如何使用块,我们开发过程中不需要特地记住这些块,只需要有个大体的印象,大体了解哪些可以用块来快捷。

前期开发可以打开块源码辅助开发,后期开发熟练了,自然就行云流水了。


联系我
置顶