- 博客(85)
- 收藏
- 关注
RSS订阅原创 彻底解决小程序内嵌web-view缓存问题
前言项目是通过web-view内嵌在小程序里的vue单页应用.然而前几天发现明明发布了代码，在小程序入口进去看到的还是旧页面，尝试了各种操作： 手动退出小程序，再次进入； 删除 发现-小程序，重新进入； 关闭微信，杀掉进程，重新进入 修改 Nginx 关于 Cache-Control 的配置； 用 debugx5.qq.com 手动清除安卓微信浏览器缓存； iOS 利用微信自带清除缓存功能。 不管怎么操作，依然显示的是旧页面！！！ 分析..
2021-04-08 23:15:07
8216
1
原创 [性能优化]为了把首页加载速度从15秒降到2秒我都做了哪些事情?
[性能优化]为了把首页加载速度从15秒降到2秒我都做了哪些事情?前言对于一个网站来说, 首页打开的速度一定程度上决定了用户的访问量和留存率,很显然,5G时代下的人们是缺乏耐心的,如果一个网页卡十几秒还没开, 估计会弃之,那么怎么才能提高这个速度, 以下提供了五种提升网站速度的方式.查看网页性能网上有很多查看性能优化的工具, 最简洁实用的就是chrome里的开发者工具 - network和preformance进行性能分析,另外在build的时候加上--report也能查看到打包后包的大小,
2021-03-21 22:55:57
1758
原创 vue-cli配置less变量的两种方式
方式一：build文件配置步骤1：安装包npminstallsass-resources-loader--save-dev步骤二： build 的utils.js配置找到exports.cssLoaders = function (options) {}这段代码，functionlessResourceLoader(){varloaders=[cssLoader,'less-loader',{...
2021-03-19 23:53:18
1611
1
原创 分分钟提高效率的18个神仙网站，你都用过几个？
1.ipaddress - ip查询工具：https://www.ipaddress.com/不知道本机IP， 一进入网址就可以查到，还能查询到ip的详情信息， 追踪域名，端口信息。2.json - 在线解析工具 https://www.json.cn/开发时看网络请求不清晰，直接把response里面的数据拷贝到json.cn， 完整的json格式看起来就很舒服， 也可以直接编辑，改成你想要的结果。同时它也是一个在线编译器， 可以编译几十种语言， 另外它也可以是个计算工具， 不仅能当计算器，长度
2021-03-07 18:37:27
2072
2
原创 git如何更新到远程fork仓库？如何更新远程仓库地址？
前言场景描述:本地已经有一个从A项目部分拷贝之后生成的新项目B, 并且已经开始开发了新功能, 而A项目也在进行迭代更新.这时产品说要同步A项目的功能到B项目, 两个项目都有了新的更新， 那怎么同步更新呢？ 于是想到先fork然后同步， 这个过程有些曲折， 但问题总归是能解决。一.fork旧项目1.在A项目选择创建fork；2.选择存放到个人仓库，配置新项目名称；3.有个选项是勾选Enable fork syncing决定之后是否跟随更新。建议勾选。4.点击确定之后就会进入到刚刚fork的仓库
2021-03-06 23:58:46
2526
原创 公众号/h5 跳转到小程序填坑指南
本文介绍的是使用微信开放标签 wx-open-launch-weapp 实现微信浏览器内网页跳转到任意合法合规的小程序里，官方要求微信版本为：7.0.12 及以上，系统版本要求为：iOS 10.3 及以上、Android 5.0 及以上。 话不多说， 先贴官方文档： 开放标签说明文档[1]一. 准备工作写代码前， 一定要先把配置处理好,避免后续操作的不愉快。步骤一：绑定域名登录微信管理后台， 在开发-开发管理-开发设置-服务域名， 把你 js 请求的接口域名添加进去。 步骤二： 引...
2021-01-16 16:03:33
4162
2
原创 【查缺补漏】css、Less、Sass定义变量，混合，嵌套，运算等（内含10道面试题）
一. 定义变量1.CSS 的变量声明和使用定义 3 个变量，:root 使得所有人可访问:root{--base:yellow;--spacing:10px;--blur:10px;}使用上面定义的变量作为属性值:img{filter:blur(var(--blur));padding:var(--spacing);background:var(--base);}还可以通过js改变变量的值，从而改变属性doc...
2020-12-01 00:21:05
2424
1
原创 手把手教你配置Nginx, 前端不可不知的项目部署问题
前言本文只讲如何配置Nginx, 安装部分可以查看文档：在阿里云服务器上如何搭建nginx服务器？，Ningx介绍Nginx是一款轻量级的Web服务器，具有内存占用少，启动极快，高并发能力强的优势，采用事件驱动的异步非阻塞处理方式框架，IO性能好，时常用于服务端的反向代理和负载均衡。正向代理与反向代理正向代理是什么东东？反向代理又是啥？正向代理举个栗子因为防火墙的原因， 直接访问谷歌是无法访问的， 这时可以借助梯子，即vpn，那么这个vpn(代理)就是代替客户端去访问服务器，然后将数据返回
2020-10-24 22:24:03
1363
原创 为什么你的watch不生效？ 从内部实现解析watch的工作原理
前言使用watch监听为什么有时不生效？ 这篇文章或许可以给你答案，看完还不懂，请来找我。1.列表渲染中修改数组元素（对象）的某个属性，但不能触发视图更新。举个栗子父组件有个element对象， 每次添加商品时需要往element.data里面去添加一条数据， 以此来更新父组件以及子组件的内容，通过$emit的形式更新父组件的element。代码如下：<div class="item-box" v-for="(product, paramIndex) in element.data" :k
2020-10-21 00:34:29
2018
原创 彻底消除if-else, 优化判断逻辑， 让你的代码更优雅
前言应该有不少同学有遇到过充斥着if else的代码，面对这样的一团乱麻，简单粗暴地继续增量修改常常只会让复杂度越来越高，可读性越来越差。那么是时候重构了，花几分钟看看这篇文章， 说不定对你有一丢丢帮助。场景一： 根据status显示对应名称优化方案1：object对象const statusStr = { '1': '待付款', '2': '待发货', '3': '已发货', '4': '交易完成', '5': '交易关闭', 'default': '',}const
2020-10-12 00:05:48
862
原创 【面试题拆解】--- css 水平垂直居中的实现方式和原理揭秘
1.文本、图片的水平垂直居中（1）单行文本居中设置文本内容text-align:center; //水平居中line-height：100px; //垂直居中， 行高等于高度，为什么 line-height 等于高度就可以实现文本垂直居中？要了解其中缘由， 先弄清楚几个概念。行高行高， 顾名思义， 就是一行文本的高度，在规范上讲就是两条基线之间的距离。行高由上间距、文本高度、下间距组成，上间距的距离与下间距的距离是相等的。默认情况下一行文本的行高分为：上间距，
2020-10-04 20:13:34
466
原创 js利用数组的reduce方法实现一维数组转二维数组
先上效果图而后端返回的数据结构是这样的:[ { payDate:"2020-06-01 23:23:45", orderCode:'0821591252396397', profitMoney:853 }, { payDate:"2020-05-11 12:33:45", orderCode:'0821591252396359', profitMoney:874 }, { payDate:"
2020-06-08 22:58:17
1188
原创 记录问题： git 分支后面多了rebasing，如何去除？
在开发中， 合并提交代码时出现错误 ，分支后面一直带着rebasing,解决方法1：git rebase --continuegit status查看哪些文件冲突，解决后git add冲突文件，最后git rebase --continue解决方法2：git rebase --abort直接放弃当前操作， 执行git rebase --abort 或git rebase --skip解决方法3： 终极武器 rm如果上述方案不行的话， 可以试试这个，在当前目录下执...
2020-05-22 23:49:38
16974
原创 记录问题： git报错： error: You have not concluded your merge (MERGE_HEAD exists)
引起原因： git pull会拉取远端最新版本并合并到本地，但是拉下来的代码自动合并失败，出现了这个报错error: You have not concluded your merge (MERGE_HEAD exists)解决方法: --abort保留本地的更改， 中止合并, 重新合并，重新拉取$:git merge --abort$:git reset --merge$:git pull扩展：git pull和git fetch的区别：git fetch :只...
2020-05-22 08:54:14
296
原创 记录问题：This request has been blocked， the content must be served over HTTPS. 解决https和http混用导致的问题
引起原因：前端项目部署在服务器上配置的域名是https的， 而接口部署的服务器域名配置的是http的， 而浏览器上明确https中不允许http的请求， 这就导致了blocked问题。也就是下图：那么如何解决呢？很简单， 在你配置的环境变量中， 把前面的htpps或者http去掉， 就像这样：'//credit.ccmallv2.create-chain.net'还有一种方式就是让运维人员去配置域名为https， 实际上线上访问的接口地址本就不应该是http的。...
2020-05-21 21:24:46
37089
10
原创 在js中数组和字符串之间的相互转化
在这个前后端分离的时代， 与API接口交互的过程中经常需要对数据进行处理， 比如，根据多个id值查询数据，对前端来说， 数组当然是好处理一些， 而后端往往会要求字符串格式。一. 数组转化为字符串1.toString()数组中 toString()方法能够把每个元素转换为字符串，然后以逗号连接输出显示。let a = [1,2,3,4,5,6,7,8,9,0]; //定义数组let s = a.toString(); //把数组转换为字符串 console.log(s); //返回.
2020-05-20 09:04:45
235
原创 不用找UI， CSS也能搞定图片效果（等比缩放， 背景模糊处理，投影等等）
在实际开发过程中， 总是会遇到各种需要处理图片的情况，举个简单的例子， 用户上传头像，我们都知道头像宽高是有一定比例的， 但用户的图片千奇百怪，如果简单的按照我们设定的宽高显示，图片变形不可避免，那么该怎么处理？也就是标题中提到的图片等比缩放了，这个时候我们需要用到css的一个属性， object-fit.<div class='header-container'> <img src="./333.jpg" alt=""></div><img
2020-05-19 23:34:20
606
原创 阿里云OSS上传图片被自动旋转90℃的解决方案
由于拍摄的图片是横拍的, 上传的时候被自动旋转了, 像下面这样:问题描述:上传图片到阿里云OSS，再HTML标签使用OSS图片路径，展示的图片被自动旋转了；但是将图片图片路径直接浏览器打开，是原始没有旋转过的.那么如何解决?很简单, 只需要在图片链接中加上一个属性x-oss-process, 像下面这样:url链接加上?x-oss-process=image/resi...
2020-03-05 17:57:32
3046
1
原创 解决git: enter passphrase for key '~/.ssh/id_rsa'的问题
出现enter passphrase for key '~/.ssh/id_rsa' 的原因: 在生成key的时候,没有注意,不小心设置了密码, 导致每次提交的时候都会提示要输入密码, 也就是上面的提示.那么.只需要执行下面的代码就可以解决: ssh-keygen -p [-P old_passphrase] [-N new_passphrase] [-f keyfi...
2020-03-05 15:15:08
5944
原创 JS 获取客户端IP
一.获取客户端公网IP<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script type="text/javascript"> document.write(returnCitySN["cip"]+','+returnCitySN["cname"])</scri...
2020-02-14 21:32:26
416
原创 win10使用ssh连接阿里云服务器
一、如何连接阿里云服务器？1. 如果你已经有了私钥， 那么一条命令搞定：ssh -i ~/.ssh/CreateChain/create-chain.root [email protected]解析： 其中ssh是连接命令，其参数 -i 表示的是： identity_file 从指定文件中读取传输时使用的密钥文件，此参数直接传递给ssh。~/.ssh/CreateChain/c...
2020-02-11 23:02:14
1983
原创 解决git:fatal:Unable to create".../.git/index.lock" 的错误
问题描述: 在使用git 进行提交时, 出现上面这个报错, 导致无法提交. 报错大致意思就是创建index.lock文件失败,因为已经存在index.lock文件了.index.lock文件是在.git下面, 而.git是一般是隐藏的, 那么可以通过以下命令删除即可.rm -rf /Users/dianji/project/ccpay.h5/.git/index.lock/...
2019-12-12 15:14:02
17013
2
原创 select组件设置居右对齐, text-align无效
问题:在原生组件select中,需要设置居右对齐, 我设置了:select{ text-align: right;}但是无效,搜索发现可以使用:select{ direction: rtl;}效果图:搞定!补充:direction属性规定文本的方向 / 书写方向。该属性指定了块的基本书写方向，以及针对 Unicode 双向算法...
2019-11-26 18:56:53
2768
原创 h5页面与原生APP的交互
前阵子有个需求, 需要在移动端实现图表的呈现, 问题就在于, android和ios,以及h5能够统一的图表很少,echarts又不太符合我们的需求, 并且ios需要提审, 图表可能会更换样式. 经过探讨, 统一由h5提供图表. app内嵌h5页面呈现图表.那么问题来了, app端需要加载html,js等文件, 这个速度真的不敢恭维, 近40多秒的加载速度, 用户体验特别差,那么怎么办?...
2019-11-20 19:02:07
1309
原创 JS 判断用户设备是网页(谷歌,UC,火狐)还是客户端(IOS还是Android)
借助window的属性navigator.userAgent判断.var userAgent = window.navigator.userAgentexport default { isFromAndroid: /android/gi.test(userAgent), /* 安卓*/ isFromIOs: /iphone|ipod|ios/gi.test(userAge...
2019-11-20 17:18:02
557
原创 vue 使用clipboard复制文本到剪切板
复制文本是一个很常见的场景, 比如淘宝的复制订单号, 点击复制实现订单号的复制.安装:npm i --save clipboardhtml:<template> <div class="line fs14"> <div class="label color-gray">订单号</div> <...
2019-11-20 11:04:46
397
原创 css强制换行的三个属性word-space、word-break、white-space解析
目录 white-space1. white-space:nowrap2.white-space: pre;3. white-space: pre-wrap;4.white-space: pre-line;word-break 1. word-break:keep-all;2.word-break:break-all;word-...
2019-11-19 17:16:22
13373
原创 vue 使用qrcode生成二维码功能
安装插件npm i --save qrcodejs2template部分<template> <div class='turnout-wrapper turnin-wrapper'> <div class="qrcode-style" id="qrcode"></div> </div>&l...
2019-11-19 13:45:42
1678
1
原创 vue项目实现每隔1分钟刷新当前页面(附:清除定时器优化方案)
有个需求是: 需要实时获取接口数据,每隔1分钟获取一次, 我们可以通过定时刷新页面来达到效果.js有两种定时器setInterval(function(){}, milliseconds)——会不停的调用函数setTimeout(function(){}, milliseconds)——只执行函数一次乍看之下，setInterval会符合我们的业务需求，然而也需要注意一些...
2019-11-18 14:09:18
11449
2
原创 js 前端对数据的处理操作总结
目录一.字符串去除空格1.使用String原型的trim()方法去除两端空格2.使用split()和join()方法删除所有空格3.使用正则去除所有空格二. 对象判空三. 判断数组/对象中是否存在某个元素1.判断数组/对象是否存在2.js判断数组中对象里的某一个值是否存在四.字符串转换成对象五.小数运算出现多位的处理1.先把需要运算的小数扩大成整数，...
2019-11-18 12:49:58
2781
原创 js 时间戳与时间格式的转化, xx天xx小时xx分倒计时,距离当前时间多久
目录一.时间戳和日期格式相互转化(1) 获取时间戳(2) 时间戳转化为日期格式(3) 日期格式转换为时间戳二. XX天XX小时XX分倒计时三.距离当前时间的计算, 显示效果为3秒前,1小时前一.时间戳和日期格式相互转化(1) 获取时间戳//(1)、精确到秒： Date.parse(new Date()); //1570506183000//(2)、精...
2019-11-14 13:50:59
868
原创 在vue项目中使用Antv-f2的小案例
目录一.两种引入方式1.浏览器引入2.通过 npm 安装二. 两种使用方式1. 在配置了webpack或使用vue-cli构建的vue项目使用2. 另一种使用方式是在html中直接使用三. vue循环渲染图表,动态绑定Id最近在研究数据可视化，了解到会有移动端的数据可视化需求，所以看到了阿里出的Antv F2.官网有如下简介：F2，一个专注于移动，开箱即用的可...
2019-11-12 11:47:24
8587
2
原创 css制作圆角按钮和卡片阴影效果
效果:代码:button{ width: 100px; margin: 10px; margin-bottom: 0; height: 37px; background: #fff; color: #506AE7; text-shadow: 1px 1px 1px rgba(255,255,255, .1); b...
2019-11-12 10:09:23
2905
2
原创 vue页面实现短信验证码60秒倒计时
template <div class='single-wrapper fs14'> <div class='single-mb'>短信验证</div> <mt-field type='number' v-model="phoneMessage" placeholder="短信验证码" class='message-wrappe...
2019-11-08 21:01:49
1730
原创 mac 开启轻量级HTTPServer服务
1，开启http服务os系统自带apache服务，用命令行：sudo apachectl start开启http服务2，cd到要共享的文件夹内，用命令行python -m SimpleHTTPServer如果知道共享文件夹的位置, 一般来说共享文件夹位置为 /Library/WebServer/Documents$cd /Library/WebServer/Documents$p...
2019-11-06 09:42:07
553
原创 APP内嵌h5页面在android低版本出现白屏问题(vue项目)
前段时间在处理一个vue项目时, 在vivo和华为的android5.0系统出现白屏,没有任何报错信息, 之后特地买了两台真机进行测试, 经过分段调试 , 一步步排查, 最后发现是这段代码出错:到底什么问题? 对比一下这段代码很明显, 参数默认值的问题! 也就是ES6语法不兼容!但实际上不完全是, 在这个项目中,有不少类似箭头函数这种语法, 通通都是支持的.实际上项目中是有babel进行...
2019-10-29 17:03:16
7077
1
原创 【git命令小词典】git常用命令清单,涵盖大部分使用场景.
现在都9102年了, 应该没有不会用git的程序媛了吧?虽然现在有很多优秀的git工具, 比如git GUI图形界面, git TortoiseGit, sourceTree等等, 但命令是基本功,还是得掌握. 下面总结了一些常用的命令和部分应用场景.希望对你们有帮助.一. 一些专用名词的译名Workspace：工作区 Index / Stage：暂存区 Repository：仓库区（或...
2019-10-24 09:19:39
868
2
原创 你未必知道的css技巧(值得收藏!!!)
01.【负边距】????负边距的效果: 左右负边距表现并不一致。左为负时，是左移，右为负时，是左拉。上下与左右类似.02.【shape-outside】定义非矩形的形状,参考MDN:shape-outside03.【BFC应用】????BFC应用之阻止外边距合并（margin collapsing）在外层/包裹层上添加 overflow:hidden; 里层的外边距不会被合并.04. 【BFC应用...
2019-10-15 17:03:28
739
原创 关于谷歌chrome调试小技巧
移动端显示手机外壳调试（1）按f12， 打开开发者工具， 点击图中蓝色按钮或者按快捷键 ctrl + shift + M 进入设备调试。（2）点击下图中的三个原点， 选择 show device frame 操作， 即可显示外壳。警告： 一定要翻墙， 否则不显示， 另外chrome 版本要6+以上。把object或array输出为表格let args = {…};conso...
2018-12-06 16:47:35
1234
原创 git的使用 -- 撤销merge操作
git再把分支合并主干后想撤回这个操作执行命令如下： git revert -m 1 18d290169ac80120c4401f17719122c3500ecfaf想撤销多次merge操作请按照顺序多次执行上面的命令原因：Git 撤销合并| COMMENTSGit 的 revert 命令可以用来撤销提交（commit），对于常规的提交来说，rev...
2018-12-06 15:41:01
1805
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人