前端开发
文章平均质量分 67
小圣贤君
万丈红尘一码农
展开
-
html2canvas在不同设备生成图片大小不一致问题
场景描述:使用html2canvas将移动端的一整个页面或者页面中的部分内容生成图片。当要生成的内容宽高不固定时,比如:全屏显示的页面,那么,在不同分辨率设备上,就会生成出不同大小的图片,虽然生成的图片与设备显示的样式几乎一样,但是,不同的设备生成的图片就还有不小的差异,有的需求是想要生成大小一样的图片,无论在IOS或者安卓设备上,比如你生成的这张图片是一张宣传海报,那么固定尺寸的图片会有更好...原创 2019-11-29 15:24:02 · 6816 阅读 · 2 评论 -
公众号微信内置地图在ios上不显示问题
微信公众号内调用微信内置地图,在安卓上可以正常显示,但是在ios上显示一片空白,而且报错:fail invalid_coordinate 解决方法: 微信小程序默认将组件上绑定的参数都当作字符串了,所以认为坐标点不正确,强制转换成number类型即可。原创 2017-11-15 16:35:47 · 5613 阅读 · 0 评论 -
vue打包后CSS中引用的背景图片不显示问题
vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示。 解决方法: 找到build/utils.js文件 修改成为如下所示内容: 添加红框中的内容即可。原创 2017-11-15 15:43:23 · 9067 阅读 · 3 评论 -
ios下点击label包含的input checkbox或radio无效问题
问题描述: 页面中有多个根据接口返回数据,动态生成的checkbox和radio选项,input元素外有一个label标签包裹着,label标签内有文字,即如下示例所示:<label><input type="checkbox" name="checkbox" value="checkbox"><span>多选框</span></label>在页面中和安卓端点击选项都没有问题,但是在ios上就出现原创 2017-11-02 19:39:56 · 6893 阅读 · 0 评论 -
自定义一个月份选择器插件
这里笔者制作了一个简单还算美观的月份选择器,来实现年月份随意选择的需求。 实际开发中可能会碰到这样的需求,只需要选择年月份就可以,不需要其他日期,时间等的选择,有些日期了的插件较大,杀猪焉用宰牛刀,没必要去引用那些东西,所以笔者就自己编写了一个简单的月份选择插件。先看效果图: 下面是插件js源码:(function($) { var MonthPicker = function(do原创 2017-11-08 22:13:27 · 3460 阅读 · 5 评论 -
几种css炫酷背景欣赏
这里为大家带来几种表现惊人的css背景效果,纯css表现效果,有桌布效果,星空效果,心形效果,砖墙效果等。请欣赏:background: radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0,radial-gr原创 2017-10-30 15:31:01 · 23253 阅读 · 0 评论 -
input输入框中的光标在ios上乱跳的问题
最近一个项目中碰到一个问题: 在一个页面中点击一个按钮会出现一个弹出框,这个弹出框给了fixed定位,并且宽高都等于100%,在这个弹出框中有包含input输入框的div,这个div未做定位设置。页面操作中看不出来什么问题,真机操作的时候会发现,安卓上没有问题,但是在ios上就出现问题了,尤其是ios11系统上,问题表现非常明显。在输入框输入内容的时候,手机下方会弹出一个键盘,然后输入框中光标就跟原创 2017-10-30 14:10:10 · 15509 阅读 · 0 评论 -
css实现饼状图
有一些网页中,有时候会碰到饼状图的需求,比如统计图表,进度指示器,定时器等,实现方式也是各种各样,现在也有不少现成的js库,可以直接拿来使用,方便很多。这里笔者为大家演示一种纯css实现饼状图效果的方法。<div class="pie"></div>.pie { width: 100px; height: 100px; border-radius: 50%; back原创 2017-09-08 17:12:12 · 12362 阅读 · 0 评论 -
最简洁的方式,实现web端百度地图一键定位导航
web开发过程中经常碰到需要调用百度地图来视线定位导航的过程,许多技术博客上介绍的都是调用百度地图的api,来自定义各种效果,这是一种方式。如果没有特殊需求的话,可以采用笔者下面的方式,一句话就可以实现定位导览和导航功能。 window.location.href = "http://api.map.baidu.com/marker?location=" + lat + "," + lng原创 2018-01-22 14:01:40 · 18003 阅读 · 13 评论 -
vue应用开发过程中在谷歌浏览器遇到的奇葩问题——谷歌插件屏蔽接口请求
在开发过程中,碰到了这么一个问题: 通过postman来掉接口请求,正常;直接在浏览器地址中发送请求也正常,但是再应用中发起请求就会失败,请求根本不会发送出去。 将该应用在edge中打开,一切正常。 经检查,原来是谷歌插件Adblock Plus造成的问题,屏蔽了我的请求。 我的请求内容: 一个GET请求,请求的路径中包含以下内容:/adsense/getAdsenseList 关掉A...原创 2018-05-14 17:13:04 · 5066 阅读 · 0 评论 -
小程序通过web-view访问的vue页面中点击无法跳转到小程序相关问题
问题描述: 点击小程序中的一个按钮或者一个banner图片,通过小程序web-view组件到进入一个vue的页面中,在该vue页面中点击图片无法按照要求回到指定的小程序中,点击操作没有任何反应。 解决思路: 小程序的官方文档中有如下介绍,引入微信的JSSDK1.3.2就可以执行在网页中跳转到小程序等功能。&lt;!-- html --&gt;&lt;script type="tex...原创 2018-07-19 20:07:38 · 6738 阅读 · 5 评论 -
IOS上复制粘贴号码到input有空格及input位数限制问题详解
需求说明:用户手机聚焦input后,弹出数字键盘,可以正常输入11位手机号,也可以从电话本复制电话号然后直接执行粘贴操作。问题说明:1.input聚焦时弹出数字键盘,type=number时,安卓正常,ios无效。2.当input type 为number时,input加maxlength限制长度属性无效。3.ios上粘贴电话号到input中会有空格,且获取不到数据。问题解决:1.因...原创 2019-08-30 18:16:44 · 4259 阅读 · 3 评论 -
微信公众号开发:实人认证,活体人脸识别解决方案
实人认证:是指依托活体检测、人脸比对等生物识别技术、证件OCR识别技术等进行的自然人真实身份的校验服务。有些业务需求中,我们想要更安全准确的获取用户的真实身份,避免虚假信息的产生,就会要求用户进行实人认证,说的简单点,就是让用户拿着手机对着屏幕摇摇头,张张嘴,眨眨眼之类的,检测人脸动作后,校验真实性。我们知道,微信公众号开发中,jssdk中只有图片相关的接口方案,并没有捕获人脸相关的接口服务,...原创 2019-07-22 11:31:44 · 18618 阅读 · 4 评论 -
base64转file图片上传
在微信公众号开发过程中,有可能会碰到这种情况,手写签字生成图片,或者页面生成图片等等,然后需求是将图片上传,一般上述情况都是由canvas转成的图片,格式都是base64类型的图片,而我们的上传接口一般都是需要file类型文件,前端要是按照正常的上传思路,是没法正常上传的,除非后台接口做调整,接受base64格式图片数据。微信js-sdk有chooseImage和uploadImage,但是只能...原创 2019-07-15 18:48:44 · 1189 阅读 · 1 评论 -
vue项目中vue-echarts讲解及常用图表方案实现
图表类的项目操作一般常见于管理平台系统,移动端项目中并不是特别常见,不常见不代表没有,在一些商城类应用中,商家需要看到商品的销量分析,盈利分析等,就需要用到图标,比较常用的图标库,像百度的ECHARTS,蚂蚁金服的AntV都是不错的图标库,感兴趣的读者可以直接到他们的官网阅读相关的资料,笔者这里不做优劣说明,主要针对vue-echarts的一些图表方案进行讲解。vue-echarts是基于ech...原创 2019-04-22 13:23:12 · 114571 阅读 · 9 评论 -
vue页面内容生成图片并保存本地方案
既然你打开了这篇博客,那么你肯定碰到了和页面截图多少相关的问题,你在浏览器内生成图片也好,微信内生成页面图片也好,都需要面对把页面内容转成图片的问题。1.将整个页面转成图片;2.将页面内部分内容转成图片。解决方案如下:1.引入html2canvas为了更便捷有效的开发,这里可以引入html2canvas这个插件,如果读者不想采用这种方案,可以跳过下面内容,自行寻求其他解决方案。点击可以...原创 2019-03-29 13:55:14 · 30275 阅读 · 28 评论 -
vue项目白屏问题汇总,多方案详细解决
来了,兄弟,别急,咱们慢慢往下看。项目打包之后,本地打开文件显示白屏了?微信公众号里打开项目白屏了?苹果手机打开白屏了?死活都有部分iPhone机型是白屏显示的?兄弟,别急,咱们走起……1,ios10 出现白屏原因是由于ios 10中Safari中错误描述如下:当你定义一个与参数同名的for循环迭代变量时,我们错误地认为这是一个语法错误。解决方法如下:进入build文件夹;找到w...原创 2019-04-01 11:32:27 · 13922 阅读 · 6 评论 -
小程序商城瀑布流商品展示实现
现在小程序商城越来越多,通常的商城中,商品展示都是那种常规的两列规则展示,但是现在越来越多的应用开始采用瀑布流的方式来展示商品,商品的图片高度不定,商品根据图片容器大小,自由排列,依次下排。 今儿,小圣贤君就为大家讲解一下,如何在小程序中实现瀑布流形式展示商品。 一般页面中商品会显示两列,通过接口拿到数据后,判断现有的两列的长短,将商品加入到列高较短的那一列中,如何判断两列的高低呢? 其实很...原创 2018-08-22 11:35:12 · 11082 阅读 · 4 评论 -
vue + element中el-table导出excel
第一步: 安装依赖:npm install --save xlsx file-saver这里安装了两个依赖插件,感兴趣的读者可以去点开下面的链接,查看源码: https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 第二步: 引入使用: 在你需要导出excel的vue组件里面引入,引入...原创 2018-08-08 14:40:21 · 6868 阅读 · 40 评论 -
css实现梯形标签页
在web设计中,梯形标签页是很常见的一种形式,但是梯形又是一种很难实现的样式,很多开发者会直接用梯形背景图片来生成效果,但是采用背景图片的方式产生了额外的http请求,并不是一种非常理想的方式,这里笔者为大家带来一种直接用css来实现梯形效果的方法。 以一个简单的div为例:<div class="div">这是一个梯形</div>.div{ position: relative;原创 2017-09-07 11:26:21 · 6529 阅读 · 2 评论 -
css实现平角切角和弧形切角效果
在web设计中,有时候会碰到一些切角的样式需求,实现方法有很多种,用图片也好,结点叠加覆盖也好,都可以实现切角的样式,这里笔者直接用css来实现切角的样式。 切单一角: background: #58a;background: linear-gradient(-45deg, transparent 15px, #58a 0);采用如上所示css就可以实现样式,修改角度就可以实现任一角度的切角效原创 2017-09-06 19:10:08 · 16622 阅读 · 6 评论 -
通过css裁切图片为菱形图片
在web设计中,把图片裁切成菱形图片展示是一种常见的需求,通过photoshop直接将一张图片裁剪成菱形是一种解决方案,但不是最佳解决方案,这里笔者直接通过css设计了两种方案,来实现让图片菱形展示。 以以下图片为例: 我们想要这张图片以菱形的效果展示,这里是不能让图片直接通过rotate来旋转实现的,直接让图片旋转,那图片的内容也就倾斜了。我们想要的效果图是这样的: 这里介绍两种方法原创 2017-09-05 19:07:39 · 3435 阅读 · 0 评论 -
前端页面优化
前端是庞大的,包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么 1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。转载 2016-08-29 11:59:06 · 9810 阅读 · 0 评论 -
CSS快速学习3:文本、背景等属性
文本类属性: 7.水平对齐方式 text-align对块元素进行标记。 {text-align:left/right/center/justify;} justify对内容以两端边界线对齐显示 8.垂直对齐方式 {vertical-align:top/bottom/middle;} 9.行高{line-height:normal/数值;} 说明: 1)当单行文本的行高等于容器高时,可实原创 2016-08-18 17:06:30 · 388 阅读 · 0 评论 -
CSS快速学习2:选择符权重和字体类属性
选择符的权重: CSS中用四位数字表示权重。 类型选择符的权重为0001 class选择符的权重为0010 id选择符的权重为0100 子选择符的权重为0000 属性选择符的权重为0010 伪类选择符的权重为0010 伪元素选择符的权重为0010 包含选择符的权重:包含的选择符权重值之和 第一等:代表内联样式,如: style=””,权值为1000。 第二等:代表ID选择器,原创 2016-08-18 17:02:59 · 1536 阅读 · 0 评论 -
CSS快速学习8:圆角切图、滚动条和图片整合技术
圆角切图1、css 书写border-radius:左上角 右上角 右下角 左下角border-radius:左上角右下角 右上角左下角(对角线)border-top-left-radius:左上角border-top-right-radius:右上角border-bottom-left-radius:左下角border-bottom-rig原创 2016-08-25 15:30:23 · 1561 阅读 · 0 评论 -
CSS快速学习9:浏览器兼容
五大浏览器内核 •Trident (MSHTML) (三叉戟;三叉线;三齿鱼叉)•Gecko (壁虎)•Presto ( 迅速的)•Webkit (Safari内核,Chrome内核原型,它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核)•Blink (由Google和Opera Software开发的浏览原创 2016-08-27 14:08:56 · 675 阅读 · 0 评论 -
CSS快速学习10:高度自适应
高度自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。(1)宽度自适应元素宽度设置为100%。(块元素宽度默认为100%)(2)元素具备最小高度的自适应min-height属性:最小高度;说明:IE6浏览器原创 2016-08-27 14:11:05 · 918 阅读 · 0 评论 -
CSS快速学习:几种导航条案例
<!doctype html><html><head><meta charset="utf-8"><title>导航条</title><style type="text/css">* {margin:0; padding:0;}ul li {list-style:none;}body {background:#000;}a {color:#333; font-size:14px;原创 2016-08-29 13:59:15 · 1297 阅读 · 0 评论 -
趣谈表单设计的准则
表单可能是日常UI设计中最常见的设计元素了,它广泛的应用范畴、多年来的积淀使得表单设计牵涉到大量的、约定俗成的设计规则。今天我们来聊聊这些最常见的表单设计准则。 无论是注册网站还是内容输入,总是回避不了表单这种UI控件。表单几乎是每一个数字产品都无法规避的组成部分,它的作用近乎无可替代。不过,表单这种控件应用范畴极为广泛,应用情况牵涉到方方面面,所以请注意,今天的文章里我们所提及的设计准则都只是一转载 2016-09-11 19:52:07 · 659 阅读 · 0 评论 -
CSS快速学习4:浮动和盒模型
浮动属性:Float:定义网页中其他文本如何环绕该元素。有三个属性值:left:元素活动浮动在文本左面;right:元素浮动在右面;none:默认值,不浮动。浮动的三大显著特征:1.div块元素失去“块状”换行显示特征,变为行内元素。2.紧贴上一个浮动元素(同方向)或父级元素的边框,如宽度不够将换行显示。3.占据行内元素的空间,导致行内元素围绕显示。 浮原创 2016-08-19 20:57:44 · 543 阅读 · 0 评论 -
“蚂蚁行军”和彩色边框设计
这里展示两种边框效果,一种是“蚂蚁行军”的动态边框效果,当然,截图中是看不出来动效的,读者需要自己动手运行才能看到效果;另一种是类似老式信封边框一样的彩色边框效果,这个效果在实际开发用到的可能性相对“蚂蚁行军”来说要高一些,有些开发者会采用图片背景的方式来实现这种效果,这里笔者直接用css来实现。<div class="div1"> 蚂蚁行军边框效果</div><div class="d原创 2017-09-05 14:01:21 · 895 阅读 · 0 评论 -
车牌号专用键盘设计和正则验证
在做和汽车相关的项目的时候,可能会遇到自定义车牌键盘的情况,我们知道,汽车车牌有省份简称和后面的字母数字构成,而且现在新兴的新能源汽车的车牌和传统车牌还有些差距,如果需要对车牌号进行输入校验,需要的正则表达式就比较麻烦,这里笔者做了一个和汽车相关的小项目,正好需要用到自定义车牌键盘和车牌号正则校验。 下面先看一下简单的效果图: 这里设计了一个车牌号专用输入键盘,而且车牌号添加了一个新能源原创 2017-06-27 21:22:12 · 9277 阅读 · 3 评论 -
Vue给单独页面添加背景色
由于外层还有一个div,所以设置背景色100%的时候不能全部都被背景色覆盖。 如果给HTML设置背景色还会影响到其他页面的背景色。 解决办法: 给style添加一个scoped表示当前样式只给当前页面设置。 单独设置背景的方法是在单独页面外层添加一个div,将这个div属性设为:fixed,例如:<style scoped> .homeBox { position:原创 2017-06-15 15:05:12 · 22804 阅读 · 15 评论 -
去除jQuery mobile默认样式
jquerymobile有默认的样式,在使用input的时候会出现input和文字不在同一行的情况,因为个人不需要默认样式。 所以需要清除。 解决办法: 在jquery.js导入后,在jquerymobile导入前使用下面的脚本加上data-role=”none”. $("input").attr('data-role','none'); $("select").attr('data-ro原创 2017-06-15 14:56:44 · 2648 阅读 · 0 评论 -
CSS3轮回写轮眼制作
css3新增了不少比较有意思的属性,今天笔者根据css3中的动画属性,简单创作了一个轮回写轮眼,供喜爱动漫的青少年欣赏学习。请先看效果图: 这里只用到了html和css没有用到JavaScript,jQuery等知识点。笔者下面贴出全部代码,然后对代码中部分知识点进行讲解。请看代码:<!DOCTYPE html><html> <head> <meta charset="U原创 2016-11-10 22:12:12 · 9633 阅读 · 5 评论 -
CSS快速学习7:定位锚点
定位锚点:一、position 定位属性,检索对象的定位方式;语法:position:static /absolute/relative/fixed 取值:1、static:默认值,无特殊定位,对象遵循HTML原则;2、absolute:绝对定位,将对象从文档流中拖离出来,使用left/right/top/bottom等属性相对其最接近的一个并有定位设置的父元素进行绝对定位原创 2016-08-25 08:46:36 · 4702 阅读 · 0 评论 -
CSS快速学习6:vertical-align讲解
Vertical-align属性设置元素的垂直对齐方式。说明该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。值描述长度通过距离升高(正值)或降低(负值)元素。'0cm'等同于'baseline'原创 2016-08-23 21:26:24 · 359 阅读 · 0 评论 -
CSS快速学习5:文本溢出和XHTML元素分类
文本溢出1.溢出属性(容器的)overflow:visible/hidden(隐藏)/sroll/auto(自动)/inherit;visible:默认值,内容不会被修剪,会出现在元素框之外;hidden:内容会被修剪,并且其余内容是不可见的;scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他原创 2016-08-22 19:01:50 · 598 阅读 · 0 评论