前端
Tangsze
人和树一样,越是向往高处的阳光,它的根就越要伸向黑暗的地底! 这是个技术横扫世界的时代。只是不知道 你会成为某个颠覆性产品的研发创造者, 还是一个和很多人一样后知后觉的消费者!
展开
-
WebSocket 移动端锁屏以及退到后台重连机制
手机锁屏以及退出后台webscoket会断开:js在手机熄屏后会中断,在唤醒之后js会继续执行。所以设置在js中的定时发送心跳包的功能在手机熄屏后就没法执行了。熄屏时间过长,这个时候链接就会被服务端强制断开,并且大部分手机在熄屏时,websocket连接就已经断开了。解决办法: 使用H5提供的页面隐藏/显示API。...原创 2022-08-12 10:28:00 · 4279 阅读 · 2 评论 -
js点击第三方广告添加点击事件
最近写了一个项目,是给PC端和app端添加第三方广告,用的是百青藤的广告代码,在写的时候遇到的问题在这里总结一下。1. 第一个问题是个很严重的问题,广告放到app上可以正常显示,但是点击后没有反应,尝试了各种办法,也都无济于事,只能改需求辗转微信公众号上2. 第二个问题是点击广告后需要调接口,但是点击广告就直接跳转页面了,无法触发点击事件,原因是广告生成的代码内部是iframe标签,需要给iframe添加点击事件如何给广告添加点击事件呢?在网上找到了两个方法,我选择用第二个方法。第一种方法:a原创 2021-08-30 15:08:37 · 13129 阅读 · 0 评论 -
前端UI组件库搭建指南
https://zhuanlan.zhihu.com/p/94920464?from_voters_page=true原创 2021-05-26 11:40:17 · 398 阅读 · 0 评论 -
手写一个promise
function Promise (excutor) { let that = this that.status = 'pending' that.value = null that.reason = null function resolve (value) { if (that.status === 'pending') { that.value = value that.status = 'fulfilled' } } functio原创 2021-05-24 15:03:56 · 124 阅读 · 0 评论 -
js实现弹窗在点击每个按钮后出现在屏幕不同位置的方法
<div class="add_alert" style="display:none"> <div class="add_alert_main"> <div class="triangle"></div> <div class="add_option"></div> <div class="add_button"> <button class="btn_原创 2021-04-06 15:29:10 · 891 阅读 · 0 评论 -
js监听移动端键盘弹出和收起事件
//这里区分不同系统const ua = typeof window === 'object' ? window.navigator.userAgent : '';let _isIOS = -1;let _isAndroid = -1;export function isIOS() { if (_isIOS === -1) { _isIOS = /iPhone|iPod|iPad/i.test(ua) ? 1 : 0; } return _isIOS === 1;}转载 2021-03-02 14:18:13 · 4235 阅读 · 0 评论 -
预览图片插件 viewer.js在pc端使用
先看下效果引入viewer.css和viewer.js文件<link rel="stylesheet" href='//cdn.jsdelivr.net/npm/viewerjs@1.9.0/dist/viewer.min.css'></link><script src='//cdn.jsdelivr.net/npm/viewerjs@1.9.0/dist/viewer.min.js'></script><div class="review原创 2020-12-30 10:16:24 · 562 阅读 · 0 评论 -
对object.keys的理解
1、对象---------返回属性名var obj = {'aaa':'123','bbb':'345'};console.log(Object.keys(obj)); //['aaa','bbb']var obj1 = { 50: "a", 22: "b", 30: "c"};console.log(Object.keys(obj1)); // console: ["22", "30", "50"]var obj2 = Object.create({}, { getFoo : { valu原创 2020-12-23 16:52:25 · 135 阅读 · 0 评论 -
js上传文件到服务器 formdata格式参数
好长时间没有更新文章了,今天写点关于js上传文件的问题上传文件用input type=file,通过onchange事件获取到上传文件的信息,这个大家都知道。那么通过ajax上传到服务器传formdata格式该怎么写呢?首先,new一个FormDatavar sD = new FormData()然后,把获取到的文件信息append进去// file就是获取到的文件信息sD.append('type', 'bidfile')sD.append('bidfile', file)通过ajax原创 2020-12-08 09:27:58 · 1496 阅读 · 2 评论 -
快速有效的理解闭包
http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html原创 2020-10-22 16:52:32 · 126 阅读 · 0 评论 -
前端性能优化35条
1、尽量减少HTTP请求个数——须权衡合并图片(如css sprites,内置图片使用数据)、合并CSS、JS,这一点很重要,但是要考虑合并后的文件体积。2、使用CDN(内容分发网络)这里可以关注CDN的三类实现:镜像、高速缓存、专线,以及智能路由器和负载均衡;3、为文件头指定Expires或Cache-Control,使内容具有缓存性。区分静态内容和动态内容,避免以后页面访问中不必要的HTTP请求。4、避免空的src和href留意具有这两个属性的标签如link,script,i原创 2020-10-22 14:36:55 · 169 阅读 · 1 评论 -
vue中使用节流,实现一个按钮在3s内不能重复触发点击事件
vue中使用防抖,实现一个按钮在3s内不能重复触发点击事件1.先在data中定义上次点击的时间:lastTime:0。2.触发点击事件:userText (e) { let that = this // 设置定时器 let timer // 设置现在的时间 let now = +new Date() // 当现在的时间减去上次点击的时间小于3s时,给出提示,并结束执行函数 if (that.lastTime &原创 2020-10-22 11:41:20 · 1044 阅读 · 2 评论 -
vue中读取txt文件内容,并根据内容进行筛选过滤
vue中读取txt文件内容,并根据内容进行筛选过滤1.通过请求后端接口获取到文件的路径。2.比如 res.data.data.filePath是获取到的文件路径,则可以通过axios.get方式读取文件内容let Words = []// 通过请求接口获取文件路径filterSensitive().then(res => { console.log(res) // 读取文件内容赋值给Words axios.get('/api' + res.data.data.filePath)原创 2020-10-22 10:37:23 · 2224 阅读 · 0 评论 -
js常用方法函数封装
/**utils.js v0.0.1各类js工具函数*//*时间格式化函数(将时间格式化为,2019年08月12日,2019-08-12,2019/08/12的形式)pattern参数(想要什么格式的数据就传入什么格式的数据)· 'yyyy-MM-dd' ---> 输出如2019-09-20· 'yyyy-MM-dd hh:mm' ---> 输出如2019-09-20 08:20· 'yyyy-MM-dd HH:mm:ss' ---> 输原创 2020-10-15 16:49:39 · 529 阅读 · 0 评论 -
flutter配置底部导航
https://www.jianshu.com/p/287fde954375原创 2020-07-14 11:15:29 · 210 阅读 · 0 评论 -
移动端ios/Android兼容性总结
1.移动端 HTML5 audio autoplay 失效问题这个不是 BUG,由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放,必须由用户来触发才可以播放。解决方法思路:先通过用户 touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)。document.addEventListener('touchstart',function() { document.getEle原创 2020-06-29 11:15:57 · 963 阅读 · 0 评论 -
前端面试题----vue
1.常用的vue指令有哪些: v-if v-else v-on v-bind v-show v-model2.浏览器页面之前如何传参queryurl?a=xxx&b=yyyquery+pathquery+nameparams注册:url/:id请求:url/123params+nameprops布尔值对象函数meta路由元信息3.父子组件互相调用方法父组件主动获取子组件的数据和方法:1.调用子组件的时候定义一个ref,其中children为原创 2020-06-22 13:37:24 · 975 阅读 · 0 评论 -
APP中H5页面实现拨打电话功能
<a href="tel:400-0000-000">400-0000-000</a> //如失效,就在head标签里加上 <meta name="format-detection" content="telephone=yes"/>如果浏览器上能用,但是app中ios提示:链接失效android提示:net::ERR_UNKNOWN_URL_SCHEME错误就表示原生缺少以下代码,// 处理拨打电话以及Url跳转 -(void)webView:(W.原创 2020-06-18 17:11:02 · 1835 阅读 · 0 评论 -
git命令
https://www.cnblogs.com/zndxall/archive/2018/09/04/9586088.html转载 2020-06-10 10:52:01 · 134 阅读 · 0 评论 -
从输入网址到页面加载完成中间发生了什么
当我们在浏览器的地址栏输入网址(譬如: www.linux178.com) ,然后回车,回车这一瞬间到看到页面到底发生了什么呢?域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求,浏览器得到html代码 --> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) --> 浏览器对页面进行渲染呈现给用户域名解析是页面加载的第一步,那么域名是如何解析的呢?以Chrome为例:Chro原创 2020-06-08 14:09:27 · 462 阅读 · 0 评论 -
百度统计代码
百度统计代码介绍跟踪原理使用百度统计跟踪网站的流量,您需要在网站的每一个网页中加入百度统计的JavaScript代码。统计代码在创建站点时获取,一个站点对应一个代码跟踪ID。当用户浏览您网站的某一个页面时,这段JavaScript代码会被执行,将所收集到的访问参数发送到百度统计的服务器,百度统计根据跟踪ID对数据进行归类处理,然后展示到相应ID的站点统计报告里。正确安装统计代码后,一般20分钟左右后,即可以查看到统计数据。因此要想统计到完整的访问流量,必须在网站的每一个页面中都安装正确ID的百度统计代转载 2020-06-04 15:46:00 · 1293 阅读 · 0 评论 -
前端支付宝支付和微信支付在PC和h5页面中的应用
PC端微信支付(1)用的是使用的是https://pay.weixin.qq.com/wiki/doc/api/index.html 中的(2):商户后台系统先调用微信支付的统一下单接口,微信后台系统返回链接参数code_url,商户后台系统将code_url值生成二维码图片,用户使用微信客户端扫码后发起支付。注意:code_url有效期为2小时,过期后扫码不能再发起支付。(3):前端只需向后台发ajax请求拿到code_url。对应链接格式:weixin://wxpay/bizpayurl?s原创 2020-05-25 09:57:10 · 3204 阅读 · 0 评论 -
前端性能优化
一、HTTP请求1.减少HTTP请求数量 80%的响应的时间是消耗在网页内容的下载上,例如:图片,样式、脚本、Flash等。所以减少请求次数以是缩短响应时间的关键之处。 I. 合并文件:将相关代码文件进行合并II. Css Sprites:将多张图片合并成单张图片,通过css来控制什么地方显示图片的那个位置。III. 图片映射:也是将多图拼在一起,然后通过坐标来控制。通常在页面中连续的时候才有用,比如导航条。IV. 行内图片(Base64编码): 通过编码的字符串将图片内嵌到网页文本中。2原创 2020-05-09 10:46:10 · 134 阅读 · 0 评论 -
前端必备技能
https://www.jianshu.com/p/62a2dc5a9aa6转载 2020-04-16 16:49:40 · 156 阅读 · 0 评论 -
关于使用git bash初始化vue项目时,上下箭头无法使用的问题
在使用vue-cli3初始化vue项目时,遇到的上下箭头无法移动的情况原本的初始化命令是 vue create my-project只需要 winpty vue.cmd create my-project 即可原创 2020-04-15 17:33:14 · 382 阅读 · 0 评论 -
使用 VSCode 编辑器来编译 Sass,自动生成对应的css
1.首先在vscode商店中搜索easysass,然后安装2.在 VSCode 菜单栏依次点击“文件 首选项 设置”,打开 settings.json 全局配置文件。搜索“easysass”,然后把 easysass 相关的设置项复制到右侧的用户设置编辑窗口中,再根据实际情况修改配置项。 // easy sass插件 "easysass.compileAfterSave": t...原创 2020-02-26 22:59:35 · 4263 阅读 · 1 评论 -
flutter中让Container充满整个屏幕
在Container子节点上加上width和height属性原创 2019-12-06 14:17:16 · 7155 阅读 · 0 评论 -
flutter布局组件
Align组件Align组件用于将它的子组件放置到确定的位置,比如下面的代码展示了将Text组件放置到100*100的容器的右下角:new Container( width: 100.0, height: 100.0, color: Colors.red, child: new Align( child: new Text("hello"), alignment...原创 2019-11-27 10:45:05 · 285 阅读 · 0 评论 -
http状态码附录
状态码1xx100 Continue:服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求。101 Switching Protocols:服务器转换协议:服务器将遵从客户的请求转换到另外一种协议。102: 由WebDAV(RFC 2518):扩展的状态码,代表处理将被继续执行状态码2xx:成功200 OK:请求成功(其后是对GET和POST请求的...原创 2019-11-25 09:42:41 · 169 阅读 · 0 评论 -
flutter微信支付
1、导入依赖包import ‘package:fluwx/fluwx.dart’ as fluwx;2、初始化设置监听 @override void initState() { super.initState(); getMyHeadPic(); // 微信支付代码 fluwx.responseFromPayment.listen((data) {...原创 2019-11-25 09:25:13 · 1117 阅读 · 0 评论 -
flutter微信登录
1、在flutter中yaml文件中进行配置 fluwx: ^1.0.42、初始化:在main.dart中进行初始化操作,尽可能早的初始化 await fluwx.register( appId: "wxxxxxxxxxxxxx", doOnAndroid: true, doOnIOS: true, enableMT...原创 2019-11-25 09:13:12 · 2396 阅读 · 0 评论 -
攻击网页,把网页变成记事本
首先打开你想攻击的网页,按下F12,console第二部:在控制台输入// 说白了,就是获取 body DOM,然后变为可编辑状态! document.body.contentEditable='true'网页就变成了记事本的状态。...原创 2019-11-22 10:33:36 · 350 阅读 · 2 评论 -
css实现盒子的双层阴影效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-11-21 16:54:17 · 1125 阅读 · 0 评论 -
图解新的状态管理 Provider
https://www.imooc.com/article/287202转载 2019-11-20 10:37:43 · 120 阅读 · 0 评论 -
flutter保持页面状态
1、必须是有状态组件。2、3、在配置的底部导航的压面中:int _currentIndex = 0; //这是底部索引//要用Widget组件 List<Widget> _pageList = [ HomePage(), Category(), CartPage(), ];body:IndexedStack( in...原创 2019-11-19 09:39:21 · 300 阅读 · 0 评论 -
微信H5页面兼容性解决方案
https://mp.weixin.qq.com/s/L7I0p656V2O310ac_OqxyA转载 2019-11-18 09:51:04 · 372 阅读 · 0 评论 -
物联网浪潮之下,前端工程师如何迎刃而上?
https://blog.csdn.net/tangxiaoyin/article/details/72821604转载 2019-11-27 11:09:37 · 124 阅读 · 0 评论 -
将本地项目上传到github操作步骤
https://www.cnblogs.com/smfx1314/p/8426115.html转载 2019-11-06 13:25:29 · 154 阅读 · 0 评论 -
flutter安装步骤
https://www.jianshu.com/p/b24ae445e167转载 2019-11-06 11:04:36 · 226 阅读 · 0 评论 -
vue防抖节流
https://juejin.im/post/5d790255f265da03c34c284e转载 2019-09-24 13:21:32 · 159 阅读 · 0 评论