使用代码块直接创建组件模板
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 块源码解析
我能上面贴出的块,两个条件编译的块,分别是 ifdef
、ifndef
。
每个块都几个配置项,这两个块包含的配置项分别是 “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>
中触发。
本小节主要给大家介绍了如何查看块源码,以及如何使用块,我们开发过程中不需要特地记住这些块,只需要有个大体的印象,大体了解哪些可以用块来快捷。
前期开发可以打开块源码辅助开发,后期开发熟练了,自然就行云流水了。