自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 vue 页面第一次载入或者刷新会出现一两秒的空白[vue启动秒白屏解决方案]

之前做过好几个项目vue都是pc端或者移动端网页上的,网站第一次打开都会出现白屏闪才进入应用,当然本身浏览器默认白色我们并不会在意这些细节,最近做到一个项目关于套壳app,把咋的vue项目套用的webview里,每次打开应用都会白屏下,那酸爽。次日老板在群里公开点名批评...有问题找前端是各岗位一致的共识.... 认真观察了下白屏产生的原理:原来是因为第一次进入时只有...

2020-04-09 15:08:49 1466 4

原创 vue 关于那些所谓的按需加载

一、路由按需加载1.按需加载对比①.路由未按需加载前vebdor.js和app.js都异常大,超过vue理想大小,如下图:②.路由按需加载后体积明显控制在1MB内,如下图:路由按需加载后,会把原来的js,切分-分开成小的js文件,一但你需要访问该模块或者页面时才会加载对应的资源,一定程度上对首次访问起了很多的优化加速左右2.按需加载方法①:直接写入 { ...

2020-04-09 14:53:53 53

原创 公网环境(如何外网访问内网ip地址)

1. 搭建公网环境; a. 网址: https://natapp.cn/ b. 免费注册 c. 进入用户后台, 右侧菜单选择购买隧道; 选择免费(需要支付宝实名认证) d. 点击免费购买即可 (选择 WEB 类型) e. 等待生效;2. 下载 natapp.exe 在 natapp.exe 目录位置 创建 config.ini 文件...

2020-02-11 16:34:22 154

原创 vue 滚动指定位置(高度)

滚动代码千万万,我只取一瓢...深受原生js影响的我以为直接scrollTop=指定高度就可以滚动let diff=1000;//这里是要滚动到的位置高度var container = _this.$el.querySelector('.chat-content');//需要滚动的目标container.scrollTop = diff;好了美滋滋,发完消息执行滚动事件...

2019-10-24 18:15:24 2381

原创 微信小程序 二级联动(多级联动)

这阵子公司突然需要开发小程序,于是乎恶补下,想必时间已过两年,小程序应该相当成熟了,未曾料到一个二级联动就各种模糊不清。官方给出案例,但是写的太乱,可读性差,还会写些多余的东西进去,容易误导我们这些小白...于是开启了百度之路,看到网友写的博客深感痛心,竟然有直接copy官案,大家都是拿来主义,多余的也copy...算了还是自己动手吧。上代码:html:<picker mode...

2019-10-16 11:56:20 1010

原创 微信小程序之保存图片之相册:saveImageToPhotosAlbum、downloadFile、授权问题

看过很多文档,解决方案都是高度的一致,但是代码贴上去就是不行....好吧,只能一步步解析代码看哪里出了问题。解决思路:1.wx.downloadFile下载图片2.wx.openSetting授权3.wx.saveImageToPhotosAlbum图片保存到本地问题点:1.wx.saveImageToPhotosAlbum的报错信息,真机跟调试机上会出现不一致....

2019-08-24 16:49:59 2376

原创 vue input 输入金额尾部接.00 与千位符

最近可爱的产品提了点要求,金额尾部需要.00 而且还要带千位符。html:<el-input v-model="form.projectAmount" type="txet" placeholder="请输入项目金额" @blur="projectAmounts" clearable :maxlength="32"></el-input>js:toT...

2019-05-07 17:32:56 2927

原创 HTML5 History 模式 去除# (vue路由去除#、常见配置、Tomcat配置)

前言:vue使用vue-router时,路径中会有#的字段,是应为打包完成之后,项目为单页面项目,所有的url都指向单个页面,#号之后的路径是指该页面的锚定位置,所以router中的路径是无法加载的。若想去除#,就需要使用router的history模式, 且在服务器端进行配置核心:const router = new VueRouter({ mode: 'histor...

2019-04-12 16:58:25 1205

原创 小程序 部分安卓机里输入框input被输入法遮挡问题

关于小程序输入法跟输入框官方文档有给出过解决办法 cursor-spacingcursor-spacing="0"时,输入框会浮在输入法上面,但是有一部分安卓机型会出现不兼容问题Orz....解决方案:实现理念:先去除键盘弹起上推页面adjust-position="{{false}}",绑定输入时事件bindfocus="bindfocusDialog",获取当前键盘的高度赋值给...

2019-03-04 17:21:29 1570 1

原创 关于bootstrap验证插件bootstrapValidator的使用已经自定义使用及提示

一、源码及API地址bootstrapvalidator源码:https://github.com/nghuuphuoc/bootstrapvalidator大部分案例在源码里都能找到二、引入库此插件式基于bootstrap去扩展的。<script type="text/javascript" src="js/modules/bootstrap/bootstra...

2018-11-27 17:50:04 1841

原创 微信小程序基于高德api地理/逆地理编码获取地址

1.先使用微信自带方法wx.getLocation去获取经纬度。wx.getLocation({ type: 'wgs84', //默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标  success: function (res) { // success var longi...

2018-10-24 16:06:59 4150 3

原创 使用nginx反向代理解决前端跨域问题

项目前后端分离后,前后端项目分开开发,尤其是单页面应用,前端代码会开启单独的服务器,若直接在前端项目中访问后端API,肯定会遇到因跨域不能访问的问题.于是我们用到了nginx俩解决这个问题。nginx配置:server { listen 80; # nginx访问端口 server_name...

2018-10-15 20:06:29 387

原创 Nodejs搭建一个的本地静态文件服务器的方法

方法一:第一步:在Nodejs安装目录安装:npm install connect第二步:在Nodejs安装目录安装:npm install serve-static第三步:新建server.js (可以放在项目里去运行也可以放在Nodejs安装目录下运行):var connect = require("connect");var serveStatic = req...

2018-10-09 14:50:00 545

转载 让Sublime Text3支持Less

1、安装Sublime 插件    (1)安装LESS插件:因为Sublime不支持Less语法高亮,所以,先安装这个插件,方法: ctrl+shift+p>install Package>输入less按Enter    (2)安装LESS2CSS插件:这个插件的作用是    当保存less文件的时候自动生成同名的css文件;    当保存less文件的时候提示编译错误信息;...

2018-10-08 17:38:50 70

原创 让低版本ie兼容h5,以及兼容h5 video播放器

最近做项目因为面向学校,所以兼容刻不容缓。什么css3啊用着都是提心吊胆,为了让内心平静下来,能不用css3的尽量全干掉,一些动画都做成gif....当然还有一些必须要h5,然后就 脑瓜疼.....1.首页引入html5shiv.min.js,这个可以让恶心的低版本ie去支持h5,解决ie9以下浏览器对html5新增标签的不识别。<!--[if lt IE 9]>&...

2018-09-18 17:48:15 789

原创 仿【数字】无限上下滚动增加数值-计数器-仿直播人数统计

css:.sdvm_num{! font-size: 14px;color:red;display:inline-block;vertical-align:middle;margin-left:8px;}.sdvm_num i{width:70px;height:52px;display:inline-block;background:url(../images/number1.png) ...

2018-09-18 17:14:21 782

转载 各种浏览器的Hack写法(chrome firefox ie等)

Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack。然后将Hack放在浏览器特定的CSS文件中,让其符合条件的浏览器解析这些代码,就如前面所说的条件样式,我们将CSS Hack代码放入条件样式文件中,符合条件的浏览器就解析,不符合的将不解析,从面达到您所需要的页面渲...

2018-08-17 13:52:40 71

原创 vue v-for循环打印不出数组里的JSON 字符串 如:[{a:{'b':'1','c':'2'}}]

最近在开发vue项目中遇到一些处理数据的小问题,说大也不大说小也不小,反正一搞就是半天,后台问了半天就回了一句转化一下就行了,好吧踩坑吧....接下来百度一堆vue数组问题,没有找到一个类似的问题...硬着头皮找大牛资讯了一下,终于找到了解决方案:json.parse转化一下JSON.parse() 方法用于将一个 JSON 字符串转换为对象。把 {} 对象传化成数组 [{}]html:<r...

2018-05-25 14:43:47 2862

转载 Bootstrap之Form表单验证神器: BootstrapValidator

前言:做Web开发的我们,表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator。今天就来看看它如何使用吧。一、源码及API地址介绍它之前,还是给出它的源码以及API的地址吧。bootstrapvalidator源码:https://github.com/nghuuphuoc/bootst...

2018-05-16 00:21:16 1557

原创 vue之安装nodejs安装npm安装cpnm安装vue-cli脚手架

搭建vue开发环境。 选择对应版本,https://nodejs.org/en/download/ 安装过程:下一步 路径:(我的D:\Develop\nodejs)下一步就好安装好之后,对npm安装的全局模块所在路径以及缓存所在路径,进行环境配置。是因为以后在执行类似:npm install express [-g](后面的可选参数-g,g代表global全局安装的意...

2018-05-11 22:50:34 8582 1

原创 将远程image图片转base64编码

最近在开发微信网页项目上遇到一个小问题,canvas生成海报需要用到一张图片,而这张图片刚好是别的域名。为此function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; ...

2018-05-04 17:03:38 3069

原创 如何让网页head里的title标题文字滚动起来

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf...

2018-04-08 16:05:18 4256 6

原创 关于a标签‘’禁止事件触发‘无效问题

最近在测试项目注册用户获取验证码的时候发现一个关于a标签的小bug目标:点击获取验证码,时间为60s,到0时提示重新获取。问题:重复点击时显示的时间会随点击次数而改变。js:function settime(obj) {if (countdown == 0) {$('#res_code_hit').removeAttr("disabled");$('#res_code_hit').text(...

2018-03-29 11:38:58 967

原创 删除所有cookie或者清空所有cookie值

前面有转载过一篇关于设置获取删除cookie的文章,文章虽好但是还是有一点美中不足的,比如今天要讲的删除所以cookie;在实际开发删除所有cookie中昌子遇无论使用网上的各种删除办法就是没有办法删除cookie,本人的项目cookie是从请求接口传下来的cookie 上图本人在网上找了各种大神的清除办法,理论上都是没有问题的,方法确实都可以删除,只是在实际项目中缺少点东西 所以导致

2017-12-18 15:41:29 15574

转载 JS设置cookie,删除cookie

js设置cookie有很多种方法。第一种:(这个是w3c官网的代码)//设置cookiefunction setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expire

2017-12-15 16:38:00 225

原创 iframe如何触发父元素事件以及父页面控制iframe子页面元素

最近在开发登入窗口中运用到iframe,其中遇到一些小问题拿出来分享一下。问题:用jquery的$('parent.document').find('#id')来取父框架的元素,取出来的DOM元素也是正确的,在控制台打印出来了,但调用click()方法就是触发不了绑定的函数1.父页面有一个打开注册事件:$('#regis').click(function(){

2017-12-14 15:51:04 11898 6

转载 JS异步加载的三种方式

一:同步加载我们平时使用的最多的一种方式。同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为,就会造成页面堵塞。所以一般建议把标签放在结尾处,这样尽可能减少页面阻塞。二:异步加载异步加载又叫非阻塞加载,浏览器在

2017-12-04 17:07:14 238

转载 怎样个性化你的U盘,更改图标和背景

准备好一张图片(一般的jpg格式的就行)还有一个图标(必须是ico格式),放在U盘根目录下。卷标大家都会改的,就是在u盘盘符上点右键,选择“重名名”,然后输入你的名字之类的字符即可。先改一下背景吧。在u盘根目录新建一个文本文档,改名称为“desktop.ini”(别忘记改扩展名),双击打开,内容输入下面分割线之间的内容----

2017-09-12 17:38:28 1094

原创 关于获取图片在网页加载后的高度

最近在做一个带有轮播的项目,轮播思想是根据获取图片宽度高度再赋值给轮播的div。看代码$(function(){var slidesImgWidth=$('.slides_img').width();var slidesImgHeight=$('.slides_img').height();$('#slider1_container ,#slides_items').width(sli

2017-08-25 16:35:26 695

原创 两种表单提交验证方法

1.直接绑定id进行判断 Appid: AppSecret: pid: js:$('#submitform').on('click',function(){ var appid=$('input[name="Appid"]').val(); var AppSecret=$('input[name="AppSecret"]').val

2017-08-14 01:06:58 250

转载 jquery 淡入淡出以及获取slideToggle状态

查了一下w3c资料jQuery fadeIn(); 用于淡入已隐藏的元素。jQuery fadeOut(); 用于淡出可见元素。jQuery fadeToggle(); 可以在 fadeIn() 与 fadeOut() 方法之间进行切换。jQuery fadeTo(); 允许渐变为给定的不透明度(值介于 0 与 1 之间)。都归于jQuery 效果 - 淡入淡出一类。可以看出这四个效

2017-08-14 00:55:30 670

原创 js滚动分页加载数据

实现理念:1.判断滚动条到底部触发加载函数2.请求数据3.追加数据html:                                    5条 无痕内裤女冰丝一片式中腰性感纯棉裆女士三角内裤大码薄款夏                    ¥21.90            淘宝价:24.90元            努力加载中

2017-07-08 17:35:57 3379

原创 5种常见ajax请求数据

1.$.ajax()返回其创建的 XMLHttpRequest 对象。$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。一.原始的方法 function load(){ var xmlhtt

2017-07-08 17:14:55 4620 1

原创 微信小程序之一键复制到剪切板

最近在开发小程序项目里遇到一个小难题-----一键复制在网页开发里 我们可以引用大牛封装好的复制插件,比如无flash插件clipboard.js适用移动端,pc端-------言归正装,打开微信开发文档打开-APi即可查询到:第一个是设置要复制的内容到剪切板,第二个是获取剪切板的内容,我们要用到的是第一个设置剪切板内容:1. {{detail.taokou

2017-07-06 10:55:19 53154 6

原创 懒加载之jQuery图片延迟加载插件jQuery.lazyload

今天给大家介绍一个懒加载插件lazyload.js使用方法1.引用jquery和jquery.lazyload.js到你的页面2.html图片调用方法为图片加入样式lazy  图片路径引用方法用data-original...3.js $(function() { $("img.lazy").lazyload({

2017-07-06 10:34:52 526

原创 微信小程序 懒加载

今天给大家带来小程序懒加载的办法,来提高页面的体验性。理念:加入滚动,当页面滚动的时候计算列表数据的高度来判断该区域数据图片是否加载显示1.首先我们要在wxml要显示的列表里加入滚动条然后。。。wxml: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="

2017-07-03 11:13:34 18174 3

转载 Clipboard.js 无需Flash的JavaScript复制粘贴库

这篇文章主要介绍了JavaScript 内容复制(无需flash) Clipboard.js使用方法,需要的朋友可以参考下clipboard.js 实现了纯 JavaScript (无 Flash)的浏览器内容复制到系统剪贴板的功能。可以在浏览器和 Node 环境中使用。支持 Chrome 42+、Firefox 41+、IE 9+、Opera 29+官方网站:https://

2017-07-01 15:31:16 239

转载 微信小程序开发—快速掌握组件及API的方法

微信小程序框架为开发者提供了一系列的组件和API接口。组件主要完成小程序的视图部分,例如文字、图片显示。API主要完成逻辑功能,例如网络请求、数据存储、音视频播放控制,以及微信开放的微信登录、微信支付等功能。组件官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/对于开发文档,个人建议先了解其整体框架,了解其提供了哪些组

2017-06-29 11:06:25 1042

原创 微信小程序之-返回上一页

先介绍三种跳转方式:1.B页面自带返回按钮wx.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面2.B页面不带返回按钮wx.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面。3.B页面不带返回按钮wx.switchTab(OBJECT) 跳转到 tabBar 页面,并关闭其他所有非...

2017-06-20 09:10:51 72738 1

转载 数组操作--增、删、改、查

相信对于用过vuejs、reactjs等mvvm框架的童鞋,微信小程序的数组操作就显得很简单啦,原理是一样的。这是简单做的一个demo,已经上传到github,到时大伙可以直接下载。我们主要讲在数组中常用的一些操作方法,对数组向前向后插入新的数据、修改数组、删除数组、清空数组,其他的一些操作方式,我会给大伙学习思路。demo地址:https://github.com

2017-06-16 00:12:38 255

提示
确定要删除当前文章?
取消 删除