- 博客(30)
- 收藏
- 关注
RSS订阅原创 前端实现路由
前端实现路由目的：后端实现的路由本质是通过服务器代理与路径的配合去访问服务器上的静态资源。而我们现在的项目都是单页面，路由控制权都是放在前端了。前端框架现在都是单页面模式，了解他们实现的本质变得重中之重。简单分析：前端实现路由有两种方式 hash 与 historyhash路由：hash原本是作为页面定位使用，本身会在URL后携带#，切换路由只改变#后面的值，他不会改变浏览器访问服务器资源的地址（#前的才会被用在请求中），所以改变hash值就像我们改变url参数一样不会导致页面的重载
2020-05-29 16:37:03
470
原创 对可视化项目模型加载进行的性能提升（10多倍）
可视化项目中经常会加载进模型，我的业务中，有个大楼的3D模型，一共有3个FPX模型，加起来30兆左右，使用公司之前的加载组件加载一共耗费了将近20多秒。而且浏览器会卡顿 模型显示花了10多秒，显示完后到能操作又消耗了10多秒，并且加载期间导致我的首屏动画无法逐帧显示，严重影响了效果的展示，后来推测可能是js阻塞造成的，查看了之前FPX加载源码后发现了问题所在，解析FPX二进...
2020-03-30 14:13:45
1198
原创 scss中配置式编程（解决大量相似样式与class）
scss中对象式编程（骚操作）好久没有写博客了，最近一直比较忙。今天在做大屏可视化项目的时候，需要写一个动画，供6个表格使用，但是每个表格相差的只有参数不同：具体效果如下：这是左侧的三个面板从左侧弹出 ，右边也有这样的三个正常来说 在vue中我需要写好多的class 从wrap1 - wrap6 <transition appear name="wrap1"> ......
2020-03-26 21:12:49
1456
原创 vue、react js变量改变class中的属性
以前写tab切换组件的时候，发现需要根据js的值，生成不同的class样式，开始想到的是map创建很多的class类，用js变量生成不同class名,傻方法如下：今天发现这方法不靠谱，不能一劳永逸，所以换了个方法：在style中根据js的值动态设置css中的变量在class中调用这个css变量就可以动态生成不同属性的class...
2019-10-14 10:34:25
2747
原创 css实现点赞效果
核心的方式是通过 一张背景图中position从左到右移动，然后transition 中 steps控制帧率来实现掩盖滑动效果。点赞的图完全可以自己用PS制作。<div class="box"></div>.box{ width: 50px; height: 50px; background: url(./dianzan.png) no-repeat;...
2019-10-12 18:31:16
4352
2
原创 开启gzip压缩
前端gzip压缩一直都是必备的，简单又能能压缩不少的文件体积，用了好久了今天记录一下。我们服务器用的nginx，进入服务器下nginx.conf文件， gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_comp_level 3;//压缩等级，越大压缩越大 gzip_types text/plain ap...
2019-10-11 16:23:00
187
原创 记录使用过程中uniapp的BUG
记录uniapp的使用过程中遇到的BUG、注意事项跟自己的解决方案未来会不会修复暂时不知道1.开启H5摇树优化后，打包的H5 picker组件会失效（解决方案：关闭H5摇树或者自己写个picker组件）2.APP中的webview 监听触摸事件没有效果，官方也没解释：3.安卓手机中自定义手机字体不生效（解决方案：uni.getSystemInfo判断下机型，安卓字体特殊处理）4.页面切...
2019-10-09 20:41:34
744
原创 dva中引入样式问题
在dva中这样引入样式是className无效的，只能监听到header这样的标签选择器，我们一般都用以下方式写className，有时候觉得麻烦，这是因为dva中默认开启了css module，可以在样式文件中加 :global这样就能使用第一种方式引入样式了。...
2019-08-03 11:14:25
1061
2
原创 关于withCredentials与状态码204
The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. Origin ‘’ is therefore not allowed access. The cred...
2019-07-24 12:57:37
522
转载 /deep/的用法
/deep/的意思大概为深入的，深远的。无意中看到css中有关于这种写法，开始没太注意 ，以为是组件css的写法，后来才发现不是。我们都知道Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。这样在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了，然后你要想修改子组件的样式，一般是提取一个公共文件，在公共文件里面修改样式，但是这样也存...
2019-07-19 18:38:03
49216
5
原创 react没有组件的文件时获取redux中的数据
举例 比如我们想在配置文件中获取redux，这时候普通的方法就不奏效了，这时候我们可以在config.js中引入 store,import store from './../redux/store';console.log(store)打印出来可以看到 store中有多个内置方法，查看官方的apihttp://cn.redux.js.org/docs/api/Store.html...
2019-07-11 10:49:11
1132
1
原创 redux利用redux-persist实现数据持久化
我们在使用redux的过程中会出现页面刷新redux中数据丢失的情况，我们有时候就会用到localstorage，sessionstorage等，但是我们都用了redux，应该尽量避免使用这两个。这里推荐使用redux-persist，他会将你state中的数据放入缓存，保持数据持久化：首先下载包：在store中使用// 引入createStoreimport reducer fro...
2019-07-11 10:33:16
1581
原创 egg.js部署到服务器
用egg.js写了一些接口，要上传测试服务器测试，还不会egg.js可以看看官方api :https://eggjs.org。说一下部署上传服务器的流程。1.首先先把egg项目文件夹中除了node_modules的文件放到服务器的某个目录下2.然后确保nginx服务器上安装了mysql，node如果没安装node，可以去https://nodejs.org/en/download/下载对...
2019-07-09 14:36:59
15353
11
原创 笛卡尔积：电商中sku规格属性算法
前两天做电商前端的朋友问我，根据产品属性，显示出所有不同属性产品，属性是动态的。这是电商中经常会遇到的笛卡尔积问题。例如一个手机有金色，白色。内存有8G，16G。那他就要生成4中不同属性的手机。我的做法如下：// 产品属性 let list = [ { name: '存储容量', checkList: [ ...
2019-07-05 09:49:58
5459
2
转载 网站迁移之：301永久重定向与302临时重定向
重定向就是将网页自动转向重定向，即：301永久性重定向：新网址完全继承旧网址，旧网址的排名等完全清零301重定向是网页更改地址后对搜索引擎友好的最好方法，只要不是暂时搬移的情况，都建议使用301来做转址。302临时性重定向：对旧网址没有影响，但新网址不会有排名例如：我们之前网站的域名是 a.com，现在替换成了 b.com。但是用户并不知道域名改了，所以还是在浏览器里输入 a.com，We...
2019-06-10 21:58:16
1056
原创 react中的setState同步异步问题
在使用react中setState是常用的方法，看下面这个例子：setState是异步更新的 通常使用await或者callback监听更新完成；再看个例子，这是个有意思的现象：但是当setState中放入Object.assign他有着不同的表现：他会异步在state中一个个插入当前assign合并完的对象的属性值，并且同步更新在当前合并的对象中改变的pre属性。...
2019-05-30 22:34:38
1911
原创 记一次失误，jsonp不属于XmlHttpRequest协议
今天在react开发中使用了jsonp请求高的天气，然后在开发者工具的XHR中怎么也找不到请求，后来才发现jsonp请求不属于XmlHttpRequest协议，所以network的XHR中不会显示。JSONP只能实现GET请求，由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源。如果要进行跨域请求， 我们可以通过使用html的script标记来进行跨域请...
2019-05-24 23:01:09
1279
3
原创 解决vscode没有代码提示
今天在使用vscode的时候，代码提示突然不见了。我先是在设置中更改了配置：接着搜索prevent，取消此项的勾选大部分人这样就成功了，但我这里还是显示不出来但是在html文件中是正常的这时候点击右下角的文件类型选择html类型，转换后再点击右下角的类型选择变为自动检测，这时候我的代码提示就能正常显示了...
2019-05-24 15:58:52
191608
45
原创 vue中判断div滚动条是否置底
业务中遇到这个问题，百度搜索了一下，没有好的方案就自己写了一个。在mounted中监听对应的div滚动事件document.querySelector('.content-box').addEventListener("scroll", this.scrollToTop);在方法中执行scrollToTop(){ let el=document.querySelector('.co...
2019-04-18 12:08:48
2226
1
原创 vue页面切换中断ajax请求
项目中遇到个问题，客户端要等服务端操作3到4秒后才能返回结果，这时候用户退出页面ajax请求还在进行，会影响性能。axios中提供了两种方式解决中断ajax问题，这里我就说我用的这种。在main.js中加入以下代码；Vue.prototype.$http= axios;const CancelToken = axios.CancelToken;let cancel;Vue.proto...
2019-01-23 19:14:45
2824
3
转载 详述Promise的使用（前端必备）
Promise的重要性我认为我没有必要多讲，概括起来说就是必须得掌握，而且还要掌握透彻。这篇文章的开头，主要跟大家分析一下，为什么会有Promise出现。在实际的使用当中，有非常多的应用场景我们不能立即知道应该如何继续往下执行。最重要也是最主要的一个场景就是ajax请求。通俗来说，由于网速的不同，可能你得到返回值的时间也是不同的，这个时候我们就需要等待，结果出来了之后才知道怎么样继续下去。//...
2019-01-16 11:46:29
13252
原创 混合APP中实现合成带参数二维码的图片并分享到微信
项目中遇到个需求，要把带个人参数的二维码的分享图分享到微信，让两个用户绑定。这是分享之前的样式，要用canvas把它做成一整张图片，如果不是APP中是在微信会H5中可以进入页面就制作，覆盖在原图上让用户长按图片下载。分享之前用户可以自由搭配分享样式，这是分享在微信中的样子。首先可以去BootCDN下载html2canvas引入项目中。直接上代码//画图 huatu:func...
2019-01-03 12:58:06
1296
原创 vue中实现缓存页面，ajax更新部分内容
举个例子项目中，这9张图与抽奖次数全是后台ajax请求来的，但是每次进页面的时候我就只要检测抽奖次数是否改变就够了。首先要用keep-alive缓存当前页面然后在页面中写activated函数与created中的方法一致，获取抽奖次数的接口加个参数。最后在ajax请求中，判断如果是此参数的，就只更新次数，防止图片一直刷新 getshuju:function(type){ ...
2019-01-02 21:02:23
1195
原创 带地址参数的长链接转换成短链接分享
项目中的长链接中有二维码的地址，二维码的地址中又有用户的参数，出现了两个？，分享出去很不好看还有问题，使用了新浪等的长链接转短链接总会截断第二个问号后的数据。我自己去网站扒了一个长链接转短链接的接口是可以解决这个问题的。 // 特殊字符转换 res.data.qrCOdePath=res.data.qrCOdePath .rep...
2019-01-02 20:39:48
4535
原创 js 13位与10位时间戳转换
举一反三，可以根据自己的需求改变日期样式filters: { //vue过滤器 //时间戳改变 timechange: function (value) { //13位时间戳 var date = new Date(value); const Y = date.getFullYear() + '-'; const M = (da...
2019-01-02 20:15:41
4396
原创 ios应用不通过应用商店下载
1.首先你可以先打包一个越狱包，然后给网上的签名机构弄个企业签名来，否则无法下载。2.这种方式下载的APP是需要用户去授信的，问他们要来.mobileprovision文件放在服务器上，做个链接到该文件就能让用户直接去ios的授信界面。3.做完.plist文件只要链接到该文件就能下载，链接形式：window.location.href=“itms-services://?action=down...
2019-01-02 20:04:16
4873
2
原创 mui，uniapp实现APP整包更新,并展示更新进度条
整包更新与热更新不同，整包更新比对的版本号是应用版本名称 //检测当前版本号 dqbanben:function(){ var that=this; //在页面中初始化plus插件 mui.init(); mui.plusReady(function(){ // 获取本地应用资源版本号 that.wgtV...
2019-01-02 19:38:15
9677
8
原创 mui实现APP中的支付宝支付
mui实现APP中的支付宝支付初始化获取支付通道初始化获取支付通道我用的是vue，首先先引入mui，hbuilder中设置支付宝支付，这里不再叙述。 去博客设置 // 初始化 mui.plusReady(function() { // 获取支付通道 plus.payment.getChannels(function(channels){ that.al...
2019-01-02 19:14:10
2883
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人