开心大表哥-CSDN博客

原创用vue来开发小程序项目详解，极大方便了开发者

案例图：五分钟教程：通过 Vue.js 命令行工具 vue-cli，你只需在终端窗口输入几条简单命令，即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目：# 全局安装 vue-cli$ npm install --global vue-cli# 创建一个基于 mpvue-quickstart 模板的新项目$ vue init mpvue/mpv...

2018-03-14 14:57:01 12621

平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和padding，这些都会让你的盒子撑破。我们换句话来说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将会把元素盒子撑破（标准模式下，除IE怪异...

2018-03-13 10:39:03 3268 3

原创 Vue2.0 探索之路——生命周期和钩子函数的一些理解

Vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的Vue实例不同。 1、beforeCreate 　　在实例初始化之后，数据观测和event/watcher时间配置之前被调用。 2、created 　　实例已经创建完成之后被调用。在这一步...

2018-03-09 14:52:23 3441 2

原创 vue2.0 资源文件assets和static的区别

资源文件处理在我们的项目结构里，有两个资源文件的路径，分别是：src/assets 和 static/。那这两个到底有什么区别呢？ Webpacked 资源为了回答这个问题，我们首先需要理解webpack是怎样处理静态资源的。在*.vue组件中，所有的templates和css都会被vue-html-loader 和 css-loader解析，寻找资源的URL。举个例子，在<i...

2018-03-09 14:39:59 2730 2

原创 vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题

懒加载：也叫延迟加载，即在需要的时候进行加载，随用随载。像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。简单的说就是：进入首页不用一次...

2018-03-09 11:44:37 9718

原创 es6 promise对象回调处理详解

在JavaScript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。通常我们用得较多的是setTimeout来做一个回调，但本文说得是Promise这个高大尚的es6新对象, 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个...

2018-03-09 10:48:24 3249

原创 vue中本地静态图片的路径应该如何写

需求：如何components里面的index.vue怎样能把assets里面的图片拿出来。 1.在img标签里面直接写上路径：<img src="../assets/a1.png" class="" width="100%"/>2.利用数组保存再循环输出：<el-carousel-item v-for="item in carouselData" :k...

2018-03-06 11:01:48 67543 3

原创 Iconfont使用方法的详细教程，html怎样引入iconfont

1.首先在Iconfont-阿里巴巴矢量图标库上面找到你需要的图标然后加入你的购物车（这一步很简单，就像逛淘宝一样！）； 2.然后就是点击一下购物车，它会出现‘下载代码’的按钮，点击下载保存到本地； 3.接着就是把下载好的文件解压出来，放到项目的css文件夹（方便之后在html中引用）； 4.文件放到项目后，只需要引用iconfont.css这个文件即可； 5.最后一步肯定是调用了...

2018-03-05 15:39:31 55902 3

原创 es6参考了Airbnb 公司的 JavaScript 风格规范

1.let 取代 var; 2.在let和const之间，建议优先使用const，尤其是在全局环境，不应该设置变量，只应设置常量; 3.静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号; 4.使用数组成员对变量赋值时，优先使用解构赋值; 5.单行定义的对象，最后一个成员不以逗号结尾。多行定义的对象，最后一个成员以逗号结尾; 6.使用扩展运算符（…）拷贝数组;使用 Ar...

2018-03-01 17:02:44 861

原创 Javascript 严格模式有什么限制

除了正常运行模式，ECMAscript 5添加了第二种运行模式：”严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。严格模式主要有以下限制： 1.变量必须声明后再使用 2.函数的参数不能有同名属性，否则报错 3.不能使用with语句 4.不能对只读属性赋值，否则报错 5.不能使用前缀 0 表示八进制数，否则报错 6.不能删除不可删...

2018-02-27 10:33:17 2612

原创 nodejs 利用对mysql数据库进行查询和插入数据

nodejs对数据库的操作是比较简单的。下面看一个对laughter库操作：这是项目文件结构图： config.js的配置如下：//数据库配置文件module.exports = { mysql: { host : 'localhost', user : ...

2018-02-26 16:31:30 8939

原创 nodejs Express路由传参数据交互express.Router() router.get

路由是指如何定义应用的端点（URIs）以及如何响应客户端的请求。路由是由一个 URI、HTTP 请求（GET、POST等）和若干个句柄组成，它的结构如下： app.METHOD(path, [callback…], callback)， app 是 express 对象的一个实例， METHOD 是一个 HTTP 请求方法， path 是服务器上的路径， callback 是当路由匹配时要执行...

2018-02-26 15:04:13 20075 2

原创 ES6的Object.is()超越ES5 比较两个值是否相等

ES5 比较两个值是否相等，只有两个运算符：相等运算符（==）和严格相等运算符（===）。它们都有缺点，前者会自动转换数据类型，后者的NaN不等于自身，以及+0等于-0。JavaScript 缺乏一种运算，在所有环境中，只要两个值是一样的，它们就应该相等。<script> var a=1,b='1'; console.log(a==b)//true co...

2018-02-24 11:48:35 2651

原创 es6对象的解构赋值和对象的拓展

ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。<html> <body> <script> function getPoint() { const x = 1; let y = 10; y +...

2018-02-24 11:06:44 722

原创简单轻松地理解js编译和执行顺序

javascript是一段一段执行的，以script标签来分割，执行每一段之前，都有一个“预编译”，预编译干的活有两：1.声明所有var变量（初始为undefined），2.解析定义式函数语句。有个关于 “window作用域下，a = 1和var a = 1” 的区别的很经典：a = 1相当于window.a = 1，是动态地为window添加一个成员； var a = 1是在当前作...

2018-02-23 16:05:41 1992

原创 canvas如何简单粗暴地载入视频

canvas加载视频和图片是一样的，使用drawImage，区别就是给一个定时器不停的抓取每帧的画面，放入Canvas画布里面，这个办法十分的简单粗暴。（粗粗粗粗~~~）而且可以达到神同步，当视频暂停，canvas里面的视频就暂停，当视频再次开始播放，canvas里面的视频也再次播放。 html:<!DOCTYPE html><html><hea...

2018-02-12 17:55:49 17002

原创解决微信浏览器video全屏的问题及黑边问题

这是苹果和安卓在微信上的效果图： <video src="./mp4/v1.mp4" x5-video-player-type="h5" id="player" height="100%" width="100%" webkit-playsinline playsinline x5-playsinline x5-video-player-fullscreen="true&q

2018-02-12 17:25:01 22764 2

原创 Canvas的事件处理，监听点击的位置

DOM是Web前端领域非常重要的组成部分，不仅在处理HTML元素时会用到DOM，图形编程也同样会用到。比如SVG绘图，各种图形都是以DOM节点的形式插入到页面中，这就意味着可以使用DOM方法对图形进行操作。比如有一个元素，可以直接用jquery增加click事件$(‘#p1’).click(function(){…})”。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用...

2018-02-12 17:06:44 33976

原创 h5锁屏提醒-锁横屏和锁竖屏

移动端开发，我们一般是只做一套适配，但是拿手机来说，它又分横屏和竖屏；这两种屏幕要求的适配是完全不一样的。当我们只做了其他一种，不想做另外一种的话，屏幕使用提示就很重要了。比如我们只做了竖屏的适配，不想让用户看到横屏的情况：比如我们只做了横屏的适配，不想让用户看到竖屏的情况：上面两种提醒是用了js控制的（图片用了base64的，看起来代码有点长）：第一种：//竖屏处理...

2018-02-12 11:33:17 7323 1

原创 h5 audio 背景音乐播放开关控制

现在的活动h5基本都会有bgm的需求，下面提供一个通用的做法。上面是开关的按钮，页面刚加载进来的时候，音乐是自动播放的。点击开关按钮可以控制音乐的播放和暂停。产品：需求很简单，怎么实现我不管！开发：好！那我给你来个五彩斑斓的黑 html:<audio id="music" loop="loop" style="display:...

2018-02-12 11:11:26 8176 1

原创基于zepto的motion库-移动端页面无缝循环滑动效果

基于zepto的motion库-移动端页面无缝循环滑动效果案例地址<!DOCTYPE HTML><head><meta charset="utf-8"><meta name="author" content="Tencent-TGideas"><meta name="format-detecti

2018-02-12 10:57:16 1401 1

原创移动端canvas合成图片，填充文字自动换行

今天用canvas合成带有微信公众号二维码和祝福语的春节贺卡由于代码都是原生的没有引入其他库，所以直接将对应部分贴出来吧。html<canvas id="canvas" class="hide"> Your browser does not support the HTML5 canvas tag.</canvas&gt...

2018-02-12 10:06:18 2341 2

原创为程序员精心定制的对联，有没有感觉中招

相亲版上联：捋顺红橙黄绿，不得美人下联：远离世纪佳缘，方得始终横批：欣欣向蓉年度版上联：说南道北，几个变量难取名下联：思前想后，一行注释上头条横批：穷逼 VIP生活版上联：上班写 JavaScript 处处 $ 高亮下联：回家撸 PHP 行行 new 对象横批：见码眼开苦逼版上联：数据库异常屡屡 500下联：浏览器崩溃句句 400横批...

2018-02-12 09:42:55 898

原创 canvas在手机高清屏下绘图不清晰的解决办法

原来的图片：合成的图片：原因分析　　假设dpr = 2；图片大小为60x60px。　　对dpr有一定的了解基础　　1.DOM呈现图片过程　　图片->浏览器css像素（显示尺寸）->屏幕实际像素　　60x60 -> 30x30 -> 60x60　　图片像素:实际像素　　1： 1　　2.canvas绘制过程　　图...

2018-02-09 13:20:37 7951

原创移动web开发之像素和DPR详解

前话：　　像素在web开发中几乎天天用到，但到底什么是像素，移动端和桌面端的像素有区别吗，缩放对像素有影响吗，视网膜屏幕和像素有什么关系？关于这些问题，可能就不清楚了。本文将介绍关于像素的相关知识　　什么是像素：　　像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”...

2018-02-09 10:17:50 42367

原创 sass定义函数控制元素position的所有位置-超级方便

当页面布局用的比较多postition：absolute的时候，我们可以利用sass定义简单的函数，实现多次操作。 html:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>

2018-02-08 14:34:30 1232

原创移动端h5页面弹窗出来后，禁止底层的背景页滚动

先看图：再需求和解决方法： 1.需求：在一个可上下滑动的h5-index.html中，弹出一个固定于设备高度的奖励层。当奖励层弹出来之后：1.index页面不能出现滚动条，2.index不能自动置顶，要停留在触发事件的位置。 2.解决方法： a.初始的css设置：html,body { width: 100%; height:100%; o...

2018-02-08 11:38:54 7551 1

原创 animation控制图片从左飞入、右飞入、顶飞入等动态

先看从左边和右边飞入的效果：图片的html代码是：div class="travelType"> class="page5-tu1" src="./images/p5_tu1.png" name="travel1"/> class="page5-tu2" src="./images/p5_tu2.png" name

2018-01-24 15:18:43 18864 1

原创纯js事件委托模式，委托父元素

1.点击前 2.点击后内容代码：html> head> meta charset="UTF-8"> title>title> head> body> div id="article"> p>文字在这里p> div> script>

2018-01-20 21:27:11 1899

原创 js统计元素元素路径，获取某元素相对指定父元素得路径

js获取某元素相对指定父元素得路径，例如：想看html文档树：html> head> meta charset="UTF-8"> title>title> head> body> div> ul> li>span id="span1">span>li>

2018-01-20 14:19:53 1479

原创微信小程序创建节点选择器获取宽高wx.createSelectorQuery

微信小程序提供了一个获取节点宽高等信息的方法，一共是两步。 1.在对应的节点上定义一个idimage src='{{imgUrl}}' class="look-image" bindload="imageLoad" id="drawID">image>2.在js里面创建这个id的节点选择器onLoad: function (options) { var _this=

2018-01-19 11:31:30 15706 6

原创微信小程序定义和调用全局变量globalData

先看看文件结构： 1.现在app.js里面定义globalData对应的全局变量 2.然后在其他js文件进行调用。例如在photo.js里面要注意的是需要在文件开始的时候初始化 app这个对象//获取应用实例const app = getApp()

2018-01-19 11:08:12 76416 11

原创微信小程序开发者下不验证https协议的操作

1.在微信开发者工具里面点击右上角的‘详情’，然后在‘项目设置’里面选择‘不校验安全域名、TLS 版本以及 HTTPS 证书’就可以了。成功之后打印台上有提醒这样设置之后，你就可以用http协议的地址进行交互了。 2.顺便说一下如何在帐号里面设置https地址。登录小程序官网，在‘设置’里面选择‘开发设置’然后配置‘服务器域名’即可用对应的https协议下的地址了。

2018-01-19 10:30:32 10389 2

原创微信小程序图片预览保存发送给朋友previewImage

先看看手机上的效果 js实现的代码：wx.previewImage({ current: app.globalData.URL + res.data.data.imageUrl, // 当前显示图片的http链接 urls: [app.globalData.URL + res.data.data.imageUrl] // 需要预览的图片ht

2018-01-18 13:19:04 5731 2

原创微信小程序页面带参数跳转及接收参数内容navigator

功能从index页面跳转到draw页面，并在draw页面获取id及imgUrl index.wxmlnavigator class='looks-view' wx:for="{{imgUrlNew}}" wx:key="index" url="/pages/draw/draw?id={{item.id}}&imgUrl={{item.img}}"> image src='{{ite

2018-01-18 13:07:33 33460

原创微信小程序上传图片wx.chooseImage和wx.uploadFile

wxml:view class="container"> view class='photo-wrap'> view class='photo-image-wrap photo-image-wrap1'> image src='/images/photo2.png' bindtap='getImage'>image> text>相册text> v

2018-01-18 10:30:46 5516 4

原创 7款漂亮的纯css字体样式

简单粗暴，直接上马：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1 class="vintage1">美丽的中国语</h1> <h1 class="vintage2">美丽的中国语</h

2018-01-03 15:58:46 83968 10

原创 node express中使用static托管静态文件（访问项目中的图片或者文件）

利用 Express 托管静态文件通过 Express 内置的 express.static 可以方便地托管静态文件，例如图片、CSS、JavaScript 文件等。将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。例如，假设在 public 目录放置了图片、CSS 和 JavaScript 文件，你就可以在app.js中设置：app

2017-12-28 14:48:23 10590 4

原创 nodejs express 服务器端允许跨域访问设置

nodejs express 服务器端允许跨域访问设置问题就是这样的：处理成功后是这样的：处理代码是这样的://给前端提供数据router.get('/getInfoByOrder',function(req,res,next){ /*处理浏览器同源策略问题*/ res.header("Access-Control-Allow-Origin", "*");

2017-12-28 14:37:54 3657

原创微信小程序之原生鼠标拖动图片效果

先看看效果：思路就是：监听鼠标移动的位置，用position:absolute的属性，实时改变left,top这两个值。看看源码： wxml <view class='draw-content'> <image src='/images/look2.png' class="look-image" style='filter:{{imageFilter}}'></image>

2017-12-27 10:14:43 4700