移动端设备中，难免会涉及到数据的可视化展示、数据统计等等，本篇主要讲解原生微信小程序中嵌入echarts并进行动态渲染，实现数据可视化功能。

微信小程序提供了一个内置地图组件map，官网：mapmap组件提供了地图展示、交互、叠加点线面及文字等功能，同时支持个性化地图样式，可结合地图服务 API 实现更丰富功能。在页面中只需要使用map标签，定义好地图大小即可生成一个地图

官方文档： resolveAlias在app.json中新增resolveAlias配置resolveAlias 进行的是路径匹配，其中的 key 和 value 须以 /* 结尾。通常情况下我们引入绝对路径会以@开头，请看下面的配置

官方文档：自定义 tabBar基础配置首先需要在app.json中设置自定义tabbar然后在项目根目录新建custom-tab-bar文件夹，以组件的形式在该文件夹下新建文件，文件名index在app.json文件的page配置项中新增custom-tab-bar文件路径到这里自定义tabbar的前期配置已经完成。然后使用vant的自定义tabbar {代码...} {代码...} {代...

在开发环境和测试环境中，只要取消了不校验合法域名这一项，基本上请求都是畅通无阻的。在测试环境中，真机预览需要开启开发者调试模式打开调试后，页面请求会正常响应。

解决方法：swiper内部要用block嵌套不要在swiper-item上写style样式有组件就用组件，这里用的vant的图片组件van-image

首选区分通过什么途径获取小程序码这里选为后端生成先通过小程序secret和appid生成access_token，获取access_token凭证用于生成小程序码。然后通过小程序接口，传入刚才生成的access_token，另外带上其它参数，用于生成小程序码。通常在生成小程序码后需要携带参数，所以在生成小程序码时，需要设置scene字段，该字段用...

这两个菜单，无论怎么样都只能跳转第一个，也就是form-component这个页面通过router.getRoutes()打印，查看动态添加的路由信息，发现没什么问题，然后再想为什么只会跳转第一个路由

微信原生写法获取单个dom信息 {代码...} 获取多个dom信息 {代码...} uniapp写法获取单个dom信息 {代码...} 获取多个dom信息 {代码...}

pinia的数据是不会持久存储的，当页面刷新后，pinia中的数据会丢失，所以我们需要使用额外的手段，将pinia中的数据持久化存储，使得页面刷新后数据还在。

CSS 媒体查询为你提供了一种应用 CSS 的方法，仅在浏览器和设备的环境与你指定的规则相匹配的时候 CSS 才会真的被应用，例如“视口宽于 480 像素”的时候。我们可以利用媒体查询来实现响应式布局，适应各种设备(pc、ipad、phone)视口大小。媒体查询参考： 媒体查询

Stylelint 是一个强大、先进的 CSS 代码检查器（linter），可以帮助你规避 CSS 代码中的错误并保持一致的编码风格。Stylelint 的强大源于：拥有超过 100 条内置规则 来检查最新的 CSS 语法和功能支持 插件 以创建你自己的规则自动 修复 大多数代码格式上的问题支持创建或扩展 可共享的配置可定制，让其而符合你的需求经...

EditorConfig 文件中的设置用于在基本代码库中维持一致的编码风格和设置，例如缩进样式、选项卡宽度、行尾字符以及编码等，而无需考虑使用的编辑器或 IDE。

资源引入的弊端：在上面第一种svg的使用方式中，svg是以资源引入的方式使用的，那就意味每使用一个svg就要import一次，在vite中，import算是一个http请求，如果页面使用多个svg，那么就要引入多次，比较消耗性能，如下：

代码格式化工具Prettier安装依赖 {代码...} 安装插件配置Prettier {代码...} 代码格式规范ESLint安装依赖 {代码...} 依赖作用描述eslintESLint 核心库eslint-config-prettier用来覆盖 ESLint 本身的规则配置，关掉所有和 Prettier 冲突的 ESLint 的配置eslint-plugin-prettier使用 Prettier 来替代 ESLint 的格式化功能e...

vite中内置对JSON文件的解析，底层使用@rollup/pluginutils 的 dataToEsm 方法将 JSON 对象转换为一个包含各种具名导出的ES模块，如下：

多个条件的连续判断我们需要建立在第一个条件符合的情况下执行第二个条件 {代码...} 所以你经常会看到这种写法，dom存在则执行dom初始化 {代码...} 这种写法可以多层链式调用 {代码...} 另外，该可以基于此写法，做更保险的操作 {代码...} 这种写法有返回值 {代码...} es6有个一链判断运算符，与这种概念类似，不过链判...

MDN对Web Worker的说明Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，它们可以使用 XMLHttpRequest（尽管 responseXML 和 channel 属性总是为空）或 fetch（没有这些限制）执行 I/O。一旦创建，一个 worker 可以将消息发送到创建它的 JavaScript 代码，通...

其它资源Vite 也对下面几类格式提供了内置的支持: 媒体类文件：包括 mp4 、 webm 、 ogg 、 mp3 、 wav 、 flac 和 aac 。 字体类文件：包括 woff 、 woff2 、 eot 、 ttf 和 otf 。 文本类：包括 webmanifest 、 pdf 和 txt 。你可以在 Vite 将这些类型的文件当做一个 ES 模块来导入使用。如果你的项目中还存在其它格式...

这两种方案的选择：对于较小的资源，适合内联到代码中，一方面对代码体积影响较小，另一方面可以减少不必要的网络请求，优化网络性能。对于较大的资源，推荐单独打包成文件，大文件不推荐内联，内联可能导致上MB的base64字符串内嵌到代码中，导致代码体积庞大，页面加载性能直线下降。

动态使用icon在element plus中动态使用icon，将icon添加到路由，读取icon到菜单项 {代码...} 页面读取icon {代码...} 这里使用的是动态组件，让多个组件使用同一个挂载点，根据条件动态切换，语法： {代码...} menu折叠图标消失消失的原因是因为加上了template标签，去除该标签即可 {代码...} 另外，在element menu中这...

tabs滚动条无法设置右边距，因为内部盒子会占用可见试图的100%宽到这里的可见视图截至可见视图外的算溢出的元素，不参与实际box的边距、大小限定。所以初始的tabs可以设置边距，而最后一个无法设置边距你需要用一个更大的tabs栏将实际的tabs栏套住，设置内边距像是这样，然后配置红色的大tabs栏的内边距就可以了

在pnpm run build的时候该插件就会对图片文件进行压缩。optipng、gifsicle、jpegtran、svgo、pngquant：这些分别代表了不同的图片格式，对应着 PNG、GIF、JPEG、SVG 和其他格式的图片压缩插件。通过设置这些参数为 null，可以禁用相应格式的压缩，如果需要压缩可以根据具体的需求进行配置。

在vite.config.ts中配置 {代码...} 在tsconfig.json中配置：baseUrl、paths避免ts报错以及获得更好的提示 {代码...} 页面使用：直接import "@/xxxxxx"引入即可 {代码...} 如果你使用的是js版本可以直接跳过tsconfig.json的配置

unplugin-vue-components是一款功能十分强大的插件，旨在简化组件的自动导入和使用，可以帮助我们在Vue项目中自动导入并注册我们使用的任何Vue组件，从而提高开发效率。开始：

unplugin-auto-import可以自动识别代码中库或者API的调用，自动导入相应的模块，从而减少了手动导入的工作量，避免反复写import，但这也是按需自动引入，可以减少产物大小，方便很多。

快速上手vite我们这里使用pnpm构建项目pnpm的镜像在国外，所以我们需要切换到国内镜像 {代码...} 初始化创建vite项目 {代码...} 按照选项初始化完成项目后，进入目录，安装依赖 {代码...} 启动项目 {代码...} 出现这个界面就说明启动成功了。vite项目的初始化目录：在该目录中，index.html是项目的根文件，vite默认会把...

Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过渡和动画。这里介绍<Transition>组件，过渡组件一共有 6 个应用于进入与离开过渡效果的 CSS class进入或离开可以由以下的条件之一触发：● 由 v-if 所触发的切换● 由 v-show 所触发的切换● 由特殊元素 <component> 切换的动态组件● 改变特殊的 key 属...

在项目中通过 declare namespace 来声明命名空间我在这里创建了一个global.d.ts文件，在该文件中声明了Menu命名空间，这样就可以在全局使用Menu类型了，无需import引入

如果数值过长，会造成精度丢失，前端用任何转换处理都会造成精度丢失问题。例如下图中的数值转字符串，最后得出的结果精度还是丢失所以最好是原始值就是字符串，这样精度才不会丢失