自定义代码块解析
发布时间：2023-04-25 08:50:02 所属栏目：教程 来源：
导读：代码块配置项我们前面小节也提到过，有 “body”、“prefix”、“project” 等，大家都知道各配置项的含义了，这节课主要来讲解自定义代码块时，设置这些配置项需要注意的一些地方。
|
代码块配置项我们前面小节也提到过，有 “body”、“prefix”、“project” 等，大家都知道各配置项的含义了，这节课主要来讲解自定义代码块时，设置这些配置项需要注意的一些地方。 key 配置项 “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": "uni-app", "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": "uni-app", "scope": "source.vue.html" } 可以看到，在这两个代码块文件中，关于条件编译的 key 配置项都是 "#ifdef"，这样虽然设置了两个代码块，但是我们使用的时候就不需要在不同的作用域去区分了，非常方便。 body配置项 “body” 配置项在自定义的时候，需要学习的地方比较多，需要了解怎样来设置占位符，下面我们来详细讲解一下，看看应该如何设置 “body” 配置项。 在系统预置代码块源码文件中，可以看到 “body” 配置项中有许多 $0、$1、$2 字符。这些字符是什么意思呢？ $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:imooc1/imooc2/imooc3}。 我们自定义代码块的时候，将 body 的内容设置为下面这样，来看看是怎样的效果。 实例： "body": [ "<view class=${1:imooc1/imooc2/imooc3}>", "$0", "</view>" ] 代码块被触发之后，会显示出刚刚设置的多选项下拉菜单。 body 配置项需要我们学习的地方比较多，知道了这些配置项的用法之后，我们来学习如何自定义一个代码块吧。 自定义代码块 打开自定义文件 我们定义什么语言的代码块，就直接选择相应语言的代码块文件，除了 HTML、css、javascript、vue 语言之外，其他的都选择最后一项“自定义其他语言代码块”。 在 uni-app 项目中，我们一般最常定义的代码块是 vue 代码块，所以这节课我们打开 vue 代码块文件，后面在这个文件中填充自定义代码块。 打开代码块文件之后，页面的左侧是系统预置的代码块，我们不能修改，页面的右侧是编写自定义代码块的区域。 （编辑：汽车网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
