- 博客(41)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 pixi.js 解决绘制弧线锯齿问题
项目中需要实现一条线条的滑动效果，发现弧线滑动时锯齿太严重。在PixiJS有自带的抗锯齿的参数，但是在使用时感觉效果并不是很好。参照http://pixijs.download/release/docs/PIXI.Application.htmlhtml <canvas width="300" height="300"></canvas>j
2019-03-11 17:13:12
4385
原创 微信小程序：图片转base64
1.利用UPNG.js实现具体可以参考：https://blog.youkuaiyun.com/weixin_38023551/article/details/80885874经测试发现有些不足：1.时间略长，部分机型前置摄像头时间10s左右2.会出现被截取问题Ps： 不知道是否是我的使用方法不对，比较着急上线所以没有过多研究，欢迎大神指点2.利用readFileSync实现小程序库版本1...
2019-01-25 12:45:46
2123
原创 利用rem实现页面适配问题
vue + Sassrem是CSS3中的新单位，与em最大的差别是rem是根据html的fort-size来展现的。main.jsvar viewportWidth = document.documentElement.clientWidth || document.body.clientWidthdocument.getElementsByTagName('html')[0].style...
2018-12-25 14:38:21
493
原创 JS 实现二叉树
之前在网上学习了二叉排序树的实现方法，然后想实现二叉树，发现JS的实现不好找，就在二叉排序树实现的基础上改了一下，小白一名欢迎指教。二叉树实现var BinaryTree = function (key) { var tNode = function (key){ this.key = key this.left = null this.right = null } v...
2018-10-31 12:55:48
2219
原创 Cocos Creater 项目小结
第一次用ccc开发小游戏，总结一下用到的点。clearInterval不生效问题// Util.jsclearIntervalFunction: function (interValTimer) { var clear = function (interval) { clearInterval(interval) } clear(interVal...
2018-09-12 10:33:07
1034
原创 pixi.js 实现Sprite跟随鼠标移动
移动功能在官方实例中已有，不过在开发过程中因为与需求有个冲突bug，所以又重新写了一个，虽然并没有直接解决不过也记录下吧。官方实例代码：obj.on('mousedown', onDragStart) .on('touchstart', onDragStart) .on('mouseup', onDragEnd) .on('mouseupoutside', onDragE...
2018-07-05 12:34:51
4880
2
原创 手势检测：单击、双击、缩放、旋转
单击(tap)手势检测的关键是用 touchstart，touchmove，touchend 三个事件对手势进行分解 。那么怎么分解单击事件呢？在 touchstart 发生时进入单击检测，只有一个接触点。因为单击事件限制为一个手指的动作。没有发生 touchmove 事件或者 touchmove 在一个很小的范围(如下图)。限制 touchmove 在一个很小范围，是为了给用户一...
2018-06-29 10:41:32
2452
原创 Vue微信SDK 录音功能
需求： 微信下长按按钮，弹出正在录音gif，上传录音； 在非微信下，正常显示录音gif，即做一个假的录音按钮。 在微信下，因为项目中会加载一个外部js，有一定几率会阻塞wx的初始化，所以如果在用户点击按钮时，wx sdk没有初始化，也显示假的录音按钮。将tourch和mouse写绑定在一个button中 在IOS下 会出现一次录音 取消长按后再执行一次 startRecord ->...
2018-06-13 18:47:46
6195
2
原创 Vue 页面间跳转及传值
路由配置：export default new Router({ mode: 'history', routes: [{ path: '/', name: 'RootPath', meta: { keepAlive: true }, component: MainSec }, { path: '/quiz/:id',...
2018-04-28 11:56:13
5627
原创 axios封装
util.jsimport axios from 'axios'import qs from 'qs'axios.interceptors.response.use(function (response) { // 对响应数据做点什么 return response}, function (error) { // 对响应错误做点什么 console.log(erro...
2018-04-13 10:28:52
1657
原创 Vue开发环境接口跨域问题
利用proxyTable属性实现跨域请求参考 推荐使用proxyTable来实现，不过我当时配置完成后请求一直报错，所以才改用nginx来实现。利用nginx实现接口地址： http://localhost:8000/ vue项目 启动地址http://localhost:8080/ 配置nginx： 在使用Nginx作为代理服务器，并在配置中对应的location下...
2018-04-06 18:14:31
784
原创 audiojs使用总结
项目需求：同一页面有多个音乐播放器，同一时间只能播放一个音乐。因页面限制所以需要找一个比较简洁，且方便自定义样式的插件，所以选择了audiojs。并利用圣杯模式实现进度条长度自适应，可以适用不同尺寸设备。效果图： HTML代码：<div class="audiojsZ"> <audio src="../../static/musics/n.mp3" prel...
2018-03-30 17:37:38
7524
原创 JS预加载图片
js预加载图片需求：项目中点击按钮，实现切换背景图功能。 问题：在切换css的background-image属性时，先加载图片后显示，会出现一瞬空白期。解决方法：提前预加载背景图 首先利用Image()构造函数来创建一个屏幕外图片对象，之后将该对象的src属性设置URL，由于图片元素并没有添加到文档中，因此它是不可见的，但是浏览器还是会加载图片并将其缓存起来。func...
2018-03-26 11:43:02
435
原创 JS多级引号嵌套
Vue自定义组件中 动态绑定class'<ul :class="' + "'suggest-quizlist-ul suggest-quizlist-ul-'" + '+THEME" id="suggest-quizlist-ul" v-cloak>' + '<li class><strong>推荐测试题</strong>&a
2018-03-21 17:02:17
709
原创 echarts导出图表（含背景）
需求：后端返回背景图，在图上显示动画效果绘制图表，之后用户可以在移动端长按保存结果图。 流程：首先利用echarts生成图表，设置动画时长为2s，之后利用echarts的getDataURL方法生成base64格式图片替换到img标签上，覆盖echarts图表。 主要问题：下载echarts时遇到图片跨域问题 解决办法：服务端设置图片头Access-Control-Allow-Origin:...
2018-03-12 18:35:45
6970
原创 利用webpack打包vue项目后在本地运行资源报404错误
利用webpack打包vue项目后在本地运行资源报404错误解决方法： 打开config文件夹下的index.js，设置assetsPublicPath: ‘./’。
2018-03-03 21:24:07
6551
原创 Element-UI table排序问题
项目需求：选择框与表格的排序列双向绑定选择器： 表格 表头行： el-select v-model="metricValue" placeholder="请选择"> el-option> ... el-option>el-select>el-table ref="singleTable" :data="tableData" :default-sort
2018-02-02 16:25:54
30425
原创 Vue利用keep-alive实现页面缓存
从首页 -> 页面1，再从页面1 ->首页时，保证首页与离开时一样。（可以缓存具体组件，因项目不涉及，暂不说明）App.vuekeep-alive> router-view v-if="$route.meta.keepAlive">/router-view>/keep-alive>router-view v-if="!$route.meta.keepAlive">/router-v
2018-01-30 11:22:03
2342
原创 vue+webpack+nodemon实时打包项目
实时打包项目方法：安装nodemonpackage.json重新编写start方法 监控src文件夹下所有的html/vue/js/less文件 有更改则自动打包 "scripts": { "dev": "node build/dev-server.js", "start": "nodemon --watch
2018-01-23 16:01:10
1981
原创 Mac清除sns缓存
Mac清除sns缓存方法：sudo killall -HUP mDNSResponder官方地址：https://support.apple.com/zh-cn/HT202516
2018-01-12 16:43:27
944
原创 JS方法集合
JS方法集合固定区间内去n个不重复整数 0-9之间取3个new Array(10).fill(0).map(function(v,i){return (i)}).sort(function(v,i){return 0.5-Math.random()}).filter(function(v,i){return i 3})//Array的map和filter是ES6方法/
2018-01-04 16:17:10
675
原创 facebook jsAPI汇总
初始化函数window.fbAsyncInit = function() { FB.init({ appId : '****', xfbml : true, version : 'v2.11', cookie: true }); FB.AppEvents.logPageView(); // 检测登陆状态函数 FB.get
2017-12-26 15:29:20
987
原创 微信小程序：利用canvas缩小图片
功能分两部分：展示、提交 一期的时候，用户预览图片，直接提交到后台。但是发现如果图片太大，还要进行二次处理，还会降低接口相应速度等原因。所以要对图片进行压缩。压缩原理：选择图片后，利用canvas的drawImage方法重新定义图片大小，再利用canvasToTempFilePath方法下载到缩小后图片。// 利用绝对定位 隐藏canvas<canvas canvas-id="photo
2017-12-15 17:54:14
12184
原创 微信小程序：获取用户权限
介绍下在开发过程中所用到的方法：1. 获取已授权列表wx.getSetting({ success: res => { if (!res.authSetting['scope.writePhotosAlbum']) { console.log('保存图片未授权') } else { console.log('保存图片已授权') } }})2.
2017-11-21 15:12:28
14952
原创 微信小程序：自定义音乐进度条
需求：显示音乐播放按钮、可手动拖拽进度条；页面中含多个音乐，播放当前音乐时暂停其他音乐播放。小程序自带标签 audio 小程序自带的audio标签含固定的样式，且有最小尺寸。目前项目也不含name和author字段，所以放弃audio标签。实现效果图 初始化音乐数据<text>{{currentProcess}}</text><...
2017-11-14 18:31:52
17015
原创 微信小程序：踩坑集合
一、padding: 0rpx 、 padding: 0、padding: 0px的区别父标签宽度375px，padding设置0rpx会增加1px长度，超出屏幕宽度后使页面可左右拖动。 width:100%;padding:0rpx;width:100%;padding:0;/* padding:0px; */试了一下margin的值对于0rpx和0的显示也不同。 0rpx会向内缩进1p
2017-11-03 17:16:09
926
原创 Vue + exif实现图片旋转
html5+canvas进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。 注：在开发时发现 三星手机提交时会向右旋转90度 所以对仅对安卓系统中三星手机进行特别处理 这里主要用到Orientation属性。
2017-10-26 18:36:24
8871
原创 Vue + i18n实现国际化
首先，介绍下项目结构，如图：1.在i18n/lang下编写json文件。//zh_CN.json{"message":{"hello": "关于"}}//en.json{"message":{"hello": "about"}}2.i18n/index.js 国际化配置文件import VueI18n from 'vue-i18n'//需先安装vue-i18n
2017-10-24 18:17:26
2653
原创 CSS知识点
浮动元素撑开父元素的区别.clearfix { overflow: auto; _height: 1%;}大家都知道position设置为absolute以及float定位会使元素脱离正常流，如果父元素没有设置高度的话，他们不会把父元素的高度撑开。对于float元素可以把父元素设置overflow:hidden或者其他可以为父元素创建BFC的方法来解决这个问题，但是为什么对于
2017-10-18 16:09:15
316
原创 构建高性能网站：前端技术
使用前端技术构建高性能网站方法整理减少HTTP请求通过图片地图来加载多个图标，CSS Sprites来合并图片，使用内联图片，合并JS脚本和CSS样式表来实现减少HTTP请求次数。使用内容发布网络(CDN)将静态文件(css,js,图片等)存放在第三方的服务器里，可以减少用户和资源的距离，从而减小响应时间。 使用CDN会增加页面的不可控性：若CDN服务器崩掉或文件丢失、更改，均会使页面不可正常使用
2017-09-11 11:34:02
488
原创 利用iScroll实现上拉加载更多时问题
利用iScroll实现上拉加载更多时问题问题：在第一次加载更多，页面渲染后，视角会自动回到最上部，而不会停留在原视角。原因：在读取数据时有图片值为-，使得浏览器报404错误。修改：增加判断，若无图片则不读取
2017-08-09 09:30:12
723
转载 Console命令详解
Console命令详解,让调试js代码变得更简单 console.info("这是info"); console.debug("这是debug"); console.warn("这是warn"); console.error("这是error");引用：http://www.cnblogs.com/see7di/archive/2011/11/21/2257442.html
2017-07-28 09:43:31
568
原创 AngularJS使用备忘录
orderBy:string或arr 当接单一字符串时，按单列排序 当接数组时，多列排序limitTo:pageShowNum:currentStartNum pageShowNum->页展示数 currentStartNum->开头编号ng-class=”func()” 数据变化时，执行func函数
2017-07-05 09:30:47
330
转载 eval用法介绍
eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。var a=1var b='a'eval(b)//output 1var a_b = 2eval(b+'_b')//output 2eval("1+2")//output 3避免在不必要的情况下使用eval eval() 是一个危险的函数， 他执行的代码拥有着执行者的权利。
2017-07-05 09:21:31
853
转载 4行CSS实现【表格内容超过一行的部分，用省略号代替】【支持IE6】
4行CSS实现【表格内容超过一行的部分，用省略号代替】【支持IE6】“` table{ table-layout: fixed;}td{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} 转载：http://www.cnblogs.com/warrentech/archive/2012/05/09/2
2017-07-03 10:18:08
305
原创 Ionic创建项目及打包
Ionic创建项目及打包Ionic官网提供了三个项目模板blank、tabs和sideMenuionic start productName blank Ionic支持两个平台ios、android，默认的Ionic项目并没有添加这两个平台。 我们需要手动添加，cd到开发目录下执行命令：ionic platform add android ionic platform add ios Andr
2017-04-24 20:25:49
535
1
Echarts词云源文件
2018-03-14
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人