Wantingtr Blog

Boilerplate By Hux

浏览器存储与缓存机制

# @[toc] 浏览器存储与缓存机制 浏览器存储 缓存的数据类型都为字符串，通常需将对象序列化成字符串。 cookie HTTP协议是一种无状态协议，在前端请求服务器对任何HTTP请求都需要携带cookie,其中包含着会话信息，用来辨别用户身份。 服务端生成，客户端进行维护和存储。所以cookie的本职工作并非本地存储，而是维持状态 原理及生成方式 cookie的缺...

Posted by wantingtr on September 5, 2019

小程序实现单个卡片左滑显示按钮，并防止上下滑动干扰

实现类似ios端微信的左滑显示置顶、删除按钮的功能，首先需将按钮部分设为绝对定位，并且right设为负值溢出屏幕。利用小程序事件处理的api，分别读取触摸开始，触摸移动时，触摸结束的X/Y坐标，根据差值来改变整个卡片的位置。 这里有一个细节，为了防止按钮的点击干扰到卡片主部分的滑动，需要将整个卡片分为两部分。 <View style={`${positionStyle[index]...

Posted by wantingtr on August 2, 2019

利用flex布局实现仿微信群的多头像九宫格自适应布局

利用flex布局实现微信群的多头像自适应布 微信群聊的头像是多个成员的组合，例如下图。 可以看到根据单个小头像的大小可以分为三类，分别可以看做是整个大头像的98%，47%和31%。所以可以根据单个数组的长度，分别匹配不同的样式。而为了模拟后台返回的多头像接口，需要额外做一个判断，即最多只能显示9张头像。 <div id="app"> <div class="av...

Posted by wantingtr on July 20, 2019

利用Canvas实现小程序分享海报的生成与本地保存

虽然说这是个很常见的需求了，但真正实现起来才发现其中的坑是如此之多。尤其是微信小程序对于Canvas的支持非常之不友好。 实现过程 分享海报通常在小程序里是以弹窗的形式呈现，并需要利用canvas绘制图片并保存至本地，由用户自行分享到朋友圈。刚开始我是直接利用canvas渲染到小程序页面中，而因为这个需求需要从云端获取弹窗的背景图，这一部分延迟比较长，所以还是采用原生HTML渲染 + ca...

Posted by wantingtr on July 10, 2019

微信小程序添加插屏广告并设置显示频率（一天一次）

微信小程序今年新上线了插屏广告，设置和在代码库中接入都非常方便。详细可见微信小程序官方文档。 大体的流程就是在小程序后台新建广告位，获取到广告位的adUnitId并嵌入到源代码，因为插屏广告的单页面性，在页面的onload处添加即可。 let interstitialAd = null; if (wx.createInterstitialAd) { interstitialAd =...

Posted by wantingtr on July 4, 2019

剑指offer里的递归与循环

其实这是第二遍刷剑指offer，发现已经忘得差不多了…虽然说有印象，但该不会写还是不会写。果然纯粹为刷题而刷题，完全不总结还是没啥用啊。所以这次根据题号顺序对里面的算法思想做个总结。 递归怎么解 对于算法ruo ji来说真的很不愿意用递归…因为绕来绕去一定会把自己绕进去。在平时写题时能不用就不用，宁愿写个超级复杂的循环也不想用递归。 但是..!在一定场景下递归真的很简洁很容易。比如这道 ...

Posted by wantingtr on July 2, 2019

JavaScript的执行机制——同步与异步、事件循环、微任务与宏任务

部分参考：这一次，彻底弄懂 JavaScript 执行机制 JS执行机制 javascript是一门单线程语言 Event Loop是javascript的执行机制 同步任务 按照执行顺序一件事一件事的执行，只有前一个任务执行完毕后才能执行后一个任务。 ```js console.log(1) while(true) { } console.log(2) //...

Posted by wantingtr on June 3, 2019

JS的数据类型与事件类

很久没有写博客了…因为这段时间都没有做新的项目，一直在复习前端的基础知识，大部分的（面试）知识点都归类为体系放入了印象笔记里。但因为还是有些繁杂，所以刚好再整理一次发到博客上来。 注：部分图片来自网络 知识点是仅个人根据面经以及自己的面试经历整理，仅供参考 # @[toc] 数据类型分类 基本数据类型（存放在栈中） number（包括整数，浮点数，NaN） boole...

Posted by wantingtr on May 20, 2019

CSS中的伪类，应用场景？遮罩层与超链接样式

很久没写博客了…这段时间一直在准备各种面试，把知识点和体系全都总结在印象笔记里, 等过一段时间在一起把所有的笔记和知识体系总结一下发上来吧~ 伪类 伪类是同一个标签，根据其不同的种状态，有不同的样式。通俗的可以理解成在页面上多加了一层，这个层就是伪类，具体长什么样，在这个层的CSS里定义即可。 应用场景 伪类一个很大的应用场景就是在超链接里： link:连接平常的状态 vis...

Posted by wantingtr on May 1, 2019

JS中的作用域链，闭包，this指向全解析

在不久之前，将网上总结的关于闭包的博文大概看了一下，却仍然是云里雾里。事实证明还是自己直接啃书比较好，对照着红宝书，从作用域到闭包在到this，把闭包的原理和应用以及各种坑通过知识点和网上的博文串起来，才总算弄懂闭包的大概。本篇博文是按照自己的理解所写，如果有不正确的地方，麻烦批评指正。 要知道闭包，必须先了解JS中的执行环境与作用域。 执行环境与作用域 在JS中，执行环境分为两类： ...

Posted by wantingtr on March 15, 2019

ABOUT ME

EMBRACE THE WORLD

FRIENDS