web前端
文章平均质量分 55
小问_
这个作者很懒,什么都没留下…
展开
-
node-sass编译安装
node-sass是一个编译sass源文件为css的nodejs库,这是一个用C++写的底层库,在我们使用命令安装的时候会使用node-gyp库去编译安装,这里我大概记录下安装流程和注意事项。原创 2022-07-19 18:01:55 · 1006 阅读 · 2 评论 -
JS动态生成SVG对象动态设置use和属性
需求:JS动态生成SVG对象,然后动态生成use子元素并设置xlink:href属性;然后appendChild到页面DOM;这是我在使用svg制作icon图标的时候遇到的问题,就是symbol 然后svg use引用,方便制作icon;通用方法:直接外围一个div, 然后div.innerHTML = '<svg class="icon"><use xlink:href="#'+name+'"></use></svg>'这样是可以的原创 2021-11-30 17:28:47 · 2398 阅读 · 0 评论 -
[Vue源码分析]Vue.extend与Vue.component的区别
版本:Vue.js v2.6.11Vue.extend与Vue.component的区别,网上搜了很多资料说的都挺好,但是心里似乎总有那么点恍惚,于是找来Vue的源码,一探它底层的实现原理。直入主题,Vue.extend代码如下/** * Class inheritance */ Vue.extend = function (extendOptions) { extendOptions = extendOptions || {}; var S原创 2020-05-30 17:20:39 · 551 阅读 · 0 评论 -
客户端/electron集成Facebook登录
本文记录下我的electron客户端软件集成Facebook登录,根据Facebook的开发文档来看,其他pc等端的(c/c++/c#等)客户端软件也可以集成该登录功能使用户快速登录。所需SDK:无需; 流程概述:在客户端中使用webview类的组件库请求访问Facebook的URL,并带上必要参数,登录成功后回调跳转到特定url,客户端监听webview的URL变动,并提取其中的token...原创 2019-10-30 11:16:00 · 564 阅读 · 0 评论 -
webpack devServer开启https(vue/cli-3.x)
版本vue/cli-3.xwebpack devServer开启HTTPS;注意https参数为true,port 同时为443;端口为80或者443,在Mac或者Linux系统上启动时记得加sudo, 如 sudo npm run serve如果要用域名访问的话,host设为 0.0.0.0 然后改下hosts域名指向127.0.0.1就行了...原创 2019-07-17 15:51:11 · 9760 阅读 · 0 评论 -
近期前端开发总结之架构与代码规范
近期做了一些项目,h5、web、小程序都有,胡言乱语几句总结1、关于组件设计因为是维护的老代码,引发了这个思考,比如这个上传功能的按钮,旧的遗留代码是这个按钮,以及上传功能(包括各种渠道:不同地区,不同端的业务逻辑)以及上传后的结果展示,都放在一个vue组件里面,然后代码一千多行(代码我就不展示了,商用代码),我看到这代码的时候我内心是比较崩溃的,万一产品改了上传按钮的样式和位置,还有...原创 2019-04-22 15:58:30 · 227 阅读 · 0 评论 -
华为自带浏览器虚拟导航栏导致页面按钮响应错位问题
华为自带浏览器,我遇到的是华为华为 nove 3e,自带浏览器,见图问题描述: 在vue项目中,进入个人中心页面(如图1),然后进入其他页面-会员开通(如图2),然后上滑该页面,使头部导航栏上缩隐藏,底部虚拟导航栏也隐藏(如图3),然后再返回个人中心,这样就会出现个人中心头部部分区域被隐藏,页面可点击元素的错位(如图4)图1图2图3图4 这应该是浏览器在隐藏上下的虚拟按钮栏之后,对...原创 2018-11-20 19:18:55 · 3324 阅读 · 1 评论 -
swiper在vue项目中loop循环轮播失效
长话短说,在vue(2.5.x)中使用swiper(4.3.3),轮播加了autoplay和loop、observer、observeParents等参数还是很诡异的无法循环轮播;那么可以这样写代码试试:this.$api.queryImages().then((resp) => { if(resp && resp.data.resultCode == "0"...原创 2018-07-07 15:44:31 · 12738 阅读 · 3 评论 -
swiper使用和修改子项两个注意事项
swiper是一个滑动轮播的库,使用方便,功能强大,这自不必多说;1、使用注意事项:在使用swiper的地方的父div不能是display: none; 因为这会影响swiper的初始化;解决:比如在弹出层使用滑动轮播展示图片,正如上所说,初始化swiper前记得先显示弹出框(先display: block)2、修改子项注意事项:直接删除增加swiper-slide轮播子项导致轮播页数错误,轮播到...原创 2018-05-23 16:47:51 · 1511 阅读 · 1 评论 -
Hammer.js事件互斥重叠之requireFailure与recognizeWith
本文简单记录下hammer.js的事件重叠与互斥问题,如有不当之处望指出,谢谢!版本:Hammer.JS - v2.0.8先说说recognizeWith,这个很好理解,就是可以同时辨识多重手势事件,比如,单击.recognizeWith(双击) 的情况下,点击两下,这会触发单击(调用两次单击回调)和双击事件(调用一次双击回调);requireFailure的作用大家可以自己看原文,我的个人理解比...原创 2018-05-08 17:41:59 · 1546 阅读 · 0 评论 -
简易实现上拉刷新UpRefresh
缘起:最近研究上拉刷新,记录下自己实现的一个超简易版,大概记录下原理;github: https://github.com/dclnet/UpRefresh 代码和demo都在这,有需要的可以看看。原理: 这个实现比较简单,就是父div块固定高度,子div块不定高度,父块绑定onscroll事件处理,event里面scrollTop获取当前滚动到的距离加父块高度看是不是等于子块高度,等于则标明...原创 2018-05-05 10:54:39 · 2181 阅读 · 0 评论 -
gulp插件gulp-repath使用教程
gulp-repath简介:使用gulp-repath可以重写静态资源引用url,主要功能为给js、css、图片加版本号和加cdn等。1、预备工作:1.1、安装nodejs 环境。1.2、本文示例文件结构如图:2、安装2.1、https://github.com/dclnet/gulp-repath2.2、安装 npm install --save-原创 2017-08-24 21:32:22 · 510 阅读 · 0 评论 -
微信网页开发weixin://preInjectJSBridge/fail、分享描述失效问题记录
问题:微信网页开发做分享功能时IOS上正常,Android在分享到朋友时描述失效,weinre调试显示weixin://preInjectJSBridge/fail报错解决:先说重点如何解决的,其实就是把 onMenuShareXXXXX 这类注册事件的方法调用放到wx.ready(function(){...})里面去就可以了,先前是放外面所以调用失效,但是也没报错;网上资料说是ES6语原创 2017-05-30 00:31:47 · 3892 阅读 · 2 评论 -
常用的 DOCTYPE 声明
常用的 DOCTYPE 声明原文来自:http://www.w3school.com.cn/tags/tag_meta.aspHTML 5HTML 4.01 Strict该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。HTML 4.01 Transitional该 D转载 2016-10-09 14:33:11 · 245 阅读 · 0 评论 -
IE8定义文档兼容性
文档兼容性可定义 Internet Explorer 呈现网页的方式。 本文将介绍文档兼容性、如何为网页指定文档兼容性模式以及如何确定网页的文档模式。简介了解文档兼容性的必要性了解文档兼容性模式指定文档兼容性模式配置 Web 服务器以指定默认兼容性模式确定文档兼容性模式了解 Content 属性值控制默认呈现总结相关主题简介为了帮助确保您的网页在将来的 Internet E转载 2016-10-09 14:07:36 · 567 阅读 · 0 评论