![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
兴xing0_0
这个作者很懒,什么都没留下…
展开
-
krpano flat模式默认放大区域
之前使用krpano制作360全景,昨天同事说还有另外一种模式,可以放超高像素图片,去官网看了一下,确实有这个功能,设计有个需求,需要在开屏的时候,页面放大到指定位置,在官网找了1个多小时文档,结果找不到方法。跟同事说了一下实现不了,他说看看放大的那个按钮是怎么实现放大效果的,看了一下,确实可以实现。krpano的skin文件夹下的defaultskin.xml中放大按钮的代码如下:在krpano的ready回调函数中,调用方法,在判断一下停止时机即可:解决放大问题,这里用的setInt..原创 2021-09-07 10:11:36 · 377 阅读 · 0 评论 -
html2canvas图片跨域问题
我遇到的跨域问题不是一般的跨域问题,一般的网上搜一下就有了,今晚改了一下线上的项目,结果出现了跨域问题,之前在家里做的好好的,来到sz就不行了,然后问了一下朋友,提示说是不是dns问题,结果改了一下电脑的dns,就可以了,奇怪,不知道为什么会出现这种问题。朋友说dns被劫持了,但是不知道其中的原理,记录一下。...原创 2020-03-05 23:47:46 · 1040 阅读 · 0 评论 -
记录一下
js里面for循环的执行顺序:for(起始状态;判断条件;状态改变){ 执行语句; }1.判断条件 2.执行语句 3.状态改变由此可以得出:for(let i=2;i<1;i++){console.log(i)};是不会打印出i的...原创 2018-12-04 09:59:27 · 98 阅读 · 0 评论 -
mpvue开发记录
1、今天在使用mpvue的时候,将data里面的变量名跟methods的函数名写成一样的了,结果控制台没报错,微信的控制台报this.xxx() is not a function,心里想,其他页面直接调用methods里的函数都没问题,怎么这个就不行了,调了半个小时,突然发现变量名跟函数名是一样,改了其中一个,马上就ok了,不知道vue这么写会不会报错什么的,记录一下。...原创 2018-04-08 19:37:41 · 255 阅读 · 0 评论 -
自定义微信小程序视频组件播放按钮
小程序的视频组件没有隐藏播放按钮的属性,但是看了爱奇艺的小程序,发现他们可以自定义播放按钮,这就比较奇怪了,官方不提供,还能实现,一定有办法,于是想了很久,突然想到,可以在video组件里面嵌套两个cover-image,一个用来存放播放按钮,另外一个用来存放视频封面图,写好之后,又发现了新问题,网络比较慢的时候,封面图加载不及时,还是可以看得到原生的播放按钮。于是仔细研究了爱奇艺的小程序,原来在...原创 2018-03-12 15:59:06 · 17537 阅读 · 3 评论 -
Vue-cli无法编译es6解决办法
最近使用vue-cli创建项目的时候,遇到es6无法转换成es5的情况,项目在ios9下无法正常运行,在webpack.base.conf.js里面修改babel的配置项,添加src目录也没用,于是百度,谷歌找方法,最后自己想了想是不是没有配置.babelrc文件,于是在项目根目录创建.babelrc文件,同时在文件中编写{ "presets": ["env"], "plugins": ["t...原创 2018-02-10 23:42:44 · 7101 阅读 · 1 评论 -
在html-webpack-plugin中加入自定义代码
这段时间做h5总需要在页面中插入php代码,但是在html模板中插入php代码就会报错,于是在生成之后的页面中手动插入,自己又觉得这样子很蠢,而且每生成一次就需要在html页面中手动复制粘贴一次,十分傻逼。想在利用插件的一个字段来输入php代码,没想到也是要经过html-loader的parse,也一直报错。就在我万念俱灰,觉得实在没办法的时候,找到了webpack的插件事件,在html-webp原创 2017-12-27 10:59:23 · 5028 阅读 · 1 评论 -
使用vue-manage-system找不到sass依赖的
今天使用vue-manage-system开发后台管理系统界面,由于平时都是使用sass,就在系统里面添加了sass-loader跟node-sass,谁编译的时候一直报错,报错如下:This dependency was not found就是没找到vue-style-loader跟css-loader,自己手动安装还是不行,百度之,有相同的情况,但是使用的是less跟sty原创 2017-10-25 23:29:04 · 602 阅读 · 0 评论 -
小程序开发点滴记录
1、微信小程序中列表item点击之后的响应昨天一直在纠结微信小程序中列表页点击之后的响应,按照传统的思想,绑定的是同一个函数,点击之后用this就可以知道具体点击了哪个item,但是微信小程序不能操作dom,昨天纠结了一下,今天上班看了一下官方文档,点击事件对象里面有个target属性,target的dataset可以自己获取到自己设置的“data-”的值,所以在渲染的数据里面加上了mark,原创 2017-02-17 11:38:31 · 1667 阅读 · 0 评论 -
wepy.js开发记录
由于自己写的小程序要兼顾多个项目,而且很多功能是可以复用的,原生的小程序要复用,还要不断地写重复的代码,比较麻烦,于是就选择上框架。以下是wepy.js的开发记录:1、与wxParser相结合,github地址:https://github.com/pacochan/wxParser 不是最热门的那个,在入参的时候,target属性要传入page对象,这样子wxParser原来有的方法原创 2017-08-01 14:38:25 · 1488 阅读 · 0 评论 -
使用nodejs获取微信小程序带参数二维码
由于项目需求,需要获取小程序页面的带有参数的二维码。好,那就看文档搞吧。之前都是写前端,没有写过后台的东西,这次难得有机会组长让我试一试试用node来写,那就写吧。1、首页获取token,发送request请求,用get的方式,在url后面加上小程序的grant_type,appid,secret,就顺利拿到token了,注意,这个token是有有效时间的,小程序的是7200秒,也就是2个原创 2017-04-11 16:33:02 · 6469 阅读 · 5 评论 -
css3实现苹果loading动画
如图,苹果的loading图是这样的,今天写小程序的时候,想着加一个图片上传的loading动画,突然想到苹果的这个loading图标,于是想着怎么实现,去百度跟谷歌找了一下,发现没人发过?要不就是我搜索方式不对,于是想起以前做过一个类似的loading动画,由两个半圆组成。于是想着,这个有缺口的圆,想象成一个半圆加另外一个半圆旋转一定角度就可以了,想好就开工。以下是实现代码:<!DOCTY...原创 2018-04-08 19:51:33 · 1518 阅读 · 0 评论 -
lib-flexible的dpr一直是1的问题
今天新建了vue项目,引入lib-flexible之后,html标签设置的dpr一直都是1,想到之前也遇到这个问题,但是忘了怎么解决了,于是百度,谷歌都找,突然想起来是因为html文件的一行默认设置,把那行设置去掉就可以了,将html文件的<meta name="viewport" content="width=device-width,initial-scale=1.0"> 删除,重...原创 2018-05-24 11:29:04 · 1259 阅读 · 0 评论 -
在webpack react项目中使用scss
create-react-app版本:1.5.2 1、首先安装sass-loader node-sassnpm install sass-loader node-sass —save-dev 2、运行npm run eject这时候会生成配置文件 3、找到config文件里的webpack.config.dev.jswebpack.config.prod.js里...原创 2018-12-04 09:58:41 · 1259 阅读 · 0 评论 -
一些前端压缩方法
1、图片压缩:https://tinypng.com/这是一个图片无损压缩网站,单次只能压20张,单张图片限制在5m以内,也可以自己对接sdk,免费用户单月500次请求。2、音频压缩:https://online-audio-converter.com/在高级设置里,选择64kpbs,这个比特率是比较适中的比特率,如果音质不能接受,则选择更高的比特率。这个网站还可以转换格式,不过基本都...原创 2019-08-29 11:18:52 · 1243 阅读 · 0 评论 -
使用vue在安卓中background-image不显示
问题:今天上线了一个移动端项目,适配使用的是flexible.js,按钮的背景色是渐变的,然后切了1px来做平铺,没想到在安卓上无法正常显示,ios显示正常。解决过程:然后排查了一下,可以看得到background-image的url,路径没问题,base64也没问题,最后想了一下,可能是因为background-image宽度可能不够,安卓对太小的rem识别不了。解决方法:1...原创 2019-08-07 17:31:10 · 1104 阅读 · 0 评论 -
使用vw适配页面ios中img标签设置宽度无法显示
最近项目全线用了新的vw适配方案,设置了img的宽度,在ios上无法显示图片,google之,找到了解决办法,全局使用img{content:normal!important;}既可解决。找了一下原因,是因为在content中写了viewport-units-buggyfill来兼容不支持vw的设备,导致这个原因。那上面的方法就不是最佳解决方案,应该在图片外层套一个div,设置位置跟宽度,...原创 2019-07-24 22:14:12 · 887 阅读 · 0 评论 -
自动生成图片项目在chrome里自动下载出现网络错误
今天在弄一个canvas生成图片自动下载功能,之前用的下面这串代码,可以下载,一点问题没有,相同的代码突然就不能用了。 var a = document.createElement("a"); a.href = href a.download = '图片标题'; a.click();后来谷歌了之后才发现是chrome对下载图片的像素大小有限制,这次图...原创 2019-05-24 10:35:04 · 1536 阅读 · 0 评论 -
学习Vuex
今天在找东西学习,想起vuex貌似用的挺多的,但是自己却没怎么用到,就打开官方文档看了一下,但是没有什么使用经验,总觉得简单的东西看不懂,于是就去谷歌找了一下教程,找到掘金上的一位大神录的视频,虽然讲的东西都很基础,但是一听就懂,记录链接:https://juejin.im/entry/59191b6b0ce4630069f6a3advuex就是为了解决同一个状态多处引用,担心状态不统一...原创 2019-05-07 00:07:15 · 152 阅读 · 0 评论 -
shake.js在ios12.2上不能用的解决方法
包地址:https://github.com/alexgibson/shake.js今天老大突然说摇一摇功能用不了,查了一下,官方issus已经有人反馈,看了一下,说要去safari设置打开“动作与方向访问”。但是测试了一下,还是不行。Safari提示:Blocked attempt to add a device motion or orientation listener becaus...原创 2019-04-28 13:08:44 · 2322 阅读 · 6 评论 -
event loop记录
今晚没事干读了一下掘金上的热文,记录一下其实搞清楚js的原理的感觉就跟解出数学题一样,成就感爆棚。原文连接:https://juejin.im/post/5cbc0a9cf265da03b11f3505记录一下常见的宏任务跟微任务:宏任务:script(整体代码)、setTimeout、setInterval、I\O、事件、postMessage、MessageChan...原创 2019-04-22 23:38:44 · 101 阅读 · 0 评论 -
运行wepy时找不到wepy-compiler-sass问题的一种解决方法
最近在修改老项目的问题,使用启动wepy项目的时候发现缺少wepy-compiler-sass,于是想着使用npm rebuild node-sass看看能不能解决,问题依旧,想起以前好像也有项目启动不了的情况。又想起来最近更新了node版本,于是使用nvm list 列出本机的node本,使用nvm use v7.7.4切回当前目录node的版本,再运行就没问题了,出现这个问题的情况有可能是因为...原创 2018-12-04 10:37:49 · 4911 阅读 · 0 评论 -
window对象笔记
window对象:window是客户端所有api的主要接入点、window对象的计时器:setTimeout、setInterval,这两个用的太多了,不详细介绍了引用location对象,URL分解属性:href、protocol、host、hostname、port、pathname、search、hash,以上属性都是可写的引用history对象:back、forwa原创 2017-01-03 16:47:31 · 284 阅读 · 0 评论 -
移动端适配总结
1、remrem是css3出现后新增的单位,这个单位的大小会根据html元素的fontsize的值自动进行缩放,在w3c上是这样子描述的:“font size of the root element”。相比较px跟em元素,不用说自然是能够自动适配不同的屏幕,这一点对于移动端开发来说十分重要。兼容性方面,移动端自然是支持的,pc端,蛋疼的微软要ie9以上才支持,不过在pc端也不用做什么适配了,原创 2016-10-27 17:05:16 · 1867 阅读 · 0 评论 -
减少js对性能的影响
今天在一个网页上看到的页面加载优化方法:将所有的标签放到页面底部,也就是闭合标签之前,这能确保在脚本执行前页面已经完成了渲染。尽可能地合并脚本。页面中的标签越少,加载也就越快,响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。采用无阻塞下载 JavaScript 脚本的方法:使用标签的 defer 属性(仅适用于 IE 和 Firefox 3.5 以上版本);使用动态创建的元素来下载并原创 2016-02-25 15:16:39 · 459 阅读 · 0 评论 -
解决跨域问题
解决跨域问题:1、代理,用后台的技术去访问,获得结果,不用前端的方法2、jsonp,只能使用于get请求3、HTML5 XMLHttpRequest Level2原创 2016-02-22 22:08:57 · 219 阅读 · 0 评论 -
Canvas笔记
LineTo:指定一个开始坐标,结束坐标,实现连起来MoveTo:将笔抬起来,再到指定坐标context.fillRect(x,y,w,h):填充矩形context.strokeRect(x,y,w,h):镂空的矩形context.clearRect(x,y,w,h):擦除矩形context.clearRect(x,y,imageObj,w,h):清空对象的内容原创 2016-02-20 22:26:49 · 282 阅读 · 0 评论 -
<转载>HTMl转义字符大全
今天在写html做笔记的时候,遇到了尖括号不能显示的问题,后来想到了这是html里面定义好的,于是到网上找转义字符,看到一篇文章,挺全的,转载过来记录。1.常用转义字符转义字符串(Escape Sequence)也称字符实体(Character Entity)。在HTML中,定义转义字符串的原因有两个:第一个原因是像“”这类符号已经用来表示HTML标签,因此就不能直接当转载 2016-02-17 13:35:35 · 7852 阅读 · 0 评论 -
canvas不显示问题
今天在学习学校规定的必修课程的时候,学到html5的canvas标签,第一次写的时候不显示,后来上网查到,要将canvas的js代码放到canvas标签之后才可以显示,记录一下先。如果是外部引用js文件的方式,则将引入的标签放在body之后就可以显示了。原创 2015-05-01 23:01:42 · 5840 阅读 · 0 评论 -
AJAX使用出现乱码的问题
乱码问题都是编码不统一造成的,使用AJAX交互时可以对要发送的数据进行编码,如下:function verify(){ var url = "ajax_Server?name="+encodeURI($("#user_Name").val()); $.get(url,null,function(data){ $("#result").html(data); });}使原创 2015-04-27 09:43:17 · 1969 阅读 · 0 评论 -
AJAX学习笔记之XML对象原生JS使用方法
首先在src文件下写好servlet,命名为AJAXMLServe:import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletEx原创 2015-04-26 17:17:33 · 449 阅读 · 0 评论 -
AJAX学习笔记之xml的JQ使用方法
首先在src文件下写好servlet,命名为AJAXMLServe:import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.Servlet原创 2015-04-26 17:55:08 · 420 阅读 · 0 评论 -
AJAX学习笔记之JQ使用方法
首先在src文件下写好servlet,命名为ajax_Serve:import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import javax.servlet.ServletExcep原创 2015-04-26 17:10:18 · 466 阅读 · 0 评论 -
css sprites
今天看一个教程,看到了一个新名词叫做“雪碧图”,不知道是啥,百度出来说是css sprites,其实就是一种前端性能优化技术,将多张图片合成一张,减少对服务器的请求,同时减少图片的大小,提升浏览器的性能。将多张图片合成一张之后,使用background-position属性显示要显示的部分,其余的部分会自动隐藏。原创 2016-02-26 20:16:53 · 287 阅读 · 0 评论 -
fullpage插件使用笔记
fullpage插件是一个基于jquery的全屏滚动插件,支持ie8+、以及其他的主流浏览器,功能强大,体积只有7k,下面记录一些笔记,需要的时候可以查看。fullPage使用笔记:1、引入fullPage的css样式库、引入jquery(1.6以上)、引入fullPage的js文件、推荐使用cdnjs加速2、页面结构:一些内容//slide幻灯片,可以滑动 12原创 2016-03-27 17:07:45 · 2703 阅读 · 0 评论 -
CSS3动画在安卓手机上无效
今天在做公司的项目时,遇到css3动画在安卓手机上无效的问题,在网上搜了一下,发现是兼容性问题,写成-webkit-keyframes就可以了,动画就生效了。原创 2016-05-05 11:38:30 · 2042 阅读 · 0 评论 -
javascript的正则表达式
正则表达式:1、什么是正则表达式正则表达式是描述字符串模式的对象。2、正则表达式基础元字符:正则表达式中有特殊含义的非字母字符* + ? $ ^ . | \ () {} [] 字符类:[abc] 匹配a或b或c的字符字符类取反:[^abc] 匹配不是a或b或c的字符贪婪模式:正则表达式默认为贪婪模式,尽原创 2016-11-07 20:05:10 · 244 阅读 · 0 评论 -
flex布局笔记
flex布局:.parent{display: -webkit-flex;justify-content: center;水平居中align-items: center;垂直居中}flex-direction: row | row-reverse | column | column-reverse排列方向-webkit-flex-wrap: nowrap原创 2016-11-04 15:24:30 · 566 阅读 · 0 评论 -
yeoman创建项目在根目录的问题
今天在学习Grunt的时候,遇到一个奇怪的问题,就是使用yeoman创建项目的时候,一直默认创建在根目录,就算进入了自定义的目录,也是创建在根目录,找问题找了一个下午,甚至将grunt,yeoman,bower删除了,重装都不行,终于在慕课网的问答区找到启发。在根目录下有个文件叫做”.yo-rc.json”的文件,mac下,在终端进入到根目录,用ls -al命令,可以看得到这个以点开头的文件,原创 2016-10-09 16:47:20 · 1338 阅读 · 1 评论 -
chrome不支持本地文件调试cookie
javascript在chrome浏览器中不支持本地调试cookie,用firefox亲测可以。原创 2016-08-26 16:59:09 · 4133 阅读 · 0 评论