娃哈哈_的博客

项目场景：使用echarts做业务图表统计，记录一下在项目中图表接口返回的数据处理问题需求描述1、一个统计图中实现多条折现图的显示，如下图所示2、后台返回的数据结构let data = [ { rate:"0.1", date:"20210915", expressBrandName:"顺丰速运", expressBrandId:"SF", }, {

文章目录前言一、Lodop是什么？二、如何使用Lodop1、下载打印插件2、配置打印机3、html中植入打印控件4、调用Lodop对应的JS相关方法接口实现打印功能三、Lodop主要方法接口三、注意点总结前言一般B/S系统总是“页面看到什么才能打印什么”，这种局面即便是采用一些传统打印控件也没有改观。现在利用Lodop简单强大的几个函数，配合JavaScript完全进入了“只看想看的、打印想打的”理想时代！涉及到的PC打印场景：电子面单打印（快递面单）标签打印一、Lodop是什么？.

文章目录前言一、a标签 + download属性二、window.open(url, "_blank")三、form表单四、接口请求 + blob + a标签+ download属性总结前言前端业务开发中，经常会遇到下载图片、文件等需求。核心实现下载功能有：<a href="xxx" downlaod="filname"></a>window.open()form表单提交ajax请求接口，处理文件流转为blob格式在实际业务中，根据实际接口和URL具体情况，制定具

文章目录背景一、webpack5环境要求二、升级步骤1.脚手架webpack-cli2.升级webpack包3.更新webpack相关插件3.1 不推荐或被移除的插件3.2 升级babel到7版本3.3 更新插件4. 修改配置4.1 新增mode选项4.2 CommonsChunkPlugin4.3 module.loaders4.4 node4.5 资源模块4.6 devtool4.7 修改script启动命令总结背景2018年，用vue-cli2创建的webpack3的老项目。此次将项目进行升级配

文章目录前言一、Swiper引入方式1、HTML标签引入方式2、CommonJs引入方式3、ES引入方式（采用）二、使用Swiper总结前言轮播图在前端开发中，是常见需求。而Swiper库是最受前端开发者欢迎的轮播库~Swiper在vue2中可以通过npm install swiper vue-awesome-swiper --save安装使用据目前为止， vue-awesome-swiper 库是不支持vue3的。那在实践中如何在vue3中使用Swiper？一、Swiper引入方式官方

文章目录前言一、开发中需要什么样的字体1. 字体图标2. 特殊字体二、项目中引入字体文件1. 字体文件2. css文件3. 项目使用该字体总结前言在UI设计稿中，可能会有一些特殊字体，或者是一些字体图标。对于特殊字体，大多数用户本地电脑是没有安装该字体的字体包的。为了能够让漂亮特殊的字体能展示在用户PC电脑上，我们通常需要把【字体包文件】植入项目中。它们通常是这样的格式文件：.otf | .woff | .ttf | 格式文件。一、开发中需要什么样的字体1. 字体图标推荐一个比较大而全的字体

文章目录前言一、 Geolocation API二、微信 SDK三、高德地图服务四、腾讯地图服务1.引入库2.读入数据总结前言前端在页面上获取用户定位是很常见的场景，尤其是移动端页面。一、 Geolocation API这是HTML5新推出的地理位置API，但从性能和精确度上来，都不理想。尤其PC端精确地非常低且经常获取失败。用者甚少。二、微信 SDK这种适用于在微信H5场景应用（比如公众号H5），只能在微信浏览器内使用微信的SDK。三、高德地图服务四、腾讯地图服务1.引入库代码如下

问题描述：vue项目，启动项目时，报错如下："Error: No valid exports main found for '/Users/work/company_fc/a/node_modules/colorette'"原因分析：Node版本可能不对解决方案：当前Node默认版本是13.3.0。切换到12.14.1版本， 启动正常。nvm use 12.14.1...

一、背景在chrome浏览器运行前端项目时 ，发现页面渲染很慢，F12打开控制台- network，发现有些请求响应时间长达7s多的时间，点击查看timing如下：如上图所示，该http请求的 waiting(TTFB)时间很长~二、几个重要的概念(加粗为重点)1、Queueing（队列）【资源调度】期间，浏览器有自己的线程限制，所有的请求不可能都能够同时发送，一般chrome的最大并发连接数为6，根据请求顺序，会将所有请求加入队列中，此概念表示在队列所耗费等待的时间。2、Stalled（阻塞

需求【首页】和【我的联系人】页面都对当前用户进行定位，于是通过JS SDK中的wx.getLocation()拿到用户定位。【首页】入口：直接默认进入【我的联系人页】入口：由首页进入项目技术背景vue h5 spa history模式的项目初步思路在index.vue中全局wx.config进行的SDK的配置服务IOS表现【首页】、【我的联系人】都能拿到用户定位，SDK配置正常Andorid 表现【首页】：能拿到用户定位，SDK配置正常【我的联系人】：当由【首页】进入到【我的联系

作用 vue 【缓存】方案，保留组件状态或避免重新渲染，能够缓存当前页面的所有数据用法与**【动态组件】**一起使用：（会缓存不活动的组件实例，而不是销毁它们）<keep-alive> <component :is="view"></component></keep-alive>与**【vue-router】**一起用：<keep-alive> <router-view></router-vi

需求背景移动端H5项目，需要做省市区三级联动选择框，如下图：于是选择了weui库中的Picker组件原始需求与默认Picker组件UI不一致UI图中的选择框每行高度与weui picker默认的每行高度不一致。于是想要改变picker组件的rowHeight高度。在picker api中并没有提供设置rowHeight参数的接口。于是只能把源库下载到本地进行修改。修改picker 默认的每行高度rowHeight想要修改选择框每行高度，要从两方面考虑：1、CSS修改// 修改选框的高度，

一、 问题背景微信公众号的H5页面，在新版本上线后部分用户无法获取最新的页面文件二、无法获取新版本页面的用户特征在上线前某段时间内，访问过该H5页面，手机本地存有该H5页面的缓存三、解决方案【亲测可行】对于JS和CSS静态文件【取以下两种方案其一即可】（1）在引用时加上动态版本号，例如<script src="index.js?v=2.5.0" />（2）动态命名问题，例如利用webpack等打包工具生成HASH文件名<script src="index.123213

一、问题背景2020年4月份，公司公众号的H5页面都不能正常渲染页面，一直在加载loading状态。经F12查看，是因为公司引用的talkingdata第三方打点服务发生故障，JS一直处于pending状态， 由于是script同步引入的该JS，导致页面渲染失败。二、紧急处理办法屏蔽掉所有的talkingdata服务三、后续解决方案1、首先尝试将talkingdata服务由同步引入改...