章节索引 :

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

1. 前言

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

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

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

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

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

// #ifdef H5
// #endif

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

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

HBuilderX 开发工具会根据不同的标签环境,生成相应的条件编译代码,是不是非常方便。

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

2. 如何使用系统预置的代码块

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

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

打开的界面中,在页面左侧就可以看到系统帮我们预置的代码块源码了,这些系统预置的代码块我们是不可以修改的。那我们如何通过这些代码块源码来正确的使用代码块呢?我们还是拿条件编译来举例。

2.1 找到代码块源码

点击菜单栏-工具-代码块设置-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": "uni-app",
        "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": "uni-app",
        "scope": "source.vue.html"
    },

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

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

2.2.1 key 配置项

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

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

2.2.2 prefix 配置项

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

2.2.3 body配置项

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

2.2.4 triggerAssist 配置项

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

2.2.5 project 配置项

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

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

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

2.2.6 scope 配置项

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

2.2.7 description 配置项

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

2.3 代码块的使用

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

2.3.1 触发代码块

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

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

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


text 代码块在vue.json 文件中可以找到,触发字符是 utext,我们输入 text 也可以触发。

还有两个比较快速的方法:

  • 输入 v,就会出现 vue代码块列表;
  • 输入 u,就会出现 uni-app 代码块列表。

2.3.2 注意事项

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

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

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

  • 对应的作用域不对,每个代码块都有对应的作用域,比如 css.json 文件中的代码块不会在 <template> 标签中触发。

3. 小结

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

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