- 博客(27)
- 收藏
- 关注
RSS订阅转载 前端实现高效的海报系统
前言众所周知，海报作为一种最为常见的招贴形式，被广泛应用于广告宣传等场景。随着互联网的快速发展，网络营销逐渐成为引流和获客的重要手段，形式多样的海报也在线上营销裂变活动中发挥着不可或缺的作用。与传统的招贴海报相比，线上海报则更加灵活多变，通常会为不同的用户生产制作出差异化的海报，以满足业务上的个性化诉求。因此，如何稳定高效地生产高质量的海报变得尤为重要。接下来我们将通过一系列文章，来介绍前端如何打造一个高效的海报系统。为了方便理解，首先要明确的是，本文提到的海报是指海报图片，通常会带有二维码或菊花码
2021-07-21 10:21:32
1055
转载 小程序静默登录方案设计
首先谈谈在小程序的开发中，如何借助微信的能力标识一个用户?微信官方提供了两种标识： OpenId是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。 UnionId是一个用户对于同主体微信小程序／公众号／APP 的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过UnionId，实现多个小程序、公众号、甚至 APP 之间的数据互通。 同一个用户的这两个 ID 对于同一个小程序来说是永久不变的，就算用户删了小程序，下次用户进入小程序，开发者依旧可..
2021-07-20 10:03:33
873
原创 CSS Grid 网格布局整理
display: grid;容器元素都是块级元素display: inline-grid;行内元素。grid-template-columns属性定义每一列的列宽grid-template-rows属性定义每一行的行高grid-row-gap属性设置行与行的间隔（行间距）grid-column-gap属性设置列与列的间隔（列间距）grid-gap属性是grid-column...
2020-04-07 14:03:54
206
原创 微信小程序 没有找到可以构建的npm包
1.进入小程序根目录，打开cmd，输入：npm init根据自己的内容填写信息2.输入命令：npm i miniprogram-sm-crypto --production执行命令完之后，然后再去微信开发者中点工具-构建npm，然后就成功了，如下图：...
2020-04-01 11:14:38
322
转载 轻松理解JS函数节流和函数防抖
JS函数防抖和函数节流 问题引入 问题1： 如果实现了dom拖拽功能，但是在绑定拖拽事件的时候发现每当元素稍微移动一点便触发了大量的回调函数，导致浏览器直接卡死，这个时候怎么办？ 问题2：如果给一个按钮绑定了表单提交的post事件，但是用户有些时候在网络情况极差的情况下多次点击按钮造成表单重复提交，如何防止多次提交的发生？ 为了应对如上场景，便出现了函数防抖和函数节流两个概念，总的...
2019-09-10 16:43:37
157
原创 微信关闭H5链接
//这个可以关闭安卓系统的手机 document.addEventListener('WeixinJSBridgeReady', function(){ WeixinJSBridge.call('closeWindow'); }, false); //这个可以关闭ios系统的手机 WeixinJSBridge.call('closeWindow');...
2019-09-10 14:31:23
608
原创 微信支付
function onBridgeReady() {WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId": "wx7bef8f6f623a60b1", //公众号名称，由商户传入"timeStamp": _timeStamp, //时间戳，自1970年以来的秒数"nonceStr": _nonceStr, //随机串"...
2019-09-10 11:41:33
103
原创 微信分享
$(function () {var url = window.location.href.split('#')[0];// console.log(url);setTimeout(function(){$.ajax({type:'get',url: '获取字段',contentType: 'application/json', //callback名...
2019-09-10 11:39:17
115
原创 textarea 输入框限制字数 时间：2014-07-16 20:56:54 阅读：1948 评论：0 收藏：0 [点我收藏+] 标签：style ja
textarea 输入框限制字在textarea标签中，只需要设置maxlength=”***”即可，但是在textarea标签中，IE9及IE9以下浏览器是不支持的，IE10、IE11则支持，估计后续的版本应该都会支持。现在来说下怎么让大部分IE版本都支持textarea 标签限制字数。第一种方法：这样子即可。备注：onchange、onk
2017-09-29 10:26:10
317
原创 网站图片延时加载2.0
网站上有很多图片的时候就会加载速度很慢（如果3S内首页打不开，已经算是死亡页面）html>html lang="en">head> meta charset="UTF-8"> title>图片延迟加载/懒加载title> style type="text/css"> * { margin: 0; p
2017-08-16 19:00:46
440
原创 网站图片延时加载
网站上有很多图片的时候就会加载速度很慢（如果3S内首页打不开，已经算是死亡页面）html>html lang="en">head> meta charset="UTF-8"> title>图片延迟加载/懒加载title> style type="text/css"> * { margin: 0; pad
2017-08-16 18:57:13
433
转载 清除select自带小三角
select {/*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/border: solid 1px #000;/*很关键：将默认的select选择框样式清除*/appearance:none;-moz-appearance:none;-webkit-appearance:none;/*在选择框的最右侧中间显示小箭头图片*/ba
2017-07-18 17:25:37
547
转载 比较实用的移动端webApp兼容
1. IOS移动端click事件300ms的延迟响应移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,2007年苹果发布首款iphone上iOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上
2017-06-20 14:14:40
1566
原创 html中rem的基本代码
html { font-size: 62.5%}@media only screen and (min-width: 481px) { html { font-size: 94% !important }}@media only screen and (min-width: 561px) { html { font-siz
2017-06-20 14:07:30
1002
原创 正确区分relative 和 absolute
#div1{ position:relative;width: 100px; height: 100px;background: red;top:20px;} #div2{position: absolute;width: 300px;height: 300px;background: green;/*left: 20px;*/} //
2017-05-25 09:43:30
661
转载 移动端web开发常见问题
常见问题1、移动端如何定义字体font-family三大手机系统的字体：ios 系统默认中文字体是Heiti SC默认英文字体是Helvetica默认数字字体是HelveticaNeue无微软雅黑字体android 系统默认中文字体是Droidsansfallback默认英文和数字字体是Droid Sans无微软雅黑字体winphone
2017-05-08 13:42:40
329
转载 移动端的rem布局
!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([
2017-05-08 12:02:39
919
原创 学习fullpage.js插件实现滚屏心得
fullpage 1 2 3 4 5 --> 123 section1 section2 Slide
2017-05-08 11:41:59
1616
原创 前端图片引入方式，与各自优缺点
网络请求 缓存 灵活性 其他 雪碧图： 少 好 差 多张sprite可能有重复的部分，有几个小图标更换的时候就要换整张图 base64： 无 差 好 增加h
2017-05-08 11:31:56
1499
原创 判断是app打开还是网页打开
var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1,
2017-05-08 11:28:59
1740
转载 meta基础知识
meta基础知识H5页面窗口自动调整到设备宽度，并禁止用户缩放页面忽略将页面中的数字识别为电话号码忽略Android平台中对邮箱地址的识别当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式viewport模板viewport模板——通用<meta co
2017-05-04 18:20:49
391
转载 H5超有用的资料
H5页面窗口自动调整到设备宽度，并禁止用户缩放页面//一、HTML页面结构<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />// width 设置viewport宽度，为一个正整数
2017-05-04 18:15:39
906
原创 canvas初学
.arc(100,100,30,0,Math.PI*2,true); 括号内第一个和第二个参数,代表圆心坐标.第三个参数是圆的半径.第四个参数代表圆周起始位置.0 PI就是起始位置.沿顺时针路线,分别是0.5 PI（正下方）,1 PI和1.5 PI（正上方）,为画饼图提供了扇形范围的依据.第五个参数是弧长Math.PI*2就是整个圆,Math.PI是半圆.第六个参数是一个布尔值,true是顺时
2017-05-04 18:14:19
329
原创 手机端文字用rem有的地方会文字模糊
因为font-size计算的时候出现小数，在font-size最好不要用rem要根据dpr去算一下。用个适配库，比如手淘的那个flexible 或者用less 或sass封装个公用方法
2017-05-04 18:11:20
1142
原创 css实现水平居中
一、div中img水平居中：{ display:table; margin:0 auto;}二、img与span水平对齐:{ display: flex; align-items:center;}三、div中div水平居中（不知宽度&设置position：absolute情况下）:{ position:absolute;
2017-05-04 18:07:25
305
转载 jquery.lazyload.js插件的用法
使用方法引用jquery和jquery.lazyload.js到你的页面12script src="jquery-1.11.0.min.js">script>script src="jquery.lazyload.js?v=1.9.1">script>html图片调用方法为图片加
2017-05-04 18:02:12
542
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人