自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(322)
  • 资源 (1)
  • 论坛 (1)
  • 收藏
  • 关注

原创 解决!!前端项目打包后生成的chunk-vendors文件过大,导致加载太慢

直接使用插件解决这个问题!第一步:先下载这个插件第二步:修改vue.config.js配置文件const CompressionPlugin = require("compression-webpack-plugin")............plugins: [new CompressionPlugin({algorithm: 'gzip',test: /\.(js|css|less)$/, // 匹配文件名th...

2021-06-16 15:15:22 164

原创 钉钉微应用iconfont在Android下图标找不到

低版本android他不支持woff2格式的字体,必须要使用woff格式字体,由于从默认iconfont网站上下载来的字体,woff2排在woff之前,所以导致android无法正确识别到woff了@font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1557465831153'); /* IE9 */ src: url('iconfont.eot?t=1557465831153#iefix') format('embedd

2021-05-10 15:16:00 55

原创 字符串截取substr,substring,slice的区别

相同点这三个方法都可以对字符串进行截取,并且返回一个新的字符串,也就是不会对原字符串进行修改不同点这三个方法的不同之处在于参数不同。substringsubstring() 方法用于提取字符串中介于两个指定下标之间的字符。语法string.substring(start,stop)参数参数 描述 start 必需。一个非负的整数,规定要提取的子串的第一个字符在string中的位置。 stop 可选。一个非负的整数,比要提取的子串的最后一个字..

2021-04-09 15:46:35 48

原创 koa框架的基本使用

1.Koa介绍Koa 是基于 Node.js 平台的下一代 web 开发框架。Koa是由 Express 原班人马打造的,致力于成为一个更小、更富有表现力、更健壮的 Web 框架。 使用 Koa编写 web 应用,可以免除重复繁琐的回调函数嵌套, 并极大地提升错误处理的效率。Koa不在内核方法中绑定任何中间件, 它仅仅提供了一个轻量优雅的函数库,使得编写 Web 应用变得得心应手,开发思路和 Express 差不多,最大的特点就是可以避免异步嵌套2.Koa的安装和基本使用(1)koa..

2021-03-07 17:01:34 216

原创 Webpack 中 file-loader 和 url-loader 的区别

当我们基于webpack进行开发时,在页面引入图片(包括img的src和background的url),就会遇到一些问题。问题1:引用路径的问题拿background样式用url引入背景图来说,我们都知道,webpack最终会将各个模块打包成一个文件,因此我们样式中的url路径是相对入口html页面的,而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的,file-loader可以解析项目中的url引入(不仅限于css),根据我们的配置,将图片拷贝

2021-03-06 17:34:14 77 1

原创 普通的html页面中ie11的兼容性问题

项目背景:做一个公司的门面网站,响应书布局,适配各种设备及分辨率技术:media媒体查询、flex布局、vue.js实现方式:<!DOCTYPE html><html><head> <title>资产</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-

2021-01-22 13:41:48 254

原创 微信小程序:TypeError: Cannot read property ‘mark’ of undefined

微信小程序:TypeError: Cannot read property ‘mark’ of undefined使用ES7异步网络请求方法:async init(){ const res=await request({}}解决方案:打开界面右边的 详情-—>本地设置,将增强编译勾选上,就ok了。如下图:...

2020-12-24 14:23:27 2304 2

原创 vue3.0初体验

1.main.js,createApp方法import { createApp } from 'vue';import App from './App.vue';import router from './router';import store from './store';import './App.scss'const app = createApp(App)app.use(router).use(store).mount('#app');2.Composition ..

2020-12-23 20:14:48 130

原创 vue单页应用首屏加载速度慢如何解决

首屏时间(First Contentful Paint),指的是浏览器从响应用户输入网址地址,到首屏内容渲染完成的时间.一、加载慢的原因在页面渲染的过程,导致加载速度慢的因素可能如下: 网络延时问题 资源文件体积是否过大 资源是否重复发送请求去加载了 加载脚本的时候,渲染内容堵塞了 二、解决方案常见的几种SPA首屏优化方式:减小入口文件积、UI框架按需加载、图片资源的压缩、组件重复打包、开启GZip压缩1.减小入口文件体积常用的手段是路由懒加载,把

2020-12-22 17:38:20 386

原创 echarts地图下钻打点案例

<div id="china3" :style="{height:'700px',width:'100%',background:'#0b0518'}"></div>import echarts from 'echarts'import '../../../static/js/china.js' // 引入中国地图数据import {provinceJson,cityArr} from './mapjson.js'//相关省市jsonexport default {...

2020-12-17 19:49:28 268

原创 echarts遇上百度地图打点案例(vue)

效果图:1.html文件引入百度api,ak是自己申请的密钥 <script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=xxxxxxxxxxxxxxxxxxxxx"></script>2.vue代码: <div id="mapEchars" style="width: 100%;height:440px;background:#0b0519;">&l..

2020-12-17 19:14:57 183

原创 vue中浏览器全屏和退出全屏

1.首先要判断浏览器类型(是否IE),来控制是否展示功能,在计算属性中判断:computed: { showFullScreenBtn () { return window.navigator.userAgent.indexOf('MSIE') < 0; }},2.vue代码:<i v-if="showFullScreenBtn" :class="isFullScreen?'el-icon-crop':'el-icon-full-screen'" cla.

2020-12-17 17:58:24 284

原创 微信小程序 setData数据量过大的解决(以分页加载为例)

微信小程序中我们经常使用setData方法来修改数据,从而达到更新页面的目的。但是当我们通过setData方法设置的数据过大时就会报如下错误。vdSyncBatch 数据传输长度为 2260792 已经超过最大长度 1048576这是因为setData设置的数据量是有限制的,单次设置的数据大小不得超过1024kb,否则就会出现如上错误。(微信小程序官方文档对于setDate的限制说明:https://developers.weixin.qq.com/miniprogram/dev/refer..

2020-12-05 15:00:04 1414 1

原创 上传图片尺寸大小限制(iviewUI组件库为例)

上传图片尺寸大小限制,UI组件库为例iview中<Upload ref="upload" :max-size="10240" :on-exceeded-size="handleMaxSize" :before-upload="handleBeforeUpload" :on-success="successUpload" :on-error="failureUpload" :show-uplo

2020-08-14 11:34:30 252

原创 webpack打包过程如何调试(浏览器)

1.安装inspect-brknpminstall--save-devinspect-brk2.假设我们的需求是想调试项目文件夹下的webpack配置文件:webpack.config.js在当前webpack项目工程文件夹下面,执行命令行:node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress其中参数--inspect-brk就是以调试模式启动node:会观察到输出:Deb...

2020-08-09 09:33:52 334

原创 如何判断当前代码是运行在浏览器还是node环境中

通过判断Global对象是否为window,如果不为window,则当前脚本运行在node.js环境中。​​​​​​​<script> this === window ? console.log('browser') : console.log('node');</script>

2020-07-22 10:42:46 1949

原创 如何清除微信公众号的缓存

安卓手机:在微信随便打开一个聊天窗口打开网址(打开debug 调试页面):debugx5.qq.com拉到调试页面的最底端,勾选上所有的缓存项目,点击清除。苹果手机:我的-设置-通用-存储空间-缓存清理 ...

2020-07-16 15:07:45 3745

原创 微信小程序request:fail 对应的服务器证书无效

解决方法有两种:方法一:只适合开发中把「不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书」钩上即可方法二:适合开发和线上小程序 到腾讯云上,SSL证书管理,可以申请一个免费的证书,申请好了放到nginx配置中,验证可以通过。...

2020-06-30 14:54:49 3019 1

原创 微信小程序 不在合法域名列表中

此时,我们需要在 在 「小程序后台-开发-开发设置-服务器域名」 中进行配置 request合法域名(uploadFile合法域名也同样道理)。配置完成后,我们可以在微信开发者工具中,可以看到我们的配置已成功:...

2020-06-30 14:43:34 314

原创 Nginx解决VUE的history模式下刷新404

原配置: location / { root /root/jxiaoshuai-blog-demo/; index index.html index.htm; }使用try_files解决:location / { root /root/jxiaoshuai-blog-demo/; index index.html index.htm; try_files $uri $uri/ /index.html;}...

2020-06-29 18:28:49 218

原创 解决github访问速度慢

1. 修改本地hosts文件windows系统的hosts文件的位置如下:C:\Windows\System32\drivers\etc\hostsmac/linux系统的hosts文件的位置如下:/etc/hosts2.输入github相关配置,F12可以看到相应的ip地址140.82.112.3 github.com185.199.110.153 github.io...

2020-06-25 22:24:20 334

原创 Jenkins的安装、部署、启动(vue项目)

环境:Linux :centos上安装jenkins及配置1.首先要安装jdk,此处略2.安装Jenkins//1.导入镜像:wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo//2.导入公钥rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key //3.安装yum install jenkins.

2020-06-23 19:28:37 1181

原创 vue项目版本更新后文件存在缓存问题解决方案(vue-cli2.0/vue-cli3.0)

vue-cli2.01.配置webpack.prod.conf.js 配置output加t=[chunkhash:8]相当于加时间戳,用于清缓存output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js?t=[chunkhash:8]'), chunkFilename: utils.assetsPath('js/[id].[chunkhas..

2020-06-18 16:58:35 2095

原创 vue项目首次打开加载速度慢的优化方案

一、路由懒加载(必须的)️vue-cli 3.0 模式就使用了Babel,我们需要添加syntax-dynamic-import插件,才能使 Babel 可以正确地解析语法。// 安装插件 syntax-dynamic-importcnpm install --save-dev @babel/plugin-syntax-dynamic-import// 修改babel.config.jsmodule.exports = { "presets": [ "@vue/app" ..

2020-06-18 14:57:45 1457

原创 vue微信公众号获取当前省市区详细地址

1.获取签名,调用微信api进行位置信息授权获取当前经纬度2.火星经纬度转百度经纬度3.利用百度api转化成对应的省市区详细地址(这里要注意,我们需要引入百度api,及自己的密钥,<script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=自己的密钥"></script>)wxAddress() { let that = this; let u = navi

2020-05-27 10:52:29 990

原创 ios中mint-ui picker滑动时页面跟着滚动的解决方法

由于 Picker 组件的滚动是用 touch 事件 + translate 实现的,所以我们可以在 Picker 弹层出现的时候禁止页面的默认滚动机制,Picker 弹层消失时解除禁用页面的默认滚动机制解决方案:data () { return { /*---------监听函数--------------*/ handler:function(e){e.preve...

2020-04-27 17:14:39 354

原创 Nginx 入门

Nginx是什么?Nginx 是一款轻量级的 HTTP 服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的 IO 性能,时常用于服务端的反向代理和负载均衡1.安装yum install nginx2.查看版本号nginx -V3.启动相关命令(1)启动 Nginx:启动代码格式:nginx安装目录地址 -c nginx配置文件地址(2)停止...

2020-04-17 15:26:53 147

原创 js中CMYK格式的图片上传失败,解释

CMYK和RGB的区别:两者在性质上不同:RGB是显示器显示的颜色,而且CMYK是印刷用的颜色js中我们在做图片上传时候,会出现CMYC的上传回显失败问题。所以要注意一下。要上传rgb格式图片。...

2020-04-17 11:45:09 277

原创 微信小程序授权(uniapp)

首先在App.vue中加onLaunch方法:onLaunch 当uni-app初始化完成时触发(全局只触发一次) <script>export default { onLaunch: function() { if (!uni.getStorageSync('token')) { uni.navigateTo({ url:'/pages/...

2020-04-17 10:29:46 303

原创 vue(scoped)修改UI库组件样式

vue修改第三方UI库组件样式在工作中经常会碰见设计稿和UI库的组件样式不一样,在style标签加了scoped,就无法修改UI组件的样式了,因为当前组件样式只应用到这个组件上。深度作用选择器如果你想修改组件的样式就可以使用 >>> 操作符:<style scoped>.a >>> .b { /* ... */ }</styl...

2020-04-16 14:33:28 318

原创 JavaScript 错误 - throw、try 和 catch

try语句测试代码块的错误。catch语句处理错误。throw语句创建自定义错误。finally语句在 try 和 catch 语句之后,无论是否有触发异常,该语句都会执行。JavaScript try 和 catchtry语句允许我们定义在执行时进行错误测试的代码块。catch语句允许我们定义当 try 代码块发生错误时,所执行的代码块。JavaScript 语句tr...

2020-04-15 15:56:08 105

原创 解决node版本降级--运用nvm(windows下)

1.首先下载nvm的安装包;https://github.com/coreybutler/nvm-windows/releases 下载nvm-setup.zip 安装。下载后直接双击运行nvm-setup.exe2.重新打开一个新的命令行窗口3.nvm使用nvm list 查看已安装的node版本列表。nvm use 8.16.0 切换node版本到8.16.0版本。nvm i...

2020-04-15 14:24:40 973 1

原创 vue页面title问题(微信公众号)

一般来说vue单页面应用的title在index.html中设置,但是一旦设置就是唯一了,对此有了以下需求:需要实现不同的页面对应不同的title。我们可以用router.beforeEach 来实现router.js{ path: '/personal', component: () => import('../view/home.vue'), ...

2020-04-14 14:43:21 476

原创 移动端微信浏览器字体放大导致布局错乱的解决方案

IOS中css设置:body{ -webkit-text-size-adjust: 100% ;}Android中js设置:(function() { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFont...

2020-04-07 20:30:15 632

原创 毛玻璃效果

其实毛玻璃的模糊效果技术只是用到了 css 滤镜(filter)中的 blur 属性html<body> <div class="content"> <div class="info"> <p>其实毛玻璃的模糊效果技术只是用到了 css 滤镜(filter)中的 blur 属性</p> ...

2020-04-07 15:47:19 325

原创 哀悼日网站全站变灰

全网站变灰,我们可以使用css的filter属性。<style type="text/css"> html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter...

2020-04-07 14:54:02 211

原创 js中火星坐标、百度坐标、WGS84坐标转换

//定义一些常量var x_PI = 3.14159265358979324 * 3000.0 / 180.0;var PI = 3.1415926535897932384626;var a = 6378245.0;var ee = 0.00669342162296594323;/** * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换 * 即 百度 转 ...

2020-02-21 13:44:50 1337

转载 如何优雅的使用VUE? 如何让自己与刚学vue的人拉开差距呢?

本文会从以下三个方面,来进阶我们对vue的运用能力组件 : 全局组件注册 Render函数 : 拯救繁乱的template Vue权限控制 : 高精度全局权限控制1 -「全局组件注册」组件是我们非常常用的东西,很多人使用组件都是通过一个一个文件去引用和注册。如果一个组件在整个项目里面的使用次数较多,每一次使用都需要引用并注册,就会显得特别麻烦一般组件应用弊端 傻瓜式,...

2020-02-16 15:25:42 211 1

原创 微信浏览器调整字体后,页面错位

阻止页面字体自动调整大小// 安卓:(function() { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { if (document.addEventListener)...

2020-01-13 18:01:35 232

原创 vue指令解决ios微信打开网页键盘弹起后页面上滑,导致弹框里的按钮响应区域错位

import Vue from 'vue';Vue.directive('blur', { 'bind'(el) { el.addEventListener("click", function(){ window.scrollTo(0,0); }) }}); //在点击页面提交按钮的时候,把滚动条滚到底部就OK了...

2020-01-13 17:56:56 379

微信公众号拍照功能

此代码是前端在vue中利用sdk调用微信公众号api的拍照功能代码

2018-12-04

叶落森的留言板

发表于 2020-01-02 最后回复 2020-03-11

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除