HBuilder作为一个很好用的开发工具，启动快，界面友好，开发效率高，是开发者的一大利器。 做好适当的配置，可以加快开发进程。常用快捷键ctrl+/ 注释代码ctrl+y 恢复撤销ctrl+x 剪切ctrl+z 撤销ctrl+c 复制ctrl+p 在当前项目查找文件ctrl+f 在当前文件查找字符串ctrl+alt+f 在当前目录查找字符串ctrl+k 格式化代码 (一行转多行)ctrl+shift+k 格式化代码 (多行归并一行)ctrl+g 跳转到某行代码ctrl+o 打开文件ctrl+alt+s 保存所有文件鼠标左键+ctrl选中多行(可进行多行修改操作)分9项快捷键1.文件(4)新建 Ctrl + N关闭 Ctrl + F4全部关闭 Ctrl + Shift + F4属性 Alt + Enter2.编辑(13)激活代码助手 Alt + /激活快捷键视图 Ctrl + Shift + L开启关闭注释整行 Ctrl + /开启关闭注释已选内容 Ctrl + Shift + /删除当前行 Ctrl + D删除当前标签 Ctrl + Shift + T删除至行首 Shift + Backspace删除至行尾 Shift + del合并下一行 Ctrl + Alt + J整理代码格式 Ctrl + Shift + F向下移动行 Ctrl + 向下向上移动行 Ctrl + 向上选中当前行 Ctrl + L3.插入(3)重复插入当前行或选中区域 Ctrl + Shift + R快速插入(在html中) Shift + Enter快速插入\n(在css或js中) Shift + Enter4.选择(4)向左选词 Ctrl + Shift + 向左向右选词 Ctrl + Shift + 向右选择相同词 Ctrl + Shift + A选择成对内容 Ctrl + ‘[‘5.跳转(9)上一个选项卡 Ctrl + Tab前一词 Ctrl + 向左后一词 Ctrl + 向右转到上一个文本输入点 Alt + 向上转到下一个文本输入点 Alt + 向下行首 Home行尾 End页首 Ctrl + Home页尾 Ctrl + End6.查找(8)搜索条 Ctrl + F搜索框 Ctrl + H查找文件 Ctrl + T隐藏搜索条 ESC聚焦到搜索条件框内 Ctrl + Alt + F聚焦到替换输入框内 Ctrl + Alt + E在搜索条内换行 Alt +EnterHTML标签规范 Ctrl + Shift + H7.运行(1)运行 Ctrl + R8.工具(1)CSS/HTML语法校验 Ctrl + Shift + V9.视图(6)活动视图或编辑器最大化 Ctrl + M显示行号菜单 Ctrl + F10激活边看边改视图 Ctrl + P激活开发视图 Ctrl + Shift + P全部折叠 Ctrl + Alt + -全部展开 Ctrl + Alt + +

本专栏是汇集了一些HTML常常被遗忘的知识，这里算是温故而知新，往往这些零碎的知识点，在你开发中能起到炸惊效果。我们每个人都没有过目不忘，过久不忘的本事，就让这一点点知识慢慢渗透你的脑海。本专栏的风格是力求简洁明了。Content-Type（内容类型），一般是指网页中存在的 Content-Type，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件。Content-Type 标头告诉客户端实际返回的内容的内容类型。语法格式：Content-Type: text/html; charset=utf-8Content-Type: multipart/form-data; boundary=something常见的媒体格式类型如下：text/html ： HTML格式text/plain ：纯文本格式text/xml ： XML格式image/gif ：gif图片格式image/jpeg ：jpg图片格式image/png：png图片格式以application开头的媒体格式类型：application/xhtml+xml ：XHTML格式application/xml： XML数据格式application/atom+xml ：Atom XML聚合格式application/json： JSON数据格式application/pdf：pdf格式application/msword ： Word文档格式application/octet-stream ： 二进制流数据（如常见的文件下载）application/x-www-form-urlencoded ： 中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）另外一种常见的媒体格式是上传文件之时使用的：multipart/form-data ：需要在表单中进行文件上传时，就需要使用该格式formdata和json的区别：从前端传来的都是二进制数据1、content-type是不同的2、json我们已经序列化好了，而form data还是需要进行处理，虽然说后端框架已经帮我们处理好了。form data:json:在formdata中有种特殊的格式：multipart/form-data这种格式是传递的一条消息，相当于在消息体里面套消息， 给文件上传提供了便利，它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。当上传的字段是文件时，会有Content-Type来表名文件类型；content-disposition，用来说明字段的一些信息；由于有boundary隔离，所以multipart/form-data既可以上传文件，也可以上传键值对，它采用了键值对的方式，所以可以上传多个文件。

Echarts的渐变色采用了echarts.graphic.LinearGradient的方法，可以根据代码中的内容来看如何使用。线性渐变，多用于折线柱形图，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 true，则该四个值是绝对的像素位置。注意，颜色属性可以放在option中，也可以放在series根目录下，还可以向目前的这种形式放置。示例效果示例源代码（共130行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-01 */ <template> <div class="container"> <h3>vue+echarts：线性渐变演示</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { //let myChart = echarts.init(document.getElementById('vue-echarts'));两种方式都行 let myChart = echarts.init(this.$refs.refEcharts); //如果是调用全局的echarts,可以这样写 //let myChart = this.$echarts.init(this.$refs.refEcharts); // 绘制图表 myChart.setOption({ title: { text: '标题：ECharts简单示例' }, tooltip: {}, xAxis: { data: ['cuclife', 'openlayers', 'cesium', 'echarts', 'leaflet'] }, yAxis: {}, series: [{ name: '技能值', type: 'bar', data: [5, 36, 10, 10, 20], itemStyle: { //静态时显示状态 color: new echarts.graphic.LinearGradient( // (x1,y1) 点到点 (x2,y2) 之间进行渐变 1, 1, 0, 0, [ { offset: 0, color: '#ff0000' }, // 0 起始颜色 { offset: 0.5, color: '#188df0' }, // 0 起始颜色 { offset: 1, color: '#0061ce' } // 1 结束颜色 ] ), // color: { //另外一种方式 // type: 'linear', // 线性渐变 // x: 1, // x: 从左向右 1 ——> 0 // y: 1, // y: 从上向下 1 ——> 0 // x2: 0, // x2: 从右向左 1 ——> 0 // y2: 0, // y2: 从下向上 1 ——> 0 // colorStops: [{ // offset: 0, // color: '#ff0000' // }, // // { // offset: 0.5, // color: '#188df0' // }, // { // offset: 1, // color: '#00fffb' // } // ] // } }, emphasis: { //hover时显示状态 itemStyle: { color: { type: 'linear', x: 0, y: 0.5, x2: 1, y2: 0.4, colorStops: [{ offset: 0, color: '#ff63eb' }, // offset：坐标为0处的颜色 { offset: 0.7, color: '#2378f7' }, { offset: 1, color: '#ff63eb' } // offset：坐标为1处的颜色 ] } } }, }] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style> 相关资料参考https://echarts.apache.org/handbook/zh/basics/import专栏介绍在vue和echarts联合技术栈的操控下，本专栏提供行之有效的源代码示例。这里既包括样式的修改，又包括常用bug的解决。（1）提供title示例：展示控制标题的颜色、位置、子标题，连接等（2）提供legend示例：展示控制图例的类型、宽度、高度、位置、间隙，边框、阴影、透明度、偏移，字体、颜色，提示语等（3）提供grid示例：展示控制绘图网格的位置、宽度、高度、边框、阴影等（4）提供xAxis示例：展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等（5）提供yAxis示例：展示控制y 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等（6）提供dataZoom示例：展示控制区域缩放的类型、位置、filterMode等（7）提供tooltip示例：展示控制提示框组件的触发方式、位置、样式，标签、动画、内容格式器等（8）提供地理坐标系示例：展示控制地理坐标的经纬度、放缩、位置，距离、字体、边框等（9）提供animation示例：展示控制动画的持续时间、延迟时间、动画方式，连接等（10）提供其他示例：展示series等组件的信息内容。

重绘（Repaint）和重排（Reflow）是Web前端开发中关于浏览器渲染机制的重要概念，下面将详细介绍这两个概念，并提供一些示例代码和应用场景。重排（Reflow）：重排，也称为布局（Layout），是指当元素的几何属性（如宽、高、位置）发生变化，或是元素的内容、可见性发生变化时，浏览器需要重新计算元素及其子元素的布局信息，包括它们的位置和尺寸。这一过程会导致浏览器构造一个新的渲染树，然后重新计算布局。例如，考虑以下JavaScript操作会引起重排：// 改变元素的宽度，这将触发重排 var element = document.getElementById('myDiv'); element.style.width = '50%';应用场景：改变元素的尺寸（width/height）、外边距（margin）、内边距（padding）等；更改元素的位置（如通过修改left/top值）；添加或删除可见DOM元素；浏览器窗口大小改变（resize事件）。重绘（Repaint）：重绘是指元素的外观发生了改变，但不影响布局，如颜色、背景色、透明度等非几何属性的变化。在这种情况下，浏览器不需要重新计算元素的位置和大小，仅需要刷新受影响部分的像素。例如，以下CSS属性修改可能会导致重绘但不重排：// 改变元素的背景色，这将触发重绘 #myDiv { background-color: red; /* 原始颜色 */ } // 修改背景色 document.querySelector('#myDiv').style.backgroundColor = 'blue';应用场景：改变背景色、前景色、边框颜色等；更改CSS透明度；图像的SRC属性更改（加载新的图片）。为了优化页面性能，应当尽量减少不必要的重排和重绘，特别是连续执行多个DOM操作时，可以尝试合并操作并利用requestAnimationFrame API，在下一帧绘制前一次性执行，这样可以降低视觉抖动并提升用户体验。同时，现代浏览器提供了各种优化手段，如层叠上下文、合成层等，合理利用这些技术也能有效降低重排和重绘带来的性能损失。

windows电脑下载、安装nodejs是很容易的，参考下面的图文教程，很快就能搞定下载安装.1，下载nodejs下载地址：https://nodejs.org/en/download/2，安装nodejs点击安装包，一路下一步3，验证是否安装成功安装成功，测试安装是否成功，运行CMD，分别输入node -v 和 npm -v 分别查看node和npm的版本号补充：更改安装全局模块时的路径和缓存cache的路径（非必须）问题：在执行例如npm install express -g等命令全局安装的时候，默认会将模块安装在C:Users用户名AppDataRoaming路径下的npm和npm_cache中，不方便管理且占用C盘空间。解决：自行配置自定义的全局模块安装目录，在node.js安装目录下新建两个文件夹 node_global和node_cache，如图所示：cmd执行命令：npm config set prefix “D:Program Files odejs ode_global”npm config set cache “D:Program Files odejs ode_cache”配置环境变量执行完后，配置环境变量，如下：“环境变量” -> “系统变量”：新建一个变量名为 “NODE_PATH”， 值为“D:Program Files odejs ode_global ode_modules”，“环境变量” -> “用户变量”：编辑用户变量里的Path，将相应npm的路径（“C:Users用户名AppDataRoaming pm”）改为：“D:Program Files odejs ode_global”结尾语Network 灰鸽宝典为开发配置保驾护航，让服务运行快捷平稳。 希望某个知识点就能帮助你，欢迎学习GIS的朋友一起交流。《 Openlayers 综合示例200+ 》，《 leaflet示例教程100+ 》，《 Cesium示例教程100+》，《MapboxGL示例教程100+》。网络的梦想这是一个关于一只名叫阿灰的鸽子的故事。阿灰生活在一个繁忙的城市里，他有一个梦想，那就是通过网络连接全世界的人们。阿灰的梦想始于他看到的一只信鸽的故事。那只信鸽在战争期间，不畏艰险，将重要信息传递给前线的战士们。阿灰被这个故事深深打动，他决定也要成为一个传递信息的使者。阿灰开始学习如何使用网络。他学会了如何使用电子邮件、社交媒体和网络电话。他发现，网络的力量是巨大的，它可以让人们跨越地理距离，分享和获取信息，甚至建立深厚的友谊。阿灰开始在城市中寻找其他鸽子，教他们如何使用网络。他告诉他们，虽然网络看似复杂，但只要愿意学习，任何人都可以掌握。阿灰还告诉他们，网络不仅可以用来娱乐和交流，还可以用来传递重要的信息。阿灰的行动引起了人们的注意。他们开始关注这只特别的鸽子，以及他如何改变其他动物的生活。人们开始帮助阿灰，为他提供更好的设备和更稳定的网络连接。随着时间的推移，阿灰的网络团队不断扩大，他们开始在城市中建立了一个特殊的网络社区。这个社区的成员不仅是鸽子，还包括其他动物和人类。他们通过共享信息、互相帮助和学习新的技能，使整个社区变得更加繁荣和充满活力。阿灰的故事传遍了整个世界。他的事迹激发了其他动物和人类对网络的热情。他们开始意识到，网络不仅是一种工具，也是一种连接世界、创造更美好未来的力量。最后，阿灰实现了他的梦想。他通过网络连接了全世界的人们，使他们能够更好地理解和尊重彼此。阿灰的故事告诉我们，只要有梦想和勇气，任何动物都可以超越自己的界限，为世界带来积极的影响。

在 Windows 下载安装了 Nginx，配置了环境变量全局使用 Nginx。但是仍旧无法开启nginx -t等命令。原因：Nginx 在使用时 conf-path 是根据相对路径来找的。 匹配的路径是 C:\Users\20210121/conf/nginx.conf ，完全是错的。解决办法：制作一个donginx.bat(命令根据名字而改变，比如这里命令开头用donginx, 如果bat名字为 aaa.bat, 则命令开头为 aaa )文件，将nginx改天换命。1）donginx.bat 代码@echo off if "%1"=="help" (goto help) else (if "%1"=="-h" goto help) if "%1"=="version" (goto version) else (if "%1"=="-v" goto version) if "%1"=="start" goto start if "%1"=="stop" goto stop if "%1"=="reload" goto reloadmd if "%1"=="reopen" goto reopen if "%1"=="find" goto find goto error :help nginx -v echo Usage: donginx [-h,help] [-v,version] [start] [stop] [stop -a] [reload] [reopen] [find] echoecho= echo Options: echo help,-h : this help echo version,-v : show current nginx version echo start : start nginx master process echo stop : stop the newest nginx master process echo stop -a : stop all nginx master processes echo reload : reload configuration echo reopen : reopen nginx echo find : show the nginx master process list echo= exit /B :version nginx -v exit /B :start start nginx -p C:\nginx-1.20.1 exit /B :stop if "%2"=="-a" (taskkill /F /IM nginx.exe) else (if "%2"=="" (nginx -s stop -p C:\nginx-1.20.1) else goto error) exit /B :reload nginx -s reload -p C:\nginx-1.20.1 exit /B :find tasklist /fi "imagename eq nginx.exe" exit /B :error echo donginx: invalid option: "%1 %2" echo= exit /B 解释@echo off：此命令分 @ 和 echo off 看。@让跟在其后面的命令的执行过程不打印出来，echo off 则让所有命令的执行过程不打印出来（自己测试，看结果就明白）。goto 与 :: 两个命令配套使用，: 相当于标签，goto 则指定跳到那个标签后面执行。echo：向命令窗口打印一行指定的字符创，echo= 打印空的字符串，结果相当于换行。exit： 该命令是退出程序，并且会关闭命令窗口（这不是我想要的）。指定 /B 则退出程序后不会关闭命窗口。/B 是说退回前一个命令所在窗口。2）将donginx.bat放到nginx.exe的同级目录下3）在环境变量中 系统变量>path>新建>C:\nginx-1.20.14）任何cmd或者powershell窗口都可以执行 donginx +命令命令：donginx help,-h : this helpdonginx version,-v : show current nginx versiondonginx start : start nginx master processdonginx stop : stop the newest nginx master processdonginx stop -a : stop all nginx master processesdonginx reload : reload configurationdonginx reopen : reopen nginxdonginx find : show the nginx master process list结尾语Network 灰鸽宝典为开发配置保驾护航，让服务运行快捷平稳。 希望某个知识点就能帮助你，欢迎学习GIS的朋友一起交流。《 Openlayers 综合示例200+ 》，《 leaflet示例教程100+ 》，《 Cesium示例教程100+》，《MapboxGL示例教程100+》。

Echarts的雷达图背景可以是圆形的，也可以是多边形的，背景颜色，线条颜色都可以做个性化设置，这里是改变背景灰色，设置为浅红色。分割线也变成浅蓝色。同时数据线的颜色也变成了亮色。参考源代码。示例效果示例源代码（共97行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-14 */ <template> <div class="container"> <h3>vue+echarts：修改雷达图背景分割面，分割线颜色，设置数据线颜色</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); myChart.setOption({ title: { text: '基本雷达图' }, legend: { data: ['cuclife', 'openlayers'] }, color:['red','Lime'], radar: { shape: 'circle', //设置图形为圆形 splitNumber:6, //设置分隔段 radius:'80%', //设置雷达图半径 splitArea:{ areaStyle:{ color:['rgba(250,250,250,0.3)','rgba(200,200,0,0.1)'] } }, splitLine:{ lineStyle:{ color:['rgba(0,200,0,0.1)'], width:2 } }, indicator: [ { name: 'Sales', max: 6500 }, { name: 'Administration', max: 16000 }, { name: 'Information Technology', max: 30000 }, { name: 'Customer Support', max: 38000 }, { name: 'Development', max: 52000 }, { name: 'Marketing', max: 25000 } ] }, series: [ { name: 'Budget vs spending', type: 'radar', data: [ { value: [4200, 3000, 20000, 35000, 50000, 18000], name: 'cuclife' }, { value: [5000, 14000, 28000, 26000, 42000, 21000], name: 'openlayers' } ] } ] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style>

markdown浏览器中如何添加视频呢？两种方式：方式一。源代码:<iframe width="100%" height="450" src="//player.bilibili.com/player.html?aid=16688970&cid=27215876&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> 。 </iframe> 方式二<video width="320" height="240" controls> <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4"> </video>

文章目录TCP三次握手过程四次握手断开连接TCP三次握手过程第一次握手：客户端（通常是Web浏览器）想要与服务器（通常是Web服务器）建立TCP连接时，会随机生成一个初始序列号（Sequence Number，简称seq），然后向服务器发送一个SYN（同步序列编号）报文段。报文段中包含客户端的初始序列号（ISN）。此时，客户端进入SYN_SENT状态。客户端 -> 服务器: SYN(seq=x)2.  第二次握手：服务器接收到客户端的SYN报文段后，如果同意建立连接，则回复一个SYN+ACK（同步确认）报文段。这个报文段包含服务器的初始序列号（ISN），以及确认号（Acknowledgment Number，ack），确认号是客户端的初始序列号加1，表示服务器已经接收到了客户端的SYN报文段。服务器进入SYN_RECEIVED状态。服务器 -> 客户端: SYN(seq=y), ACK(ack=x+1)3.  第三次握手：客户端收到服务器的SYN+ACK报文段后，会再次发送一个ACK报文段，确认号设置为服务器的初始序列号加1，表示客户端已经收到了服务器的SYN报文段。此时，客户端进入ESTABLISHED状态。当服务器接收到客户端的ACK报文段后，也进入ESTABLISHED状态，至此，TCP连接成功建立。客户端 -> 服务器: ACK(ack=y+1) 在HTTP通信过程中，浏览器发起HTTP请求前，首先就是通过TCP三次握手与服务器建立可靠的连接，然后在这个连接上传输HTTP消息。而在HTML文档加载的过程中，浏览器会基于已经建立好的TCP连接去获取HTML文件及相关的CSS、JavaScript、图片等资源。四次握手断开连接TCP四次挥手断开连接的过程如下：第一次挥手（FIN）：客户端（或其他一端）决定关闭连接时，它会发送一个FIN（Finish）报文段给服务器端。FIN报文段表明这一端已经没有更多的数据要发送了，但仍然能够接收从服务器端发来的数据。发送FIN报文后，客户端进入FIN_WAIT_1状态。2.  第二次挥手（ACK）：服务器端收到客户端的FIN报文后，会回应一个ACK（Acknowledgment）报文段，确认号（ACKnowledgment Number）设置为收到的FIN报文段的序列号加1，表示已经收到客户端关闭连接的请求。服务器端进入CLOSE_WAIT状态，等待应用程序关闭相应连接上的数据传输，并准备向客户端发送自己的FIN报文。3. 第三次挥手（FIN）：服务器端完成所有数据发送任务并准备好关闭连接时，也会发出一个FIN报文段给客户端，通知客户端自己也要关闭连接了。发送FIN报文后，服务器端进入LAST_ACK状态，等待客户端确认收到它的FIN报文。4.  第四次挥手（ACK）：客户端收到服务器端的FIN报文后，同样回应一个ACK报文段，确认号设置为服务器端FIN报文段的序列号加1。客户端在发送这个ACK报文后，进入TIME_WAIT状态，等待足够长的时间以确保服务器端能收到这个确认报文，并且在此期间内，若服务器端未收到ACK，可能会重发FIN报文，客户端可以再次确认。服务器端一旦收到客户端对FIN报文的确认，即ACK报文，便知道双方都同意关闭连接，因此可以安全地关闭连接，进入CLOSED状态。客户端在TIME_WAIT状态等待一段时间后（通常为MSL，即Maximum Segment Lifetime，报文段最大生存时间），如果没有收到任何异常报文，则认为连接已经完全关闭，最终也会进入CLOSED状态。总结来说，四次挥手是为了确保双方都能有序且无歧义地结束连接，并且确保在连接彻底关闭之前，网络中滞留的报文段都能够得到妥善处理。这个过程保证了TCP连接的可靠性和完整性。

Hbuilder内置了一些代码块，仅仅敲定几个字符，就可以输出一大片代码，大大的简化了开发步骤。 最让人称赞的是，用户可以自定义自己的代码块，作为有效的补充。自定义代码块自定义代码块效果 "file-annotation": { "prefix": "anno", "body": [ "/*", "* @Author: 大剑师兰特（xiaozhuanlan），还是大剑师兰特（CSDN）", "* @此源代码版权归大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。", "* @Email: 2909222303@qq.com", "* @weixin: gis-dajianshi", "* @First published in CSDN", "* @First published time: 2024-01-$1", "*/" ], "triggerAssist": false, "description": "file annotation" }, 自定义代码块解释 // 注意：本文档仅支持单行注释，并且'//'前不能有任何非空字符！！！ // // HBuilderX使用json扩展代码块，兼容vscode的代码块格式 // 本文档修改完毕，保存即可生效，无需重启。 // 本文档用于用户自定义{1}代码块。 // 每个配置项的说明如下： // 'key' ：代码块显示名称，显示在代码助手列表中的名字，以下例子中'console.log'就是一个key。 // 'prefix' ：代码块的触发字符，就是敲什么字母匹配这个代码块。 // 'body' ：代码块的内容。内容中有如下特殊格式 // $1 表示代码块输入后光标的所在位置。如需要多光标，就在多个地方配置$1,如该位置有预置数据，则写法是${1:foo1}。多选项即下拉候选列表使用${1:foo1/foo2/foo3} // $2 表示代码块输入后再次按tab后光标的切换位置tabstops（代码块展开后按tab可以跳到下一个tabstop） // $0代表代码块输入后最终光标的所在位置（也可以按回车直接跳过去）。 // 双引号使用\\'转义 // 换行使用多个数组表示，每个行一个数组，用双引号包围，并用逗号分隔 // 缩进需要用\\t表示，不能直接输入缩进！ // 'triggerAssist' ：为true表示该代码块输入到文档后立即在第一个tabstop上触发代码提示，拉出代码助手，默认为false。 // 每个代码块以key为主键，多个代码块需要逗号分隔。 // 如果json语法不合法，底部会弹出错误信息，请注意修正。 // 例子: // "console.log": { // "prefix": "logtwo", // "body": [ // "console.log('$1');", // "\tconsole.log('$2');" // ], // "triggerAssist": false, // "description": "Log output to console twice" // }内置代码块内置html代码块{ "<!--[if IE]>": { "body": [ "<!--[if IE]>", "\t$1", "<![endif]-->" ], "prefix": "ifie", "scope": "text.html.basic" }, "<!--[if lte IE 6]>": { "body": [ "<!--[if lte IE 6]>", "\t$1", "<![endif]-->" ], "prefix": "ifie6", "scope": "text.html.basic" }, "Non-Breaking Space": { "body": [ " " ], "prefix": "space", "scope": "text.html.basic" }, "a_href": { "body": [ "<a href=\"$1\">$0</a>" ], "prefix": "ahref", "scope": "text.html.basic", "triggerAssist": true }, "a_href_javascript": { "body": [ "<a href=\"javascript:void(0);\">$1</a>$0" ], "prefix": "ajsvoid", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "applet (code width height)": { "body": [ "<applet code=\"$1\" width=\"$2\" height=\"$3\">\n$0\n</applet>" ], "prefix": "applet", "scope": "text.html.basic" }, "base": { "body": [ ], "prefix": "base", "scope": "text.html.basic" }, "basefont_color_size": { "body": [ "<basefont color=\"$0\" size=\"$1\" />" ], "prefix": "basefont", "scope": "text.html.basic" }, "button_type": { "body": [ "<button type=\"button\">$0</button>" ], "prefix": "button", "scope": "text.html.basic" }, "canvas (id width height)": { "body": [ "<canvas id=\"$1\" width=\"$2\" height=\"$3\"></canvas>" ], "prefix": "canvas", "scope": "text.html.basic" }, "data-": { "body": [ "data-${1:type} = \"$2\"" ], "prefix": "data-", "scope": "text.html.basic meta.tag.structure punctuation.definition.tag.end.html,text.html.basic meta.tag.structure" }, "div_class": { "body": [ "<div class=\"$1\">", "\t$0", "</div>" ], "prefix": "divc", "scope": "text.html.basic", "triggerAssist": true }, "div_id": { "body": [ "<div id=\"$1\">", "\t$0", "</div>" ], "prefix": "div", "scope": "text.html.basic", "triggerAssist": true }, "dl_dt_dd": { "body": [ "<dl>", "\t<dt>$1</dt>", "\t<dd>$2</dd>", "</dl>" ], "prefix": "dl", "scope": "text.html.basic" }, "fieldset_id": { "body": [ "<fieldset id=\"$2\">", "\t<legend>$1</legend>", "\t", "\t$0", "</fieldset>" ], "prefix": "fieldset", "scope": "text.html.basic" }, "font_size_color": { "body": [ "<font size=\"$1\" color=\"$2\">$0</font>" ], "prefix": "font", "scope": "text.html.basic" }, "form_action_method": { "body": [ "<form action=\"$1\" method=\"$2\">", "\t$0", "</form>" ], "prefix": "form", "scope": "text.html.basic" }, "form_submit": { "body": [ "<form action=\"$1\" method=\"${2:post}\">", "\t$0", "\t<input type=\"submit\" value=\"$3\"/>", "</form>" ], "prefix": "form", "scope": "text.html.basic", "triggerAssist": true }, "frame_src": { "body": [ "<frame src=\"$0\" >" ], "prefix": "frame", "scope": "text.html.basic" }, "frameset_cols": { "body": [ "<frameset cols=\"$1\">", "\t$0", "</frameset>" ], "prefix": "frameset", "scope": "text.html.basic" }, "head_structure": { "body": [ "<head>", "\t<meta charset=\"utf-8\"/>", "\t<title>$1</title>", "\t", "</head>" ], "prefix": "head", "scope": "text.html.basic" }, "html_5": { "body": [ "<!DOCTYPE HTML>" ], "prefix": "dochtml5", "scope": "text.html.basic" }, "html_structure": { "body": [ "<!DOCTYPE html>", "<html>", "\t<head>", "\t\t<meta charset=\"utf-8\" />", "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">", "\t\t<title>$0</title>", "\t</head>", "\t<body>", "\t\t", "\t</body>", "</html>" ], "prefix": "html", "scope": "text.html.basic" }, "iframe_src_width_height": { "body": [ "<iframe src=\"$1\" width=\"$2\" height=\"$3\"></iframe>" ], "prefix": "iframe", "scope": "text.html.basic", "triggerAssist": true }, "input_lable": { "body": [ "<input type=\"${1:radio}\" name=\"$2\" id=\"$2\" value=\"$3\"/><label for=\"$2\">$4</label>" ], "prefix": "inputlable", "scope": "text.html.basic" }, "input_reset": { "body": [ "<input type=\"reset\" value=\"$1\" />" ], "prefix": "inreset", "scope": "text.html.basic" }, "input_search": { "body": [ "<input type=\"search\" name=\"$1\" required=\"$2\" placeholder=\"Search\" x-webkit-speech=\"$3\" x-webkit-grammar=\"builtin:search\" lang=\"zh-CN\">" ], "prefix": "insearch", "scope": "text.html.basic" }, "input_structure": { "body": [ "<input type=\"$1\" name=\"$2\" id=\"$2\" value=\"$3\" />" ], "prefix": "input", "scope": "text.html.basic", "triggerAssist": true }, "input_submit": { "body": [ "<input type=\"submit\" id=\"$1\" name=\"$2\" />" ], "prefix": "insubmit", "scope": "text.html.basic" }, "input_text": { "body": [ "<input type=\"text\" id=\"$1\" value=\"$2\" />" ], "prefix": "intext", "scope": "text.html.basic", "triggerAssist": true }, "mActionsheet(H5模式弹出菜单)": { "body": [ "<div id=\"sheet\" class=\"mui-popover mui-popover-bottom mui-popover-action \">", "\t<!-- 可选择菜单 -->", "\t<ul class=\"mui-table-view\">", "\t <li class=\"mui-table-view-cell\">", "\t\t<a href=\"#\">${1:菜单1}</a>", "\t </li>", "\t <li class=\"mui-table-view-cell\">", "\t\t<a href=\"#\">${2:菜单2}</a>", "\t </li>", "\t</ul>", "\t<!-- 取消菜单 -->", "\t<ul class=\"mui-table-view\">", "\t <li class=\"mui-table-view-cell\">", "\t\t<a href=\"#sheet1\"><b>${4:取消}</b></a>", "\t </li>", "\t</ul>", "</div>", "<a href=\"#sheet\" id=\"openSheet\" class=\"mui-btn mui-btn-primary mui-btn-block\">${3:打开操作表}</a>", "$0" ], "prefix": "mactionsheet", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mBody(主体)": { "body": [ "<div class=\"mui-content\">", "\t$0", "</div>" ], "prefix": "mbody", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mButton(块状按钮)": { "body": [ "<button type=\"button\" class=\"mui-btn ${1:mui-btn-blue/mui-btn-green/mui-btn-yellow/mui-btn-red/mui-btn-purple/mui-btn-grey} mui-btn-block\">${2:按钮}</button>$0" ], "prefix": "mbutton_block", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mButton(按钮)": { "body": [ "<button type=\"button\" class=\"mui-btn ${1:mui-btn-blue/mui-btn-green/mui-btn-yellow/mui-btn-red/mui-btn-purple/mui-btn-grey}\">${2:按钮}</button>$0" ], "prefix": "mbutton", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mButton(按钮无底色,有边框)": { "body": [ "<button type=\"button\" class=\"mui-btn ${1:mui-btn-blue/mui-btn-green/mui-btn-yellow/mui-btn-red/mui-btn-purple/mui-btn-grey} mui-btn-outlined\">${2:按钮}</button>$0" ], "prefix": "mbutton_outline", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mCheckbox(复选框)": { "body": [ "<div class=\"mui-input-row mui-checkbox \">", "\t<label>${1:Checkbox}</label>", "\t<input name=\"${3:Checkbox}\" type=\"checkbox\" ${2:checked}>", "</div>", "$0" ], "prefix": "mcheckbox", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mCheckbox(复选框居左)": { "body": [ "<div class=\"mui-input-row mui-checkbox mui-left\">", " <label>${1:checkbox}</label>", " <input name=\"${3:checkbox1}\" type=\"checkbox\" ${2:checked} >", "</div>", "$0" ], "prefix": "mcheckbox_left", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mCheckbox(复选框禁用选项)": { "body": [ "<div class=\"mui-input-row mui-checkbox mui-disabled\">", "\t<label>${1:disabled checkbox}</label>", "\t<input name=\"checkbox\" type=\"checkbox\" ${2:disabled=\"disabled\"}>", "</div>", "$0" ], "prefix": "mcheckbox_disabled", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mDoctype(mui-dom结构)": { "body": [ "<!doctype html>", "<html lang=\"en\">", "<head>", "\t<meta charset=\"UTF-8\" />", "\t<title>Document</title>", "\t<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\" />", "\t<link rel=\"stylesheet\" type=\"text/css\" href=\"${1:css\\/mui.css}\"/>", "</head>", "<body>", "\t$0", "\t<script src=\"${2:js\\/mui.js}\" type=\"text/javascript\" charset=\"utf-8\"></script>", "\t<script type=\"text/javascript\">", "\tmui.init()$3", "\t</script>", "</body>", "</html>" ], "prefix": "mdoctype", "project": "Web,App,Wap2App", "scope": "text.html.basic", "triggerAssist": true }, "mForm(表单)": { "body": [ "<form class=\"mui-input-group\">", "\t<div class=\"mui-input-row\">", "\t\t<label>${3:input}</label>", "\t\t<input type=\"${1:text}\" class=\"${2:mui-input-clear}\" placeholder=\"${3:请输入}\">", "\t</div>", "</form>$0" ], "prefix": "mform", "project": "Web,App,Wap2App", "scope": "text.html.basic", "triggerAssist": true }, "mGallery-Table(图文表格)": { "body": [ "<ul class=\"mui-table-view mui-grid-view\">", "\t<li class=\"mui-table-view-cell mui-media mui-col-xs-6\">", "\t\t<a href=\"#\">", "\t\t\t<img class=\"mui-media-object\" src=\"http://placehold.it/400x300\">", "\t\t\t<div class=\"mui-media-body\">${1:文字说明1}</div>", "\t\t</a>", "\t</li>", "\t<li class=\"mui-table-view-cell mui-media mui-col-xs-6\">", "\t\t<a href=\"#\">", "\t\t\t<img class=\"mui-media-object\" src=\"http://placehold.it/400x300\">", "\t\t\t<div class=\"mui-media-body\">${2:文字说明2}</div>", "\t\t</a>", "\t</li>", "</ul>$0" ], "prefix": "mslider_gallery_table", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mGallery图片轮播": { "body": [ "<div id=\"slider\" class=\"mui-slider\" >", " <div class=\"mui-slider-group mui-slider-loop\">", "\t<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->", "\t<div class=\"mui-slider-item mui-slider-item-duplicate\">", "\t <a href=\"#\">", "\t\t<img src=\"${1:http:\\/\\/placehold.it\\/400x300}\">", "\t </a>", "\t</div>", "\t<!-- 第一张 -->", "\t<div class=\"mui-slider-item\">", "\t <a href=\"#\">", "\t\t<img src=\"${2:http:\\/\\/placehold.it\\/400x300}\">", "\t </a>", "\t</div>", "\t<!-- 第二张 -->", "\t<div class=\"mui-slider-item\">", "\t <a href=\"#\">", "\t\t<img src=\"${3:http:\\/\\/placehold.it\\/400x300}\">", "\t </a>", "\t</div>", "\t<!-- 第三张 -->", "\t<div class=\"mui-slider-item\">", "\t <a href=\"#\">", "\t\t<img src=\"${4:http:\\/\\/placehold.it\\/400x300}\">", "\t </a>", "\t</div>", "\t<!-- 第四张 -->", "\t<div class=\"mui-slider-item\">", "\t <a href=\"#\">", "\t\t<img src=\"${1:http:\\/\\/placehold.it\\/400x300}\">", "\t </a>", "\t</div>", "\t<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->", "\t<div class=\"mui-slider-item mui-slider-item-duplicate\">", "\t <a href=\"#\">", "\t\t<img src=\"${2:http:\\/\\/placehold.it\\/400x300}\">", "\t </a>", "\t</div>", " </div>", " <div class=\"mui-slider-indicator\">", "\t<div class=\"mui-indicator mui-active\"></div>", "\t<div class=\"mui-indicator\"></div>", "\t<div class=\"mui-indicator\"></div>", "\t<div class=\"mui-indicator\"></div>", " </div>", "</div>" ], "prefix": "mslider_gallery", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mGrid(九宫格)": { "body": [ "<ul class=\"mui-table-view mui-grid-view mui-grid-9\">", "<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">", "\t<a href=\"#\">", "\t\t<span class=\"mui-icon mui-icon-home\"></span>", "\t\t<div class=\"mui-media-body\">${1:Home}</div>", "\t</a>", "</li>", "<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">", "\t<a href=\"#\">", "\t\t<span class=\"mui-icon mui-icon-email\"><span class=\"mui-badge mui-badge-red\">5</span></span>", "\t\t<div class=\"mui-media-body\">${2:Email}</div>", "\t</a>", "</li>", "<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">", "\t<a href=\"#\">", "\t\t<span class=\"mui-icon mui-icon-chatbubble\"></span>", "\t\t<div class=\"mui-media-body\">${3:Chat}</div>", "\t</a>", "</li>", "<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">", "\t<a href=\"#\">", "\t\t<span class=\"mui-icon mui-icon-location\"></span>", "\t\t<div class=\"mui-media-body\">${4:Location}</div>", "\t</a>", "</li>", "<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">", "\t<a href=\"#\">", "\t\t<span class=\"mui-icon mui-icon-search\"></span>", "\t\t<div class=\"mui-media-body\">${5:Search}</div>", "\t</a>", "</li>", "<li class=\"mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3\">", "\t<a href=\"#\">", "\t\t<span class=\"mui-icon mui-icon-phone\"></span>", "\t\t<div class=\"mui-media-body\">${6:Phone}</div>", "\t</a>", "</li>", "\t</ul>", "$0" ], "prefix": "mgrid", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mHeader(带返回箭头的标题栏)": { "body": [ "<header class=\"mui-bar mui-bar-nav\">", "\t<a class=\"mui-action-back mui-icon mui-icon-left-nav mui-pull-left\"></a>", "\t<h1 class=\"mui-title\">${1:标题}</h1>", "</header>$0" ], "prefix": "mheaderwithBack", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mHeader(标题栏)": { "body": [ "<header class=\"mui-bar mui-bar-nav\">", "\t<h1 class=\"mui-title\">${1:标题}</h1>", "</header>$0" ], "prefix": "mheader", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mIcon(图标)": { "body": [ "<${2:span} class=\"mui-icon mui-icon-${1:weixin}\"></${2:span}>" ], "prefix": "micon", "project": "Web,App,Wap2App", "scope": "text.html.basic", "triggerAssist": true }, "mList(列表)": { "body": [ "<ul class=\"mui-table-view\">", "\t\t<li class=\"mui-table-view-cell\">", "\t\t\t<a class=\"mui-navigate-right\">", "\t\t\t\t${1:Item 1}", "\t\t\t</a>", "\t\t</li>", "\t\t<li class=\"mui-table-view-cell\">", "\t\t\t<a class=\"mui-navigate-right\">", "\t\t\t\t ${2:Item 2}", "\t\t\t</a>", "\t\t</li>", "\t\t<li class=\"mui-table-view-cell\">", "\t\t\t<a class=\"mui-navigate-right\">", "\t\t\t\t ${3:Item 3}", "\t\t\t</a>", "\t\t</li>", "\t</ul>$0" ], "prefix": "mlist", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mListMedia(图文列表图片居右)": { "body": [ "<ul class=\"mui-table-view\">", "\t<li class=\"mui-table-view-cell mui-media\">", "\t\t<a href=\"javascript:;\">", "\t\t\t<img class=\"mui-media-object mui-pull-right\" src=\"${1}\">", "\t\t\t<div class=\"mui-media-body\">", "\t\t\t\t${4:幸福}", "\t\t\t\t<p class=\"mui-ellipsis\">${5:能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？}</p>", "\t\t\t</div>", "\t\t</a>", "\t</li>", "\t<li class=\"mui-table-view-cell mui-media\">", "\t\t<a href=\"javascript:;\">", "\t\t\t<img class=\"mui-media-object mui-pull-right\" src=\"${2}\">", "\t\t\t<div class=\"mui-media-body\">", "\t\t\t\t${6:木屋}", "\t\t\t\t<p class=\"mui-ellipsis\">${7:想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.}</p>", "\t\t\t</div>", "\t\t</a>", "\t</li>", "\t<li class=\"mui-table-view-cell mui-media\">", "\t\t<a href=\"javascript:;\">", "\t\t\t<img class=\"mui-media-object mui-pull-right\" src=\"${3}\">", "\t\t\t<div class=\"mui-media-body\">", "\t\t\t ${8: CBD}", "\t\t\t\t<p class=\"mui-ellipsis\">${9:烤炉模式的城，到黄昏，如同打翻的调色盘一般.}</p>", "\t\t\t</div>", "\t\t</a>", "\t</li>", "</ul>$0" ], "prefix": "mlist_Media_right", "project": "Web,App,Wap2App", "scope": "text.html.basic", "triggerAssist": true }, "mListMedia(图文列表图片居左)": { "body": [ "<ul class=\"mui-table-view\">", "\t<li class=\"mui-table-view-cell mui-media\">", "\t\t<a href=\"javascript:;\">", "\t\t\t<img class=\"mui-media-object mui-pull-left\" src=\"${1}\">", "\t\t\t<div class=\"mui-media-body\">", "\t\t\t\t${4:幸福}", "\t\t\t\t<p class=\"mui-ellipsis\">${5:能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？}</p>", "\t\t\t</div>", "\t\t</a>", "\t</li>", "\t<li class=\"mui-table-view-cell mui-media\">", "\t\t<a href=\"javascript:;\">", "\t\t\t<img class=\"mui-media-object mui-pull-left\" src=\"${2}\">", "\t\t\t<div class=\"mui-media-body\">", "\t\t\t\t${6:木屋}", "\t\t\t\t<p class=\"mui-ellipsis\">${7:想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖.}</p>", "\t\t\t</div>", "\t\t</a>", "\t</li>", "\t<li class=\"mui-table-view-cell mui-media\">", "\t\t<a href=\"javascript:;\">", "\t\t\t<img class=\"mui-media-object mui-pull-left\" src=\"${3}\">", "\t\t\t<div class=\"mui-media-body\">", "\t\t\t ${8: CBD}", "\t\t\t\t<p class=\"mui-ellipsis\">${9:烤炉模式的城，到黄昏，如同打翻的调色盘一般.}</p>", "\t\t\t</div>", "\t\t</a>", "\t</li>", "</ul>$0" ], "prefix": "mlist_Media_left", "project": "Web,App,Wap2App", "scope": "text.html.basic", "triggerAssist": true }, "mOffcanvas(侧滑导航-主界面、菜单同时移动)": { "body": [ "<!-- 主界面菜单同时移动 -->", "\t<!-- 侧滑导航根容器 -->", "\t<div class=\"mui-off-canvas-wrap mui-draggable\">", "\t\t<!-- 主页面容器 -->", "\t\t<div class=\"mui-inner-wrap\">", "\t\t\t<!-- 菜单容器 -->", "\t\t\t<aside class=\"mui-off-canvas-left\" id=\"offCanvasSide\">", "\t\t\t\t<div class=\"mui-scroll-wrapper\">", "\t\t\t\t\t<div class=\"mui-scroll\">", "\t\t\t\t\t\t<!-- 菜单具体展示内容 -->", "\t\t\t\t\t\t", "\t\t\t\t\t</div>", "\t\t\t\t</div>", "\t\t\t</aside>", "\t\t\t<!-- 主页面标题 -->", "\t\t\t<header class=\"mui-bar mui-bar-nav\">", "\t\t\t\t<a class=\"mui-icon mui-action-menu mui-icon-bars mui-pull-left\" href=\"#offCanvasSide\"></a>", "\t\t\t\t<h1 class=\"mui-title\">标题</h1>", "\t\t\t</header>", "\t\t\t<nav class=\"mui-bar mui-bar-tab\">", "\t\t\t\t<a class=\"mui-tab-item mui-active\">", "\t\t\t\t\t<span class=\"mui-icon mui-icon-home\"></span>", "\t\t\t\t\t<span class=\"mui-tab-label\">首页</span>", "\t\t\t\t</a>", "\t\t\t\t<a class=\"mui-tab-item\">", "\t\t\t\t\t<span class=\"mui-icon mui-icon-phone\"></span>", "\t\t\t\t\t<span class=\"mui-tab-label\">电话</span>", "\t\t\t\t</a>", "\t\t\t\t<a class=\"mui-tab-item\">", "\t\t\t\t\t<span class=\"mui-icon mui-icon-email\"></span>", "\t\t\t\t\t<span class=\"mui-tab-label\">邮件</span>", "\t\t\t\t</a>", "\t\t\t\t<a class=\"mui-tab-item\">", "\t\t\t\t\t<span class=\"mui-icon mui-icon-gear\"></span>", "\t\t\t\t\t<span class=\"mui-tab-label\">设置</span>", "\t\t\t\t</a>", "\t\t\t</nav>", "\t\t\t<!-- 主页面内容容器 -->", "\t\t\t<div class=\"mui-content mui-scroll-wrapper\">", "\t\t\t\t<div class=\"mui-scroll\">", "\t\t\t\t\t<!-- 主界面具体展示内容 -->", "\t\t\t\t\t", "\t\t\t\t</div>", "\t\t\t</div>", "\t \t <div class=\"mui-off-canvas-backdrop\"></div>", "\t\t</div>", "\t</div>" ], "prefix": "moffcanvasall", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mOffcanvas(侧滑导航-主界面不动、菜单移动)": { "body": [ "<!-- 主界面不动、菜单移动 -->", "<!-- 侧滑导航根容器 -->", "<div class=\"mui-off-canvas-wrap mui-draggable mui-slide-in\">", " <!-- 菜单容器 -->", " <aside class=\"mui-off-canvas-left\" id=\"offCanvasSide\">", "\t<div class=\"mui-scroll-wrapper\">", "\t <div class=\"mui-scroll\">", "\t\t<!-- 菜单具体展示内容 -->", "\t\t$1", "\t </div>", "\t</div>", " </aside>", " <!-- 主页面容器 -->", " <div class=\"mui-inner-wrap\">", "\t<!-- 主页面标题 -->", "\t<header class=\"mui-bar mui-bar-nav\">", "\t <a class=\"mui-icon mui-action-menu mui-icon-bars mui-pull-left\" href=\"#offCanvasSide\"></a>", "\t <h1 class=\"mui-title\">标题</h1>", "\t</header>", "\t<nav class=\"mui-bar mui-bar-tab\">", "\t\t<a class=\"mui-tab-item mui-active\">", "\t\t\t<span class=\"mui-icon mui-icon-home\"></span>", "\t\t\t<span class=\"mui-tab-label\">首页</span>", "\t\t</a>", "\t\t<a class=\"mui-tab-item\">", "\t\t\t<span class=\"mui-icon mui-icon-phone\"></span>", "\t\t\t<span class=\"mui-tab-label\">电话</span>", "\t\t</a>", "\t\t<a class=\"mui-tab-item\">", "\t\t\t<span class=\"mui-icon mui-icon-email\"></span>", "\t\t\t<span class=\"mui-tab-label\">邮件</span>", "\t\t</a>", "\t\t<a class=\"mui-tab-item\">", "\t\t\t<span class=\"mui-icon mui-icon-gear\"></span>", "\t\t\t<span class=\"mui-tab-label\">设置</span>", "\t\t</a>", "\t</nav>", "\t<div class=\"mui-content mui-scroll-wrapper\">", "\t <div class=\"mui-scroll\">", "\t\t<!-- 主界面具体展示内容 -->", "\t\t$2", "\t </div>", "\t</div> ", "\t<div class=\"mui-off-canvas-backdrop\"></div>", " </div>", "</div>" ], "prefix": "moffcanvasmenu", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mOffcanvas(侧滑导航-主界面移动、菜单不动)": { "body": [ "<!-- 主界面移动、菜单不动 -->", "<div class=\"mui-off-canvas-wrap mui-draggable\">", " <!-- 菜单容器 -->", " <aside class=\"mui-off-canvas-left\" id=\"offCanvasSide\">", "\t<div class=\"mui-scroll-wrapper\">", "\t <div class=\"mui-scroll\">", "\t\t<!-- 菜单具体展示内容 -->", "\t\t\t$1", "\t </div>", "\t</div>", " </aside>", " <!-- 主页面容器 -->", " <div class=\"mui-inner-wrap\">", "\t<!-- 主页面标题 -->", "\t<header class=\"mui-bar mui-bar-nav\">", "\t <a class=\"mui-icon mui-action-menu mui-icon-bars mui-pull-left\" href=\"#offCanvasSide\" ></a>", "\t <h1 class=\"mui-title\">标题</h1>", "\t</header>", "\t<nav class=\"mui-bar mui-bar-tab\">", "\t\t<a class=\"mui-tab-item mui-active\">", "\t\t\t<span class=\"mui-icon mui-icon-home\"></span>", "\t\t\t<span class=\"mui-tab-label\">首页</span>", "\t\t</a>", "\t\t<a class=\"mui-tab-item\">", "\t\t\t<span class=\"mui-icon mui-icon-phone\"></span>", "\t\t\t<span class=\"mui-tab-label\">电话</span>", "\t\t</a>", "\t\t<a class=\"mui-tab-item\">", "\t\t\t<span class=\"mui-icon mui-icon-email\"></span>", "\t\t\t<span class=\"mui-tab-label\">邮件</span>", "\t\t</a>", "\t\t<a class=\"mui-tab-item\">", "\t\t\t<span class=\"mui-icon mui-icon-gear\"></span>", "\t\t\t<span class=\"mui-tab-label\">设置</span>", "\t\t</a>", "\t</nav>", "\t<div class=\"mui-content mui-scroll-wrapper\">", "\t <div class=\"mui-scroll\">", "\t\t<!-- 主界面具体展示内容 -->", "\t\t \t$2", "\t </div>", "\t</div> ", "\t<div class=\"mui-off-canvas-backdrop\"></div>", " </div> ", "</div>$0" ], "prefix": "moffcanvasmain", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mOffcanvas(缩放式侧滑(类手机QQ))": { "body": [ "<!-- 缩放式侧滑（类手机QQ） -->", "<!-- 侧滑导航根容器 -->", "<div class=\"mui-off-canvas-wrap mui-draggable mui-scalable\">", " <!-- 菜单容器 -->", " <aside class=\"mui-off-canvas-left mui-transitioning\" id=\"offCanvasSide\">", "\t<div class=\"mui-scroll-wrapper\">", "\t <div class=\"mui-scroll\">", "\t\t<!-- 菜单具体展示内容 -->", "\t\t$1", "\t </div>", "\t</div>", " </aside>", " <!-- 主页面容器 -->", " <div class=\"mui-inner-wrap mui-transitioning\">", "\t<!-- 主页面标题 -->", "\t<header class=\"mui-bar mui-bar-nav\">", "\t <a class=\"mui-icon mui-action-menu mui-icon-bars mui-pull-left\" href=\"#offCanvasSide\"></a>", "\t <h1 class=\"mui-title\">标题</h1>", "\t</header>", "\t<nav class=\"mui-bar mui-bar-tab\">", "\t\t<a class=\"mui-tab-item mui-active\">", "\t\t\t<span class=\"mui-icon mui-icon-home\"></span>", "\t\t\t<span class=\"mui-tab-label\">首页</span>", "\t\t</a>", "\t\t<a class=\"mui-tab-item\">", "\t\t\t<span class=\"mui-icon mui-icon-phone\"></span>", "\t\t\t<span class=\"mui-tab-label\">电话</span>", "\t\t</a>", "\t\t<a class=\"mui-tab-item\">", "\t\t\t<span class=\"mui-icon mui-icon-email\"></span>", "\t\t\t<span class=\"mui-tab-label\">邮件</span>", "\t\t</a>", "\t\t<a class=\"mui-tab-item\">", "\t\t\t<span class=\"mui-icon mui-icon-gear\"></span>", "\t\t\t<span class=\"mui-tab-label\">设置</span>", "\t\t</a>", "\t</nav>", "\t<div class=\"mui-content mui-scroll-wrapper\">", "\t <div class=\"mui-scroll\">", "\t\t<!-- 主界面具体展示内容 -->", "\t\t$2", "\t </div>", "\t</div> ", "\t<div class=\"mui-off-canvas-backdrop\"></div>", " </div>", "</div>$0" ], "prefix": "moffcanvasscalable", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mPagination(分页)": { "body": [ "<ul class=\"mui-pagination\">", "\t<li class=\"mui-disabled\">", "\t\t<span> « </span>", "\t</li>", "\t<li class=\"mui-active\">", "\t\t<a href=\"#\">${1:1}</a>", "\t</li>", "\t<li>", "\t\t<a href=\"#\">${2:2}</a>", "\t</li>", "\t<li>", "\t\t<a href=\"#\">»</a>", "\t</li>", "</ul>$0" ], "prefix": "mpagination", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mPopover(弹出菜单)": { "body": [ "${1:<style type=\"text\\/css\">", "#popover{", "\theight: 100px;", "\twidth:200px;", "\\}", "<\\/style>}", "<div id=\"popover\" class=\"mui-popover\">", "\t<div class=\"mui-scroll-wrapper\">", "\t\t<div class=\"mui-scroll\">", "\t\t\t<ul class=\"mui-table-view\">", "\t\t\t\t<li class=\"mui-table-view-cell\"><a href=\"#\">Item1</a></li>", "\t\t\t\t<li class=\"mui-table-view-cell\"><a href=\"#\">Item2</a></li>", "\t\t\t\t<li class=\"mui-table-view-cell\"><a href=\"#\">Item3</a></li>", "\t\t\t\t<li class=\"mui-table-view-cell\"><a href=\"#\">Item4</a></li>", "\t\t\t\t<li class=\"mui-table-view-cell\"><a href=\"#\">Item5</a></li>", "\t\t\t</ul>", "\t\t</div>", "\t</div>", "</div>", "<a href=\"#popover\" id=\"openPopover\" class=\"mui-btn mui-btn-primary mui-btn-block\">打开弹出菜单</a>", "${2:mui('.mui-scroll-wrapper').scroll()}" ], "prefix": "mpopover", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mRadio(单选框)": { "body": [ "<div class=\"mui-input-row mui-radio \">", "\t<label>${1:Radio}</label>", "\t<input name=\"${3:radio}\" type=\"radio\" ${2:checked}>", "</div>$0" ], "prefix": "mradio", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mRadio(单选框居左)": { "body": [ "<div class=\"mui-input-row mui-radio mui-left\">", "\t<label>${1:Radio}</label>", "\t<input name=\"${3:radio}\" type=\"radio\" ${2:checked}>", "</div>$0" ], "prefix": "mradio_left", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mRadio(禁用单选框)": { "body": [ "<div class=\"mui-input-row mui-radio mui-disabled\">", "\t<label>${1:Radio}</label>", "\t<input name=\"${3:radio}\" type=\"radio\" disabled=\"disabled\">", "</div>$0" ], "prefix": "mradio_disable", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mRadios(默认选中指定项)": { "body": [ "<ul class=\"mui-table-view mui-table-view-radio\">", "\t<li class=\"mui-table-view-cell\">", "\t\t<a class=\"mui-navigate-right\">${1:Item 1}</a>", "\t</li>", "\t<li class=\"mui-table-view-cell mui-selected\">", "\t\t<a class=\"mui-navigate-right\">${2:Item 2}</a>", "\t</li>", "\t<li class=\"mui-table-view-cell\">", "\t\t<a class=\"mui-navigate-right\">${3:Item 3}</a>", "\t</li>", "</ul>", "$0" ], "prefix": "mradio_selected", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mRange(Label+滑块)": { "body": [ "<div class=\"mui-input-row mui-input-range\">", "\t<label>Range</label>", "\t<input type=\"range\" min=\"0\" max=\"100\" value=\"50\">", "</div>" ], "prefix": "mrangelabel", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mScroll(区域滚动)": { "body": [ "<div class=\"mui-scroll-wrapper\">", "\t<div class=\"mui-scroll\">", "\t\t${1:<!--这里放置真实显示的DOM内容-->}", "\t</div>", "</div>", "$0" ], "prefix": "mscroll", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mSwitch(开关 - 蓝色)": { "body": [ "<div class=\"mui-input-row\">", "\t<label>${2:Switch}</label>", "\t<div class=\"mui-switch${1: mui-active} mui-switch-blue\">", "\t\t<div class=\"mui-switch-handle\"></div>", "\t</div>", "</div>$0" ], "prefix": "mswitchblue", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mSwitch(开关)": { "body": [ "<div class=\"mui-input-row\">", "\t<label>${2:Switch}</label>", "\t<div class=\"mui-switch${1: mui-active}\">", "\t\t<div class=\"mui-switch-handle\"></div>", "\t</div>", "</div>$0" ], "prefix": "mswitch", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mSwitch(开关Mini - blue)": { "body": [ "<div class=\"mui-switch mui-switch-mini${1: mui-active} mui-switch-blue\">", " <div class=\"mui-switch-handle\"></div>", "</div>" ], "prefix": "mswitchminiblue", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mSwitch(开关Mini)": { "body": [ "<div class=\"mui-switch mui-switch-mini${1: mui-active}\">", " <div class=\"mui-switch-handle\"></div>", "</div>" ], "prefix": "mswitchmini", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mTab(底部选项卡)": { "body": [ "<nav class=\"mui-bar mui-bar-tab\">", "\t<a class=\"mui-tab-item mui-active\">", "\t\t<span class=\"mui-icon mui-icon-home\"></span>", "\t\t<span class=\"mui-tab-label\">${1:首页}</span>", "\t</a>", "\t<a class=\"mui-tab-item\">", "\t\t<span class=\"mui-icon mui-icon-phone\"></span>", "\t\t<span class=\"mui-tab-label\">${2:电话}</span>", "\t</a>", "\t<a class=\"mui-tab-item\">", "\t\t<span class=\"mui-icon mui-icon-email\"></span>", "\t\t<span class=\"mui-tab-label\">${3:邮件}</span>", "\t</a>", "\t<a class=\"mui-tab-item\">", "\t\t<span class=\"mui-icon mui-icon-gear\"></span>", "\t\t<span class=\"mui-tab-label\">${4:设置}</span>", "\t</a>", "</nav>$0" ], "prefix": "mtab", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mTabSegmented(div选项卡)": { "body": [ "<div class=\"mui-segmented-control\">", "\t<a class=\"mui-control-item mui-active\" href=\"#item1\">${1:选项卡1}</a>", "\t<a class=\"mui-control-item\" href=\"#item2\">${1:选项卡2}</a>", "</div>$0" ], "prefix": "mtabsegmented", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mTabSegmented(可左右拖动的选项卡)": { "body": [ "<div class=\"mui-slider\">", "\t<div class=\"mui-slider-indicator mui-segmented-control mui-segmented-control-inverted\">", "\t\t<a class=\"mui-control-item\" href=\"#item1\">${1:选项卡1}</a>", "\t\t<a class=\"mui-control-item\" href=\"#item2\">${2:选项卡2}</a>", "\t</div>", "\t<div id=\"sliderProgressBar\" class=\"mui-slider-progress-bar mui-col-xs-6\"></div>", "\t<div class=\"mui-slider-group\">", "\t\t<div id=\"item1\" class=\"mui-slider-item mui-control-content mui-active\">", "\t\t\t<ul class=\"mui-table-view\">", "\t\t\t\t<li class=\"mui-table-view-cell\">${3:第1个选项卡子项}</li>", "\t\t\t\t<li class=\"mui-table-view-cell\">${4:第1个选项卡子项}</li>", "\t\t\t</ul>", "\t\t</div>", "\t\t<div id=\"item2\" class=\"mui-slider-item mui-control-content\">", "\t\t\t<ul class=\"mui-table-view\">", "\t\t\t\t<li class=\"mui-table-view-cell\">${5:第2个选项卡子项}</li>", "\t\t\t\t<li class=\"mui-table-view-cell\">${6:第2个选项卡子项}</li>", "\t\t\t</ul>", "\t\t</div>", "\t</div>", "</div>$0" ], "prefix": "mtabviewpage", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mText(文本框)": { "body": [ "<div class=\"mui-input-row\">", "\t<label>${3:Input}</label>", "\t<input type=\"${1:text}\" placeholder=\"${2:普通输入框}\">", "</div>", "$0" ], "prefix": "minputtext", "project": "Web,App,Wap2App", "scope": "text.html.basic", "triggerAssist": true }, "mText_Clear(带清除按钮的文本框)": { "body": [ "<div class=\"mui-input-row\">", "\t<label>Input</label>", "\t<input type=\"text\" class=\"mui-input-clear\" placeholder=\"${1:带清除按钮的输入框}\">", "</div>", "$0" ], "prefix": "minputclear", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mText_Search(搜索框)": { "body": [ "<div class=\"mui-input-row mui-search\">", "\t<input type=\"search\" class=\"mui-input-clear\" placeholder=\"$1\">", "</div>", "$0" ], "prefix": "minputsearch", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mText_Speech(语音输入)": { "body": [ "<div class=\"mui-input-row\">", "\t<label>${2:Input}</label>", "\t<input type=\"text\" class=\"mui-input-speech mui-input-clear\" placeholder=\"${1:语音输入}\">", "</div>", "$0" ], "prefix": "minputspeech", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "maccordion（折叠面板）": { "body": [ "<ul class=\"mui-table-view\">", "\t<li class=\"mui-table-view-cell mui-collapse\">", "\t\t<a class=\"mui-navigate-right\" href=\"#\">${1:面板1}</a>", "\t\t<div class=\"mui-collapse-content\">", "\t\t\t<p>${2:面板1子内容}</p>", "\t\t</div>", "\t</li>", "\t<li class=\"mui-table-view-cell mui-collapse\">", "\t\t<a class=\"mui-navigate-right\" href=\"#\">${3:面板}</a>", "\t\t\t<div class=\"mui-collapse-content\">", "\t\t\t<p>${4:面板2子内容}</p>", "\t\t</div>", "\t</li>", "\t<li class=\"mui-table-view-cell mui-collapse\">", "\t\t<a class=\"mui-navigate-right\" href=\"#\">${5:面板3}</a>", "\t\t<div class=\"mui-collapse-content\">", "\t\t\t<p>${6:面板3子内容}</p>", "\t\t</div>", "\t</li>", "</ul>$0" ], "prefix": "maccordion", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mactionsheet（操作表）": { "body": [ "<div id=\"sheet1\" class=\"mui-popover mui-popover-bottom mui-popover-action \">", "\t<!-- 可选择菜单 -->", "\t<ul class=\"mui-table-view\">", "\t <li class=\"mui-table-view-cell\">", "\t\t<a href=\"#\">${1菜单1}</a>", "\t </li>", "\t <li class=\"mui-table-view-cell\">", "\t\t<a href=\"#\">${2菜单2}</a>", "\t </li>", "\t</ul>", "\t<!-- 取消菜单 -->", "\t<ul class=\"mui-table-view\">", "\t <li class=\"mui-table-view-cell\">", "\t\t<a href=\"#sheet1\"><b>${3取消}</b></a>", "\t </li>", "\t</ul>", "</div>$0" ], "prefix": "actionsheet", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mbadge（数字角标无底色）": { "body": [ "<span class=\"mui-badge mui-badge-inverted ${1:mui-btn-blue/mui-btn-green/mui-btn-yellow/mui-btn-red/mui-btn-purple/mui-btn-grey}\">${2:1}</span>$0" ], "prefix": "mbadgeinverted", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mbadge（数字角标）": { "body": [ "<span class=\"mui-badge ${1:mui-btn-blue/mui-btn-green/mui-btn-yellow/mui-btn-red/mui-btn-purple/mui-btn-grey}\">${2:1}</span>$0" ], "prefix": "mbadge", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "meta_GB2312": { "body": [ "<meta charset=\"GB2312\"/>" ], "prefix": "metagb", "scope": "text.html.basic" }, "meta_keywords": { "body": [ "<meta name=\"Keywords\" content=\"$1\"/>" ], "prefix": "metakeywords", "scope": "text.html.basic" }, "meta_name_content": { "body": [ "<meta name=\"$1\" content=\"$2\"/>" ], "prefix": "meta", "scope": "text.html.basic", "triggerAssist": true }, "meta_nocache": { "body": [ "<meta http-equiv=\"Pragma\" content=\"no-cache\" />" ], "prefix": "metanocache", "scope": "text.html.basic" }, "meta_viewport": { "body": [ "<meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\" />" ], "prefix": "metaviewport", "scope": "text.html.basic" }, "mnumbox(数字输入框)": { "body": [ "", "<div class=\"mui-numbox\" data-numbox-step='${1:1}' data-numbox-min='${2:0}' data-numbox-max='${3:10}'>", "\t<button class=\"mui-btn mui-btn-numbox-minus\" type=\"button\">-</button>", "\t<input class=\"mui-input-numbox\" type=\"number\" />", "\t<button class=\"mui-btn mui-btn-numbox-plus\" type=\"button\">+</button>", "</div>$0" ], "prefix": "mnumbox", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mprogressbar(进度条-无限循环)": { "body": [ "<div class=\"mui-progressbar mui-progressbar-infinite\">", "\t<span></span>", "</div>" ], "prefix": "mprogressbarinfinite", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mprogressbar(进度条-有准确值)": { "body": [ "<div class=\"mui-progressbar\">", "\t<span></span>", "</div>" ], "prefix": "mprogressbar", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mrefreshContainer(刷新容器)": { "body": [ "<!--下拉刷新容器-->", "<div id=\"refreshContainer\" class=\"mui-content mui-scroll-wrapper\">", " <div class=\"mui-scroll\">", "\t<!--数据列表-->", "\t<ul class=\"mui-table-view mui-table-view-chevron\">", "\t $0", "\t</ul>", " </div>", "</div>" ], "prefix": "mpullrefresh", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mscrollsegmented(横向滚动)": { "body": [ "<div class=\"mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted\">", "\t<div class=\"mui-scroll\">", "\t\t<a class=\"mui-control-item mui-active\">", "\t\t\t${1:推荐}", "\t\t</a>", "\t\t<a class=\"mui-control-item\">", "\t\t ${2:热点}", "\t\t</a>", "\t\t<a class=\"mui-control-item\">", "\t\t ${3:北京}", "\t\t</a>", "\t\t<a class=\"mui-control-item\">", "\t\t ${4:社会}", "\t\t</a>", "\t\t<a class=\"mui-control-item\">", "\t\t ${5:娱乐}", "\t\t</a>", "\t\t<a class=\"mui-control-item\">", "\t\t ${6:科技}", "\t\t</a>", "\t</div>", "</div>" ], "prefix": "mscrollsegmented", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mui-col-sm": { "body": [ "<div class=\"mui-col-sm-${1:6}\">${2:Item 1}</div>", "<div class=\"mui-col-sm-${3:6}\">Item 2</div>" ], "prefix": "mcolsm", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mui-col-xs": { "body": [ "<div class=\"mui-col-xs-${1:6}\">${2:Item 1}</div>", "<div class=\"mui-col-xs-${3:6}\">${2:Item 2}</div>" ], "prefix": "mcolxs", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "mui-row": { "body": [ "<div class=\"mui-row\">", "\t$0", "</div>" ], "prefix": "mrow", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "ng-": { "body": [ "ng-${1:app}=\"$2\"" ], "prefix": "ng-", "scope": "text.html.basic meta.tag.structure punctuation.definition.tag.end.html,text.html.basic meta.tag.structure" }, "ng-pluralize": { "body": [ "<ng-pluralize>$1</ng-pluralize>" ], "prefix": "ngp", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "script html5plus": { "body": [ "<script src=\"html5plus://ready\"></script>" ], "description": "html5plus提前注入时需要加上此script块", "prefix": "sctplus", "scope": "text.html.basic" }, "script_src_type": { "body": [ "<script src=\"$1\" type=\"text/javascript\" charset=\"${3:utf-8}\"></script>" ], "prefix": "scsrc", "scope": "text.html.basic", "triggerAssist": true }, "script_type": { "body": [ "<script type=\"text/javascript\">", "\t$0", "</script>" ], "prefix": "script", "scope": "text.html.basic" }, "select_option": { "body": [ "<select name=\"$1\">", "\t<option value=\"$2\">$3</option>", "</select>" ], "prefix": "select", "scope": "text.html.basic" }, "slide（轮播组件）": { "body": [ "<div class=\"mui-slider\">", " <div class=\"mui-slider-group\">", "\t<!--第一个内容区容器-->", "\t<div class=\"mui-slider-item\">", "\t <!-- 具体内容 -->", "\t</div>", "\t<!--第二个内容区-->", "\t<div class=\"mui-slider-item\">", "\t <!-- 具体内容 -->", "\t</div>", " </div>", "</div>" ], "prefix": "mslider", "project": "Web,App,Wap2App", "scope": "text.html.basic" }, "span_id": { "body": [ "<span id=\"$1\">", "\t$0", "</span>" ], "prefix": "span", "scope": "text.html.basic", "triggerAssist": true }, "style_type": { "body": [ "<style type=\"text/css\">", "\t$0", "</style>" ], "prefix": "style", "scope": "text.html.basic" }, "table_structure": { "body": [ "<table border=\"$1\" cellspacing=\"$2\" cellpadding=\"$3\">", "\t<tr><th>${4:Header}</th></tr>", "\t<tr><td>${5:Data}</td></tr>", "</table>" ], "prefix": "table", "scope": "text.html.basic" }, "ul_li": { "body": [ "<ul>", "\t<li>$1</li>", "</ul>" ], "prefix": "ul", "scope": "text.html.basic" }, "v-for": { "body": [ "v-for=\"(${1:item},${2:index}) in ${3:Data}\"" ], "prefix": "v-for", "scope": "text.html.basic meta.tag.structure punctuation.definition.tag.end.html,text.html.basic meta.tag.structure" }, "video_structure": { "body": [ "<video width=\"${1:800}\" height=\"$2\">", "\t<source src=\"${3:myvideo.mp4}\" type=\"video/mp4\"></source>", "\t<source src=\"${4:myvideo.ogv}\" type=\"video/ogg\"></source>", "\t<source src=\"${5:myvideo.webm}\" type=\"video/webm\"></source>", "\t<object width=\"$6\" height=\"$7\" type=\"application/x-shockwave-flash\" data=\"${8:myvideo.swf}\">", "\t\t<param name=\"movie\" value=\"$8\" />", "\t\t<param name=\"flashvars\" value=\"autostart=true&file=$8\" />", "\t</object>", "\t当前浏览器不支持 video直接播放，点击这里下载视频: <a href=\"${9:myvideo.webm}\">下载视频</a>", "</video>" ], "prefix": "video", "scope": "text.html.basic" } } 内置js代码块{ "#ifdef": { "body": [ "// #ifdef ${1:APP-PLUS/APP-VUE/APP-NVUE/APP/VUE2/VUE3/MP-ALIPAY/MP-BAIDU/MP-WEIXIN/MP-QQ/MP-TOUTIAO/MP-360/MP-KUAISHOU/MP-LARK/MP-JD/MP/H5/QUICKAPP-WEBVIEW-HUAWEI/QUICKAPP-WEBVIEW-UNION/QUICKAPP-WEBVIEW}", "$0", "// #endif" ], "prefix": "ifdef", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "#ifndef": { "body": [ "// #ifndef ${1:APP-PLUS/APP-VUE/APP-NVUE/APP/VUE2/VUE3/MP-ALIPAY/MP-BAIDU/MP-WEIXIN/MP-QQ/MP-TOUTIAO/MP-360/MP-KUAISHOU/MP-LARK/MP-JD/MP/H5/QUICKAPP-WEBVIEW-HUAWEI/QUICKAPP-WEBVIEW-UNION/QUICKAPP-WEBVIEW}", "$0", "// #endif" ], "prefix": "ifndef", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "$ (document.getElementById)": { "body": [ "document.getElementById(\"$1\")" ], "prefix": "$$$", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "$(\"\")": { "body": [ "$(\"$1\")" ], "prefix": "dl", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "$(\"#\")": { "body": [ "$(\"#$1\")" ], "prefix": "dlid", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "$(\".\")": { "body": [ "$(\".$1\")" ], "prefix": "dlclass", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "@alias": { "body": [ "@alias $0" ], "prefix": "@alias", "scope": "source.js comment.block.documentation.js | text.html.vue source.js.embedded.html comment.block.js" }, "@description": { "body": [ "@description $0" ], "prefix": "@description", "scope": "source.js comment.block.documentation.js | text.html.vue source.js.embedded.html comment.block.js" }, "@event": { "body": [ "@event {Function(${1})} ${2:name} $0" ], "prefix": "@event", "scope": "source.js comment.block.documentation.js | text.html.vue source.js.embedded.html comment.block.js" }, "@example": { "body": [ "@example $0" ], "prefix": "@example", "scope": "source.js comment.block.documentation.js | text.html.vue source.js.embedded.html comment.block.js" }, "@extends": { "body": [ "@extends {${1:parent_type}}" ], "prefix": "@extends", "scope": "source.js comment.block.documentation.js | text.html.vue source.js.embedded.html comment.block.js" }, "@param": { "body": [ "@param {${1:type}} ${2:$FN_PARAMS} $0" ], "prefix": "@param", "scope": "source.js comment.block.documentation.js | text.html.vue source.js.embedded.html comment.block.js" }, "@param with values": { "body": [ "@param {${1:type}} ${2:$FN_PARAMS} = [${3:value}] $0" ], "prefix": "@paramvalues", "scope": "source.js comment.block.documentation.js | text.html.vue source.js.embedded.html comment.block.js" }, "@property": { "body": [ "@property {${1:type}} ${2:prop_name} $0" ], "prefix": "@property", "scope": "source.js comment.block.documentation.js | text.html.vue source.js.embedded.html comment.block.js" }, "@property with values": { "body": [ "@property {${1:type}} ${2:prop_name} = [${3:value}] $0" ], "prefix": "@propertyvalues", "scope": "source.js comment.block.documentation.js | text.html.vue source.js.embedded.html comment.block.js" }, "@return": { "body": [ "@return {${1:type}}" ], "prefix": "@return", "scope": "source.js comment.block.documentation.js | text.html.vue source.js.embedded.html comment.block.js" }, "@tutorial": { "body": [ "@tutorial ${1:url}" ], "prefix": "@tutorial", "scope": "source.js comment.block.documentation.js | text.html.vue source.js.embedded.html comment.block.js" }, "@type": { "body": [ "@type {${1:type}}" ], "prefix": "@type", "scope": "comment.doc.js" }, "Arrow function": { "body": [ "($1) => {", "\t$0", "}" ], "prefix": "arrow", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Class": { "body": [ "class ${1:name} {", "\tconstructor(${2:arg}) {", "\t\t$0", "\t}", "\t", "}" ], "prefix": "class", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Class Extends": { "body": [ "class ${1:name} extends ${2:AnotherClass} {", "\tconstructor(${3:arg}) {", "\t\t$0", "\t}", "\t", "}" ], "prefix": "classextends", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Decrementer": { "body": [ "return ${1:this.num} -= ${2:1}" ], "description": "decrement", "prefix": "vdec", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Export": { "body": [ "export ${1:default} ${2:bar}" ], "prefix": "export", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Export Class": { "body": [ "export class ${1:name} {", "\t$0", "}" ], "prefix": "exportclass", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Getter": { "body": [ "get ${1:name}() {", "\t$0", "}" ], "prefix": "getter", "scope": "JS_INCLASSBODY" }, "Import": { "body": [ "import ${1:foo} from \"${2:bar}\"" ], "prefix": "imfrom", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Incrementer": { "body": [ "return ${1:this.num} += ${2:1}" ], "description": "increment", "prefix": "vinc", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Key:Value": { "body": [ "${1:key} : ${2:value}," ], "prefix": "kv", "scope": "source meta.var.expr meta.objectliteral" }, "Object Method": { "body": [ "${1:method_name}: function(${2:attribute}){", "\t$0", "}${3:,}" ], "prefix": ":f", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Object Method String": { "body": [ "'${1:${2:#thing}:${3:click}}': function(element){", "\t$0", "}${4:,}" ], "prefix": ":f", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Object Value JS": { "body": [ "${1:value_name}:${0:value}," ], "prefix": ":,", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Object key - key: \"value\"": { "body": [ "${1:key}: ${2:\"${3:value}\"}${4:, }" ], "prefix": ":", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Prototype": { "body": [ "${1:class_name}.prototype.${2:method_name} = function(${3:first_argument}) {", "\t${0:// body...}", "};" ], "prefix": "proto", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Setter": { "body": [ "set ${1:property}(${2:value}) {", "\t$0", "}" ], "prefix": "setter", "scope": "class.body.js" }, "Unit Test": { "body": [ "import Vue from 'vue'", "import ${1:HelloWorld} from './components/${1:HelloWorld}'", "", "describe('${1:HelloWorld}.vue', () => {", "\tit('${2:should render correct contents}', () => {", "\t\tconst Constructor = Vue.extend(${1:HelloWorld})", "\t\tconst vm = new Constructor().$mount()", "\t\texpect(vm.$el.querySelector('.hello h1').textContent)", "\t\t\t.to.equal(${3:'Welcome to Your Vue.js App'})", "\t})", "})" ], "description": "unit test component", "prefix": "vtest", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Vue Commit Vuex Store in Methods": { "body": [ "${1:mutationName}() {", "\tthis.\\$store.commit('${1:mutationName}', ${2:payload})", "}" ], "description": "commit to vuex store in methods for mutation", "prefix": "vcommit", "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)" }, "Vue Components": { "body": [ "components: {", "\t$1", "}," ], "description": "%VueComponents.description%", "prefix": "vcomponents", "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)" }, "Vue Computed": { "body": [ "computed: {", "\t${1:name}() {", "\t\treturn this.${2:data} ${0}", "\t}", "}," ], "description": "computed value", "prefix": "vcomputed", "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)" }, "Vue Custom Directive": { "body": [ "Vue.directive('${1:directiveName}', {", "\tbind(el, binding, vnode) {", "\t\tel.style.${2:arg} = binding.value.${2:arg};", "\t}", "});" ], "description": "vue custom directive", "prefix": "vc-direct", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Vue Data": { "body": [ "data() {", "\treturn {", "\t\t${1:key}: ${2:value}", "\t}", "}," ], "description": "Vue Component Data", "prefix": "vdata", "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)" }, "Vue Dispatch Vuex Store in Methods": { "body": [ "${1:actionName}() {", "\tthis.\\$store.dispatch('${1:actionName}', ${2:payload})", "}" ], "description": "dispatch to vuex store in methods for action", "prefix": "vdispatch", "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)" }, "Vue Filter": { "body": [ "filters: {", "\t${1:fnName}: function(${2:value}) {", "\t\treturn ${2:value}${0};", "\t}", "}" ], "description": "vue filter", "prefix": "vfilter", "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)" }, "Vue Import Export": { "body": [ "import ${1:Name} from './components/${1:Name}.vue'", "", "export default {", "\tcomponents: {", "\t\t${1:Name}", "\t},", "}" ], "description": "import a component and include it in export default", "prefix": "vimport-export", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Vue Import File": { "body": [ "import ${1:New} from '/components/${1:New}.vue';" ], "description": "Import one component into another", "prefix": "vimport", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Vue Import GSAP": { "body": [ "import { TimelineMax, ${1:Ease} } from 'gsap'" ], "description": "component methods options that dispatch an action from vuex store.", "prefix": "vimport-gsap", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Vue Import Library": { "body": [ "import { ${1:libName} } from '${1:libName}'" ], "description": "import a library", "prefix": "vimport-lib", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Vue Import into the Component": { "body": [ "components: {", "\t${1:New},", "}" ], "description": "Import one component into another, within export statement", "prefix": "vcomponents", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Vue Methods": { "body": [ "methods: {", "\t${1:name}() {", "\t\t${0}", "\t}", "}," ], "description": "vue method", "prefix": "vmethod", "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)" }, "Vue Mixin": { "body": [ "const ${1:mixinName} = {", "\tmounted() {", "\t\tconsole.log('hello from mixin!')", "\t},", "}" ], "description": "vue mixin", "prefix": "vmixin", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Vue Props with Default": { "body": [ "props: {", "\t${1:propName}: {", "\t\ttype: ${2:Number},", "\t\tdefault: ${0}", "\t},", "}," ], "description": "Vue Props with Default", "prefix": "vprops", "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)" }, "Vue Transition Methods with JavaScript Hooks": { "body": [ "beforeEnter(el) {", "\tconsole.log('beforeEnter');", "},", "enter(el, done) {", "\tconsole.log('enter');", "\tdone();", "},", "beforeLeave(el) {", "\tconsole.log('beforeLeave');", "},", "leave(el, done) {", "\tconsole.log('leave');", "\tdone();", "}," ], "description": "transition component js hooks", "prefix": "vanimhook-js", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Vue Use Mixin": { "body": [ "mixins: [${1:mixinName}]" ], "description": "vue use mixin", "prefix": "vmixin-use", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "Vue Watchers": { "body": [ "watch: {", "\t${1:data}(${2:newValue}, ${3:oldValue}) {", "\t\t${0}", "\t}", "}," ], "description": "vue watcher", "prefix": "vwatcher", "scope": "(text.html.vue meta.export.default meta.object.member$)|(text.html.vue meta.export.default meta.objectliteral$)|(text.html.basic meta.objectliteral$)|(text.html.basic meta.object.member$)" }, "async method_name(){}": { "body": [ "async ${1:method_name}($2){", "\t$0", "}" ], "prefix": "asyncm", "scope": "source.js meta.objectliteral.js" }, "cdb": { "body": [ "const db = uniCloud.database();", "$0" ], "prefix": "cdb", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "clog": { "body": [ "console.log($1);" ], "description": "打印变量", "prefix": "clog", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "clogios": { "body": [ "console.log(JSON.stringify(${1:e}));", "console.log('${2:e}');" ], "prefix": "cloios", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "clogjson": { "body": [ "console.log(\"$1: \" + JSON.stringify($1));" ], "description": "打印JSON字符串", "prefix": "clogjson", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "clogvar": { "body": [ "console.log(\"$1: \",$1);" ], "description": "打印变量", "prefix": "clogvar", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "console.dir": { "body": [ "console.dir($1)" ], "prefix": "cdir", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "console.log();": { "body": [ "console.log($1);" ], "prefix": "clog", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "const $1 = uniCloud.importObject": { "body": [ "const $1 = uniCloud.importObject(\"$2\")" ], "prefix": "constco", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "constructor": { "body": [ "constructor(${1:arg}) {", " $0", "}" ], "prefix": "cons", "scope": "class.body.js" }, "db.collection": { "body": [ "db.collection(\"$1\")" ], "prefix": "dbc", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "dbadd": { "body": [ "db.collection('$1')", "\t.add($2)", "\t.then((res) => {", "\t\t$3", "\t})", "\t.catch((err) => {", "\t\t$4", "\t})" ], "description": "向数据库插入数据（客户端用法）", "prefix": "dbadd", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "dbget": { "body": [ "db.collection('$1')", "\t.get()", "\t.then((res) => {", "\t\t$2", "\t})", "\t.catch((err) => {", "\t\t$3", "\t})" ], "description": "读取数据库数据（客户端用法）", "prefix": "dbget", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "dbremove": { "body": [ "db.collection('$1')", "\t.where($2)", "\t.remove($3)", "\t.then((res) => {", "\t\t$4", "\t})", "\t.catch((err) => {", "\t\t$5", "\t})" ], "description": "删除数据库数据（客户端用法）", "prefix": "dbremove", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "dbupdate": { "body": [ "db.collection('$1')", "\t.where($2)", "\t.update($3)", "\t.then((res) => {", "\t\t$4", "\t})", "\t.catch((err) => {", "\t\t$5", "\t})" ], "description": "更新数据库数据（客户端用法）", "prefix": "dbupdate", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "document.getElementById": { "body": [ "document.getElementById(\"$1\")" ], "prefix": "dg", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "document.querySelectorAll": { "body": [ "document.querySelectorAll(\"$1\")" ], "prefix": "dqs", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "document.write": { "body": [ "document.write(\"$1\")" ], "prefix": "dw", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "documentaddEventListener": { "body": [ "document.addEventListener('${1:scroll}',function ($2) {", " $0", "})" ], "prefix": "dad", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "export default": { "body": [ "export default {", "\t$0", "}" ], "prefix": "edefault", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "for (...) {...}": { "body": [ "for ($1) {", "\t$0", "}" ], "prefix": "forr", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "for let": { "body": [ "for (let i = 0; i < ${1:Things}.length; i++) {", "\t${1:Things}[i]", "}" ], "prefix": "forl", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "for let in": { "body": [ "for (let ${1:var1} in ${2:var2}) {", "\t$0", "}" ], "prefix": "forli", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "for...of": { "body": [ "for (let ${1:s} of ${2:sequence}) {", "\t$0", "}" ], "prefix": "forof", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "fori": { "body": [ "for (var i = 0; i < ${1:Things}.length; i++) {", "\t${1:Things}[i]", "}" ], "prefix": "fori", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "function": { "body": [ "function ${1:function_name} ($2) {", "\t$0", "}" ], "prefix": "funn", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "function*": { "body": [ "function* ${1:name}($2) {", "\tyield $0;", "}" ], "prefix": "fung", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "function_anonymous": { "body": [ "function ($1) {", "\t$0", "}" ], "prefix": "funan", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "function_closures": { "body": [ "(function ($1) {", "\t$0", "})($2)" ], "prefix": "funcl", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "getElementByIdaddEventListener": { "body": [ "document.getElementById('$1').addEventListener('${2:tap}',function ($3) {", " $0", "})" ], "prefix": "dga", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "globalData": { "body": [ "getApp().globalData." ], "prefix": "gdata", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "if": { "body": [ "if ($1) {", "\t$0", "}" ], "prefix": "iff", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "if ... else": { "body": [ "if ($1) {", "\t$0", "} else{", "\t", "}" ], "prefix": "ife", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "ifAndroid": { "body": [ "if (uni.getSystemInfoSync().platform == \"android\") {", "\t$1", "}" ], "prefix": "ifandroid", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "if_compare": { "body": [ "if ($1 == ${2:true}) {", "\t$0", "} else{", "\t", "}" ], "prefix": "ifc", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "ifiOS": { "body": [ "if (uni.getSystemInfoSync().platform == \"ios\") {", "\t$1", "}" ], "prefix": "ifios", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "import": { "body": [ "import { $1 } from \"vue\"" ], "prefix": "import", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "module.exports": { "body": [ "module.exports = {", "\t$0", "}" ], "prefix": "mexports", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui": { "body": [ "mui." ], "prefix": "mui", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui('').pullRefresh": { "body": [ "mui('#${1:refreshContainer}').pullRefresh().$2" ], "prefix": "mmpullrefresh", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui('').scroll": { "body": [ "mui('.${1:mui-scroll-wrapper}').scroll({$2})$0" ], "prefix": "mmscroll", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui('').slider": { "body": [ "mui('.${1:mui-slider}').slider({$2})$0" ], "prefix": "mmslider", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui()": { "body": [ "mui('$1')" ], "prefix": "mmui", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui().each()": { "body": [ "mui('$1').each(function (${3:index},${4:element}) {", "\t$0", "})" ], "prefix": "mmeach", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.ajax()": { "body": [ "mui.ajax('$1',{", "\tdata:{", "\t\t$2", "\t},", "\tdataType:'${3:json}',//服务器返回json格式数据", "\ttype:'${4:post}',//HTTP请求类型", "\ttimeout:${5:10000},//超时时间设置为10秒；", "\tsuccess:function(${6:data}){", "\t\t$7", "\t},", "\terror:function(${8:xhr,type,errorThrown}){", "\t\t$9", "\t}", "});$0" ], "prefix": "majax", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.alert()": { "body": [ "mui.alert('${1:message}','${2:title}','${3:btnValue}',function (${4:e}) {", " ${4:e}.index$0", "}${5:,'div'})" ], "prefix": "mdalert", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.back()(返回上级页面)": { "body": [ "mui.back()$0" ], "prefix": "mback", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.backDouble(双击退出应用)": { "body": [ "//首页返回键处理", "//处理逻辑：1秒内，连续两次按返回键，则退出应用；", "var first = null;", "mui.back = function() {", "\t//首次按键，提示‘再按一次退出应用’", "\tif (!first) {", "\t\tfirst = new Date().getTime();", "\t\tmui.toast('再按一次退出应用');", "\t\tsetTimeout(function() {", "\t\t\tfirst = null;", "\t\t}, 1000);", "\t} else {", "\t\tif (new Date().getTime() - first < 1000) {", "\t\t\tplus.runtime.quit();", "\t\t}", "\t}", "};" ], "prefix": "mbackDouble", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.backFunction(重写返回逻辑)": { "body": [ "mui.back=function () {", " $0\t", "}" ], "prefix": "mbackfunction", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.backTask(双击进入后台)": { "body": [ "//首页返回键处理", "//处理逻辑：1秒内，连续两次按返回键，则进入后台；", "var first = null;", "mui.back = function() {", "\t//首次按键，提示‘再按一次退出应用’", "\tif (!first) {", "\t\tfirst = new Date().getTime();", "\t\tmui.toast('再按一次退出应用');", "\t\tsetTimeout(function() {", "\t\t\tfirst = null;", "\t\t}, 1000);", "\t} else {", "\t\tif (new Date().getTime() - first < 1000) {", "\t\t\tvar main = plus.android.runtimeMainActivity();", " main.moveTaskToBack(false);", "\t\t}", "\t}", "};" ], "prefix": "mbackMoveTaskToBack", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.closePopup()": { "body": [ "mui.closePopup()$0" ], "prefix": "mdclosePopup", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.closePopups()": { "body": [ "mui.closePopups()$0" ], "prefix": "mdclosePopups", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.confirm()": { "body": [ "mui.confirm('${1:message}','${2:title}',['${3:取消}','${4:确认}'],function (${5:e}) {", "\t${5:e}.index$0", "}${6:,'div'})" ], "prefix": "mdconfirm", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.currentWebview": { "body": [ "mui.currentWebview." ], "prefix": "mcurrent", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.each()": { "body": [ "mui.each(${1:obj},function (${2:index},${3:element}) {", "\t$0", "})" ], "prefix": "meach", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.extend()": { "body": [ "mui.extend(${1:'target'},${2:'source'},${3:'deep'/true/false})" ], "prefix": "mextend", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.fire()": { "body": [ "mui.fire(${1:targetWebviewObj},'${2:event}',{${3:data}})" ], "prefix": "mfire", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.get()": { "body": [ "mui.get('$1',{", "\t\t$2", "\t},function(${3:data}){", "\t\t$0", "\t},'${4:json}'", ");" ], "prefix": "mget", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.getJSON()": { "body": [ "mui.getJSON('$1',{$2},function($3){", "\t\t$4", "\t}", ");$0" ], "prefix": "mjson", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.init": { "body": [ "mui.init({$0})" ], "prefix": "minit", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.init({侧滑返回})": { "body": [ "mui.init({", "\tswipeBack:${1:true/false} ", ");$0" ], "prefix": "minswipeback", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.init({刷新组件})": { "body": [ "mui.init({", " pullRefresh : {", " container:'#${1:refreshContainer}',", " down : {", " callback :${2:pullfresh}", " },", " up : {", " callback :${3:pullfresh} ", " }", " }", "});$0" ], "prefix": "minpullRefresh", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.init({子页面})": { "body": [ "mui.init({", "\tsubpages:[{", "\t url:'${1:url}',", " id:'${2:id}',", " styles:{", " $3", " },", " extras:{$4}", "\t}]", "})$0" ], "prefix": "minsubpage", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.init({手势事件})": { "body": [ "mui.init({", " \tgestureConfig:{", "\t tap: ${1:true/false}, ", "\t doubletap: ${2:true/false}, ", "\t longtap: ${3:true/false}, ", "\t swipe: ${4:true/false}, ", "\t drag: ${5:true/false}, ", "\t hold:${6:false/true},", "\t release:${7:false/true}", " \t}", "});$0" ], "prefix": "mingesture", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.init({按键绑定})": { "body": [ "mui.init({", "\tkeyEventBind: {", "\t\tbackbutton: ${1:true/false}, ", "\t\tmenubutton: ${2:true/false} ", "\t},", "})" ], "prefix": "minkeyevent", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.init({设置状态栏颜色})": { "body": [ "mui.init({", "\tstatusBarBackground:'#${1:FFFFFF}'", "})" ], "prefix": "minstatusbar", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.init({重写窗口关闭逻辑})": { "body": [ "mui.init({", "\tbeforeback:function () {", "\t\t$0", "\t}", "})" ], "prefix": "minbeforeback", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.init({预加载})": { "body": [ "mui.init({", "\tpreloadPages:[{", "\t url:'${1:url}',", " id:'${2:id}',", " styles:{", " $3", " },", " extras:{$4}", "\t}]", "})$0" ], "prefix": "minpreload", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.init({预加载数量})": { "body": [ "preloadLimit:${1:5}" ], "prefix": "minprelimit", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.later()": { "body": [ "mui.later(function(){", "\t$2 ", "},${1:500/1000/1500/2000})" ], "prefix": "mlater", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.mask": { "body": [ "var ${1:mask} = mui.createMask(function () {", "\t$2", "})", "${1:mask}.show()" ], "prefix": "mmask", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.off": { "body": [ "mui('$1').off('${2:tap}','$3',function($4){", " $0", "}) " ], "prefix": "mmoff", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.on": { "body": [ "mui('$1').on('${2:tap}','$3',function($4){", " $0", "}) " ], "prefix": "mmon", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.open": { "body": [ "mui.openWindow('${1:url}','${2:id}',{$3})" ], "prefix": "mopen", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.os": { "body": [ "mui.os." ], "prefix": "mos", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.plusReady()": { "body": [ "mui.plusReady(function () {", " $1", "})$0" ], "prefix": "mplusready", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.post()": { "body": [ "mui.post('$1',{", "\t\t$2", "\t},function(${3:data}){", "\t\t$0", "\t},'${4:json}'", ");" ], "prefix": "mpost", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.preload()": { "body": [ "mui.preload({", "\turl:'${1:url}',", "\tid:'${2:id}',", "\tstyles:{$3},//窗口参数", "\textras:{$4}//自定义扩展参数", "})$0" ], "prefix": "mpreload", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.prompt()": { "body": [ " mui.prompt('${1:text}','${2:defaultText}','${3:title}',['${4:取消}','${5:确认}'],function (${6:e}) {", " ${6:e}.index$0", "}${7:,'div'})" ], "prefix": "mdprompt", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.ready": { "body": [ "mui.ready(function () {", "\t$0", "})" ], "prefix": "mready", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.scrollTo()": { "body": [ "mui.scrollTo(${1:ypos},${2:duration},${3:/function () {", " \t", "}}$0" ], "prefix": "mscrollto", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.toast()": { "body": [ "mui.toast('${1:message}')$0" ], "prefix": "mdtoast", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.trigger()": { "body": [ "mui.trigger(${1:dom},'${3:tap}'${4:,{a:'as'}})" ], "prefix": "mtrigger", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "navigator.userAgent;": { "body": [ "navigator.userAgent" ], "prefix": "nuser", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "plus.Screen": { "body": [ "plus.Screen." ], "prefix": "pScreen", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.accelerometer": { "body": [ "plus.accelerometer." ], "prefix": "pacce", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.android": { "body": [ "plus.android." ], "prefix": "pandroid", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.audio": { "body": [ "plus.audio." ], "prefix": "paudio", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.barcode": { "body": [ "plus.barcode." ], "prefix": "pbarcode", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.camera": { "body": [ "plus.camera." ], "prefix": "pcamera", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.contacts": { "body": [ "plus.contacts." ], "prefix": "pcontacts", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.device": { "body": [ "plus.device." ], "prefix": "pdevice", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.display": { "body": [ "plus.display." ], "prefix": "pdisplay", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.downloader": { "body": [ "plus.downloader." ], "prefix": "pdown", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.gallery": { "body": [ "plus.gallery." ], "prefix": "pgallery", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.geolocation": { "body": [ "plus.geolocation." ], "prefix": "pgeolocation", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.io": { "body": [ "plus.io." ], "prefix": "pio", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.ios": { "body": [ "plus.ios." ], "prefix": "pios", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.key": { "body": [ "plus.key." ], "prefix": "pkey", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.maps": { "body": [ "plus.maps." ], "prefix": "pmaps", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.messaging": { "body": [ "plus.messaging." ], "prefix": "pmessaging", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.nativeObj": { "body": [ "plus.nativeObj." ], "prefix": "pnativeObj", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.nativeUI": { "body": [ "plus.nativeUI." ], "prefix": "pnativeUI", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.nativeUI.alert": { "body": [ "plus.nativeUI.alert($1)" ], "prefix": "pnalert", "project": "uni-app,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "plus.navigator": { "body": [ "plus.navigatorsc." ], "prefix": "pnavigator", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.net": { "body": [ "plus.net." ], "prefix": "pnet", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.networkinfo": { "body": [ "plus.networkinfo." ], "prefix": "pnetworkinfo", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.oauth": { "body": [ "plus.oauth." ], "prefix": "poauth", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.orientation": { "body": [ "plus.orientation." ], "prefix": "porientation", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.os": { "body": [ "plus.os." ], "prefix": "pos", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.payment": { "body": [ "plus.payment." ], "prefix": "ppayment", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.proximity": { "body": [ "plus.proximity." ], "prefix": "pproximity", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.push": { "body": [ "plus.push." ], "prefix": "ppush", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.runtime": { "body": [ "plus.runtime." ], "prefix": "pruntime", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.share": { "body": [ "plus.share." ], "prefix": "pshare", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.speech": { "body": [ "plus.speech.$0" ], "prefix": "pspeech", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.statistic": { "body": [ "plus.statistic." ], "prefix": "pstatistic", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.storage": { "body": [ "plus.storage." ], "prefix": "pstorage", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.uploader": { "body": [ "plus.uploader." ], "prefix": "puploader", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.webview": { "body": [ "plus.webview." ], "prefix": "pweb", "project": "uni-app,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.zip": { "body": [ "plus.zip." ], "prefix": "pzip", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plusReady": { "body": [ "function plusReady(){", " $0", "}", "if (window.plus) {", " plusReady()", "} else{", " document.addEventListener('plusready',plusReady,false);", "}" ], "prefix": "pready", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "querySelector": { "body": [ "document.querySelector('$1').$0" ], "prefix": "ds", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "querySelectoraddEventListener": { "body": [ "document.querySelector('$1').addEventListener('${2:tap}',function ($3) {", " $0", "})" ], "prefix": "dsa", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "return false": { "body": [ "return false;" ], "prefix": "rfalse", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "return false;": { "body": [ "return false;" ], "prefix": "rfalse", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "return true": { "body": [ "return true;" ], "prefix": "rtrue", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "return true;": { "body": [ "return true;" ], "prefix": "rtrue", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "return uniCloudFormatResponse": { "body": [ "return {", "\terrCode: ${1:0},", "\terrMsg: '$2'", "}" ], "description": "return uniCloud format response", "prefix": "returnu", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "setTimeout function": { "body": [ "setTimeout(function() {$0}, ${1:10});" ], "prefix": "settimeout", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "setup": { "body": [ "setup(${1:props}, ${2:context}) {", "\t$0", "}" ], "prefix": "setup", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "switch_case": { "body": [ "switch (${1}){", "\tcase ${2:value}:", "\t\tbreak;", "\tdefault:", "\t\tbreak;", "}" ], "prefix": "switchcase", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "try{}catch(e)": { "body": [ "try{", "\t$0", "}catch(e){", "\t//TODO handle the exception", "}" ], "prefix": "trycatch", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "typeof": { "body": [ "typeof($1)==\"${2:undefined}\"" ], "prefix": "typeoff", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "typeof!": { "body": [ "typeof($1)!=\"${2:undefined}\"" ], "prefix": "typeof!", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uAlert": { "body": [ "uni.showModal({", "\tcontent: '$1',", "\tshowCancel: false", "});" ], "prefix": "ualert", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uConfirm": { "body": [ "uni.showModal({", "\tcontent: '$1',", "\tsuccess: function (res) {", "\t\tif (res.confirm) {", "\t\t\t$2", "\t\t} else if (res.cancel) {", "\t\t\t$3", "\t\t}", "\t}", "});" ], "prefix": "uconfirm", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uGetLocation": { "body": [ "uni.getLocation({", "\ttype: 'wgs84',", "\tsuccess: res => {$0}", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "ugetlocation", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uLogin": { "body": [ "uni.login({", "\tprovider: '$1',", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "ulogin", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uNavigateBack": { "body": [ "uni.navigateBack({", "\tdelta: $1", "});" ], "prefix": "unavigateback", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uNavigateTo": { "body": [ "uni.navigateTo({", "\turl: '$1',", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "unavigateto", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uPay": { "body": [ "uni.requestPayment({", "\tprovider: '$1',", "\torderInfo: '$2',", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "upay", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uRedirectTo": { "body": [ "uni.redirectTo({", "\turl: '$1',", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "uredirectto", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uRequest": { "body": [ "uni.request({", "\turl: '$1',", "\tmethod: 'GET$2',", "\tdata: {$3},", "\tsuccess: res => {$0},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "urequest", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uRequestPayment": { "body": [ "uni.requestPayment({", "\tprovider: '$1',", "\torderInfo: '$2',", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "urequestpayment", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uShare": { "body": [ "uni.share({", "\tprovider: '$1',", "\ttype: 0$2,", "\ttitle: '$3',", "\thref: '$4',", "\timageUrl: '$5',", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "ushare", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uShowActionSheet": { "body": [ "uni.showActionSheet({", "\titemList: $1,", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "ushowactionsheet", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uShowLoading": { "body": [ "uni.showLoading({", "\ttitle: '$1',", "\tmask: false", "});" ], "prefix": "ushowloading", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uShowModal": { "body": [ "uni.showModal({", "\ttitle: '$1',", "\tcontent: '$2',", "\tshowCancel: false$3,", "\tcancelText: '$4',", "\tconfirmText: '$5',", "\tsuccess: res => {$0},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "ushowmodal", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uShowToast": { "body": [ "uni.showToast({", "\ttitle: '$1'", "});" ], "prefix": "ushowtoast", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uShowToastNoIcon": { "body": [ "uni.showToast({", "\ttitle: '$1',", "\ticon: 'none'", "});" ], "prefix": "ushowtoastnoicon", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uStartPullDownRefresh": { "body": [ "uni.startPullDownRefresh({", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "ustartpulldownrefresh", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uStopPullDownRefresh": { "body": [ "uni.stopPullDownRefresh();" ], "prefix": "ustoppulldownrefresh", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uniCloud http request": { "body": [ "const $1 = await uniCloud.httpclient.request('$2', {", "\tdataType: 'json'", "})" ], "description": "uniCloud http request with json decode", "prefix": "uhttp", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uniCloud.database": { "body": [ "const db = uniCloud.database()" ], "prefix": "constdb", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uniCloud.importObject": { "body": [ "const $1 = uniCloud.importObject('$2')" ], "description": "uniCloud.importObject('ObjectName')", "prefix": "cco", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "use strict": { "body": [ "\"use strict\"" ], "prefix": "use", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "var a=[];": { "body": [ "var ${1:a}=[$2];" ], "prefix": "vara", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "var c = canvas": { "body": [ "var ${2:c} = document.getElementById(\"$1\").getContext(\"2d\");" ], "prefix": "varc", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "var currentWebview": { "body": [ "var currentWebview = this.\\$scope.\\$getAppWebview()" ], "prefix": "varcw", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "var i=0;": { "body": [ "var ${1:i}=${2:0};" ], "prefix": "vari", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "var l=a.length;": { "body": [ "var ${1:l}=${2:a}.length;" ], "prefix": "varl", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "var s=\"\";": { "body": [ "var ${1:s}=\"$2\";" ], "prefix": "vars", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "var xhr": { "body": [ "var ${1:xhr} = new XMLHttpRequest();", "xhr.open(\"${2:POST}\",\"$3\",${4:true});" ], "prefix": "varxhr", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "while": { "body": [ "while (${1:condition}){", "\t$0", "}" ], "prefix": "whilee", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "windowaddEventListener": { "body": [ "window.addEventListener('${1:scroll}',function ($2) {", " $0", "})" ], "prefix": "wad", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "with": { "body": [ "with ($1){", "\t$0", "}" ], "prefix": "withh", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" } } (source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.preload()": { "body": [ "mui.preload({", "\turl:'${1:url}',", "\tid:'${2:id}',", "\tstyles:{$3},//窗口参数", "\textras:{$4}//自定义扩展参数", "})$0" ], "prefix": "mpreload", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "mui.prompt()": { "body": [ " mui.prompt('${1:text}','${2:defaultText}','${3:title}',['${4:取消}','${5:确认}'],function (${6:e}) {", " ${6:e}.index$0", "}${7:,'div'})" ], "prefix": "mdprompt", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.ready": { "body": [ "mui.ready(function () {", "\t$0", "})" ], "prefix": "mready", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.scrollTo()": { "body": [ "mui.scrollTo(${1:ypos},${2:duration},${3:/function () {", " \t", "}}$0" ], "prefix": "mscrollto", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.toast()": { "body": [ "mui.toast('${1:message}')$0" ], "prefix": "mdtoast", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "mui.trigger()": { "body": [ "mui.trigger(${1:dom},'${3:tap}'${4:,{a:'as'}})" ], "prefix": "mtrigger", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "namedFunction": { "body": [ "const ${1:name} = (${2:params}) => {", "\t${3}", "}", "" ], "description": "Creates a named function in ES7 syntax", "prefix": "nfn", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "navigator.userAgent;": { "body": [ "navigator.userAgent" ], "prefix": "nuser", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "plus.Screen": { "body": [ "plus.Screen." ], "prefix": "pScreen", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.accelerometer": { "body": [ "plus.accelerometer." ], "prefix": "pacce", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.android": { "body": [ "plus.android." ], "prefix": "pandroid", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.audio": { "body": [ "plus.audio." ], "prefix": "paudio", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.barcode": { "body": [ "plus.barcode." ], "prefix": "pbarcode", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.camera": { "body": [ "plus.camera." ], "prefix": "pcamera", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.contacts": { "body": [ "plus.contacts." ], "prefix": "pcontacts", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.device": { "body": [ "plus.device." ], "prefix": "pdevice", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.display": { "body": [ "plus.display." ], "prefix": "pdisplay", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.downloader": { "body": [ "plus.downloader." ], "prefix": "pdown", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.gallery": { "body": [ "plus.gallery." ], "prefix": "pgallery", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.geolocation": { "body": [ "plus.geolocation." ], "prefix": "pgeolocation", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.io": { "body": [ "plus.io." ], "prefix": "pio", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.ios": { "body": [ "plus.ios." ], "prefix": "pios", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.key": { "body": [ "plus.key." ], "prefix": "pkey", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.maps": { "body": [ "plus.maps." ], "prefix": "pmaps", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.messaging": { "body": [ "plus.messaging." ], "prefix": "pmessaging", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.nativeObj": { "body": [ "plus.nativeObj." ], "prefix": "pnativeObj", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.nativeUI": { "body": [ "plus.nativeUI." ], "prefix": "pnativeUI", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.nativeUI.alert": { "body": [ "plus.nativeUI.alert($1)" ], "prefix": "pnalert", "project": "uni-app,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "plus.navigator": { "body": [ "plus.navigatorsc." ], "prefix": "pnavigator", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.net": { "body": [ "plus.net." ], "prefix": "pnet", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.networkinfo": { "body": [ "plus.networkinfo." ], "prefix": "pnetworkinfo", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.oauth": { "body": [ "plus.oauth." ], "prefix": "poauth", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.orientation": { "body": [ "plus.orientation." ], "prefix": "porientation", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.os": { "body": [ "plus.os." ], "prefix": "pos", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.payment": { "body": [ "plus.payment." ], "prefix": "ppayment", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.proximity": { "body": [ "plus.proximity." ], "prefix": "pproximity", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.push": { "body": [ "plus.push." ], "prefix": "ppush", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.runtime": { "body": [ "plus.runtime." ], "prefix": "pruntime", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.share": { "body": [ "plus.share." ], "prefix": "pshare", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.speech": { "body": [ "plus.speech.$0" ], "prefix": "pspeech", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.statistic": { "body": [ "plus.statistic." ], "prefix": "pstatistic", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.storage": { "body": [ "plus.storage." ], "prefix": "pstorage", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.uploader": { "body": [ "plus.uploader." ], "prefix": "puploader", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.webview": { "body": [ "plus.webview." ], "prefix": "pweb", "project": "uni-app,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plus.zip": { "body": [ "plus.zip." ], "prefix": "pzip", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "plusReady": { "body": [ "function plusReady(){", " $0", "}", "if (window.plus) {", " plusReady()", "} else{", " document.addEventListener('plusready',plusReady,false);", "}" ], "prefix": "pready", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "promise": { "body": [ "return new Promise((resolve, reject) => {", "\t${1}", "})", "" ], "description": "Creates and returns a new Promise in the standard ES7 syntax", "prefix": "prom", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeAny": { "body": [ "PropTypes.any," ], "description": "Any prop type", "prefix": "ptany", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeArray": { "body": [ "PropTypes.array," ], "description": "Array prop type", "prefix": "pta", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeArrayOf": { "body": [ "PropTypes.arrayOf($0)," ], "description": "An array of a certain type", "prefix": "ptao", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeArrayOfRequired": { "body": [ "PropTypes.arrayOf($0).isRequired," ], "description": "An array of a certain type required", "prefix": "ptaor", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeArrayRequired": { "body": [ "PropTypes.array.isRequired," ], "description": "Array prop type required", "prefix": "ptar", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeBool": { "body": [ "PropTypes.bool," ], "description": "Bool prop type", "prefix": "ptb", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeBoolRequired": { "body": [ "PropTypes.bool.isRequired," ], "description": "Bool prop type required", "prefix": "ptbr", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeElement": { "body": [ "PropTypes.element," ], "description": "React element prop type", "prefix": "ptel", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeElementRequired": { "body": [ "PropTypes.element.isRequired," ], "description": "React element prop type required", "prefix": "ptelr", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeEnum": { "body": [ "PropTypes.oneOf(['$0'])," ], "description": "Prop type limited to specific values by treating it as an enum", "prefix": "pte", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeEnumRequired": { "body": [ "PropTypes.oneOf(['$0']).isRequired," ], "description": "Prop type limited to specific values by treating it as an enum required", "prefix": "pter", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeExact": { "body": [ "PropTypes.exact({", "\t$0", "})," ], "description": "An object with warnings on extra properties", "prefix": "ptex", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeExactRequired": { "body": [ "PropTypes.exact({", "\t$0", "}).isRequired," ], "description": "An object with warnings on extra properties required", "prefix": "ptexr", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeFunc": { "body": [ "PropTypes.func," ], "description": "Func prop type", "prefix": "ptf", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeFuncRequired": { "body": [ "PropTypes.func.isRequired," ], "description": "Func prop type required", "prefix": "ptfr", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeInstanceOf": { "body": [ "PropTypes.instanceOf($0)," ], "description": "Is an instance of a class prop type", "prefix": "pti", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeInstanceOfRequired": { "body": [ "PropTypes.instanceOf($0).isRequired," ], "description": "Is an instance of a class prop type required", "prefix": "ptir", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeNode": { "body": [ "PropTypes.node," ], "description": "Anything that can be rendered: numbers, strings, elements or an array", "prefix": "ptnd", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeNodeRequired": { "body": [ "PropTypes.node.isRequired," ], "description": "Anything that can be rendered: numbers, strings, elements or an array required", "prefix": "ptndr", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeNumber": { "body": [ "PropTypes.number," ], "description": "Number prop type", "prefix": "ptn", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeNumberRequired": { "body": [ "PropTypes.number.isRequired," ], "description": "Number prop type required", "prefix": "ptnr", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeObject": { "body": [ "PropTypes.object," ], "description": "Object prop type", "prefix": "pto", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeObjectOf": { "body": [ "PropTypes.objectOf($0)," ], "description": "An object with property values of a certain type", "prefix": "ptoo", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeObjectOfRequired": { "body": [ "PropTypes.objectOf($0).isRequired," ], "description": "An object with property values of a certain type required", "prefix": "ptoor", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeObjectRequired": { "body": [ "PropTypes.object.isRequired," ], "description": "Object prop type required", "prefix": "ptor", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeOneOfType": { "body": [ "PropTypes.oneOfType([", "\t$0", "])," ], "description": "An object that could be one of many types", "prefix": "ptet", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeOneOfTypeRequired": { "body": [ "PropTypes.oneOfType([", "\t$0", "]).isRequired," ], "description": "An object that could be one of many types required", "prefix": "ptetr", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeShape": { "body": [ "PropTypes.shape({", "\t$0", "})," ], "description": "An object taking on a particular shape", "prefix": "ptsh", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeShapeRequired": { "body": [ "PropTypes.shape({", "\t$0", "}).isRequired," ], "description": "An object taking on a particular shape required", "prefix": "ptshr", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeString": { "body": [ "PropTypes.string," ], "description": "String prop type", "prefix": "pts", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propTypeStringRequired": { "body": [ "PropTypes.string.isRequired," ], "description": "String prop type required", "prefix": "ptsr", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propertyGet": { "body": [ "get ${1:propertyName}() {", "\treturn this.${0}", "}", "" ], "description": "Creates a getter property inside a class in ES7 syntax", "prefix": "pge", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propertySet": { "body": [ "set ${1:propertyName}(${2:value}) {", "\t${0}", "}", "" ], "description": "Creates a setter property inside a class in ES7 syntax", "prefix": "pse", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "propertyset": { "body": [ "set ${1:propertyName}(${2:value}) {\n\t${0};\n}" ], "description": "Creates a setter property inside a class in ES6 syntax", "prefix": "pse", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "querySelector": { "body": [ "document.querySelector('$1').$0" ], "prefix": "ds", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "querySelectoraddEventListener": { "body": [ "document.querySelector('$1').addEventListener('${2:tap}',function ($3) {", " $0", "})" ], "prefix": "dsa", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "reactArrowFunctionComponent": { "body": [ "import React from 'react'", "", "export const ${1:${TM_FILENAME_BASE}} = () => {", "\treturn (", "\t\t<div>", "\t\t\t$0", "\t\t</div>", "\t)", "}", "" ], "description": "Creates a React Arrow Function Component with ES7 module system", "prefix": "rafc", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactArrowFunctionComponentWithPropTypes": { "body": [ "import React from 'react'", "import PropTypes from 'prop-types'", "", "const ${1:${TM_FILENAME_BASE}} = props => {", "\treturn (", "\t\t<div>", "\t\t\t$0", "\t\t</div>", "\t)", "}", "", "${1:${TM_FILENAME_BASE}}.propTypes = {", "", "}", "", "export default ${1:${TM_FILENAME_BASE}}", "" ], "description": "Creates a React Arrow Function Component with ES7 module system with PropTypes", "prefix": "rafcp", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactArrowFunctionExportComponent": { "body": [ "import React from 'react'", "", "const ${1:${TM_FILENAME_BASE}} = () => {", "\treturn (", "\t\t<div>", "\t\t\t$0", "\t\t</div>", "\t)", "}", "", "export default ${1:${TM_FILENAME_BASE}}", "" ], "description": "Creates a React Arrow Function Component with ES7 module system", "prefix": "rafce", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactClassCompoment": { "body": [ "import React, { Component } from 'react'", "", "export default class ${1:${TM_FILENAME_BASE}} extends Component {", "\trender() {", "\t\treturn (", "\t\t\t<div>", "\t\t\t\t$0", "\t\t\t</div>", "\t\t)", "\t}", "}", "" ], "description": "Creates a React component class with ES7 module system", "prefix": "rcc", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactClassCompomentPropTypes": { "body": [ "import React, { Component } from 'react'", "import PropTypes from 'prop-types'", "", "export default class ${1:${TM_FILENAME_BASE}} extends Component {", "\tstatic propTypes = {", "\t\t${2:prop}: ${3:PropTypes}", "\t}", "", "\trender() {", "\t\treturn (", "\t\t\t<div>", "\t\t\t\t$0", "\t\t\t</div>", "\t\t)", "\t}", "}", "" ], "description": "Creates a React component class with PropTypes and ES7 module system", "prefix": "rccp", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactClassCompomentRedux": { "body": [ "import React, { Component } from 'react'", "import { connect } from 'react-redux'", "", "export class ${1:${TM_FILENAME_BASE}} extends Component {", "\trender() {", "\t\treturn (", "\t\t\t<div>", "\t\t\t\t$0", "\t\t\t</div>", "\t\t)", "\t}", "}", "", "const mapStateToProps = (state) => ({", "\t", "})", "", "const mapDispatchToProps = {", "\t", "}", "", "export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})", "" ], "description": "Creates a React component class with connected redux and ES7 module system", "prefix": "rcredux", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactClassCompomentReduxPropTypes": { "body": [ "import React, { Component } from 'react'", "import PropTypes from 'prop-types'", "import { connect } from 'react-redux'", "", "export class ${1:${TM_FILENAME_BASE}} extends Component {", "\tstatic propTypes = {", "\t\t${2:prop}: ${3:PropTypes}", "\t}", "", "\trender() {", "\t\treturn (", "\t\t\t<div>", "\t\t\t\t$0", "\t\t\t</div>", "\t\t)", "\t}", "}", "", "const mapStateToProps = (state) => ({", "\t", "})", "", "const mapDispatchToProps = {", "\t", "}", "", "export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})", "" ], "description": "Creates a React component class with PropTypes with connected redux and ES7 module system", "prefix": "rcreduxp", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactClassExportComponent": { "body": [ "import React, { Component } from 'react'", "", "export class ${1:${TM_FILENAME_BASE}} extends Component {", "\trender() {", "\t\treturn (", "\t\t\t<div>", "\t\t\t\t$0", "\t\t\t</div>", "\t\t)", "\t}", "}", "", "export default ${1:${TM_FILENAME_BASE}}", "" ], "description": "Creates a React component class with ES7 module system", "prefix": "rce", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactClassExportComponentWithPropTypes": { "body": [ "import React, { Component } from 'react'", "import PropTypes from 'prop-types'", "", "export class ${1:${TM_FILENAME_BASE}} extends Component {", "\tstatic propTypes = {", "", "\t}", "", "\trender() {", "\t\treturn (", "\t\t\t<div>", "\t\t\t\t$0", "\t\t\t</div>", "\t\t)", "\t}", "}", "", "export default ${1:${TM_FILENAME_BASE}}", "" ], "description": "Creates a React component class with ES7 module system", "prefix": "rcep", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactClassExportPureComponent": { "body": [ "import React, { PureComponent } from 'react'", "", "export class ${1:${TM_FILENAME_BASE}} extends PureComponent {", "\trender() {", "\t\treturn (", "\t\t\t<div>", "\t\t\t\t$0", "\t\t\t</div>", "\t\t)", "\t}", "}", "", "export default ${1:$TM_FILENAME_BASE}", "" ], "description": "Creates a React pure component class with ES7 module system export", "prefix": "rpce", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactClassPureComponent": { "body": [ "import React, { PureComponent } from 'react'", "", "export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {", "\trender() {", "\t\treturn (", "\t\t\t<div>", "\t\t\t\t$0", "\t\t\t</div>", "\t\t)", "\t}", "}", "" ], "description": "Creates a React pure component class with ES7 module system", "prefix": "rpc", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactClassPureComponentWithPropTypes": { "body": [ "import React, { PureComponent } from 'react'", "import PropTypes from 'prop-types'", "", "export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {", "\tstatic propTypes = {", "", "\t}", "", "\trender() {", "\t\treturn (", "\t\t\t<div>", "\t\t\t\t$0", "\t\t\t</div>", "\t\t)", "\t}", "}", "" ], "description": "Creates a React component class with ES7 module system", "prefix": "rpcp", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactFunctionMemoComponent": { "body": [ "import React, { memo } from 'react'", "", "export default memo(function ${1:${TM_FILENAME_BASE}}() {", "\treturn (", "\t\t<div>", "\t\t\t$0", "\t\t</div>", "\t)", "})", "" ], "description": "Creates a React Memo Function Component with ES7 module system", "prefix": "rmc", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactFunctionMemoComponentWithPropTypes": { "body": [ "import React, { memo } from 'react'", "import PropTypes from 'prop-types'", "", "const ${1:${TM_FILENAME_BASE}} = memo(function ${1:${TM_FILENAME_BASE}}(props) {", "\treturn (", "\t\t<div>", "\t\t\t$0", "\t\t</div>", "\t)", "})", "", "${1:${TM_FILENAME_BASE}}.propTypes = {", "", "}", "", "export default ${1:${TM_FILENAME_BASE}}", "" ], "description": "Creates a React Memo Function Component with ES7 module system with PropTypes", "prefix": "rmcp", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactFunctionalCompomentRedux": { "body": [ "import React, { Component } from 'react'", "import { connect } from 'react-redux'", "", "export const ${1:${TM_FILENAME_BASE}} = () => {", "\treturn (", "\t\t<div>", "\t\t\t$0", "\t\t</div>", "\t)", "}", "", "const mapStateToProps = (state) => ({", "\t", "})", "", "const mapDispatchToProps = {", "\t", "}", "", "export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})", "" ], "description": "Creates a React functional component with connected redux and ES7 module system", "prefix": "rfcredux", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactFunctionalCompomentReduxPropTypes": { "body": [ "import React, { Component } from 'react'", "import PropTypes from 'prop-types'", "import { connect } from 'react-redux'", "", "export const ${1:${TM_FILENAME_BASE}} = () => {", "\treturn (", "\t\t<div>", "\t\t\t$0", "\t\t</div>", "\t)", "}", "", "${1:${TM_FILENAME_BASE}}.propTypes = {", "\t${2:prop}: ${3:PropTypes}", "}", "", "const mapStateToProps = (state) => ({", "\t", "})", "", "const mapDispatchToProps = {", "\t", "}", "", "export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})", "" ], "description": "Creates a React functional component with PropTypes with connected redux and ES7 module system", "prefix": "rfcreduxp", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactFunctionalComponent": { "body": [ "import React from 'react'", "", "export default function ${1:${TM_FILENAME_BASE}}() {", "\treturn (", "\t\t<div>", "\t\t\t$0", "\t\t</div>", "\t)", "}", "" ], "description": "Creates a React Functional Component with ES7 module system", "prefix": "rfc", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactFunctionalComponentWithPropTypes": { "body": [ "import React from 'react'", "import PropTypes from 'prop-types'", "", "function ${1:${TM_FILENAME_BASE}}(props) {", "\treturn (", "\t\t<div>", "\t\t\t$0", "\t\t</div>", "\t)", "}", "", "${1:${TM_FILENAME_BASE}}.propTypes = {", "", "}", "", "export default ${1:${TM_FILENAME_BASE}}", "", "" ], "description": "Creates a React Functional Component with ES7 module system with PropTypes", "prefix": "rfcp", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactFunctionalExportComponent": { "body": [ "import React from 'react'", "", "function ${1:${TM_FILENAME_BASE}}() {", "\treturn (", "\t\t<div>", "\t\t\t$0", "\t\t</div>", "\t)", "}", "", "export default ${1:${TM_FILENAME_BASE}}", "" ], "description": "Creates a React Functional Component with ES7 module system", "prefix": "rfce", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactNativeClassComponentRedux": { "body": [ "import React, { Component } from 'react'", "import { View, Text } from 'react-native'", "import PropTypes from 'prop-types'", "import { connect } from 'react-redux'", "", "export class ${1:${TM_FILENAME_BASE}} extends Component {", "\tstatic propTypes = {", "\t\t${2:prop}: ${3:PropTypes}", "\t}", "", "\trender() {", "\t\treturn (", "\t\t\t<View>", "\t\t\t\t<Text> ${2:textInComponent} </Text>", "\t\t\t</View>", "\t\t)", "\t}", "}", "", "const mapStateToProps = (state) => ({", "\t", "})", "", "const mapDispatchToProps = {", "\t", "}", "", "export default connect(mapStateToProps, mapDispatchToProps)(${1:${TM_FILENAME_BASE}})", "" ], "description": "Creates a React Native component class with PropTypes with connected redux and ES7 module system", "prefix": "rncredux", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactNativeComponent": { "body": [ "import React, { Component } from 'react'", "import { Text, View } from 'react-native'", "", "export default class ${1:${TM_FILENAME_BASE}} extends Component {", "\trender() {", "\t\treturn (", "\t\t\t<View>", "\t\t\t\t<Text> ${2:textInComponent} </Text>", "\t\t\t</View>", "\t\t)", "\t}", "}", "" ], "prefix": "rnc", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactNativeComponentExport": { "body": [ "import React, { Component } from 'react'", "import { Text, View } from 'react-native'", "", "export class ${1:${TM_FILENAME_BASE}} extends Component {", "\trender() {", "\t\treturn (", "\t\t\t<View>", "\t\t\t\t<Text> ${2:textInComponent} </Text>", "\t\t\t</View>", "\t\t)", "\t}", "}", "", "export default ${1:${TM_FILENAME_BASE}}", "" ], "prefix": "rnce", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactNativeComponentWithStyles": { "body": [ "import React, { Component } from 'react'", "import { Text, StyleSheet, View } from 'react-native'", "", "export default class ${1:${TM_FILENAME_BASE}} extends Component {", "\trender() {", "\t\treturn (", "\t\t\t<View>", "\t\t\t\t<Text> ${2:textInComponent} </Text>", "\t\t\t</View>", "\t\t)", "\t}", "}", "", "const styles = StyleSheet.create({})", "" ], "prefix": "rncs", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactNativeFunctionalComponent": { "body": [ "import React from 'react'", "import { View, Text } from 'react-native'", "", "export default function ${1:${TM_FILENAME_BASE}}() {", "\treturn (", "\t\t<View>", "\t\t\t<Text>$0</Text>", "\t\t</View>", "\t)", "}", "" ], "prefix": "rnf", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactNativeFunctionalComponentWithStyles": { "body": [ "import React from 'react'", "import { StyleSheet, Text, View } from 'react-native'", "", "export default function ${1:${TM_FILENAME_BASE}}() {", "\treturn (", "\t\t<View>", "\t\t\t<Text>$0</Text>", "\t\t</View>", "\t)", "}", "", "const styles = StyleSheet.create({})", "" ], "prefix": "rnfs", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactNativeFunctionalExportComponent": { "body": [ "import React from 'react'", "import { View, Text } from 'react-native'", "", "const ${1:${TM_FILENAME_BASE}} = () => {", "\treturn (", "\t\t<View>", "\t\t\t<Text>$0</Text>", "\t\t</View>", "\t)", "}", "", "export default ${1:${TM_FILENAME_BASE}}", "" ], "prefix": "rnfe", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactNativeFunctionalExportComponentWithStyles": { "body": [ "import React from 'react'", "import { StyleSheet, Text, View } from 'react-native'", "", "const ${1:${TM_FILENAME_BASE}} = () => {", "\treturn (", "\t\t<View>", "\t\t\t<Text>$0</Text>", "\t\t</View>", "\t)", "}", "", "export default ${1:${TM_FILENAME_BASE}}", "", "const styles = StyleSheet.create({})", "" ], "prefix": "rnfes", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactNativeImport": { "body": [ "import { ${1:moduleName} } from 'react-native'" ], "prefix": "imrn", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactNativePureComponent": { "body": [ "import React, { PureComponent } from 'react'", "import { Text, View } from 'react-native'", "", "export default class ${1:${TM_FILENAME_BASE}} extends PureComponent {", "\trender() {", "\t\treturn (", "\t\t\t<View>", "\t\t\t\t<Text> ${2:textInComponent} </Text>", "\t\t\t</View>", "\t\t)", "\t}", "}", "" ], "prefix": "rnpc", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactNativePureComponentExport": { "body": [ "import React, { PureComponent } from 'react'", "import { Text, View } from 'react-native'", "", "export class ${1:${TM_FILENAME_BASE}} extends PureComponent {", "\trender() {", "\t\treturn (", "\t\t\t<View>", "\t\t\t\t<Text> ${2:textInComponent} </Text>", "\t\t\t</View>", "\t\t)", "\t}", "}", "", "export default ${1:${TM_FILENAME_BASE}}", "" ], "prefix": "rnpce", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reactNativeStyles": { "body": [ "const styles = StyleSheet.create({", "\t${1:style}", "})", "" ], "prefix": "rnstyle", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reduxAction": { "body": [ "export const ${1:actionName} = (payload) => ({", "\ttype: ${3:type},", "\tpayload", "})", "" ], "prefix": "rxaction", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reduxConst": { "body": [ "export const ${1:constantName} = '${1:constantName}'" ], "prefix": "rxconst", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reduxReducer": { "body": [ "const initialState = {", "", "}", "", "export default (state = initialState, { type, payload }) => {", "\tswitch (type) {", "", "\tcase ${1:typeName}:", "\t\treturn { ...state, ...payload }", "", "\tdefault:", "\t\treturn state", "\t}", "}", "" ], "prefix": "rxreducer", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "reduxSelector": { "body": [ "import { createSelector } from 'reselect'", "", "export const ${1:selectorName} = state => state.${2:selector}", "" ], "prefix": "rxselect", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "require": { "body": [ "require('${1:package}');" ], "description": "Require a package", "prefix": "rqr", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "requireToConst": { "body": [ "const ${1:packageName} = require('${1:package}');$0" ], "description": "Require a package to const", "prefix": "req", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "return false": { "body": [ "return false;" ], "prefix": "rfalse", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "return false;": { "body": [ "return false;" ], "prefix": "rfalse", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "return true": { "body": [ "return true;" ], "prefix": "rtrue", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "return true;": { "body": [ "return true;" ], "prefix": "rtrue", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "return uniError": { "body": [ "return {", "\terrSubject: '$1',", "\terrCode: ${2:0},", "\terrMsg: '$3'", "}" ], "description": "return uni error object", "prefix": "returnu", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "setInterval": { "body": [ "setInterval(() => {", "\t${2}", "}, ${0:intervalInms})", "" ], "description": "Executes the given function at specified intervals in ES7 syntax", "prefix": "sti", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "setTimeOut": { "body": [ "setTimeout(() => {", "\t${2}", "}, ${1:delayInms})", "" ], "description": "Executes the given function after the specified delay in ES7 syntax", "prefix": "sto", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "setTimeout function": { "body": [ "setTimeout(function() {$0}, ${1:10});" ], "prefix": "settimeout", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "setup": { "body": [ "setup(${1:props}, ${2:context}) {", "\t$0", "}" ], "prefix": "setup", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "setupReactComponentTestWithRedux": { "body": [ "import React from 'react'", "import renderer from 'react-test-renderer'", "import { Provider } from 'react-redux'", "", "import store from 'src/store'", "import { ${1:${TM_FILENAME_BASE}} } from '../${1:${TM_FILENAME_BASE}}'", "", "describe('<${1:${TM_FILENAME_BASE}} />', () => {", "\tconst defaultProps = {}", "\tconst wrapper = renderer.create(", "\t\t<Provider store={store}>", "\t\t <${1:${TM_FILENAME_BASE}} {...defaultProps} />", "\t\t</Provider>,", "\t)", "", "\ttest('render', () => {", "\t\texpect(wrapper).toMatchSnapshot()", "\t})", "})", "" ], "description": "Create test component", "prefix": "srtest", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "setupReactNativeTest": { "body": [ "import 'react-native'", "import React from 'react'", "import renderer from 'react-test-renderer'", "", "import ${1:${TM_FILENAME_BASE}} from '../${1:${TM_FILENAME_BASE}}'", "", "describe('<${1:${TM_FILENAME_BASE}} />', () => {", "\tconst defaultProps = {}", "\tconst wrapper = renderer.create(<${1:${TM_FILENAME_BASE}} {...defaultProps} />)", "", "\ttest('render', () => {", "\t\texpect(wrapper).toMatchSnapshot()", "\t})", "})", "" ], "prefix": "sntest", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "setupReactNativeTestWithRedux": { "body": [ "import 'react-native'", "import React from 'react'", "import renderer from 'react-test-renderer'", "import { Provider } from 'react-redux'", "", "import store from 'src/store'", "import ${1:${TM_FILENAME_BASE}} from '../${1:${TM_FILENAME_BASE}}'", "", "describe('<${1:${TM_FILENAME_BASE}} />', () => {", "\tconst defaultProps = {}", "\tconst wrapper = renderer.create(", "\t\t<Provider store={store}>", "\t\t\t<${1:${TM_FILENAME_BASE}} {...defaultProps} />", "\t\t</Provider>,", "\t)", "", "\ttest('render', () => {", "\t\texpect(wrapper).toMatchSnapshot()", "\t})", "})", "" ], "prefix": "snrtest", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "setupReactTest": { "body": [ "import React from 'react'", "import renderer from 'react-test-renderer'", "", "import { ${1:${TM_FILENAME_BASE}} } from '../${1:${TM_FILENAME_BASE}}'", "", "describe('<${1:${TM_FILENAME_BASE}} />', () => {", "\tconst defaultProps = {}", "\tconst wrapper = renderer.create(<${1:${TM_FILENAME_BASE}} {...defaultProps} />)", "", "\ttest('render', () => {", "\t\texpect(wrapper).toMatchSnapshot()", "\t})", "})", "" ], "prefix": "stest", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "shouldComponentUpdate": { "body": [ "shouldComponentUpdate(nextProps, nextState) {", "\t$0", "}", "" ], "description": "Invoked before rendering when new props or state are being received. ", "prefix": "scu", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "staticPropTpyes": { "body": [ "static propTypes = {", "$0", "}", "" ], "prefix": "ptypes", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "switch_case": { "body": [ "switch (${1}){", "\tcase ${2:value}:", "\t\tbreak;", "\tdefault:", "\t\tbreak;", "}" ], "prefix": "switchcase", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "testAsyncBlock": { "body": [ "test('should $1', async () => {", "\t$0", "})", "" ], "description": "Testing `asynchronous test` block", "prefix": "testa", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "testBlock": { "body": [ "test('should $1', () => {", "\t$0", "})", "" ], "description": "Testing `test` block", "prefix": "test", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "thenCatch": { "body": [ ".then((${1:result}) => {\n\t${2}\n}).catch((${3:err}) => {\n\t${4}\n});" ], "description": "Add the .then and .catch methods to handle promises", "prefix": "thenc", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "try{}catch(e)": { "body": [ "try{", "\t$SELECTION$0", "}catch(e){", "\t//TODO handle the exception", "}" ], "prefix": "trycatch", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "typeof": { "body": [ "typeof($1)==\"${2:undefined}\"" ], "prefix": "typeoff", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "typeof!": { "body": [ "typeof($1)!=\"${2:undefined}\"" ], "prefix": "typeof!", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uAlert": { "body": [ "uni.showModal({", "\tcontent: '$1',", "\tshowCancel: false", "});" ], "prefix": "ualert", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uConfirm": { "body": [ "uni.showModal({", "\tcontent: '$1',", "\tsuccess: function (res) {", "\t\tif (res.confirm) {", "\t\t\t$2", "\t\t} else if (res.cancel) {", "\t\t\t$3", "\t\t}", "\t}", "});" ], "prefix": "uconfirm", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uGetLocation": { "body": [ "uni.getLocation({", "\ttype: 'wgs84',", "\tsuccess: res => {$0}", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "ugetlocation", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uLogin": { "body": [ "uni.login({", "\tprovider: '$1',", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "ulogin", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uNavigateBack": { "body": [ "uni.navigateBack({", "\tdelta: $1", "});" ], "prefix": "unavigateback", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uNavigateTo": { "body": [ "uni.navigateTo({", "\turl: '$1',", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "unavigateto", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uPay": { "body": [ "uni.requestPayment({", "\tprovider: '$1',", "\torderInfo: '$2',", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "upay", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uRedirectTo": { "body": [ "uni.redirectTo({", "\turl: '$1',", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "uredirectto", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uRequest": { "body": [ "uni.request({", "\turl: '$1',", "\tmethod: 'GET$2',", "\tdata: {$3},", "\tsuccess: res => {$0},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "urequest", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uRequestPayment": { "body": [ "uni.requestPayment({", "\tprovider: '$1',", "\torderInfo: '$2',", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "urequestpayment", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uShare": { "body": [ "uni.share({", "\tprovider: '$1',", "\ttype: 0$2,", "\ttitle: '$3',", "\thref: '$4',", "\timageUrl: '$5',", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "ushare", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uShowActionSheet": { "body": [ "uni.showActionSheet({", "\titemList: $1,", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "ushowactionsheet", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uShowLoading": { "body": [ "uni.showLoading({", "\ttitle: '$1',", "\tmask: false", "});" ], "prefix": "ushowloading", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uShowModal": { "body": [ "uni.showModal({", "\ttitle: '$1',", "\tcontent: '$2',", "\tshowCancel: false$3,", "\tcancelText: '$4',", "\tconfirmText: '$5',", "\tsuccess: res => {$0},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "ushowmodal", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uShowToast": { "body": [ "uni.showToast({", "\ttitle: '$1'", "});" ], "prefix": "ushowtoast", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uShowToastNoIcon": { "body": [ "uni.showToast({", "\ttitle: '$1',", "\ticon: 'none'", "});" ], "prefix": "ushowtoastnoicon", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uStartPullDownRefresh": { "body": [ "uni.startPullDownRefresh({", "\tsuccess: res => {},", "\tfail: () => {},", "\tcomplete: () => {}", "});" ], "prefix": "ustartpulldownrefresh", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uStopPullDownRefresh": { "body": [ "uni.stopPullDownRefresh();" ], "prefix": "ustoppulldownrefresh", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uniCloud http request": { "body": [ "const $1 = await uniCloud.httpclient.request('$2', {", "\tdataType: 'json'", "})" ], "description": "uniCloud http request with json decode", "prefix": "uhttp", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uniCloud.database": { "body": [ "const db = uniCloud.database()" ], "prefix": "constdb", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "uniCloud.importObject": { "body": [ "const $1 = uniCloud.importObject('$2')" ], "description": "uniCloud.importObject('ObjectName')", "prefix": "cco", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "use strict": { "body": [ "\"use strict\"" ], "prefix": "use", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "useCallback": { "body": [ "useCallback(", "\t() => {", "\t\t${1:callback}", "\t},", "\t[${2:input}],", ")" ], "prefix": "useCallback", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "useContext": { "body": [ "const ${1:context} = useContext(${2:contextValue})" ], "prefix": "useContext", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "useDebugValue": { "body": [ "useDebugValue(${1:value})" ], "prefix": "useDebugValue", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "useDispatch": { "body": [ "const dispatch = useDispatch(${1:function})" ], "prefix": "useDispatch", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "useEffect": { "body": [ "useEffect(() => {", "\t${1:effect}", "\treturn () => {", "\t\t${2:cleanup}", "\t}", "}, [${3:input}])" ], "prefix": "useEffect", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "useImperativeHandle": { "body": [ "useImperativeHandle(", "\t${1:ref},", "\t() => {", "\t\t${2:handler}", "\t},", "\t[${3:input}],", ")" ], "prefix": "useImperativeHandle", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "useLayoutEffect": { "body": [ "useLayoutEffect(() => {", "\t${1:effect}", "\treturn () => {", "\t\t${2:cleanup}", "\t};", "}, [${3:input}])" ], "prefix": "useLayoutEffect", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "useMemo": { "body": [ "useMemo(() => ${1:function}, ${2:input})" ], "prefix": "useMemo", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "useReducer": { "body": [ "const [state, dispatch] = useReducer(${1:reducer}, ${2:initialState}, ${3:init})" ], "prefix": "useReducer", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "useRef": { "body": [ "const ${1:ref} = useRef(${2:initialValue})" ], "prefix": "useRef", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "useSelector": { "body": [ "const ${1:state} = useSelector(state => state.${1:state})" ], "prefix": "useSelector", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "useState": { "body": [ "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState(${2:initialState})" ], "prefix": "useState", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "var a=[];": { "body": [ "var ${1:a}=[$2];" ], "prefix": "vara", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "var c = canvas": { "body": [ "var ${2:c} = document.getElementById(\"$1\").getContext(\"2d\");" ], "prefix": "varc", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "var currentWebview": { "body": [ "var currentWebview = this.\\$scope.\\$getAppWebview()" ], "prefix": "varcw", "project": "uni-app", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "var i=0;": { "body": [ "var ${1:i}=${2:0};" ], "prefix": "vari", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "var l=a.length;": { "body": [ "var ${1:l}=${2:a}.length;" ], "prefix": "varl", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "var s=\"\";": { "body": [ "var ${1:s}=\"$2\";" ], "prefix": "vars", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "var xhr": { "body": [ "var ${1:xhr} = new XMLHttpRequest();", "xhr.open(\"${2:POST}\",\"$3\",${4:true});" ], "prefix": "varxhr", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "while": { "body": [ "while (${1:condition}){", "\t$SELECTION$0", "}" ], "prefix": "whilee", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" }, "windowaddEventListener": { "body": [ "window.addEventListener('${1:scroll}',function ($2) {", " $0", "})" ], "prefix": "wad", "project": "Web,App,Wap2App", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)", "triggerAssist": true }, "with": { "body": [ "with ($1){", "\t$SELECTION$0", "}" ], "prefix": "withh", "scope": "source$|(source ! meta.import & meta.block$)|(source !meta.definition.variable & meta.var$)" } } 内置css代码块{ "#ifdef": { "body": [ "/* #ifdef ${1:APP-PLUS/APP-VUE/APP-NVUE/APP/VUE2/VUE3/MP-ALIPAY/MP-BAIDU/MP-WEIXIN/MP-QQ/MP-TOUTIAO/MP-360/MP-KUAISHOU/MP-LARK/MP-JD/MP/H5/QUICKAPP-WEBVIEW-HUAWEI/QUICKAPP-WEBVIEW-UNION/QUICKAPP-WEBVIEW} */", "$0", "/* #endif */" ], "prefix": "ifdef", "project": "uni-app", "scope": "source !(punctuation.terminator.rule|meta.property-value)" }, "#ifndef": { "body": [ "/* #ifndef ${1:APP-PLUS/APP-VUE/APP-NVUE/APP/VUE2/VUE3/MP-ALIPAY/MP-BAIDU/MP-WEIXIN/MP-QQ/MP-TOUTIAO/MP-360/MP-KUAISHOU/MP-LARK/MP-JD/MP/H5/QUICKAPP-WEBVIEW-HUAWEI/QUICKAPP-WEBVIEW-UNION/QUICKAPP-WEBVIEW} */", "$0", "/* #endif */" ], "prefix": "ifndef", "project": "uni-app", "scope": "source !(punctuation.terminator.rule|meta.property-value)" }, "-moz-": { "body": [ "-moz-" ], "prefix": "moz", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)", "triggerAssist": true }, "-ms-": { "body": [ "-ms-" ], "prefix": "ms", "scope": "source meta.property-list! (meta.property-value|punctuation.terminator.rule)", "triggerAssist": true }, "-webkit-": { "body": [ "-webkit-" ], "prefix": "webkit", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)", "triggerAssist": true }, "@-moz-keyframes": { "body": [ "@-moz-keyframes ${1:name}{", "\tfrom{$2}", "\tto{$3}", "}" ], "prefix": "@keyframes", "scope": "source ! meta.property-list" }, "@-ms-keyframes": { "body": [ "@-ms-keyframes ${1:name}{", "\tfrom{$2}", "\tto{$3}", "}" ], "prefix": "@keyframes", "scope": "source ! meta.property-list" }, "@-webkit-keyframes": { "body": [ "@-webkit-keyframes ${1:name}{", "\tfrom{$2}", "\tto{$3}", "}" ], "prefix": "@keyframes", "scope": "source ! meta.property-list" }, "@charset": { "body": [ "@charset \"${1:utf-8}\";" ], "prefix": "@charset", "scope": "source ! meta.property-list" }, "@document": { "body": [ "@document ${1:url}(\"$2\") {", "\t$3", "}" ], "prefix": "@document", "scope": "source ! meta.property-list" }, "@font-face": { "body": [ "@font-face {", "\tfont-family:$1;", "\tsrc: url($2);", "}" ], "prefix": "@fontface", "scope": "source ! meta.property-list" }, "@import": { "body": [ "@import url(\"$1\");" ], "prefix": "@import", "scope": "source ! meta.property-list", "triggerAssist": true }, "@keyframes": { "body": [ "@keyframes ${1:name}{", "\tfrom{$2}", "\tto{$3}", "}" ], "prefix": "@keyframes", "scope": "source ! meta.property-list" }, "@namespace": { "body": [ "@namespace ${1:prefix} \"$2\";" ], "prefix": "@namespace", "scope": "source ! meta.property-list" }, "@page": { "body": [ "@page:${1:first}{", "\t", "}" ], "prefix": "@page", "scope": "source ! meta.property-list" }, "@supports": { "body": [ "@supports(${1:prop}:${2:value}) {", "\t$3", "}" ], "prefix": "@supports", "scope": "source ! meta.property-list" }, "background-color: #": { "body": [ "background-color: #$1" ], "prefix": "bch", "scope": "source meta.property-list! (meta.property-value|punctuation.terminator.rule)", "triggerAssist": true }, "background-color: rgb": { "body": [ "background-color: rgb(${1:255},${2:255},${3:255})" ], "prefix": "bcr", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)" }, "background-image": { "body": [ "background-image: $1" ], "prefix": "bi", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)", "triggerAssist": true }, "background-image: url": { "body": [ "background-image: url($1)" ], "prefix": "biu", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)", "triggerAssist": true }, "background-position": { "body": [ "background-position: $1" ], "prefix": "bp", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)", "triggerAssist": true }, "background: image repeat attachment position": { "body": [ "background: url($1) ${2:repeat} ${3:fixed} ${4:center};$0" ], "prefix": "bg", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)", "triggerAssist": true }, "border-color": { "body": [ "border-color: $1" ], "prefix": "boc", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)", "triggerAssist": true }, "border-style": { "body": [ "border-style: $1" ], "prefix": "bs", "scope": "source meta.property-list! (meta.property-value|punctuation.terminator.rule)", "triggerAssist": true }, "flex-direction: row": { "body": [ "flex-direction: row;" ], "prefix": "fdr", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)" }, "font-family": { "body": [ "font-family: $1" ], "prefix": "ff", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)", "triggerAssist": true }, "font-size": { "body": [ "font-size: $1" ], "prefix": "fsize", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)", "triggerAssist": true }, "height --status-bar-height": { "body": [ "height: var(--status-bar-height);" ], "prefix": "heightstatusbar", "project": "uni-app", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)" }, "height --window-bottom": { "body": [ "height: var(--window-bottom);" ], "prefix": "heightwindowbottom", "project": "uni-app", "scope": "source meta.property-list! (meta.property-value|punctuation.terminator.rule)" }, "height --window-top": { "body": [ "height: var(--window-top);" ], "prefix": "heightwindowtop", "project": "uni-app", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)" }, "height px": { "body": [ "height: ${1}px;$0" ], "prefix": "hpx", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)" }, "list-style-image: url": { "body": [ "list-style-image: url($1);" ], "prefix": "lsi", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)", "triggerAssist": true }, "scrollbar": { "body": [ "scrollbar-base-color: ${1:#CCCCCC};", "scrollbar-arrow-color: ${2:#000000};", "scrollbar-track-color: ${3:#999999};", "scrollbar-3dlight-color: ${4:#EEEEEE};", "scrollbar-highlight-color: ${5:#FFFFFF};", "scrollbar-face-color: ${6:#CCCCCC};", "scrollbar-shadow-color: ${7:#999999};", "scrollbar-darkshadow-color: ${8:#666666};" ], "prefix": "scrollbarr", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)" }, "text-align: left": { "body": [ "text-align: left;" ], "prefix": "tal", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)" }, "text-transform": { "body": [ "text-transform: $1" ], "prefix": "tt", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)", "triggerAssist": true }, "user-select:none (List)": { "body": [ "-webkit-user-select: none;", "-moz-user-select: none;", "-ms-user-select: none;", "user-select: none;" ], "prefix": "usn", "scope": "source meta.property-list! (meta.property-value|punctuation.terminator.rule)" }, "width length": { "body": [ "width: ${1}px;$0" ], "prefix": "widthlength", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)" }, "width upx": { "body": [ "width: ${1}upx;$0" ], "prefix": "wupx", "project": "uni-app", "scope": "source meta.property-list ! (meta.property-value|punctuation.terminator.rule)" } }

概念WebpackWebpack 是一个静态模块打包工具，用于现代JavaScript应用程序。它主要用于将各种类型的资源（如JavaScript、CSS、HTML、图片等）视为模块，通过 loader（加载器）转换它们，然后通过 plugin（插件）进一步优化并输出到一个或多个bundle文件中。Webpack的核心特性包括：模块打包：支持ES6模块、CommonJS等各种模块格式，能够将项目中的分散文件打包成浏览器可识别的格式。Loader机制：允许预处理文件（例如Babel处理JSX、SASS/LESS转CSS等）并在打包时引入这些处理过的文件作为模块。Tree Shaking：通过分析依赖关系去除未使用的代码，实现代码裁剪优化。Code Splitting：动态分割代码，按需加载，有利于提升应用加载速度。Hot Module Replacement (HMR)：在开发环境中热更新模块，无需刷新页面即可看到更改。ViteVite 是由 Evan You（Vue.js作者）创建的一款新型前端构建工具。Vite利用浏览器原生支持ES模块的能力，在开发环境下不需要打包直接服务源码，显著提升了启动速度和开发体验。其特点包括：快速冷启动：基于原生ESM和服务端渲染模板，开发服务器几乎瞬间启动。无打包开发模式：开发时仅做按需转换和实时热更新，提高开发效率。高效打包：在生产环境依然可以利用Rollup进行高效且优化的打包工作。内建HTTP2支持：利于分片加载和缓存策略，提升性能。GruntGrunt 是一款基于Node.js的任务运行器，主要用于自动化前端开发流程中的常见任务，如压缩CSS/JS、编译Sass/Less、运行测试等。Grunt的工作原理是通过配置文件定义一系列任务及其依赖关系，然后执行这些任务。任务驱动：专注于单一任务的自动化，如文件压缩、版本控制等。插件系统：大量第三方插件支持各种类型的任务处理。配置灵活：通过JSON风格的配置文件来描述构建流程。GulpGulp 同样是一款JavaScript构建工具，它的核心思想是“流”（streaming build system），强调代码优于配置。相比于Grunt，Gulp鼓励编写简洁的代码来定义构建流程。基于流的处理：通过管道（pipe）方式连接各个构建任务，减少磁盘读写操作，提升构建速度。API简洁：使用Node.js代码而非配置文件定义任务，易于理解和维护。插件生态：拥有丰富的插件库以支持多种构建任务。区别与应用场景Webpack 适用于大型复杂的前端项目，尤其是那些需要精细控制模块打包、代码分割、预处理和优化的应用场景。对于需要高度定制化构建流程和产出物的项目来说，Webpack是非常理想的工具。Vite 在现代Web开发中提供了更快的开发体验，尤其适合Vue.js或其他框架的单页应用开发，以及追求高效率迭代和即时反馈的开发团队。Grunt 和 Gulp 更偏向于通用的构建工具，它们适合处理各种一次性或持续性构建任务，但在模块打包方面不如Webpack强大。对于需要简单自动化流程（如压缩、预编译、测试等）的小型至中型项目，Grunt和Gulp仍有一定的实用价值，但随着Webpack和Vite的兴起，这两者在前端构建领域的使用率逐渐降低。总结Webpack和Vite在现代前端构建领域扮演着重要角色，尤其是在处理模块化和高效开发方面；而Grunt和Gulp虽然在早期前端工程化阶段非常流行，但现在更多地被用于一些特定场景下的辅助构建任务。

TCP粘包（TCP Packet Coalescing）是指在TCP传输中，由于TCP本身是面向流的传输协议，它并不保证数据包之间的边界，所以在某些情况下，发送端发出的多个数据包可能会在接收端接收到的时候粘合成一个较大的数据块，或者多个数据包分散地交错在一起，而不是按照发送时的原始顺序和界限进行接收。粘包现象的发生的原因发送端原因：Nagle算法：为了减少网络中的小包数量，TCP可能会缓存较小的数据片段，等待累积到一定大小或满足特定条件后再一次性发送。发送的数据量小于MSS（Maximum Segment Size，最大报文段大小），TCP可能合并多个小数据包为一个更大的数据包发送。2. 接收端原因：接收缓冲区设计：TCP会把接收到的数据放入缓冲区，直到应用程序读取。如果应用程序没有及时读取数据，后续到达的数据可能会“粘”在前面未读数据之后。处理TCP粘包的方法消息定界：在应用层设计合适的协议，比如在每个消息前加上固定的头部，头部包含消息长度信息，接收端可以根据头部的长度字段正确解析出各个独立的消息。使用特殊的消息结束标志符，如换行符、固定字符组合等作为消息分隔符。流水线控制：应用程序可以控制每次发送固定大小的消息，确保发送的数据不会因为太小而被合并。在接收端，可以通过循环读取并按照预定的协议规范解析数据，直到遇到消息结束标志为止。使用更高层次的协议封装：对于复杂的应用场景，可以采用自定义的二进制或文本协议，如Google Protocol Buffers、XML、JSON等，它们内部包含了足够的元数据来区分不同消息。禁用Nagle算法：如果粘包问题是因为Nagle算法引起的，在必要时可以关闭此算法，但这可能会影响整体的网络性能。总之，处理TCP粘包的关键在于设计一种可靠的传输协议，使接收端能够准确地区分出原本独立的消息单元，从而保证应用层数据的正确处理。

最近往github仓库中上传资料，发现这样一个问题：remote: Support for password authentication was removed on August 13, 2021. Please use a personal access token instead.大概意思就是你原先的密码凭证从2021年8月13日开始就不能用了，必须使用个人访问令牌（personal access token），就是把你的密码替换成token如何生成token1、在个人设置页面，找到Setting2、打开 developer setting，进入Personal access tokens ，可以做如下配置。过期时间可以自己定义。3、执行保存，生成一个token（要做好保存，只显示一次）4， 正在git push origin main等上传到github仓库命令时候，输入用户名后，提示输入的密码即为这个token值。或者：git remote set-url origin https://你的token@github.com/你的用户名/仓库名称.gitgithub为什么要把密码换成token？近年来，GitHub 客户受益于 GitHub.com 的许多安全增强功能，例如双因素身份验证、登录警报、经过验证的设备、防止使用泄露密码和 WebAuthn 支持。 这些功能使攻击者更难获取在多个网站上重复使用的密码并使用它来尝试访问您的 GitHub 帐户。 尽管有这些改进，但由于历史原因，未启用双因素身份验证的客户仍能够仅使用其GitHub 用户名和密码继续对 Git 和 API 操作进行身份验证。从 2021 年 8 月 13 日开始，我们将在对 Git 操作进行身份验证时不再接受帐户密码，并将要求使用基于令牌（token）的身份验证，例如个人访问令牌（针对开发人员）或 OAuth 或 GitHub 应用程序安装令牌（针对集成商） GitHub.com 上所有经过身份验证的 Git 操作。修改为token的好处令牌（token）与基于密码的身份验证相比，令牌提供了许多安全优势：唯一： 令牌特定于 GitHub，可以按使用或按设备生成可撤销：可以随时单独撤销令牌，而无需更新未受影响的凭据有限 ： 令牌可以缩小范围以仅允许用例所需的访问随机：令牌不需要记住或定期输入的更简单密码可能会受到的字典类型或蛮力尝试的影响结尾语Network 灰鸽宝典为开发配置保驾护航，让服务运行快捷平稳。 希望某个知识点就能帮助你，欢迎学习GIS的朋友一起交流。《 Openlayers 综合示例200+ 》，《 leaflet示例教程100+ 》，《 Cesium示例教程100+》，《MapboxGL示例教程100+》。

用到Java项目的时候，有时候要用到Java_home，这个需要在系统配置中配置一下。如何操作呢？以下为详细的图文步骤。1）打开环境变量的窗口2）打开新建系统变量3）编辑JAVA_HOME在变量名后输入JAVA_HOME,找到bin所在目录，将bin前的路径复制到变量值处，点击确定；4）编辑path选中path,点击编辑，在变量值的前面输入%JAVA_HOME%;分号必须要写，且必须是英文下的；5) 创建新变量创建新变量，变量名输入：classpath （JAVA_HOME 配置可有可无，最好配置上）变量内容输入：.;%JAVA_HOME%libdt.jar;%JAVA_HOME%lib\tools.jar （注意最前面的点 . 不要漏掉。）6）验证是否成功环境变量配置完成，按windows+R键重新打开命令窗口，在任意目录下输入javac命令，运行成功注意：配置时要确保路径的正确性,全路径为：C:developJavajdk-1.8.0_91\bin若： JAVA_HOME：C:developJavajdk-1.8.0_91;(最后有分号)PATH:%JAVA_HOME%bin;(bin前无分号)若：JAVA_HOME:C:developJavajdk-1.8.0_91;(最后无分号)PATH:%JAVA_HOMEb%\bin;(bin前有分号)结尾语Network 灰鸽宝典为开发配置保驾护航，让服务运行快捷平稳。 希望某个知识点就能帮助你，欢迎学习GIS的朋友一起交流。《 Openlayers 综合示例200+ 》，《 leaflet示例教程100+ 》，《 Cesium示例教程100+》，《MapboxGL示例教程100+》。

错误现象Chrome的插件有时候在安装中会出现错误：程序包无效。详细信息：“Cannot load extension with file or directory name . Filenames starting with "" are reserved for use by the system.”。解决办法1、找到Chrome安装程序路径，找到对应的插件2、把crx后缀名改为rar或者zip，解压缩得到文件夹（有错误提示不用理会），选择全部替换即可3、打开该文件夹，把里面的"_metadata"文件夹改名为"metadata"（去掉下杠）4、进入扩展程序中心，启用开发者模式，加载正在开发的程序包，选择刚才的文件夹就行了，搞定！进入扩展插件目录后(chrome://extensions)加载已解压的扩展程序

PNG8、PNG16、PNG24、PNG32 是 PNG 图像格式的不同版本，它们的主要区别在于颜色深度和对透明度的支持：PNG8PNG8 图像拥有8位颜色深度，即每个像素使用8位表示，因此最多可以展示2^8=256种颜色。它支持两种形式的透明度：索引透明（每个颜色在调色板中有自己的透明度设置）和简单的二值透明（完全透明或完全不透明）。PNG8 适用于颜色数量较少、颜色过渡不复杂的图像，如网站图标、LOGO、简单的图形等，因为它的文件大小较小，利于提升网页加载速度。PNG16标准的 PNG 格式并没有明确的“PNG16”，不过在某些情况下，人们可能会提到16位深度的PNG，这可能是指灰度图像（16位灰阶）或者某种特殊应用的彩色图像。在网页开发中，这不是一个普遍使用的格式。PNG24PNG24 图像有24位颜色深度，即每个像素由3个8位通道组成（红、绿、蓝），总共可以展现超过1600万种颜色，但PNG24格式不支持Alpha透明通道，因此无法实现像素级别的透明度控制，所有的像素都必须是完全不透明的。PNG24适合用于色彩丰富且不需要透明效果的大图、照片等。PNG32PNG32 图像也是由3个8位的颜色通道组成，但额外增加了一个8位的Alpha通道，这就意味着它可以表示与PNG24相同的丰富颜色，同时还可以实现从完全透明到完全不透明的连续透明度。PNG32 适用于需要高品质色彩和透明度渐变的复杂图像，如半透明叠加层、高质量图标等。网页中选用PNG格式说明对于小尺寸、颜色简单且需要透明效果的图标，通常选用PNG8。对于全彩照片或者色彩丰富的图像，若不需透明效果，首选PNG24。如果图像需要细腻的透明度控制，比如网页设计中的半透明元素或复杂矢量图形，优先考虑PNG32。考虑到加载速度和兼容性，很多时候也会采用更先进的WebP格式 ，或者对大图进行压缩优化。而在实际开发中，根据浏览器兼容性和性能要求，往往会结合使用以上格式，同时利用工具进行图片优化，以达到最佳视觉效果和加载速度之间的平衡。

示例效果没有添加grid之前（有grid的默认值来控制）添加grid之后（自定义控制大小）示例源代码（共88行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-03 */ <template> <div class="container"> <h3>vue+echarts：控制主体显示区的上下左右边距</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); myChart.setOption({ title: { text: '标题：ECharts示例' }, // grid: { //方法 1 // left: 15, // right: 15, // bottom: 0, // top: 45, // containLabel: true // }, grid: { //方法 2 x:25, y:45, x2:0, y2:0, containLabel: true }, xAxis: { data: ['cuclife', 'openlayers', 'cesium', 'echarts', 'leaflet'] }, yAxis: {}, series: [{ name: '技能值', type: 'bar', data: [5, 36, 10, 10, 20], itemStyle: { //静态时显示状态 color: new echarts.graphic.LinearGradient( // (x1,y1) 点到点 (x2,y2) 之间进行渐变 1, 0, 0, 0, [ { offset: 0, color: '#ff00ff' }, // 0 起始颜色 { offset: 0.5, color: '#758d36' }, // 0 起始颜色 { offset: 1, color: '#0099ce' } // 1 结束颜色 ] ), }, }] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style> 相关资料参考https://echarts.apache.org/zh/option.html#grid相应的设置参数（方法1）grid. left = ‘10%’grid 组件离容器左侧的距离。left 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。grid. top = 60grid 组件离容器上侧的距离。top 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’, ‘middle’, ‘bottom’。如果 top 的值为’top’, ‘middle’, ‘bottom’，组件会根据相应的位置自动对齐。grid. right = ‘10%’grid 组件离容器右侧的距离。right 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。grid. bottom = 60grid 组件离容器下侧的距离。bottom 的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比。相应的设置参数（方法2）

对于柱状图来说，我们想要的效果是圆柱的上面进行圆弧的处理，产生顺滑的感觉，怎么处理呢，只要设置好样式即可，参考源代码圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。 如:borderRadius: 5, // 统一设置四个角的圆角大小borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）示例效果示例源代码（共75行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-03 */ <template> <div class="container"> <h3>vue+echarts：柱形头部圆弧处理</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); myChart.setOption({ title: { text: '标题：ECharts示例' }, xAxis: { data: ['cuclife', 'openlayers', 'cesium', 'echarts', 'leaflet'] }, yAxis: {}, series: [{ name: '技能值', type: 'bar', data: [5, 36, 10, 10, 20], itemStyle: { //圆弧处理的核心源代码 borderRadius:[20,20,0,0,0], //静态时显示状态 color: new echarts.graphic.LinearGradient( // (x1,y1) 点到点 (x2,y2) 之间进行渐变 1, 0, 0, 0, [ { offset: 0, color: '#0000ff' }, // 0 起始颜色 { offset: 0.5, color: '#ff0000' }, // 0 起始颜色 { offset: 1, color: '#0099ce' } // 1 结束颜色 ] ), }, }] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style>

本示例是解决每个柱状图的每一个柱子都呈现一种渐变色，每个柱子的颜色都不同。这里同时采用了象形的柱状图效果。示例效果示例源代码（共125行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-27 */ <template> <div class="container"> <h3>vue+echarts：每个柱子一种渐变色的象形柱状图</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); let colorList = { first: ["#F179C4", "#26AEFB", "#CDAD92", "#ED65BA", "#989FBB", "#6718CF"], second: [ "#056FAB", "#FFAA62", "#E33AA3", "#28B1FF", "#FFAA62", "#F47384"] } myChart.setOption({ title: { text: '标题：ECharts示例' }, xAxis: { type: 'category', data: ['cuclife', 'openlayers', 'cesium', 'echarts', 'leaflet'] }, yAxis: { type: 'value', name: '技术技能值', //坐标轴名称 nameLocation: 'middle', //坐标轴的位置 nameTextStyle: { color: '#ff00ff', }, nameGap: 50, //坐标轴名称与轴线之间的距离 nameRotate: 90, //坐标轴名字旋转角度值, axisLine: { lineStyle: { color: '#ff00ff' }, symbol: ['none', 'arrow'], //轴线两边的箭头 symbolSize: [8, 12] }, axisTick: { inside: false, //标轴刻度是否朝内，默认朝外 }, axisLabel: { show: true, inside: false, formatter: '{value}' }, splitArea: { show: true, color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'], } }, grid: { x: 25, y: 55, x2: 25, y2: 20, containLabel: true }, series: [{ // 以下是核心代码 type: 'pictorialBar', //设置类型为象形柱状图 symbol: 'rect', //图形类型，带圆角的矩形 symbolMargin: '3', //图形垂直间隔 symbolRepeat: true, //图形是否重复 symbolSize: [50, 25], //图形元素的尺寸 itemStyle: { color: params => { //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100% return new echarts.graphic.LinearGradient( 1, 0, 0, 0, [{ offset: 0, color: colorList.first[params.dataIndex] }, { offset: 1, color: colorList.second[params.dataIndex] } ]) } }, data: [15, 36, 10, 10, 20], }] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style>

TLS/SSL（Transport Layer Security / Secure Sockets Layer）协议的主要工作原理是为了在网络上实现安全的通信，确保数据的机密性、完整性和身份验证。 其核心工作流程主要包括以下几个关键步骤：1. 记录协议封装：TLS将上层应用的数据分割成合适大小的块，并且每个数据块都会被封装在一个记录中。压缩（可选）：根据协商的安全参数，记录可能先经过压缩算法处理以减少传输量。加密：记录会被使用协商好的对称密钥进行加密，保证数据的机密性。MAC（Message Authentication Code）或完整性校验：为了保证数据完整性，还会添加一个基于密钥的消息认证码。2. 握手协议建立连接：当客户端与服务器开始一个新的安全会话时，它们首先执行一次握手过程。身份验证：握手过程中，服务器会发送其数字证书，包含公钥和其他身份信息，客户端验证服务器的身份（可选双向身份验证）。密钥交换：通过非对称加密算法（如RSA或DH/ECDH）协商出一个会话密钥，这个密钥仅在本次会话中有效，用于后续的对称加密通信。安全参数协商：客户端和服务器协商加密套件（包括加密算法、哈希函数、以及密钥长度等），确定具体的安全参数。3. 密钥生成与更新使用握手过程中产生的随机数和其他信息，计算出会话密钥和其他相关密钥材料，这些密钥随后用于加密和解密实际的数据传输。4. 数据传输一旦握手完成，客户端和服务器就可以通过已协商的安全参数和密钥进行安全的数据传输。总的来说，TLS/SSL结合了对称加密和非对称加密的优势，实现了高效的数据加密和可靠的身份验证机制，确保了在网络上传输的信息既不被窃听也不被篡改。同时，协议还具有良好的前向安全性，即使长期密钥泄露，之前会话的加密数据仍然难以破解。

Echarts折线图的y轴要画一条横线，主要是在series中设置markLine的图表标线参数，具体的参考源代码。示例效果示例源代码（共142行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-04 */ <template> <div class="container"> <h3>vue+echarts：添加定值横线</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); myChart.setOption({ title: { text: '标题：ECharts示例' }, xAxis: { type: 'category', data: ['cuclife', 'openlayers', 'cesium', 'echarts', 'leaflet'] }, yAxis: { type: 'value', name: '技术技能值', //坐标轴名称 nameLocation: 'middle', //坐标轴的位置 nameTextStyle: { color: '#ff00ff', //align:'left', }, nameGap: 50, //坐标轴名称与轴线之间的距离 nameRotate: 90, //坐标轴名字旋转角度值, axisLine: { lineStyle: { color: '#ff00ff' }, symbol: ['none', 'arrow'], //轴线两边的箭头 symbolSize: [8, 12] }, axisTick: { inside: false, //标轴刻度是否朝内，默认朝外 }, axisLabel: { show: true, inside: false, formatter: '{value}' }, splitArea: { show: true, color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'], } }, grid: { x:25, y:55, x2:25, y2:20, containLabel: true }, series: [{ type: 'line', data: [15, 36, 10, 10, 20], itemStyle: { //静态时显示状态 color: new echarts.graphic.LinearGradient( // (x1,y1) 点到点 (x2,y2) 之间进行渐变 0, 0, 1, 0, [{ offset: 0, color: '#ff00ff' }, // 0 起始颜色 { offset: 0.5, color: '#ffff00' }, // 0 起始颜色 { offset: 1, color: '#ff0000' } // 1 结束颜色 ] ), }, markLine : { symbol: ['none','arrow'], //['none']表示是一条横线；['arrow', 'none']表示线的左边是箭头，右边没右箭头；['none','arrow']表示线的左边没有箭头，右边有箭头 label:{ position:"start" //将警示值放在哪个位置，三个值“start”,"middle","end" 开始 中点 结束 }, data : [{ silent:false, //鼠标悬停事件 true没有，false有 lineStyle:{ //警戒线的样式 ，虚实 颜色 type:"dotted", //样式 ‘solid’和'dotted' color:"#FA3934", width: 3 //宽度 }, yAxis: 22 // 警戒线的标注值，可以有多个yAxis,多条警示线 或者采用 {type : 'average', name: '平均值'}，type值有 max min average，分为最大，最小，平均值 }] } }] }); } }, mounted() { this.initCharts(); window.addEventListener("online", () => { console.log("网络连接成功"); }); window.addEventListener("offline", () => { console.log("网络连接失败"); }); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style>

本示例是描述如何在Echarts上配置横轴竖轴指示线，更换颜色、线型和大小。方法很简单，参考示例源代码。示例效果示例源代码（共85行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-17 */ <template> <div class="container"> <h3>vue+echarts：配置横轴竖轴指示线，更换颜色、线型和大小</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); myChart.setOption({ tooltip: { trigger: 'axis', axisPointer: { // 设置指示线 type: 'line', // 默认为直线，可选为：'line' | 'shadow' lineStyle: { color:'#f00', type: [5, 15], //设置折线类型 dashOffset: 10, width:5, } } }, title: { text: '基本曲线图' }, legend: { data: ['cuclife', 'openlayers'] }, color: ['orange', 'blue'], xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name:'cuclife', type: 'line', // 设置拐点的大小和形状 symbol :'rect',// 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle symbolSize : 10, symbolRotate: 45, data: [820, 932, 901, 934, 1290, 1330, 1320], smooth: true, }] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style>

在上一篇文章中已经讲过 ECharts线性渐变色示例演示（2种渐变方式），这里做了环形图，饼图的一个径向渐变的示例演示，这里type: ‘radial’,想，y、x、z需要设置相应的数值，见示例代码中的注释。径向渐变： radialtype：‘radial’，径向渐变x,y，代表圆心，数值范围 0-1；r，代表半径，数值范围 0-1；colorStops，类似颜色线性梯度，数值范围 0-1；global，默认false示例效果示例源代码（共80行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-02 */ <template> <div class="container"> <h3>vue+echarts：环形图、饼图径向渐变示例</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); myChart.setOption({ title: { text: '标题：ECharts示例' }, color: { type: 'radial', x: 0.1, // 0.5为正中心，如果小于渐变中心靠左 y: 0.5, // 0.5为正中心，如果小于渐变中心靠上 r: 1, // 0.5渐变影响范围只有一半，影响圆心到周围的一半 colorStops: [{ offset: 0, color: 'red' // 0% 处的颜色 }, { offset: 1, color: 'blue' // 100% 处的颜色 }], global: false // 缺省为 false }, series: [{ type: 'pie', radius: ['20%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'left' }, data: [{ name: 'cuclife', value: 100 }, { name: '大剑师', value: 1000 }], }] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style>

本示例的目标是模拟汽车速度和油量的仪表显示，这里两个仪表盘同图，并倾斜一定的角度。示例效果示例源代码（共115行） /* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-27 */ <template> <div class="container"> <h3>vue+echarts：两个仪表盘同图，模拟汽车速度和油量的仪表显示</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> <div class="car"><img src="../assets/car.png" ></div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); let mycolor = [[0.35, "rgba(0,0,255,1)"], [0.6, "rgba(0,255,0,1)"], [1, "rgba(255,0,0,1)"]]; let mycolor2 = [[0.15, "red"], [0.3, "orange"], [1, "green"]]; myChart.setOption({ title: { text: '还是大剑师兰特的ECharts仪表盘示例' }, series: [{ name: "Indicator1", type: "gauge", center: ['30%', '50%'], detail: { formatter: "{value}" }, max:200, //最高速度200 startAngle: 240, //核心代码 endAngle: 30, //核心代码 axisLine: { show: true, lineStyle: { color: mycolor, } }, data: [{ value: 120, name: "公里/小时", itemStyle: { color: 'blue' } }] }, { name: "Indicator2", type: "gauge", center: ['70%', '50%'], detail: { formatter: "{value}%" }, // clockwise:false, startAngle: 150, endAngle: -60, axisLine: { show: true, lineStyle: { color: mycolor2, } }, data: [{ value: 50, name: "剩余油量", itemStyle: { color: 'red' } }] } ] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); position: relative; } .car{ position: absolute; z-index: 10; width: 174px; height: 115px; left: calc( 50% - 87px ); bottom:70px } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style>

上一篇文章我们讲到了如何设置拐点大小,图形类型，旋转角度，缩放同比，位置偏移等，这篇文章介绍如何设置拐点的颜色、边框大小颜色等样式。hover轴线时候，拐点的填充颜色改变示例效果示例源代码（共150行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-13 */ <template> <div class="container"> <h3>vue+echarts：设置折线拐点的颜色，边框等样式</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); myChart.setOption({ title: { text: '标题：ECharts示例' }, tooltip:{ show: true , trigger: 'axis' , }, xAxis: { type: 'category', data: ['cuclife', 'openlayers', 'cesium', 'echarts', 'leaflet'] }, yAxis: { type: 'value', name: '技术技能值', //坐标轴名称 nameLocation: 'middle', //坐标轴的位置 nameTextStyle: { color: '#ff00ff', //align:'left', }, nameGap: 50, //坐标轴名称与轴线之间的距离 nameRotate: 90, //坐标轴名字旋转角度值, axisLine: { lineStyle: { color: '#ff00ff' }, symbol: ['none', 'arrow'], //轴线两边的箭头 symbolSize: [8, 12] }, axisTick: { inside: false, //标轴刻度是否朝内，默认朝外 }, axisLabel: { show: true, inside: false, formatter: '{value}' }, splitArea: { show: true, color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'], } }, grid: { x:50, y:55, x2:25, y2:20, containLabel: true }, series: [{ type: 'line', //设置拐点大小,图形类型，旋转角度，缩放同比，位置偏移，是否显示 symbol :'arrow',// 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle symbolSize : 20, symbolRotate: 180, symbolKeepAspect:true, symbolOffset:[0, 0], showSymbol :true, //false, tooltip hover时候才显示出来 //设置拐点的颜色，边框等样式 itemStyle:{ color:'red',//拐点颜色 borderColor:'#0000ff',//拐点边框颜色 borderWidth:2,//拐点边框大小 emphasis: { color: '#00ff00'//hover拐点颜色定义 } }, data: [15, 36, 10, 10, 20], lineStyle: { //静态时显示状态 //type:'dotted', //设置折线类型 width:5, //设置折线粗细 opacity:0.8, //设置透明度 type: [5, 5], //设置折线类型 dashOffset: 1, color: new echarts.graphic.LinearGradient( // (x1,y1) 点到点 (x2,y2) 之间进行渐变 0, 0, 1, 0, [{ offset: 0, color: '#ff00ff' }, // 0 起始颜色 { offset: 0.5, color: '#ffff00' }, // 0 起始颜色 { offset: 1, color: '#ff0000' } // 1 结束颜色 ] ), // shadowColor: 'rgba(0, 0, 0, 0.8)', //阴影颜色 // shadowBlur: 10, //阴影的模糊大小。 // shadowOffsetX:20, // 阴影水平方向上的偏移距离 // shadowOffsetY:10, // 阴影垂直方向上的偏移距离 }, }] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style> 相关资料参考https://echarts.apache.org/zh/option.html#series-line.symbolhttps://echarts.apache.org/zh/option.html#series-line.itemStyle拐点大小等设置属性名称默认值参数说明symbolemptyCircle‘rect’,‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’,symbolSize4可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10symbolRotate:0标记的旋转角度（而非弧度）。正值表示逆时针旋转。注意在 markLine 中当 symbol 为 ‘arrow’ 时会忽略 symbolRotate 强制设置为切线的角度。symbolKeepAspect:true如果 symbol 是 path:// 的形式，是否在缩放时保持该图形的长宽比symbolOffset[0, 0]标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置，但是如果 symbol 是自定义的矢量路径或者图片，就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移，可以是绝对的像素值，也可以是相对的百分比。例如 [0, ‘-50%’] 就是把自己向上移动了一半的位置，在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。showSymboltrue是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示。

Echarts发展到现在，已经陆续经过了很多版本，越来越完善，现在主要研究5.0以上的功能。这里是介绍在vue项目中，如果全局或者局部引用echarts，对项目初装echarts会起到非常大的帮助。NPM 安装 EChartsnpm install echarts --save引用Echartsmain.js中全局引用import * as echarts from ‘echarts’Vue.prototype.$echarts = echarts示例中局部引用import * as echarts from ‘echarts’示例效果简单示例源代码/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-01 */ <template> <div class="container"> <h3>vue+echarts：引用基础示例</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data(){ return{ } }, methods:{ initCharts(){ //let myChart = echarts.init(document.getElementById('vue-echarts'));两种方式都行 let myChart = echarts.init(this.$refs.refEcharts); //如果是调用全局的echarts,可以这样写 //let myChart = this.$echarts.init(this.$refs.refEcharts); // 绘制图表 myChart.setOption({ title: { text: '标题：ECharts简单示例' }, tooltip: {}, xAxis: { data: ['cuclife', 'openlayers', 'cesium', 'echarts', 'leaflet'] }, yAxis: {}, series: [ { name: '技能值', type: 'bar', data: [5, 36, 10, 10, 20] } ] }); } }, mounted() { this.initCharts() } } </script> <style scoped> .container{ width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228,57,97);} #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto;} </style> 相关资料参考https://echarts.apache.org/handbook/zh/basics/import专栏介绍在vue和echarts联合技术栈的操控下，本专栏提供行之有效的源代码示例。这里既包括样式的修改，又包括常用bug的解决。（1）提供title示例：展示控制标题的颜色、位置、子标题，连接等（2）提供legend示例：展示控制图例的类型、宽度、高度、位置、间隙，边框、阴影、透明度、偏移，字体、颜色，提示语等（3）提供grid示例：展示控制绘图网格的位置、宽度、高度、边框、阴影等（4）提供xAxis示例：展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等（5）提供yAxis示例：展示控制y 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等（6）提供dataZoom示例：展示控制区域缩放的类型、位置、filterMode等（7）提供tooltip示例：展示控制提示框组件的触发方式、位置、样式，标签、动画、内容格式器等（8）提供地理坐标系示例：展示控制地理坐标的经纬度、放缩、位置，距离、字体、边框等（9）提供animation示例：展示控制动画的持续时间、延迟时间、动画方式，连接等（10）提供其他示例：展示series等组件的信息内容。

本文简介接着 《Canvas 从入门到劝朋友放弃（图解版）》 ，本文继续补充 canvas 基础知识点。这次我不手绘了！本文会涉及到 canvas 的知识包括：变形、像素控制、渐变、阴影、路径变形这里说的变形是基于画布，全局进行变形。变形主要包括：平移 translate、缩放 scale、旋转操作 rotate。除了对应的方法外，还可以使用 transform 和 setTransform 对上面三种操作进行配置，这称为“变换矩阵”。在学习“变形”之前，需要了解 W3C坐标系：箭头所指是各轴自己的正方向，x轴越往右（正方向）值越大，y轴越往下（正方向）值越大。平移使用 translate() 方法可以实现平移效果（位移）。translate(x, y) 接收2个参数，第一个参数代表x轴方向位移距离，第二个参数代表y轴方向位移距离。正数代表向正方向位移，负数代表向反方向位移。演示平移效果之前，我先创建一个矩形，长宽都是100，位置在画布的原点 (0, 0) ，也就是紧贴画布的左上角。<canvas id="c" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') // 紧贴原点的矩形，默认是黑色[] ctx.fillRect(0, 0, 100, 100) </script>如果此时在 fillRect 之前设置 translate 就可以实现整个画布位移的效果。// 省略部分代码 // 平移，往右平移10，往下平移20 ctx.translate(10, 20) // 渲染矩形 ctx.fillRect(0, 0, 100, 100)从上图可以看出，矩形距离画布顶部的距离是20，距离画布左侧的距离是10。注意：平移 translate() 要写在 “绘制操作(本例是 fillRect)” 之前才有效。如果在使用 translate 的前后都有渲染操作，画布会多次渲染，并不会自动清屏。比如这样<canvas id="c" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') ctx.fillRect(0, 0, 100, 100) ctx.translate(10, 20) ctx.fillRect(0, 0, 100, 100) </script>再做个明显点的效果，每秒平移一次<canvas id="c" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') ctx.fillRect(0, 0, 100, 100) setInterval(() => { ctx.translate(10, 20) ctx.fillRect(0, 0, 100, 100) }, 1000) </script>可以看出，每次使用 translate() 平移画布，都会基于上一次画布所在的位置进行平移。上图效果是 canvas 的默认效果，所以在执行 translate 之前可以执行 “清屏操作”。清屏<canvas id="c" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') ctx.fillRect(0, 0, 100, 100) setInterval(() => { ctx.clearRect(0, 0, context.width, context.height) ctx.translate(10, 20) ctx.fillRect(0, 0, 100, 100) }, 1000) </script>缩放缩放画布用到的方法是 scale(x, y) ，接收2个参数，第一个参数是x轴方向的缩放，第二个参数是y轴方向的缩放。当 x 或者 y 的值是 0 ~ 1 时代表缩小，比如取值为 0.5 时，表示比原本缩小一半；值为2时，比原本放大一倍。<canvas id="c" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') ctx.font = '60px Arial' ctx.strokeStyle = 'hotpink' ctx.strokeText('雷猴', 40, 100) // 缩小 ctx.scale(0.5, 0.5) // 重新渲染 ctx.strokeText('雷猴', 40, 100) </script>scale() 方法同样会保留原本已经渲染的内容。如果不需要保留原本内容，可以使用 “清屏操作”。注意：scale() 会以上一次缩放为基准进行下一次缩放。副作用：其实从上面的例子就可以看出 scale() 存在一点副作用的，从图中可以看出，缩放后文本的左上角坐标发生了“位移”，文本描边粗细也发生了变化。虽然说是副作用，但也很容易理解，整块画布缩放了，对应的坐标比例其实也跟着缩放嘛。旋转使用 rotate(angle) 方法可以旋转画布，但默认的旋转原点是画布的左上角，也就是 (0, 0) 坐标。我计算旋转角度通常是用 角度 * Math.PI / 180 的方式表示。虽然这样书写代码看上去很长，但习惯后就比较直观的看出要旋转多少度。rotate(angle) 中的参数 angle 代表角度，angle 的取值范围是 -Math.PI * 2 ~ Math.pi * 2。当旋转角度小于 0 时，画布逆时针旋转；反之顺时针旋转。<canvas id="c" height="300" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') ctx.font = '60px Arial' ctx.strokeStyle = 'pink' ctx.strokeText('雷猴', 40, 100) // 旋转 45° ctx.rotate(45 * Math.PI / 180) // 重新渲染 ctx.strokeText('雷猴', 40, 100) </script>修改原点如果需要修改旋转中心，可以使用 translate() 方法平移画布，通过计算移动到指定位置。<canvas id="c" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') ctx.font = '60px Arial' ctx.strokeStyle = 'pink' ctx.strokeText('雷猴', 40, 100) // 设置旋转中心 ctx.translate(90, -50) // 旋转 ctx.rotate(45 * Math.PI / 180) // 重新渲染 ctx.strokeText('雷猴', 40, 100) </script>变换矩阵变换矩阵常用方法有 transform() 和 setTransform() 两个方法。变换矩阵是一个稍微进阶一点的知识了，别怕！前面的 平移 translate、缩放 scale、旋转操作 rotate 可以说都是 transform() 的 “语法糖”。变换矩阵已经涉及到一点数学知识了，但本文不会讲到这些知识，只会讲讲 transform() 是怎么用的。transformtransform() 一个方法就可以实现 平移、缩放、旋转 三种功能，它接收6个参数。transform(a, b, c, d, e, f)a: 水平缩放（x轴方向），默认值是 1；b: 水平倾斜（x轴方向），默认值是 0；c: 垂直倾斜（y轴方向），默认值是 0；d: 垂直缩放（y轴方向），默认值是 1；e: 水平移动（x轴方向），默认值是 0；f: 垂直移动（y轴方向），默认值是 0；这默认值看上去很乱，但如果这样排列一下是不是就比较容易理解了：随便修改几个值试试效果：<canvas id="c" width="400" height="400" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') // 变换矩阵 ctx.transform(1, 1, 1, 2, 30, 40) // 绘制矩形 ctx.fillRect(10, 10, 100, 100) </script>setTransformsetTransform(a, b, c, d, e, f) 同样接收6个参数，和 transform() 一样<canvas id="c" width="400" height="400" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') // 变换矩阵 ctx.setTransform(2, 1, 1, 2, 20, 10) // 绘制矩形 ctx.fillRect(10, 10, 100, 100) </script>transform 和 setTransform 的区别transform() 每次执行都会参考上一次变换后的结果比如下面这个多次执行的情况：<canvas id="c" width="400" height="400" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') ctx.fillStyle = 'rgba(10, 10, 10, 0.2)' ctx.fillRect(10, 10, 100, 100) ctx.transform(1, 0, 0, 1, 10, 10) ctx.fillRect(10, 10, 100, 100) ctx.transform(1, 0, 0, 1, 10, 10) ctx.fillRect(10, 10, 100, 100) ctx.transform(1, 0, 0, 1, 10, 10) ctx.fillRect(10, 10, 100, 100) ctx.transform(1, 0, 0, 1, 10, 10) ctx.fillRect(10, 10, 100, 100) </script>而 setTransform() 每次调用都会基于最原始是状态进行变换。<canvas id="c" width="400" height="400" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') ctx.fillStyle = 'rgba(10, 10, 10, 0.2)' ctx.fillRect(10, 10, 100, 100) ctx.setTransform(1, 0, 0, 1, 10, 10) ctx.fillRect(10, 10, 100, 100) ctx.setTransform(1, 0, 0, 1, 10, 10) ctx.fillRect(10, 10, 100, 100) ctx.setTransform(1, 0, 0, 1, 10, 10) ctx.fillRect(10, 10, 100, 100) ctx.setTransform(1, 0, 0, 1, 10, 10) ctx.fillRect(10, 10, 100, 100) </script>不管改变多少次，setTransform() 都会参考原始状态进行变换。控制像素位图是由像素点组成的，canvas 提供了几个 api 可以操作图片中的像素。很多工具网站也常用接下来说到的几个 api 做图片滤镜。需要注意的是，canvas 提供的操作像素的方法，必须使用服务器才能运行起来，不然没有效果的。可以搭建本地服务器运行本文案例，方法有很多种。比如你使用 Vue 或者 React 的脚手架搭建的项目，运行后就能跑起本文所有案例。又或者使用 http-server 启动本地服务。getImageData()首先要介绍的是 getImageData() 方法，这个方法可以获取指定区域内的所有像素。getImageData(x, y, width, height) 接收4个参数，这4个参数表示选区范围。x 和 y 代表选区的左上角坐标，width 表示选区宽度，height 表示选区高度。还是举例说明比较清楚。下图渲染到画布上的是我的猫Bubble。<canvas id="c" width="400" height="400" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') const img = new Image() // 创建图片对象 img.src = './bubble.jpg' // 加载本地图片 // 图片加载完成后在执行其他操作 img.onload = () => { // 渲染图片 ctx.drawImage(img, 0, 0) // 获取图片信息 const imageData = ctx.getImageData(0, 0, img.width, img.height) console.log(imageData) } </script>打印出来的信息可以点开大图看看data: 图片像素数据集，以数组的形式存放，这是本文要讲的重点，需要关注！colorSpace: 图片使用的色彩标准，这个属性在 Chrome 里有打印出来，Firefox 里没打印。不重要~height: 图片高度width: 图片宽度通过 getImageData() 获取到的信息中，需要重点关注的是 data ，它是一个一维数组，仔细观察发现里面的值没一个是大于255的，也不会小于0。其实 data 属性里记录了图片每个像素的 rgba 值分别是多少。r 代表红色g 代表绿色b 代表蓝色a 透明度这个和 CSS 里的 rgba 是同一个意思。data 里，4个元素记录1个像素的信息。也就是说，1个像素是由 r、g、b、a 4个元素组成。而且每个元素的取值范围是 0 - 255 的整数。 data: **[r1, g1, b1, a1, r2, g2, b2, a2, ......]** 像素点值颜色通道imgData.data[0]49红色 rimgData.data[1]47绿色 gimgData.data[2]51蓝色 bimgData.data[3]255透明度 a………………imgData.data[n-4]206红色 rimgData.data[n-2]200绿色 gimgData.data[n-3]200蓝色 bimgData.data[n-1]255透明度 a如果一张图只有10个像素，通过 getImageData() 获取到的 data 信息中就有40个元素。putImageData()putImageData(imageData, x, y) 可以将 ImageData 对象的数据（图片像素数据）绘制到画布上。putImageData(imgData, x, y, dirtyX, dirtyY, dirtyWidth, dirtyHeight) 也可以接收更多参数。imageData: 规定要放回画布的 ImageData 对象x: ImageData 对象左上角的 x 坐标，以像素计y: ImageData 对象左上角的 y 坐标，以像素计dirtyX: 可选。水平值（x），以像素计，在画布上放置图像的位置dirtyY: 可选。水平值（y），以像素计，在画布上放置图像的位置dirtyWidth: 可选。在画布上绘制图像所使用的宽度dirtyHeight: 可选。在画布上绘制图像所使用的高度比如，我要将图片复制到另一个位置<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') const img = new Image() // 创建图片对象 img.src = './bubble.jpg' // 加载本地图片 // 图片加载完成后在执行其他操作 img.onload = () => { // 渲染图片 ctx.drawImage(img, 0, 0) // 获取图片信息 const imageData = ctx.getImageData(0, 0, img.width, img.height) // 将图片对象输出到 (100, 100) 的位置上 ctx.putImageData(imageData, 100, 100) } </script>可以实现复制的效果。透明知道前面两个 api 就可以实现透明效果了。前面讲到，通过 getImageData() 获取的是一个数组类型的数据，每4个元素代表1个像素，就是rgba，而 a 表示透明通道，所以只需修改每组像素的最后1个元素的值，就能修改图片的不透明度。<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') const img = new Image() // 创建图片对象 img.src = './bubble.jpg' // 加载本地图片 // 图片加载完成后在执行其他操作 img.onload = () => { // 渲染图片 ctx.drawImage(img, 0, 0) // 获取图片信息 const imageData = ctx.getImageData(0, 0, img.width, img.height) for (let i = 0; i < imageData.data.length; i += 4) { imageData.data[i + 3] = imageData.data[i + 3] * 0.5 } // 将图片对象输出到 (100, 100) 的位置上 ctx.putImageData(imageData, 100, 100) } </script>滤镜要做不同的滤镜效果，其实就是通过不同的算法去操作每个像素的值，我在 《Canvas 10款基础滤镜（原理篇）》 讲到相关知识，有兴趣的工友可以点进去看看渐变在 css 和 svg 里都有渐变，canvas 肯定也不会缺失这个能力啦。canvas 提供了 线性渐变 createLinearGradient 和 径向渐变 createRadialGradient。线性渐变 createLinearGradient在 canvas 中使用线性渐变步骤如下：创建线性渐变对象: createLinearGradient(x1, y1, x2, y2)添加渐变颜色: addColorStop(stop, color)设置填充色或描边颜色: fillStyle 或 strokeStylecreateLinearGradient(x1, y1, x2, y2)在 createLinearGradient(x1, y1, x2, y2) 中，x1, y1 表示渐变的起始位置，x2, y2 表示渐变的结束位置。比如水平方向的从左往右的线性渐变，此时的 y1 和 y2 的值是一样的。两个点就可以确定一个渐变方向。addColorStop(stop, color)addColorStop(stop, color) 方法可以添加渐变色。第一个参数 stop 表示渐变色位置的偏移量，取值范围是 0 ~ 1。第二个参数 color 表示颜色。填充渐变实际编码演示一下<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') // 1. 创建线性渐变对象 const lgrd = ctx.createLinearGradient(10, 10, 200, 10) // 2. 添加渐变颜色 lgrd.addColorStop(0, 'pink') lgrd.addColorStop(1, 'yellow') // 设置填充色 ctx.fillStyle = lgrd // 创建矩形，填充 ctx.fillRect(10, 10, 200, 200) </script>如果想修改渐变的方向，只需在使用 createLinearGradient() 时设置好起点和终点坐标即可。除了填充色，描边渐变和文本渐变同样可以做到。描边渐变<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') const lgrd = ctx.createLinearGradient(10, 10, 200, 10) lgrd.addColorStop(0, 'pink') lgrd.addColorStop(1, 'yellow') ctx.strokeStyle = lgrd ctx.lineWidth = 10 ctx.strokeRect(10, 10, 200, 200) </script>文本渐变<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') const lgrd = ctx.createLinearGradient(10, 10, 200, 10) lgrd.addColorStop(0, 'pink') lgrd.addColorStop(1, 'yellow') const text = '雷猴' ctx.font = 'bold 100px 黑体' ctx.fillStyle = lgrd ctx.fillText(text, 10, 100) </script>多色线性渐变在 0 ~ 1 的范围内，addColorStop 可以设置多个颜色在不同的位置上。// 省略部分代码 lgrd.addColorStop(0, '#2a9d8f') // 绿色 lgrd.addColorStop(0.5, '#e9c46a') // 黄色 lgrd.addColorStop(1, '#f4a261') // 橙色径向渐变 createRadialGradient径向渐变是从一个点到另一个点扩散出去的渐变，是圆形（椭圆也可以）渐变。直接看效果<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') const rgrd = ctx.createRadialGradient(70, 70, 0, 70, 70, 60) rgrd.addColorStop(0, 'yellow') rgrd.addColorStop(1, 'pink') ctx.fillStyle = rgrd ctx.fillRect(10, 10, 120, 120) </script>用 createRadialGradient 可以创建一个径向渐变的对象。使用步骤和 createLinearGradient 一样，但参数不同。createRadialGradient(x1, y1, r1, x2, y2, r2)x1, y1: 渐变开始的圆心坐标r1: 渐变开始的圆心半径x2, y2: 渐变结束的圆心坐标r2: 渐变结束的圆心半径同样使用 addColorStop 设置渐变颜色，同样支持多色渐变。渐变的注意事项渐变的定位坐标是参照画布的，超出定位的部分会使用最临近的那个颜色。我用线性渐变举例。<canvas id="c" width="600" height="600" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') const lgrd = ctx.createLinearGradient(200, 0, 400, 400) lgrd.addColorStop(0, 'pink') lgrd.addColorStop(1, 'yellow') ctx.fillStyle = lgrd ctx.fillRect(10, 10, 160, 160) ctx.fillRect(220, 10, 160, 160) ctx.fillRect(430, 10, 160, 160) ctx.fillRect(10, 210, 160, 160) ctx.fillRect(220, 210, 160, 160) ctx.fillRect(430, 210, 160, 160) ctx.fillRect(10, 430, 160, 160) ctx.fillRect(220, 430, 160, 160) ctx.fillRect(430, 430, 160, 160) </script>上面的例子中，我只创建了一个渐变，然后创建了9个正方形。此时正方形的填充色取决于出现在画布中的位置。可以修改一下 createLinearGradient() 的定位数据对照理解。// 省略部分代码 const lgrd = ctx.createLinearGradient(200, 0, 400, 400)如果想每个图形都有自己的渐变色，这需要定制化配置，每个创建每个图形之前都单独创建一个渐变色。<canvas id="c" width="600" height="600" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') // 粉 - 黄 渐变 const lgrd1 = ctx.createLinearGradient(10, 10, 160, 160) lgrd1.addColorStop(0, 'pink') lgrd1.addColorStop(1, 'yellow') ctx.fillStyle = lgrd1 ctx.fillRect(10, 10, 160, 160) // 橘黄 - 蓝紫 渐变 const lgrd2 = ctx.createLinearGradient(210, 10, 380, 160) lgrd2.addColorStop(0, 'bisque') lgrd2.addColorStop(1, 'blueviolet') ctx.fillStyle = lgrd2 ctx.fillRect(220, 10, 160, 160) </script>所以不管是填充色还是秒变颜色，每个元素最好都自己重新设定一下。不然可能会出现意想不到的效果~阴影阴影在前端也是很常用的特效。 依稀记得当年还用 png 做阴影效果。在 canvas 中，和阴影相关的属性主要有以下4个：shadowOffsetX: 设置或返回阴影与形状的水平距离。默认值是0。大于0时向正方向偏移。shadowOffsetY: 设置或返回阴影与形状的垂直距离。默认值是0。大于0时向正方向偏移。shadowColor: 设置或返回用于阴影的颜色。 默认黑色。shadowBlur: 设置或返回用于阴影的模糊级别。 默认值是0，数值越大模糊度越强。相信使用过 css 阴影属性的工友，理解起 canvas 阴影也会非常轻松。<canvas id="c" width="300" height="200" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') ctx.shadowOffsetX = 10 // x轴偏移量 ctx.shadowOffsetY = 10 // y轴偏移量 ctx.shadowColor = '#f38181' // 阴影颜色 ctx.shadowBlur = 10 // 阴影模糊度，默认0 ctx.fillStyle = '#fce38a' // 填充色 ctx.fillRect(30, 30, 200, 100) console.log(ctx.shadowOffsetX) // 输出阴影x轴方向的偏移量：10 </script>除了图形外，文本和图片都可以设置阴影效果。<canvas id="c" width="300" height="200" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') ctx.shadowOffsetX = 10 // x轴偏移量 ctx.shadowOffsetY = 10 // y轴偏移量 ctx.shadowColor = '#b83b5e' // 阴影颜色 ctx.shadowBlur = 10 // 阴影模糊度，默认0 const text = '雷猴' ctx.font = 'bold 100px 黑体' ctx.fillStyle = '#fce38a' ctx.fillText(text, 10, 100) </script>路径在 Canvas 从入门到劝朋友放弃（图解版） —— 新开路径 中我讲到 新开路径 和 关闭路径 的用法，本节会在上篇的基础上丰富更多使用细节。本节要讲的是beginPath(): 新开路径closePath(): 关闭路径isPointInPath(): 判断某个点是否在当前路径内beginPath()beginPath() 方法是用来开辟一条新的路径，这个方法会将当前路径之中的所有子路径都清除掉，以此来重置当前路径。如果你的画布上有几个基础图形（直线、多边形、圆形、弧、贝塞尔曲线），如果样式相互之间受到影响，那你可以立刻想想在绘制新图形之前是不是忘了使用 beginPath() 。先举几个例子说明一下。污染：颜色、线条粗细受到污染后面的样式覆盖了前面的样式。<canvas id="c" width="300" height="200" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') // 第一条线，粉色 ctx.moveTo(50, 40) ctx.lineTo(150, 40) ctx.strokeStyle = 'pink' // 粉色描边 ctx.stroke() // 第二条线，红色 ctx.moveTo(50, 80) ctx.lineTo(150, 80) ctx.strokeStyle = 'red' // 红色描边 ctx.lineWidth = 10 // 表面粗细 ctx.stroke() </script> 污染：图形路径污染比如画布上有一条直线和一个圆形，不使用 beginPath() 开辟新路径的话，它们可能会“打架”。<canvas id="c" width="300" height="200" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') // 第一条线，粉色 ctx.moveTo(50, 40) ctx.lineTo(150, 40) ctx.strokeStyle = 'pink' // 粉色描边 ctx.stroke() // 圆形 ctx.arc(150, 120, 40, 0, 360 * Math.PI / 180) ctx.lineWidth = 4 ctx.stroke() </script> 明明直线和圆形是没有交集的，为什么会有一条倾斜的线把两个元素连接起来？解决办法除了上面两种情况外，可能还有其他更加奇怪的情况（像极喝醉了假酒），都可以先考虑是不是要使用 beginPath() 。比如这样做。<canvas id="c" width="300" height="200" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') // 第一条线，粉色 ctx.moveTo(50, 40) ctx.lineTo(150, 40) ctx.strokeStyle = 'pink' // 粉色描边 ctx.lineWidth = 10 ctx.stroke() // 圆形 ctx.beginPath() // 开辟新的路径 ctx.arc(150, 120, 40, 0, 360 * Math.PI / 180) ctx.strokeStyle = 'skyblue' // 蓝色描边 ctx.lineWidth = 4 ctx.stroke() </script>在使用 arc 或者 moveTo 方法之前加上一句 ctx.beginPath() 就可以有效解决以上问题。这个例子中，如果没用 ctx.beginPath() ，canvas 就会以为 线 和 圆形 都属于同一个路径，所以在画圆形时，下笔的时候就会把线的“结束点”和圆的“起点”相连起来。stroke() 和 fill() 都是以最近的 beginPath() 后面所定义的状态样式为基础进行绘制的。注意事项前面的样式会覆盖后面元素的默认样式，即使使用了 beginPath() 。<canvas id="c" width="300" height="200" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') // 第一条线，粉色 ctx.moveTo(50, 40) ctx.lineTo(150, 40) ctx.strokeStyle = 'pink' // 粉色描边 ctx.lineWidth = 10 // 表面粗细 ctx.stroke() // 第二条线，红色 ctx.beginPath() ctx.moveTo(50, 80) ctx.lineTo(150, 80) ctx.stroke() </script>第一条先设置了 strokeStyle 和 lineWidth ，第二条线并没有设置这两个属性，即使在绘制第二条线的开始时使用了 ctx.beginPath() ，第二条线也会使用第一条线的 strokeStyle 和 lineWidth 。除非第二条线自己也有设置这两个属性，不然就会沿用之前的配置项。"特殊情况"还要补充一个 “特殊情况”。<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas> <script> const cnv = document.getElementById('c') const ctx = cnv.getContext('2d') // 第一条线，粉色 ctx.moveTo(50, 30) ctx.lineTo(150, 30) ctx.strokeStyle = 'pink' // 粉色描边 ctx.lineWidth = 10 // 描边粗细 ctx.stroke() // 矩形 ctx.strokeStyle = 'red' // 红色描边 ctx.strokeRect(50, 50, 200, 100) </script>这个例子中，绘制矩形 rect 前并没有用 beginPath() ，但矩形的红色描边并没有影响直线的粉色描边。其实还不止 strokeRect() ，还有 fillRect()、strokeText()、fillText() 都不会影响其他图形，这些方法都只会绘制图形，不会影响原本路径。closePath()closePath() 方法可以关闭当前路径，它可以显示封闭某段开放的路径。这个方法常用于关闭圆弧路径或者由圆弧、线段创建出来的开放路径。closePath() 是关闭路径，并不是结束路径。关闭路径，指的是连接起点与终点，也就是能够自动封闭图形。结束路径，指的是开始新的路径。基础用法举个例子会更直观<canvas id="c" width="300" height="200" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') ctx.moveTo(50, 40) ctx.lineTo(150, 40) ctx.lineTo(150, 140) ctx.stroke() </script>上面的代码通过 moveTo 和 lineTo 画了3个点，使用 stroke() 方法把这3个点连起来，就形成了上图效果。但如果此时在 stroke() 前使用 closePath() 方法，最终出来的路径将自动闭合（将起点和终点连接起来）。<canvas id="c" width="300" height="200" style="border: 1px solid #ccc;"></canvas> <script> const context = document.getElementById('c') const ctx = context.getContext('2d') ctx.moveTo(50, 40) ctx.lineTo(150, 40) ctx.lineTo(150, 140) ctx.closePath() // 关闭路径 ctx.stroke() </script>注意事项看到上面的例子后，可能有些工友会觉得使用 ctx.lineTo(50, 40) 连接回起点也有同样效果。// 省略部分代码 ctx.moveTo(50, 40) ctx.lineTo(150, 40) ctx.lineTo(150, 140) ctx.lineTo(50, 40) ctx.stroke()确实在描边为1像素时看上去效果是差不多的，但如果此时将 lineWidth 的值设置得大一点，就能看到明显区别。// 省略部分代码 ctx.lineWidth = 10 ctx.moveTo(50, 40) ctx.lineTo(150, 40) ctx.lineTo(150, 140) ctx.lineTo(50, 40) // 连接回起点 ctx.stroke()如果用 closePath() 自动闭合路径的话，会出现以下效果// 省略部分代码 ctx.lineWidth = 10 ctx.moveTo(50, 40) ctx.lineTo(150, 40) ctx.lineTo(150, 140) ctx.closePath() // 关闭路径 ctx.stroke()本文到此就完结了，但 canvas 的知识点还没完，还有很多很多，根本学不完的那种。

人工智能技术有好的一方面，又不好的地方，要区别对待，吸取精华，去其糟粕。目前市场上有很多AI大模型，可以支持聊天，写文稿，创作等，部分可以生成图片，以下是7个很不错的免费网站，供参考。1，讯飞星火网站： https://xinghuo.xfyun.cn/desk简介：讯飞星火认知大模型是科大讯飞发布的大模型。该模型具有7大核心能力，即文本生成、语言理解、知识问答、逻辑推理、数学能力、代码能力、多模交互。2023年5月6日，科大讯飞正式发布讯飞星火认知大模型并开始不断迭代；6月9日，星火大模型V1.5正式发布；8月15日，星火大模型V2.0正式发布；9月5日，星火大模型正式面向全民开放；10月24日，星火大模型V3.0正式发布。该模型已迭代至V3.5版本。2，豆包网站： https://www.doubao.com/简介：豆包是字节跳动公司基于云雀模型开发的 AI 工具，提供聊天机器人、写作助手以及英语学习助手等功能，它可以回答各种问题并进行对话，帮助人们获取信息，支持网页 Web 平台，iOS 以及安卓平台，但 iOS 需要使用 TestFlight 安装。根据其官方用户协议，豆包的服务可以通过网页、应用程序（可能包含不同版本）、小程序等多种形式提供，同时也包括了供第三方网站和应用程序使用的软件开发工具包（SDK）和应用编程接口（API）。3，insCode网址： https://inscode.csdn.net/简介：InsCode 的 Ins 是 Inspiration，意思是创作、寻找有灵感的代码。InsCode 为每位开发者提供了免费的 1 核/2 GB 云端开发环境。InsCode 的 Cloud IDE 是运行于浏览器的集成开发环境（IDE），开发者只需要浏览器，有网络环境，就可以随时随地写代码，不用下载安装，不受硬件、环境的影响。InsCode 的 Cloud IDE 底层基于 VSCode 开发，使用体验与桌面版 VS Code 几乎一致，提供了高效的文件搜索、Git 版本控制、Debug 调试、数据库、终端、在线预览等功能。使用文档介绍：https://inscode-doc.inscode.cc/ide/interface.html4，文心一言网站： https://yiyan.baidu.com/简介：文心一言（ERNIE Bot）是百度研发的知识增强大语言模型，能够与人对话互动，回答问题，协助创作，高效便捷地帮助人们获取信息、知识和灵感。文心一言基于飞桨深度学习平台和文心知识增强大模型，持续从海量数据和大规模知识中融合学习，具备知识增强、检索增强和对话增强的技术特色。同时，文心一言也将为人类带来更美好的生活。未来，文心一言将持续升级，提升在千亿级别知识图谱上的多模态大模型能力，应用在搜索、信息流、智能音箱等互联网产品中，带来更智能的AI对话式搜索。同时，文心一言也将通过百度智能云对外提供服务，未来可应用于智能客服、智能家居、智能驾驶、智能音箱、机器人等多个场景。5，通义千问网站： https://tongyi.aliyun.com/qianwen/简介：通义千问是阿里云推出的一个超大规模的语言模型，功能包括多轮对话、文案创作、逻辑推理、多模态理解、多语言支持。通义千问能够跟人类进行多轮的交互，也融入了多模态的知识理解，且有文案创作能力，能够续写小说，编写邮件等。此外，通义千问是一种基于知识图谱的问答系统，通过自动化的方式回答用户提出的问题。它利用大规模的知识图谱和自然语言处理技术，能够理解用户的问题并提供准确的答案。通义千问的应用领域非常广泛，可以广泛应用于金融、医疗教育物流等各个行业和领域。6，360智脑网站： https://ai.360.com/简介：360智脑是由360公司开发的人机协作技术，旨在通过人工智能技术实现人机协作，共同创造智慧未来。360智脑基于深度学习和机器学习技术，能够自动学习和分析海量数据，并通过与人的交互和协作，提供更加智能、高效的解决方案。360智脑具有自主学习能力和适应能力，可以持续提升智能水平。作为人机协作的一个典型应用，360智脑具有许多优势。首先，它能够充分利用人类的智慧和创造力，通过与人的交互，从人类的经验和知识中获取灵感和启发，使得机器能够更好地理解和解决问题。其次，360智脑可以通过学习和分析海量数据，快速发现规律和趋势，为人类提供更加精准的决策支持。此外，360智脑还可以自动化完成一些复杂的任务，提高工作效率和生产力。最重要的是，人机协作可以将人的专长与机器的计算能力相结合，实现更高水平的创新和发展。360智脑在企业中有着广泛的应用前景。它可以提升生产力、优化流程、提高效率，为企业创造更大的价值。同时，360智脑也注重人工智能技术的稳定性、可靠性和安全性，采用了分布式架构设计、数据加密技术和安全认证机制等措施来保证企业数据的安全性和隐私性。7，红薯智语网站： https://space.chinaz.com/简介：红薯智语是一个专为小红书用户设计的智能文案生成工具。它通过上传图片和输入关键词，快速生成符合用户选择风格和场景的文案，助力用户的内容在小红书上脱颖而出。红薯智语拥有庞大的1500万条小红书文案库，深度学习用户表达习惯和偏好，支持关键词、自定义风格和场景标签，实现高度个性化文案。该工具简单易用，用户可以轻松提升内容质量，成为小红书创作领域的得力助手。同时，红薯智语注重用户隐私保护，文案生成服务不收集、存储或使用上传图片相关的个人信息。

Network 灰鸽宝典专栏主要关注服务器的配置，前后端开发环境的配置，编辑器的配置，网络服务的配置，网络命令的应用与配置，windows常见问题的解决等。文章目录工作中，我们经常会使用github来承享别人的代码果实，同时我们也会把自己的成果分享给别人，互相帮助。今天的这篇图文教程非常重要，目标是使用Github来创建一个远程仓库，并和本地仓库对接，同时要做上传新内容到github仓库的任务。假设我们已经拥有账户，并通过用户名和密码登录到PC的页面上：https://github.com/步骤1: 点击右上角的+号，创建新仓库一个仓库包含所有项目文件，包括修订历史。步骤2: 填写仓库名称和介绍如图所示，在相应的位置，先写好标记信息，点击创建。步骤3: 完成创建，获取git的url地址通过上面创建好远程仓库，点击code的小三角，弹出url地址，这里复制 https://github.com/dajianshi/vue-cesium.git，留着下面的步骤使用。步骤4: 进入本地工程，使用git init创建本地仓库打开本地工程调出Powershell或者cmd， 执行 git init步骤5: 本地仓库对接远程仓库。git remote add origin https://github.com/dajianshi/vue-cesium.git步骤6: 添加文件、注释、本地换分支，上传远程仓库添加文件： git add .添加注释： git commit -m " init project"更换本地仓库分支： git branch -M main上传到远程仓库： git push -u -f origin main注意：新建本地仓库默认为master分支，第3步要进行转换为main分支。上传完后的效果：常见问题（1）：git push时候的问题（1）Git在push推送时，报错提示信息如下：hint: Updates were rejected because the tip of your current branch is behindhint: its remote counterpart. Integrate the remote changes (e.g.hint: ‘git pull …’) before pushing again.原因分析：是由于本地和远程仓库两者代码文件不同步，因此需要先pull，进行合并然后再进行push解决方法：1、先使用pull命令：git pull --rebase origin main2、再使用push命令：git push -u origin main常见问题（2）：git pull时候的问题There is no tracking information for the current branch.Please specify which branch you want to merge with.See git-pull(1) for details.git pullIf you wish to set tracking information for this branch you can do so with:git branch --set-upstream-to=origin/ release原因分析：使用git在本地新建一个分支后，需要做远程分支关联。如果没有关联，git会在下面的操作中提示你显示的添加关联。关联目的是在执行git pull, git push操作时就不需要指定对应的远程分支，你只要没有显示指定，git pull的时候，就会提示你。解决方法git branch --set-upstream-to=origin/remote_branch your_branch其中，origin/remote_branch是你本地分支对应的远程分支；your_branch是你当前的本地分支。结尾语Network 灰鸽宝典为开发配置保驾护航，让服务运行快捷平稳。 希望某个知识点就能帮助你，欢迎学习GIS的朋友一起交流。《 Openlayers 综合示例200+ 》，《 leaflet示例教程100+ 》，《 Cesium示例教程100+》，《MapboxGL示例教程100+》。

Git的基本命令大全设置git config --global user.name “youname”git config --global user.email “youemail”git config --global hello.test onlytest//全局配置文件位于 %userprofile%/.gitconfig, 本地配置指cmd的当前工作目录获取git config --get user.namegit config --get-all user.name //从各个级别(本地 全局)的配置文件中取配置值git config --get-regexp user* //用正则指定想获取的配置项删除git config --global --unset hello.testgit config --global --remove-section hello显示git config -lgit config --global -list#显示帮助git config -h //命令行里显示简要帮助git config --help //浏览器打开git安装目录下的html帮助文件初始化本地git仓库创建目录 初始化本地git仓库mkdir myprojectcd myprojectgit init //创建空的git仓库或重新初始化已有的仓库，创建.git目录(objects, refs/heads, refs/tags, HEAD和模板文件)git init-db //同 git-initgit fsck //检查仓库有没有错误git gc //用垃圾回收机制清除由于reset造成的垃圾代码添加文件并提交git add / git add .git commit -m “some comments”git commit -a -m “add and commit”查看状态git diff //工作目录 和 index的差异比较git diff --cached//index和HEAD(最近一次提交)的差异比较git diff HEAD //工作目录同HEAD的比较git diff … #分支比较git status //当前分支状态查看日志git log / git log -pgit log … //显示两个标签之间的提交日志git log … //显示tag1标签之后的提交日志git log --since=“2 weeks ago”git log -n 3 //查看最近3次的提交日志git log v1.0… somefolder //somefolder从v1.0后的提交日志gitk --since=“2 weeks ago”git show HEAD //查看最近一次提交日志撤销修改//git reset 是指 撤销到哪个commitId,缺省commitId 则为HEADgit reset //若当前修改stage了，但未提交，则回退，HEAD->indexgit reset HEAD //HEAD->index 同上git reset --hard HEAD //working tree, index file 都撤销到最后一次commit的状态git reset --soft HEAD^ //恢复到上一次commit的代码 soft表示不改动index file和working treegit reset HEAD //默认是 --mixed, index file 和 commit都会撤销到最后一次commit之前的状态， working file不受影响。git reset – //撤销某文件的staged状态 (git status查看变化) HEAD->indexgit reset – . #撤销当前文件夹的staged状态git rebase //重设基分支管理创建git branch mybranch //创建分支git checkout -b local_name origin/remote_name #基于远端分支创建新分支如：git checkout -b dev origin/dev，作用是checkout远程的dev分支，在本地起名为dev分支，并切换到本地的dev分支git branch //基于某标签建立分支查看git branch -a //显示所有分支git branch -r //显示远端分支git branch //列出所有分支git show-branch //显示所有分支 信息多一点git branch -v //同上切换 合并git checkout mybranch //切换分支 ,git checkout -b otherBranch 创建并切换git checkout master//do some change in mastergit merge mybranch //合并分支到主干//若有冲突 手动解决冲突后，再次提交vimgit commit -a -m “conflit resolved” //解决冲突后重新提交gitk //可视化分支查看界面删除git branch -d mybranch //分支合并到主干后 删除分支git branch -D mybranch //无论分支是否合并 都执行删除添加和查看远端仓库git remote add origin repoUrl //添加远端仓库git remote show origin显示远端仓库的详细信息(fetchUrl pushUrl, branches, “local branches configured for ‘git pull’” , "local refs configured for ‘git push’ ")推送数据git push origin localBranch:remoteBranch//推送数据//本地master推送到远程的remaster 如：git push origin master:remaster检出代码//检出代码到本地某文件夹, repoUrl可以为远端url或本地路径//(注:只clone远端仓库的当前分支，并非全部分支都clone过来)git clone//clone 远端仓库的某个分支git clone -b <remote_branch> <remote_repo>//pull的意思是指从远端git仓库fetch修改的代码，//然后merge到本地的git仓库当前分支/指定分支中git pull master//根据本地分支-远程分支的对应关系从远端拉取更新//如git clone的仓库和自动和远程仓库的default分支建立对应关系git pullgit fetch origin remote_branch_name:local_branch_name//拉取远端git仓库master分支到本地mybranch2分支git fetch master:mybranch2查看git对象信息(commit, tag, branch)git show //查看某个提交的信息，git log可获得commitidgit show HEAD //HEAD可以认为是最近一次commit的 commitid 同 git log -n 1 -pgit show HEAD^ //显示上一次commit的信息(parent commit)git show HEAD^^ //显示上上次commitgit show HEAD~3 //显示前3次commitgit show HEAD^1 //显示第1个上次commit(parent commit)git show //显示分支信息最近一次提交的信息标签管理git tag //给最近的提交加标签 git tag v1.0git tag //给某次commit加标签(起别名)git show //显示某标签对应commit的信息查看git对象//查看git对象内容(tree, blob, HEAD ,index)git cat-file -t //-t 获取id对应对象的类型git cat-file commit //查询一个commit对象git cat-file blob //查看二进制对象的内容git ls-tree //查看树对象git ls-files --stage //查看index file的内容cd .gitcat HEAD搜索内容//内容搜索git grep “keyword” //在某分支的文件中 搜索关键字git grep “keyword” //在所有历史记录中搜索查看帮助//获取帮助git -h //直接在命令行显示用法git --help //用浏览器打开对应的文档

本示例是显示柱状图，分别是横向展示和纵向展示。关键是X轴和Y轴的参数互换。横向示例效果横向示例源代码（共81行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-22 */ <template> <div class="container"> <h3>vue+echarts：柱状图横向展示</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); myChart.setOption({ title: { text: '世界人口' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: {}, color:['red','orange'], xAxis: { type: 'value', boundaryGap: [0, 0.01] }, yAxis: { type: 'category', data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'] }, series: [{ name: '2011', type: 'bar', data: [18203, 23489, 29034, 104970, 131744, 630230] }, { name: '2012', type: 'bar', data: [19325, 23438, 31000, 121594, 134141, 681807] } ] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style> 纵向示例效果纵向示例源代码（共81行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-22 */ <template> <div class="container"> <h3>vue+echarts：柱状图纵向展示</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); myChart.setOption({ title: { text: '世界人口' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: {}, color:['red','orange'], xAxis: { type: 'category', data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'] }, yAxis: { type: 'value', boundaryGap: [0, 0.01] }, series: [{ name: '2011', type: 'bar', data: [18203, 23489, 29034, 104970, 131744, 630230] }, { name: '2012', type: 'bar', data: [19325, 23438, 31000, 121594, 134141, 681807] } ] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style>

git 在使用的过程中，有的时候我们需要更换一个分支才存贮数据，作为版本的一个迭代或者是阶段性成果的一个里程碑。 如何来做操作呢？在git中，可利用checkout命令转换分支，该命令的作用就是切换分支或恢复工作树文件，语法为“git checkout 分支名”；当参数设置为“-b”时，可以在新分支创建的同时切换分支，语法为“git checkout -b 分支名”。查看所有分支git branch -a创建分支git branch newBranch切换分支git checkout branchName创建并切换分支git checkout -b branchName(如v1.0.0)强行远程分支创建，并上传git push -u -f origin v1.0.0GIT通常的步骤：常从 remote 拉取最新代码：git pull建立本地分支 feature/xxxx（xxxx一般为任务的名称）：git checkout -b feature/xxxx写代码， git commit -m “有意义的描述”一次 Merge Request 可以有几个 commit，但不要太多，比如别超过 5 个。 git commit -m信息写中文。描述简短，有意义。push 到远程仓库：git push --set-upstream origin feature/xxxx建立到 develop 的 Merge Request：在 gitlab 中点击 “Create Merge Request”，source 为 feature/xxxx，target 为 develop。Code Review：根据大家的 review 意见，追加 commit，或者修改原有 commit。冲突解决，与 master 分支代码有冲突：git pull origin mastergit rebase master解决冲突：用编辑器打开冲突文件，git add，git commitgit rebase --continue冲突解决，与 develop 分支代码有冲突。这需要在 code review 中被同意合并 Accepted 之后才着手解决冲突：git pull origin developgit checkout developgit merge --no-diff feature/xxxx解决冲突：用编辑器打开冲突文件，然后，git add，git commitgit push develop建立到 master 的 Merge Request：一般合并到 master 意味着上线。结尾语Network 灰鸽宝典为开发配置保驾护航，让服务运行快捷平稳。 希望某个知识点就能帮助你，欢迎学习GIS的朋友一起交流。《 Openlayers 综合示例200+ 》，《 leaflet示例教程100+ 》，《 Cesium示例教程100+》，《MapboxGL示例教程100+》。

Echarts的柱状图通常我们不去设置柱子的宽度，都是以默认的状态来处理。柱条的宽度，不设时自适应。series-bar. barWidth = 自适应设定值可以是绝对值例如 10 或者百分数例如 ‘60%’。百分数基于自动计算出的每一类目的宽度。在同一坐标系上，此属性会被多个 ‘bar’ 系列共享。此属性应设置于此坐标系中最后一个 ‘bar’ 系列上才会生效，并且是对此坐标系中所有 ‘bar’ 系列生效。示例效果示例源代码（共119行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-03 */ <template> <div class="container"> <h3>vue+echarts：修改柱状图的宽度</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); myChart.setOption({ title: { text: '标题：ECharts示例' }, xAxis: { type: 'category', data: ['cuclife', 'openlayers', 'cesium', 'echarts', 'leaflet'] }, yAxis: { type: 'value', name: '技术技能值', //坐标轴名称 nameLocation: 'middle', //坐标轴的位置 nameTextStyle: { color: '#ff00ff', //align:'left', }, nameGap: 50, //坐标轴名称与轴线之间的距离 nameRotate: 90, //坐标轴名字旋转角度值, axisLine: { lineStyle: { color: '#ff00ff' }, symbol: ['none', 'arrow'], //轴线两边的箭头 symbolSize: [8, 12] }, axisTick: { inside: false, //标轴刻度是否朝内，默认朝外 }, axisLabel: { show: true, inside: false, formatter: '{value}' }, splitArea: { show: true, color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'], } }, grid: { x:25, y:55, x2:25, y2:20, containLabel: true }, series: [{ type: 'bar', data: [15, 36, 10, 10, 20], barWidth: 20, // 柱子宽度核心代码 itemStyle: { //静态时显示状态 color: new echarts.graphic.LinearGradient( // (x1,y1) 点到点 (x2,y2) 之间进行渐变 0, 0, 1, 0, [{ offset: 0, color: '#ff00ff' }, // 0 起始颜色 { offset: 0.5, color: '#ffff00' }, // 0 起始颜色 { offset: 1, color: '#ff0000' } // 1 结束颜色 ] ), }, }] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style>

dedecms网站后台采用fckeditor编辑器，使用谷歌Chrome浏览器重新编辑文章的时候，下面会多出很多空格，影响编辑效率，在做资料上传的时候发现内容前面都会有一个空格，网站前台预览的时候文章前面就多出一个空格，影响美观。以上是解决方法：首先找到文件：fckeditor/editor/js/fckeditorcode_gecko.js（该文件一般都在编辑器文件夹下面）然后查找代码：A=E[1]+' '+F[1];将代码修改为：A=E[1]+‘’+F[1];或者A=E[1]+F[1];修改完后，清空浏览器缓存刷新，问题就解决了。出现这种情况，主要是因为fckeditor编辑器加载的js的时候，不同的浏览器对空格的识别存在差异造成的

什么是SVGSVG是一种图像文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是基于XML（Extensible Markup Language），由World Wide Web Consortium（W3C）联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。SVG从1999年由一组加入W3C的公司启动开发，与之前1998年提交给W3C的标准（PGML、VML）构成竞争。SVG从这两个格式吸取了经验。SVG允许3种图形对象类型：矢量图形、栅格图像以及文本。图形对象——包括PNG、JPEG这些栅格图像——能够被编组、设计、转换及集成进先前的渲染对象中。文本可以在任何适用于应用程序的XML名字空间之内，从而提高SVG图形的搜索能力和无障碍性。SVG提供的功能集涵盖了嵌套转换、裁剪路径、Alpha通道、滤镜效果、模板对象以及可扩展性。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG格式具有以下优点：图像文件可读，易于修改和编辑（理论上如此，但实际上却是因为各种不同的SVG档编辑器而可能存储成不易解读的SVG文件）与现有技术可以互动融合。例如，SVG技术本身的动态部分（包括时序控制和动画）就是基于SMIL标准。另外，SVG文件还可嵌入JavaScript（严格地说，应该是ECMAScript）脚本来控制SVG对象SVG图形格式可以方便的创建文字索引，从而实现基于内容的图像搜索SVG图形格式支持多种滤镜和特殊效果，在不改变图像内容的前提下可以实现位图格式中类似文字阴影的效果。SVG图形格式可以用来动态生成图形。例如，可用SVG动态生成具有交互功能的地图，嵌入网页中，并显示给终端用户。SVG格式具有以下缺点：如何和已经占有重要市场份额的矢量图形格式Adobe Animate竞争的问题。事实上，Adobe Animate在Flash CC 2014版及以后的版本就都支持直接导出SVG文件了。SVG的本地运行环境下的厂家支持程度。由于原始的SVG档是遵从XML语法，导致数据采用未压缩的方式存放，因此相较于其他的矢量图形格式，同样的文件内容会比其他的文件格式稍大。Adobe因此使用gzip压缩开发出压缩的SVG档格式，附档名为 .svgz， 但此种文件格式除了Adobe旗下的软件以外，未被广泛支持使用。旧版的SVG Viewer无法正确显示出使用新版SVG格式的矢量图形。SVG与canvas的区别SVG - 实际开发中，多用SVG 不依赖分辨率 支持事件处理器 不适合游戏 大型渲染区域的程序Canvas 依赖分辨率 不支持事件绑定 最适合网页游戏 可以用图片格式保存图像不管是SVG还是Canvas，在一个页面中都可以同时定义多个示例效果图示例源代码 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" viewBox="0 0 1499 1640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"> <g transform="matrix(4.16667,0,0,4.16667,-61.4292,-40.3391)"> <path d="M123.717,371.772L216.981,371.788C225.655,371.789 232.688,378.82 232.686,387.494L123.714,387.478L123.717,371.772Z" style="fill:rgb(198,197,197);fill-rule:nonzero;"/> <path d="M123.714,387.478L232.686,387.494C232.683,396.171 225.648,403.203 216.974,403.201L123.711,403.185L123.714,387.478Z" style="fill:rgb(163,163,163);fill-rule:nonzero;"/> <path d="M123.711,403.185L30.447,403.169C21.773,403.168 14.74,396.136 14.743,387.459L123.714,387.478L123.711,403.185Z" style="fill:rgb(198,197,197);fill-rule:nonzero;"/> <path d="M123.714,387.478L14.743,387.459C14.745,378.785 21.78,371.753 30.454,371.755L123.717,371.772L123.714,387.478Z" style="fill:white;fill-rule:nonzero;"/> <path d="M54.475,333.942C54.479,295.694 85.491,264.696 123.734,264.701L123.723,333.952L54.475,333.942Z" style="fill:rgb(240,79,78);fill-rule:nonzero;"/> <path d="M123.734,264.701C161.98,264.708 192.977,295.716 192.973,333.963L123.723,333.952L123.734,264.701Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/> <path d="M289.438,239.75L295.104,242.165L349.724,113.97L314.939,79.991L310.632,84.398L342.405,115.432L289.438,239.75Z" style="fill:rgb(198,197,197);fill-rule:nonzero;"/> <path d="M303.612,86.449L299.954,82.875L269.243,114.315L272.901,117.89L303.612,86.449Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/> <path d="M223.966,160.67L302.977,237.843C308.693,243.425 308.798,252.584 303.217,258.297L213.86,171.017L223.966,160.67Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/> <path d="M213.86,171.017L303.217,258.297C297.635,264.013 288.478,264.122 282.762,258.54L203.753,181.364L213.86,171.017Z" style="fill:rgb(127,45,45);fill-rule:nonzero;"/> <path d="M318.723,63.659C325.601,70.378 325.731,81.399 319.014,88.281C312.295,95.159 301.271,95.287 294.393,88.568L318.723,63.659Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/> <path d="M180.156,284.552C158.846,306.37 123.882,306.782 102.065,285.471L140.653,245.965L180.156,284.552Z" style="fill:rgb(198,197,197);fill-rule:nonzero;"/> <path d="M278.892,104.439C289.8,115.096 290.005,132.577 279.351,143.486L259.597,124.192L278.892,104.439Z" style="fill:rgb(198,197,197);fill-rule:nonzero;"/> <path d="M202.759,261.415L163.252,222.829L203.753,181.364L282.762,258.54L202.759,261.415Z" style="fill:rgb(198,197,197);fill-rule:nonzero;"/> <path d="M269.665,153.402L249.912,134.108L223.966,160.67L268.647,204.311L269.665,153.402Z" style="fill:rgb(198,197,197);fill-rule:nonzero;"/> <path d="M151.952,234.395L191.458,272.983L202.759,261.415L163.252,222.829L151.952,234.395Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/> <path d="M140.653,245.965L180.156,284.552L191.458,272.983L151.952,234.395L140.653,245.965Z" style="fill:rgb(127,45,45);fill-rule:nonzero;"/> <path d="M259.597,124.192L279.351,143.486L269.665,153.402L249.912,134.108L259.597,124.192Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/> <path d="M143.37,97.074L140.822,91.466L267.699,33.851L302.484,67.83L298.179,72.233L266.405,41.2L143.37,97.074Z" style="fill:white;fill-rule:nonzero;"/> <path d="M296.296,79.301L299.954,82.875L269.243,114.315L265.585,110.741L296.296,79.301Z" style="fill:rgb(240,79,78);fill-rule:nonzero;"/> <path d="M223.966,160.67L144.957,83.495C139.241,77.913 130.084,78.022 124.503,83.735L213.86,171.017L223.966,160.67Z" style="fill:rgb(240,79,78);fill-rule:nonzero;"/> <path d="M213.86,171.017L124.503,83.735C118.922,89.451 119.028,98.607 124.742,104.192L203.753,181.364L213.86,171.017Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/> <path d="M318.723,63.659C311.845,56.94 300.821,57.068 294.102,63.947C287.384,70.825 287.515,81.85 294.393,88.568L318.723,63.659Z" style="fill:rgb(240,79,78);fill-rule:nonzero;"/> <path d="M101.149,207.38C79.836,229.197 80.246,264.163 102.065,285.471L140.653,245.965L101.149,207.38Z" style="fill:white;fill-rule:nonzero;"/> <path d="M278.892,104.439C267.983,93.785 250.501,93.99 239.845,104.898L259.597,124.192L278.892,104.439Z" style="fill:white;fill-rule:nonzero;"/> <path d="M123.746,184.241L163.252,222.829L203.753,181.364L124.742,104.192L123.746,184.241Z" style="fill:white;fill-rule:nonzero;"/> <path d="M230.159,114.814L249.912,134.108L223.966,160.67L179.289,117.031L230.159,114.814Z" style="fill:white;fill-rule:nonzero;"/> <path d="M151.952,234.395L112.447,195.811L123.746,184.241L163.252,222.829L151.952,234.395Z" style="fill:rgb(240,79,78);fill-rule:nonzero;"/> <path d="M140.653,245.965L101.149,207.38L112.447,195.811L151.952,234.395L140.653,245.965Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/> <path d="M259.597,124.192L239.845,104.898L230.159,114.814L249.912,134.108L259.597,124.192Z" style="fill:rgb(240,79,78);fill-rule:nonzero;"/> <path d="M123.717,371.772L192.965,371.781L192.973,333.963L123.723,333.952L123.717,371.772Z" style="fill:rgb(127,45,45);fill-rule:nonzero;"/> <path d="M54.467,371.761L123.717,371.772L123.723,333.952L54.475,333.942L54.467,371.761Z" style="fill:rgb(168,57,53);fill-rule:nonzero;"/> <path d="M173.315,360.432C173.316,363.664 175.936,366.285 179.167,366.284C182.4,366.284 185.019,363.667 185.023,360.433C185.022,357.201 182.402,354.581 179.17,354.581C175.938,354.582 173.318,357.201 173.315,360.432Z" style="fill:white;fill-rule:nonzero;"/> <path d="M152.49,360.429C152.491,363.661 155.11,366.281 158.343,366.281C161.573,366.283 164.194,363.663 164.194,360.431C164.196,357.2 161.577,354.577 158.345,354.577C155.11,354.577 152.49,357.197 152.49,360.429Z" style="fill:white;fill-rule:nonzero;"/> <path d="M131.665,360.425C131.666,363.657 134.283,366.276 137.513,366.279C140.748,366.279 143.369,363.659 143.369,360.427C143.368,357.195 140.748,354.575 137.517,354.572C134.285,354.573 131.665,357.193 131.665,360.425Z" style="fill:white;fill-rule:nonzero;"/> <path d="M104.069,360.419C104.068,363.654 106.688,366.275 109.92,366.274C113.152,366.274 115.773,363.654 115.772,360.422C115.775,357.191 113.152,354.569 109.92,354.57C106.689,354.567 104.067,357.19 104.069,360.419Z" style="fill:white;fill-rule:nonzero;"/> <path d="M83.243,360.418C83.24,363.649 85.86,366.27 89.095,366.27C92.326,366.273 94.948,363.65 94.947,360.418C94.947,357.186 92.327,354.566 89.095,354.566C85.863,354.567 83.242,357.186 83.243,360.418Z" style="fill:white;fill-rule:nonzero;"/> <path d="M62.415,360.414C62.415,363.646 65.035,366.266 68.267,366.266C71.498,366.268 74.119,363.648 74.121,360.417C74.121,357.185 71.502,354.562 68.27,354.562C65.038,354.563 62.417,357.183 62.415,360.414Z" style="fill:white;fill-rule:nonzero;"/> <path d="M299.62,70.847C299.62,75.123 303.087,78.59 307.363,78.591C311.638,78.592 315.105,75.124 315.106,70.849C315.107,66.573 311.64,63.106 307.364,63.105C303.088,63.104 299.622,66.569 299.62,70.847Z" style="fill:white;fill-rule:nonzero;"/> <clipPath id="_clip1"> <path d="M347.738,85.874C348.337,86.086 349.004,86.186 349.736,86.15C352.36,86.021 355.229,83.459 354.757,80.614C350.987,57.967 335.667,40.158 315.05,32.865C309.785,31.003 304.172,29.826 298.322,29.431C295.443,29.239 293.172,32.343 293.301,34.968C293.419,37.343 294.895,38.896 296.857,39.59C297.479,39.81 298.147,39.943 298.837,39.989C303.266,40.289 307.567,41.2 311.645,42.643C328.287,48.529 341.223,63.247 344.197,81.128C344.561,83.302 345.782,85.182 347.738,85.874Z"/> </clipPath> <g clip-path="url(#_clip1)"> <path d="M366.666,51.122L295.44,25.93L282.411,62.768L353.637,87.961L366.666,51.122Z" style="fill:rgb(50,52,77);fill-rule:nonzero;"/> </g> <path d="M367.369,83.706C367.971,83.918 368.637,84.021 369.363,83.983C372.02,83.856 374.816,81.301 374.384,78.447C371.599,60.043 362.987,42.744 349,30.259C341.018,23.136 331.921,17.798 322.111,14.328C314.619,11.678 306.708,10.116 298.57,9.687C295.688,9.533 293.419,12.565 293.549,15.224C293.662,17.574 295.139,19.163 297.104,19.858C297.725,20.078 298.395,20.209 299.085,20.245C305.674,20.593 312.06,21.9 318.094,24.034C341.725,32.393 359.959,53.413 363.827,78.962C364.157,81.141 365.41,83.013 367.369,83.706Z" style="fill:rgb(50,52,77);fill-rule:nonzero;"/> </g> </svg>

fckeditor是一个好用的编辑器，为了更好用，我们可以通过修改文件来个性化这个编辑器。如下图：修改方法：1）修改fckconfig.js文件：FCKConfig.CoreStyles ={// Basic Inline Styles.‘Bold’ : { Element : ‘strong’, Overrides : ‘b’ },‘Italic’ : { Element : ‘em’, Overrides : ‘i’ },‘Underline’ : { Element : ‘u’ },‘StrikeThrough’ : { Element : ‘strike’ },‘zjCode’ : { Element : ‘zjcode’ },‘zjPre’ : { Element : ‘zjpre’ },2，修改FCKeditor/editor/skins/fck_strip.gif文件每个图标占地大小16px*16px, 利用ps在底部增加2个图标，画布高度增加32px。3，修改FCKeditor/editor/js/fckeditorcode_gecko.js4，修改zh-cn.jsInsertMedia : “多媒体”,InsertAddon : “附件”,InsertDedePage : “分页符”,InsertQuote : “引用”,InsertBr : “段内换行符”,//补充 ->Axiaoguotu : “效果图”,Ahexin : “核心代码”,Ayufa : “基本语法”,Acankao : “参考网站”,Ademo : “查看样例”,zjCode : “zj代码块”,zjPre : “zj区域块”,5，FCKeditoreditorcss ck_editorarea.css文件zjpre{ background: #646464;display: inline-block;}zjcode{ background: #f0aeae;display: inline-block;}

NPM在使用用户名和密码登录后，他觉得还不是很安全，需要用一个手机软件来生成一个随机验证码，两者同步，来做二次验证。类似于手机银行的优盾或者验证码验证。双重验证：标准验证方法，其中一个因素是密码。 使用用户名和密码登录后，可以批准通知或输入提供的验证码。电话登录。 一种双重验证版本，可让你无需密码即可登录，同时将用户名和移动设备与指纹、人脸或 PIN 配合使用。代码生成。 作为支持验证器应用的任何其他帐户的代码生成器。Authenticator适用于使用双重验证并支持基于时间的一次性密码 (TOTP) 标准的任何帐户。下载软件Microsoft Authenticator APK（安卓系统）安装Authenticator应用后，请按照以下步骤添加帐户：打开Authenticator应用。选择右上角的 (+) 。将相机指向 QR 代码或按照帐户设置中提供的说明操作。帐户显示在Authenticator应用中后，可以使用一次性代码登录。NPM一次性密码验证通过上面的展示图，打开软件后，npm的一次性密码30s更新一次， npm命令中需要提供的时候，将6位数字提供上去即可。结尾语Network 灰鸽宝典为开发配置保驾护航，让服务运行快捷平稳。 希望某个知识点就能帮助你，欢迎学习GIS的朋友一起交流。《 Openlayers 综合示例200+ 》，《 leaflet示例教程100+ 》，《 Cesium示例教程100+》，《MapboxGL示例教程100+》。灰鸽网络的梦想这是一个关于一只名叫阿灰的鸽子的故事。阿灰生活在一个繁忙的城市里，他有一个梦想，那就是通过网络连接全世界的人们。阿灰的梦想始于他看到的一只信鸽的故事。那只信鸽在战争期间，不畏艰险，将重要信息传递给前线的战士们。阿灰被这个故事深深打动，他决定也要成为一个传递信息的使者。阿灰开始学习如何使用网络。他学会了如何使用电子邮件、社交媒体和网络电话。他发现，网络的力量是巨大的，它可以让人们跨越地理距离，分享和获取信息，甚至建立深厚的友谊。阿灰开始在城市中寻找其他鸽子，教他们如何使用网络。他告诉他们，虽然网络看似复杂，但只要愿意学习，任何人都可以掌握。阿灰还告诉他们，网络不仅可以用来娱乐和交流，还可以用来传递重要的信息。阿灰的行动引起了人们的注意。他们开始关注这只特别的鸽子，以及他如何改变其他动物的生活。人们开始帮助阿灰，为他提供更好的设备和更稳定的网络连接。随着时间的推移，阿灰的网络团队不断扩大，他们开始在城市中建立了一个特殊的网络社区。这个社区的成员不仅是鸽子，还包括其他动物和人类。他们通过共享信息、互相帮助和学习新的技能，使整个社区变得更加繁荣和充满活力。阿灰的故事传遍了整个世界。他的事迹激发了其他动物和人类对网络的热情。他们开始意识到，网络不仅是一种工具，也是一种连接世界、创造更美好未来的力量。最后，阿灰实现了他的梦想。他通过网络连接了全世界的人们，使他们能够更好地理解和尊重彼此。阿灰的故事告诉我们，只要有梦想和勇气，任何动物都可以超越自己的界限，为世界带来积极的影响。

本文深入探讨了强制缓存和协商缓存的概念、原理以及它们之间的区别。通过详细的代码示例，读者可以更好地理解这两种缓存策略的实际应用。此外，文章还提供了一些实用的技巧和最佳实践，帮助开发人员有效地利用缓存来提高应用的性能和用户体验。一、强制缓存的概念与原理强制缓存是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省带宽，提高访问速度，降低服务器压力。强制缓存的工作原理是通过HTTP响应头中的特定字段来控制的。这些字段通常包括Expires和Cache-Control，它们指示了资源的缓存有效时间。当浏览器在有效时间内再次请求同一资源时，它会直接从本地缓存中获取该资源，而不会向服务器发送请求。具体来说，以下是强制缓存的一些关键点：Expires：在HTTP 1.0版本中，通过Expires响应头来实现强制缓存。Expires表示未来资源会过期的时间点。如果当前时间超过了Expires设定的时间，资源缓存时间到期，浏览器会重新向服务器请求资源。Cache-Control：在HTTP 1.1版本中，引入了Cache-Control响应头，它提供了更灵活的缓存控制机制。例如，可以通过max-age参数设置缓存的最大生存时间（以秒为单位），如Cache-Control: max-age=1200表示缓存有效时间为1200秒。启发式缓存：如果响应头中没有设置任何缓存相关的字段，浏览器会采用启发式算法来决定是否缓存资源。这通常是基于响应头中的Date和Last-Modified值来计算的。总的来说，强制缓存是一种重要的性能优化手段，它可以减少网络延迟，提升用户体验，并减轻服务器的负载。然而，需要注意的是，强制缓存可能会导致用户在资源更新时无法及时看到最新内容，因此开发者需要根据资源的特性和变更频率来合理设置缓存策略。二、协商缓存的概念与原理协商缓存是浏览器与服务器之间进行通信以确认缓存资源是否仍然有效的过程。协商缓存主要涉及两组HTTP头字段：ETag和If-None-Match，以及Last-Modified和If-Modified-Since。它们的工作原理如下：ETag/If-None-Match：当浏览器第一次请求某个资源时，服务器会返回一个ETag（实体标签），它是一个资源版本的唯一标识符。浏览器在后续请求该资源时，会在请求头中携带If-None-Match字段，其值为先前接收到的ETag。服务器会根据这个值来判断资源是否有更新。如果有更新，服务器会返回新的资源和新的ETag；如果没有更新，服务器会返回304 Not Modified状态码，告诉浏览器可以使用缓存中的资源。Last-Modified/If-Modified-Since：类似于ETag机制，但Last-Modified记录的是资源最后修改的时间。浏览器在后续请求时，会在请求头中携带If-Modified-Since字段，其值为先前接收到的Last-Modified时间。服务器会检查资源的最后修改时间是否在这个时间之后。如果是，说明资源有更新，服务器会返回新资源和新的Last-Modified时间；如果不是，服务器同样会返回304 Not Modified状态码。协商缓存的目的是确保浏览器能够获取最新的资源，同时避免不必要的数据传输。这种机制特别适用于那些可能被频繁更新的资源，如在线商城的商品信息、社交媒体的动态等。通过协商缓存，可以在不牺牲内容新鲜度的前提下，提高网站的性能和用户体验。三、两者区别在实际应用中，强制缓存和协商缓存的区别主要体现在以下几个方面：检查时机：在浏览器加载资源时，会先检查强缓存是否命中。如果强缓存中有该资源的副本且未过期，则直接使用，不会发送HTTP请求到服务器。只有当强缓存未命中或资源已过期时，浏览器才会进行协商缓存，即向服务器发送HTTP请求以确认资源是否有更新。应用场景：强制缓存适用于不经常变动的静态资源，如图片、CSS和JavaScript文件。这些资源的变更频率较低，因此可以设置较长的缓存时间，以提高加载速度并减少服务器压力。协商缓存则适用于那些可能被频繁更新的资源，通过服务器的验证确保用户能够获取最新的资源内容。实现机制：强制缓存主要通过Expires和Cache-Control这两个HTTP头字段来控制。它们告诉浏览器资源的有效时间，从而避免不必要的网络请求。协商缓存则依赖于ETag或If-Modified-Since等机制，需要服务器参与校验资源是否发生变化，并根据情况返回相应的状态码（如304 Not Modified）。综上所述，强制缓存和协商缓存在实际应用中的检查时机、应用场景以及实现机制上存在明显差异。了解这些差异有助于开发者更合理地设置缓存策略，以优化网站性能和用户体验。四、适用场景强制缓存通常应用于不经常变动的静态资源，而协商缓存适用于可能被频繁更新的资源。首先，强制缓存是通过Expires和Cache-Control这两个HTTP头字段来控制的，它们定义了资源的缓存时间。这种缓存机制特别适合于那些不经常变化的文件，如网站的图标、CSS样式表、JavaScript文件等。这些资源一旦被缓存，浏览器在有效时间内再次请求时将直接从本地缓存中加载，而不会向服务器发送请求，这样可以显著减少网络流量和提高页面加载速度。例如，一个网站的主题CSS文件，它可能在部署后很少更改，因此可以设置较长的缓存时间，以确保用户在访问时能够快速加载页面。其次，协商缓存则是当强缓存失效或者资源已过期时，浏览器会携带缓存标识（如ETag、If-Modified-Since）向服务器发起请求，由服务器根据这些缓存标识决定是否使用缓存的过程。这种机制适用于那些可能被频繁更新的资源，如新闻网站的文章内容、社交媒体的动态数据等。通过协商缓存，服务器能够确保用户获取到最新的内容，同时减少不必要的数据传输。例如，一篇博客文章在短时间内被作者多次修改，协商缓存就能确保用户每次访问时都能收到最新版本的文章。总的来说，了解这两种缓存策略的具体应用场景，可以帮助开发者更合理地设置和管理Web项目的缓存，从而优化用户体验和提高网站性能。五、示例说明假设有一个静态资源文件，其 URL 为/image.jpg。强制缓存：服务器响应头中设置Cache-Control: max-age=3600，表示该资源在浏览器中缓存 1 小时。在这 1 小时内，浏览器直接使用缓存，无需再次请求。协商缓存：服务器响应头中设置ETag: "123456789"或Last-Modified: Thu, 15 Jun 2023 09:00:00 GMT。下次请求时，浏览器将ETag或Last-Modified值发送给服务器。如果资源未变化，服务器返回 304 状态码，浏览器继续使用缓存；如果资源有更新，服务器返回新的资源。

前端框架的发展史可以大致分为以下几个阶段：古典时代（早期Web开发）：90年代初至2000年初，网页主要由静态HTML、CSS和少量JavaScript构建。样式表最初是用来增强网页样式的，而JavaScript主要用于简单的客户端交互和验证。DOM操作与jQuery兴起：大约在2006年，随着jQuery的发布，它极大地简化了对DOM的操作，使得动态效果和AJAX请求变得更加容易。jQuery为开发者提供了一致且强大的API来处理跨浏览器兼容问题，成为当时最流行的JavaScript库。Ajax异步通信时代：2005年左右，Google Maps等应用开始广泛应用Ajax技术，实现了页面局部刷新，提高了用户体验，标志着Web 2.0时代的到来。MVC与MVVM模式的引入：AngularJS（Angular 1.x）在2009年推出，首次将MVC（Model-View-Controller）架构模式引入到前端开发中，通过双向数据绑定解决了复杂的前端逻辑和状态管理问题。后续出现了Knockout.js等也支持MVVM模式的库。React出现与组件化开发：Facebook于2013年开源了React，它带来了虚拟DOM的概念，并提倡组件化开发，允许开发者构建可复用的UI组件。React并不严格遵循MVC或MVVM模式，而是提出了单向数据流的理念。Vue.js的崛起：Vue.js于2014年发布，吸取了Angular和React的优点，提供了轻量级的MVVM解决方案，以其易上手、灵活和高性能著称，逐渐在社区内获得了广泛认可。现代前端框架与库：Angular（Angular 2+）在2016年进行了大规模重构，采用TypeScript开发，提供了一个完整的前后端同构解决方案。Vue.js后续版本持续发展和完善其生态，包括Vuex（状态管理）、Vue Router（路由管理）等。Svelte和Stencil等编译时优化框架也开始崭露头角，它们试图通过编译减少运行时的性能开销。Web Components标准的推进也影响了框架的设计和发展，许多框架开始支持或者借鉴这一标准。小程序与原生APP的融合：微信小程序等平台引入了定制化的前端开发模型，基于这些框架，开发者可以在小程序环境中构建接近原生应用体验的轻量级应用。随着时间推移，前端框架不断演进以适应更复杂的应用场景和更高的性能需求，同时也推动了诸如模块打包工具（Webpack）、状态管理（Redux）、服务端渲染（SSR）等周边技术和最佳实践的发展。

HTML页面的性能优化是提升用户体验、提高网站效率和竞争力。通过优化，页面加载更快，用户满意度上升，同时节省资源并提升搜索引擎排名。这样可以增加流量和转化率，降低跳出率，使网站更具优势。提高 HTML 页面性能并加快加载速度是一个综合性的任务，涉及多个方面。以下是一些详细的方法和策略，可以帮助你优化 HTML 页面的性能：优化图片：压缩图片：使用图像编辑软件或在线工具，将图片压缩到合适的尺寸和质量，以减少文件大小。选择正确的图片格式：根据图片的特点和使用场景，选择合适的图片格式（如 JPEG、PNG、SVG 等）。懒加载图片：使用懒加载技术，只有当图片进入视口时才加载，避免一次性加载所有图片。2.  减少 HTTP 请求：合并 CSS 和 JavaScript 文件：将多个 CSS 文件或 JavaScript 文件合并成一个，减少 HTTP 请求的数量。避免重复加载资源：确保在页面中不重复加载相同的资源。3.  缓存策略：设置合适的缓存头：通过设置 HTTP 缓存头，指示浏览器缓存静态资源，减少重复请求。利用 CDN（内容分发网络）：使用 CDN 来缓存和分发静态资源，提高加载速度。4.  代码优化：精简 HTML 和 CSS：删除不必要的代码和空格，压缩和合并样式表，减少文件大小。避免过度嵌套和冗余代码：保持代码结构简洁，避免不必要的嵌套和重复代码。5.  服务器优化：启用 Gzip 压缩：在服务器端对传输的文件进行 Gzip 压缩，减少传输数据量。优化服务器响应时间：确保服务器的配置和性能良好，快速处理请求。6.  使用浏览器缓存：设置Expires 或 Cache-Control 头部：指定资源的过期时间或缓存策略，使浏览器能够缓存资源。利用 ETag 或 Last-Modified 头部：提供资源的版本标识，以便浏览器判断是否需要重新获取。7.  异步加载和延迟加载：将非关键资源异步加载，例如脚本、样式表等，避免阻塞页面渲染。实现延迟加载，例如滚动到特定位置时再加载内容，提高用户体验。8.  优化 DNS 查找：减少 DNS 查找次数：通过合并和优化 DNS 查找，减少页面加载时的 DNS 延迟。9.  监控和性能分析：使用工具进行性能分析：使用浏览器开发者工具或专业的性能分析工具，监测页面加载时间和发现性能瓶颈。进行 A/B 测试：对比不同优化策略的效果，选择最有效的方法。10.  移动端优化：优化图片和资源：针对移动设备，提供合适尺寸的图片和资源，减少数据量。考虑响应式设计：确保页面在不同设备上的兼容性和性能。11.  代码压缩和混淆：压缩 JavaScript 和 CSS 文件：使用工具压缩和混淆代码，减小文件大小并提高加载速度。12.  CDN 加速：使用内容分发网络（CDN）：将静态资源分发到全球各地的节点，使用户能够从最近的节点获取资源，加速加载。13.  避免不必要的重定向：减少页面重定向：避免不必要的重定向操作，因为它们会增加加载时间。14.  数据库优化：如果页面涉及数据库操作，优化数据库查询，避免低效的查询和过多的数据传输。15.  定期性能测试和优化：定期进行性能测试：使用性能测试工具测试页面的加载速度，并根据结果进行优化。跟踪性能指标：关注关键的性能指标，如首字节时间（TTFB）、加载时间等，持续改进。优化 HTML 页面性能是一个持续的过程，需要综合考虑多个因素，并根据实际情况进行测试和调整。

一，kimi技术Kimi技术是指一款名为“Kimi智能助手”的人工智能产品的核心技术，尤其体现在其在大模型长上下文窗口技术方面的重大突破。这项技术允许Kimi能够处理极长的文本输入，例如高达200万字的无损上下文，意味着它在处理长篇文章、连续对话或者需要理解大量背景信息的任务时，能够保持对前后文的高度记忆和理解能力。具体来说，大模型长上下文窗口技术通常指的是自然语言处理（NLP）中的Transformer架构的一种优化或扩展，使得模型能够有效地考虑更广泛的文本历史信息而不丢失重要细节。相较于传统的短窗口上下文处理方式，Kimi所采用的技术显著提升了模型对于复杂语义关系的理解能力和连贯性表达的能力。Kimi技术的先进之处在于：长文本处理能力：可以读取并理解超长篇幅的文本，这对诸如文学创作、法律文件解析、科研文献摘要生成等场景有着重要意义。无损上下文：保证了即便是在处理极其庞大的数据量时，模型仍能准确记住文本中的每一个细节，这对于需要精准信息检索、情境还原的应用至关重要。技术竞争力：根据行业观察者和分析师的观点，Kimi在长文本处理方面的技术进步使其在市场竞争中占据了一定的优势地位。市场反响与应用潜力：由于Kimi的技术突破，不仅引发了股市投资热潮，还带动了整个AI行业的竞争格局变化，多家大型科技公司迅速跟进布局长文本赛道，显示出该技术的广泛应用前景和商业价值。Kimi技术通过提升人工智能模型在处理长上下文文本上的表现，极大地拓宽了AI在各个领域实际应用的可能性，促进了相关产业的发展和革新。、二，kimi应用Kimi智能助手是由月之暗面（Moonshot AI）开发的一款基于自研千亿参数大模型构建的对话式人工智能助手，具有以下几个关键特点和功能：长文本处理能力：Kimi智能助手最大的技术亮点在于其支持超长无损上下文处理，能够一次性处理多达200万字的文本信息。这意味着在复杂的对话环境中，Kimi能够记忆和理解大量的历史对话内容，确保对话连贯性和信息一致性，特别适用于需要深度理解及分析大量文本信息的应用场景。对话交互：Kimi能够进行智能对话，用户可以通过自然语言与其进行互动，询问各种问题，获得详尽的回答，同时还能得到建议和解决方案，帮助用户完成工作和生活中的任务。多功能集成：智能搜索：能够实时搜索信息，整合网络资源，快速为用户提供准确且全面的答案。文件阅读与整理：能帮助用户速读文件、整理资料，提升信息处理效率。灵感激发与辅助创作：可用于激发创意，提供写作素材和构思辅助，适合创作者使用。日常管理工具：除了专业用途，也可以作为日常生活助手，提供日程管理、信息查询等多种服务。4.   App形式与兼容性：Kimi智能助手有iOS和Android版本的官方应用程序供用户下载安装，用户可以在iPhone、iPad、iPod touch以及各种安卓设备上使用。5.  市场影响与评价：Kimi智能助手凭借其先进的技术和应用场景，在市场上受到了热烈关注和高度评价，不仅引领了A股市场相关概念股票的上涨趋势，也预示着AI助手在未来的广阔发展前景。总之，Kimi智能助手是一款综合能力强、适应性强的人工智能产品，它的出现标志着中国在大模型和自然语言处理技术方面的又一重要突破，为个人用户、企业乃至各行业提供了更为智能化的信息管理和决策支持工具。

服务器常用的状态码及其对应的含义100——客户必须继续发出请求101——客户要求服务器根据请求转换HTTP协议版本200——交易成功201——提示知道新文件的URL202——接受和处理、但处理未完成203——返回信息不确定或不完整204——请求收到，但返回信息为空205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件206——服务器已经完成了部分用户的GET请求300——请求的资源可在多处得到301——删除请求数据302——在其他地址发现了请求数据303——建议客户访问其他URL或访问方式304——客户端已经执行了GET，但文件未变化305——请求的资源必须从服务器指定的地址得到306——前一版本HTTP中使用的代码，现行版本中不再使用307——申明请求的资源临时性删除400——错误请求，如语法错误401——请求授权失败402——保留有效ChargeTo头响应403——请求不允许404——没有发现文件、查询或URl405——用户在Request-Line字段定义的方法不允许406——根据用户发送的Accept拖，请求资源不可访问407——类似401，用户必须首先在代理服务器上得到授权408——客户端没有在用户指定的时间内完成请求409——对当前资源状态，请求不能完成410——服务器上不再有此资源且无进一步的参考地址411——服务器拒绝用户定义的Content-Length属性请求412——一个或多个请求头字段在当前请求中错误413——请求的资源大于服务器允许的大小414——请求的资源URL长于服务器允许的长度415——请求资源不支持请求项目格式416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求500——服务器产生内部错误501——服务器不支持请求的函数502——服务器暂时不可用，有时是为了防止发生系统过载503——服务器过载或暂停维修504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长505——服务器不支持或拒绝支请求头中指定的HTTP版本结尾语Network 灰鸽宝典为开发配置保驾护航，让服务运行快捷平稳。 希望某个知识点就能帮助你，欢迎学习GIS的朋友一起交流。《 Openlayers 综合示例200+ 》，《 leaflet示例教程100+ 》，《 Cesium示例教程100+》，《MapboxGL示例教程100+》。网络的梦想这是一个关于一只名叫阿灰的鸽子的故事。阿灰生活在一个繁忙的城市里，他有一个梦想，那就是通过网络连接全世界的人们。阿灰的梦想始于他看到的一只信鸽的故事。那只信鸽在战争期间，不畏艰险，将重要信息传递给前线的战士们。阿灰被这个故事深深打动，他决定也要成为一个传递信息的使者。阿灰开始学习如何使用网络。他学会了如何使用电子邮件、社交媒体和网络电话。他发现，网络的力量是巨大的，它可以让人们跨越地理距离，分享和获取信息，甚至建立深厚的友谊。阿灰开始在城市中寻找其他鸽子，教他们如何使用网络。他告诉他们，虽然网络看似复杂，但只要愿意学习，任何人都可以掌握。阿灰还告诉他们，网络不仅可以用来娱乐和交流，还可以用来传递重要的信息。阿灰的行动引起了人们的注意。他们开始关注这只特别的鸽子，以及他如何改变其他动物的生活。人们开始帮助阿灰，为他提供更好的设备和更稳定的网络连接。随着时间的推移，阿灰的网络团队不断扩大，他们开始在城市中建立了一个特殊的网络社区。这个社区的成员不仅是鸽子，还包括其他动物和人类。他们通过共享信息、互相帮助和学习新的技能，使整个社区变得更加繁荣和充满活力。阿灰的故事传遍了整个世界。他的事迹激发了其他动物和人类对网络的热情。他们开始意识到，网络不仅是一种工具，也是一种连接世界、创造更美好未来的力量。最后，阿灰实现了他的梦想。他通过网络连接了全世界的人们，使他们能够更好地理解和尊重彼此。阿灰的故事告诉我们，只要有梦想和勇气，任何动物都可以超越自己的界限，为世界带来积极的影响。

本示例是解决显示电池电量状态的柱状图，具体的核心代码请参考源代码。示例效果示例源代码（共102行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-27 */ <template> <div class="container"> <h3>vue+echarts：实现电池效果的柱状图</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); myChart.setOption({ title: { text: '标题：ECharts示例' }, xAxis: { type: 'category', data: ['cuclife', 'openlayers', 'cesium', 'echarts', 'leaflet'] }, yAxis: { type: 'value', name: '技术技能值', //坐标轴名称 nameLocation: 'middle', //坐标轴的位置 nameTextStyle: { color: '#ff00ff', }, nameGap: 50, //坐标轴名称与轴线之间的距离 nameRotate: 90, //坐标轴名字旋转角度值, axisLine: { lineStyle: { color: '#ff00ff' }, symbol: ['none', 'arrow'], //轴线两边的箭头 symbolSize: [8, 12] }, axisTick: { inside: false, //标轴刻度是否朝内，默认朝外 }, axisLabel: { show: true, inside: false, formatter: '{value}' }, splitArea: { show: true, color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)'], } }, grid: { x: 25, y: 55, x2: 25, y2: 20, containLabel: true }, series: [{ // 以下是核心代码 type: 'pictorialBar', //设置类型为象形柱状图 symbol: 'rect', //图形类型，带圆角的矩形 symbolMargin: '3', //图形垂直间隔 symbolRepeat: true, //图形是否重复 symbolSize: [50, 25], //图形元素的尺寸 data: [15, 36, 10, 10, 20], }] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style>

webpack 中有众多loader，每个loader都有特定的功能，用于处理不同类型的文件并将其转换为webpack可以理解和打包的模块 以下是一些常见loader及其用途：1. babel-loader使用：将ES6+的JavaScript语法转换为向后兼容的ES5语法，以便在旧版浏览器中运行。// webpack.config.js module.exports = { module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] } ] } }; 配置时通常需要.babelrc或babel.config.js来指定转换规则。2. ts-loader 或 awesome-typescript-loader使用：将TypeScript文件转换为JavaScript。module.exports = { module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/ } ] }, resolve: { extensions: ['.tsx', '.ts', '.js'] } }; 3. css-loader使用：处理CSS文件，使其可以作为模块导入JavaScript中。module.exports = { module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] } }; style-loader 将CSS内联到JS中，而css-loader则负责解析CSS文件中的import和url()等。4. postcss-loader使用：配合css-loader，用于添加自定义CSS扩展如autoprefixer（自动加前缀）、CSS Modules等功能。5. less-loader 或 sass-loader使用：处理LESS或SASS/SCSS样式表文件，转换为CSS。6. file-loader 或 url-loader使用：处理项目中的图片、字体等静态资源文件，生成引用路径或内联Base64编码。7. html-loader使用：处理HTML文件中的图片、链接等标签，转换为可被webpack正确处理的模块依赖。8. eslint-loader使用：在构建过程中执行ESLint检查。使用loader的基本步骤是在webpack配置文件（webpack.config.js）中设置module.rules属性，针对不同类型的文件编写测试规则（test）并指定对应的loader。对于某些loader，可能还需要额外的配置选项。loader可以串联使用（从右到左执行），例如use: ['style-loader', 'css-loader']表示先用css-loader处理CSS，然后用style-loader处理结果。

请求网页的整个渲染过程可以分为多个阶段，从用户在浏览器中输入网址到页面最终呈现在屏幕上，大致流程如下：用户输入网址：用户在浏览器地址栏输入网址（Uniform Resource Locator, URL），按下回车键发起请求。域名解析（DNS 查询）：浏览器首先需要将输入的域名转换为对应的IP地址。这个过程通过DNS查询来完成，浏览器向DNS服务器发送查询请求，获取目标服务器的IP地址。建立TCP连接：获取到服务器IP地址后，浏览器通过TCP/IP协议与服务器建立连接。这通常涉及到TCP的三次握手过程，目的是为了建立一个稳定可靠的传输通道。发送HTTP请求：连接建立后，浏览器构造HTTP请求报文，其中包括请求行（方法、URL、协议版本）、请求头（如User-Agent、Accept-Language、Cookie等）、以及可能存在的请求体（比如POST请求中的数据）。服务器处理请求：服务器接收到请求后，根据请求的URL和HTTP方法执行相应的操作，如读取文件、执行脚本或数据库查询等，并准备HTTP响应。返回HTTP响应：服务器将生成的响应报文（包括状态码、响应头、响应体）通过TCP连接发送给浏览器。浏览器接收响应：浏览器接收到响应报文后，开始解析响应内容。如果是HTML文件，就进入页面渲染阶段。解析HTML：浏览器首先解析HTML内容，构建Document Object Model (DOM) 树，这是一个内部表示形式，用于表示文档的所有元素和它们之间的层级关系。解析CSS：同时，浏览器解析CSS样式表，构建CSS Object Model (CSSOM) 树，记录样式信息。构建渲染树（Render Tree）：将DOM树和CSSOM树结合，构建渲染树。渲染树包含了所有可视节点及其计算后的样式信息。布局（Layout / Reflow）：浏览器根据渲染树计算每个节点在屏幕上的确切位置和大小，这个阶段也被称为“布局”或“重排”。绘制（Painting）：有了布局信息后，浏览器按照从后往前的顺序绘制各节点，包括文本、颜色、图像等，这个过程叫做“合成”或“绘制”。重绘（Repaint）和重排（Reflow）：如果在渲染过程中有样式变化导致布局改变，浏览器可能需要重新进行布局和绘制工作。增量渲染与交互反馈：在某些情况下，浏览器会采用增量渲染的方式，优先展示可见内容，随后逐步加载和渲染剩余部分。同时，对于用户的交互操作（滚动、点击等），浏览器会实时调整渲染树和布局，给出及时的反馈。资源加载：浏览器并行加载页面所需的其他资源，如图片、字体、JavaScript文件等。JavaScript可能会修改DOM或CSSOM，进而影响渲染结果，因此在执行JavaScript的同时，浏览器会监控可能引发的变化并适时重排和重绘。页面加载完毕：当主文档加载完毕，所有资源加载和渲染工作完成后，浏览器呈现完整页面给用户。以上整个过程涉及到复杂的调度算法、缓存机制、并发处理和异步加载等技术手段，确保页面高效、准确地渲染和交互。

本示例修改K线度的颜色，方法参考源代码。 这里面讲一下K线图的四个数字，如[20, 34, 10, 38],第一位：20代表开盘价格，第二位：34代表闭盘价格，第三位：10代表最低价，第四位：38代表最高价。示例效果示例源代码（共73行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-17 */ <template> <div class="container"> <h3>vue+echarts：更改K线度颜色，解释K线图4个数字意义</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); myChart.setOption({ tooltip: { trigger: 'axis', }, title: { text: '基本K线图' }, xAxis: { data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'] }, yAxis: {}, series: [{ type: 'candlestick', data: [ [20, 34, 10, 38], [40, 45, 30, 50], [31, 38, 31, 44], [38, 15, 5, 42] ], itemStyle: { color: 'yellow', color0: 'blue' } }] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style>

HTML专栏是汇集了一些HTML常常被遗忘的知识，这里算是温故而知新，往往这些零碎的知识点，在你开发中能起到炸惊效果。我们每个人都没有过目不忘，过久不忘的本事，就让这一点点知识慢慢渗透你的脑海。 本专栏的风格是力求简洁明了。 SVG因为体积小，矢量图的缘故，经常会在html页面中引用此种格式的图形。 具体的有以下几种形式：方法1，直接在html中添加SVG代码<!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="2" fill="red" /> </svg> </body> </html> 方法2，使用 <embed> 标签<embed>:优势：所有主要浏览器都支持，并允许使用脚本缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）<embed src="circle1.svg" type="image/svg+xml" />方法3，使用 <object> 标签<object>:优势：所有主要浏览器都支持，并支持HTML4，XHTML和HTML5标准缺点：不允许使用脚本。<object data="circle1.svg" type="image/svg+xml"></object>方法4，使用 <iframe> 标签<iframe>:优势：所有主要浏览器都支持，并允许使用脚本缺点：不推荐在HTML4和XHTML中使用（但在HTML5允许）<iframe src="circle1.svg"></iframe>附识：（1）SVG在线编辑器 网络上有很多网站提供一种支持在线编辑SVG的JS方法。我们借用成功的经验即可。www.zuohaotu.com/svg/c.runoob.com/more/svgeditor/（2）SVG可用的滤镜feBlend - 与图像相结合的滤镜 feColorMatrix - 用于彩色滤光片转换 feComponentTransfer feComposite feConvolveMatrix feDiffuseLighting feDisplacementMap feFlood feGaussianBlur feImage feMerge feMorphology feOffset - 过滤阴影 feSpecularLighting feTile feTurbulence feDistantLight - 用于照明过滤 fePointLight - 用于照明过滤 feSpotLight - 用于照明过滤 （3）示例代码<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(100,100,150); stroke:rgb(0,150,0);stroke-width:3"/> </svg> （4）代码说明第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是"独立的"，或含有对外部文件的引用。standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"。该 DTD 位于 W3C，含有所有允许的 SVG 元素。SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

问题背景：今天在做项目的时候，将nodejs的版本做了升级，从V14.21.3，升级到 V20.10.0 遇到问题，降级到V17.9.1，还是遇到问题，最后降级到V16.20.2。主要是运行打不开，打包不能正常显示。 碰到的其中一个问题就是：npm WARN config global --global, --local are deprecated. Use --location=global instead"问题原因npm 的全局配置–global, --local已弃用。需使用–location=global替代 。问题处理1、找到node的安装路径，如作者的安装路径是：C:\Program Files\nodejs2,、找出文件做出修改通过文本编辑器打开这两个文件，将文件中prefix -g修改成prefix --location=global3,、保存文件测试效果npm -v

Echarts的渐变在上一篇文章中已经讲过 ECharts线性渐变色示例演示（2种渐变方式），这里做了环形图，饼图的一个渐变示例演示，hover到元素后，会呈现出一个阴影。注意，颜色属性可以放在option中，也可以放在series根目录下，还可以向目前的这种形式放置。示例效果示例源代码（共110行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-02 */ <template> <div class="container"> <h3>vue+echarts：环形图线性渐变，hover后显示阴影</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); myChart.setOption({ title: { text: '标题：ECharts示例' }, series: [{ type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'left' }, data: [{ name: 'cuclife', value: 100 }, { name: '大剑师', value: 200 }], emphasis: { label: { show: false, }, itemStyle: { // 高亮时点的颜色，阴影 color: 'blue', shadowBlur: 10, shadowColor: '#f00' }, }, color: [{ type: 'linear', x: 0, y: 0.2113248654051872, x2: 1, y2: 0.7886751345948129, colorStops: [{ offset: 0, color: '#5faef6' // 0% 处的颜色 }, { offset: 1, color: '#ff63eb' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, { type: 'linear', x: 0, y: 0.2113248654051872, x2: 1, y2: 0.7886751345948129, colorStops: [{ offset: 0, color: '#ffD7CC' // 0% 处的颜色 }, { offset: 1, color: '#AFF9F8' // 100% 处的颜色 }], globalCoord: false // 缺省为 false } ], }] }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style> 相关资料参考https://echarts.apache.org/handbook/zh/basics/import专栏介绍在vue和echarts联合技术栈的操控下，本专栏提供行之有效的源代码示例。这里既包括样式的修改，又包括常用bug的解决。（1）提供title示例：展示控制标题的颜色、位置、子标题，连接等（2）提供legend示例：展示控制图例的类型、宽度、高度、位置、间隙，边框、阴影、透明度、偏移，字体、颜色，提示语等（3）提供grid示例：展示控制绘图网格的位置、宽度、高度、边框、阴影等（4）提供xAxis示例：展示控制x 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等（5）提供yAxis示例：展示控制y 轴的位置、类型、名称、字体、对齐方式、边框、阴影、宽度、高度等（6）提供dataZoom示例：展示控制区域缩放的类型、位置、filterMode等（7）提供tooltip示例：展示控制提示框组件的触发方式、位置、样式，标签、动画、内容格式器等（8）提供地理坐标系示例：展示控制地理坐标的经纬度、放缩、位置，距离、字体、边框等（9）提供animation示例：展示控制动画的持续时间、延迟时间、动画方式，连接等（10）提供其他示例：展示series等组件的信息内容。

Echarts的雷达图的拐点大小和形状是可以设置的，在series中设置symbol 相应的属性即可。 使用tooltip的时候，默认状态文字是居中对齐的，不好看。需要在tooltip属性中设置一下，如图所示，效果比较好。示例效果示例源代码（共128行）/* * @Author: 还是大剑师兰特（CSDN） * @下面源代码版权归还是大剑师兰特所有，可供学习或商业项目中借鉴，未经授权，不得重复地发表到博客、论坛，问答，git等公共空间或网站中。 * @Email: 2909222303@qq.com * @First published in CSDN * @First published time: 2023-02-14 */ <template> <div class="container"> <h3>vue+echarts：雷达图设置拐点大小和形状，tooltip后文字不居中对齐</h3> <p>大剑师兰特，还是大剑师兰特</p> <div id="vue-echarts" ref="refEcharts"> </div> </div> </template> <script> import * as echarts from 'echarts'; //局部引用，如果采用全局模式，这里不写 export default { name: 'cuclife', data() { return {} }, methods: { initCharts() { let myChart = echarts.init(this.$refs.refEcharts); myChart.setOption({ tooltip:{ trigger:'item', textStyle:{ align:'left', //提示文字左对齐 fontSize: 12, }, }, title: { text: '基本雷达图' }, legend: { data: ['cuclife', 'openlayers'] }, color: ['orange', 'blue'], radar: { shape: 'circle', //设置图形为圆形 splitNumber: 6, //设置分隔段 radius: '80%', //设置雷达图半径 splitArea: { areaStyle: { color: ['rgba(250,250,250,0.3)', 'rgba(100,0,100,0.1)'] } }, splitLine: { lineStyle: { color: ['rgba(0,200,0,0.1)'], width: 2 } }, indicator: [{ name: 'Sales', max: 6500 }, { name: 'Administration', max: 16000 }, { name: 'Information Technology', max: 30000 }, { name: 'Customer Support', max: 38000 }, { name: 'Development', max: 52000 }, { name: 'Marketing', max: 25000 } ] }, series: [{ name: 'Budget vs spending', type: 'radar', // 设置拐点的大小和形状 symbol :'rect',// 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none', emptyCircle symbolSize : 10, symbolRotate: 45, data: [{ value: [4200, 3000, 20000, 35000, 50000, 18000], name: 'cuclife' }, { value: [5000, 14000, 28000, 26000, 42000, 21000], name: 'openlayers' } ] }] }); myChart.on('click',(param) => { console.log(param) }); } }, mounted() { this.initCharts(); } } </script> <style scoped> .container { width: 840px; height: 580px; margin: 50px auto 0; border: 1px solid rgb(228, 57, 97); } #vue-echarts { width: 800px; height: 460px; border: 1px solid #d8d; margin: 0 auto; } </style>