前面小节我们了解了系统内置的一些常用块的，但这些系统预置的块并不能满足我们所有开发的需求。

不过不需要担心，在 HBuilderX 开发工具中，给我们提供了块的。我们可以根据自己的开发习惯和开发需求，来我们常用的一些块。本小节来讲解如何块。

块配置项我们前面小节也提到过，有 “body”、“prefix”、“project” 等，大家都知道各配置项的含义了，这节课主要来讲解块时，设置这些配置项需要注意的一些地方。

“key” 配置项就是触发块时，在列表的名字。前面小节说过 key 配置项是唯一的，这个唯一指的是在同中是唯一的，不同块可以是重复的，我们来举个例子。

前面讲的条件编译块 ifdef，分别在 javascript块（javascript.json）、vue块（vue.json）中的样子如下。

实例：

// javascript.json
"#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.js"
}

// vue.json
"#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"
}

可以看到，两个块中，关于条件编译的 key 配置项都是 "#ifdef"，这样虽然设置了两个块，但是我们使用的时候就不需要在不同的作用域去区分了，非常方便。

“body” 配置项在的时候，需要学习的地方比较多，需要了解怎样来设置占位符，下面我们来详细讲解一下，看看应该如何设置 “body” 配置项。

在系统预置块源码中，可以看到 “body” 配置项中有许多 $0、$1、$2 字符。这些字符是什么意思呢？

$ 是占位符，$ 后面紧跟的数字是块被触发后，在开发工具中的光标位置，光标位置顺序根据 $ 后面的数字有关。

从 KaTeX parse error: Expected 'EOF', got '开' at position 3: 1 开?始， 后面的数字越大，光标顺序就越靠后。块被触发后，光效会先在 $1 所在的位置， $1 可以设置多个，光标会同时出现多个位置。再次按 TAB 键，光标会在 $2 所在的位置， $3、$4 … 以此类推。

需要特别注意的是 $0 设置的是光标最终所在的位置。比如我们将块的 body 配置项设置成下面这样。

实例：

"body": [
	"<${1:view} ${2:class}=\"imooc\">",
		"$0",
	"<${1:/view}>"
]

块被触发之后，鼠标会在 $1 所在的位置，如下图：

@H__220@

设置块时，还设置多选项下拉。如果某个位置需要有下拉候选，我们可以这样来写：${1:imooc1/imooc2/imooc3}。

我们块的时候，将 body 的设置为下面这样，来看看是怎样的。

实例：

"body": [
	"<view class=${1:imooc1/imooc2/imooc3}>",
		"$0",
	"</view>"
]

块被触发之后，会出刚刚设置的多选项下拉。

点击栏-工具-块设置，或出现这些选项，如下图：

在 项目中，我们一般最常定义的块是 vue 块，所以这节课我们打开 vue 块，后面个中填充块。

打开块之后，的左侧是系统预置的块，我们不能，的右侧是编写块的区域。

将下面的粘贴到块的右侧区域。
实例：

"uImooc": {
	"body": [
		"<view class=${1:imooc1/imooc2/imooc3}>",
		"\t<view class=\"imooc4\">",
		"\t$0",
		"\t</view>",
		"</view>"
	],
	"prefix": "uimooc",
	"project": "",
	"scope": "source.vue.html"
}

Tips：

我们保存一下刚刚的块，要先查看左下角有没有报错信息。如果块语法不合法，编辑器左下角会弹出信息，同时中会在的地方红波浪线，这时要注意修正，否则块不会生效。

块保存成功之后，的块就会生效了，这个时候可以在文档中使用了，我们来测试一下。

在文档中输入 uimooc ，块就会被触发，如下图：

@H_212_@

本小节我们学习了怎样块，同样属于实操性比较强的知识点，大家在学习的过程中，最好跟着我们的课程操作一遍，加深一下理解哦，本小节需要掌握的重点如下：