Caniuse

微信小程序登录流程及解析用户openid session_key,获取用户信息

|▌冷眼眸甩不掉的悲伤 提交于 2020-08-05 19:55:58
为优化用户体验,使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始,小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息: UnionID 机制说明 如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的 UnionID 是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。所以我们有时候需要获取这个UnionID 这个图简单的可以看做三部分 1.微信小程序客户端 2.微信官方服务器 3.第三方服务器(这个可以看做是自己的) 具体步骤如下; 1. 客户端获得code,并将code传给第三方服务端 微信小程序端调用wx.login,获取登录凭证(code),并调用接口,将code发送到第三方客户端 2. 第三方服务端用code换session_key和openid 小程序端将code传给第三方服务器端,第三方服务器端调用接口,用code换取session_key和openid 3. 第三方服务端生成新的session(3rd_session)

caniuse-lite is outdated. Please run next command `npm update`

☆樱花仙子☆ 提交于 2020-08-05 11:55:25
一、简述 最近打包vue项目时,执行npm run build,会提示:caniuse-lite is outdated. Please run next command `npm update`,其实并不影响打包,可以正常访问项目网站。 但是如果使用了tfs的自动化发布以及编译,那就不一样了,会报错,中止编译生成,如下图: 二、解决方案 1、删除项目node_modules文件夹下面:caniuse-lite、browserslist两个文件夹。 2、强制更新caniuse-lite、browserslist版本,在输入的命令后面加上版本号,如果不知道版本号可以网上查找,输入命令: npm install caniuse-lite@1.0.30001081 npm install browserslist@4.12.0 3、即可解决 以下是caniuse-lite、browserslist在线的介绍: browserslist: https://www.npmjs.com/package/browserslist caniuse-lite: https://www.npmjs.com/package/caniuse-lite 来源: oschina 链接: https://my.oschina.net/u/4355040/blog/4311293

Notification API,为你的网页添加桌面通知推送

蹲街弑〆低调 提交于 2020-07-29 02:51:28
Notification 是什么 MDN: Notifications API 的 Notification 接口用于配置和向用户显示桌面通知。这些通知的外观和特定功能因平台而异,但通常它们提供了一种向用户异步提供信息的方式。 其实,MDN 的说明已经可以让我们很清楚知道 Notification 的作用。 Notification 能够为用户提供异步的桌面消息通知,即使你缩小浏览器或是活动在其他标签页,只要调用该 Api 的标签页没被关闭,它都能工作。在桌面端的浏览器中,除了 IE 不支持外,其他就均已支持。 以下只提到常用的属性及其方法,更全的看MDN文档: https://developer.mozilla.org/en-US/docs/Web/API/notification 状态值 permission: 只读属性,表示当前显示通知权限的字符串,为以下值: denied: 拒绝显示通知 granted: 接受显示通知 default: 未选择,浏览器默认将其当作拒绝的行为 Notification.permission 授权 requestPermission: 向用户请求显示通知的权限。只有当 permission 的值为 default 时调用此方法,右上角才会显示授权弹窗。如果用户此前已选择过,那么再次调用直接返回状态值。 Notification

自动支持图片webp格式压缩,图片服务器升级webserver

让人想犯罪 __ 提交于 2020-05-03 16:34:04
自动支持图片webp格式压缩,图片服务器升级webserver webp server 是开源免费的。 图片服务器升级,自动支持webp,得先升级openresty 用go写的 webserver 请求到jpg png gif这些,再缓存起来,外面请求还是jpeg这些,实际先到go返回的webp格式,当浏览器不支持webp的才返回源文件。 提升加载时间,图片从434KB减少到340KB,1/4(25%)的压缩率。 根据 caniuse 的统计情况, 主流浏览器(接近80%)都支持 webp 了,如果遇到 Safari 这样的奇葩,直接返回原图。 最重要的一点是——我们访问的 URL 可以完全不用改变,访客访问的依然是xxx.jpg ,但是得到的图片格式为:image/webp,而且体积减少了不少(25%)。 WebP的有损压缩算法是基于VP8视频格式的帧内编码[17],并以RIFF作为容器格式。[2] 因此,它是一个具有八位色彩深度和以1:2的比例进行色度子采样的亮度-色度模型(YCbCr 4:2:0)的基于块的转换方案。[18] 不含内容的情况下,RIFF容器要求只需20字节的开销,依然能保存额外的 元数据(metadata)。[2] WebP图像的边长限制为16383像素。 WebP 是一种衍生自 Google VP8 的图像格式,同时支持有损和无损编码。当使用有损模式

利用window对象自带atob和btoa方法进行base64的编码和解码

纵饮孤独 提交于 2020-04-28 07:26:35
项目中一般需要将表单中的数据进行编码之后再进行传输到服务器,这个时候就需要base64编码 现在可以使用window自带的方法window.atob() 和 window.btoa() 方法进行 但是遇到中文就会出现乱码问题 在其他博客中找到一个使用window方法并且不出现乱码的方法 github也在使用;如下代码 function utf8_to_b64(str) { return window.btoa(unescape(encodeURIComponent(str))); } function b64_to_utf8(str) { return decodeURIComponent(escape(window.atob(str))); } // Usage: utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ== b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode" utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ== b64_to_utf8(

微信小程序 授权登录详解(附完整源码)

牧云@^-^@ 提交于 2020-04-23 07:29:46
一、前言 由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过 button 去触发。 官方连接: https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01 二、实现思路 自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof 接口。在用户进入微信小程序的时候,判断用户是否授权了,如果没有授权的话就显示授权页面,让用户去执行授权的操作。如果已经授权了,则直接跳过这个页面,进入首页。 三、界面简介 1.不带 tabBar 四、源码 1.index.wxml <view wx:if="{{isHide}}"> <view wx:if="{{canIUse}}" > <view class='header'> <image src='/images/wx_login.png'></image> </view> <view class='content'> <view>申请获取以下权限</view> <text>获得你的公开信息(昵称,头像等)</text> </view> <button class='bottom' type='primary' open

rem与px的转换

℡╲_俬逩灬. 提交于 2020-04-12 12:21:01
rem 是相对于根元素 <html> ,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定。 我们知道,浏览器默认的字号 16px ,来看一些 px 单位与 rem 之间的转换关系: | px | rem | ------------------------ | 12 | 12/16 = .75 | | 14 | 14/16 = .875 | | 16 | 16/16 = 1 | | 18 | 18/16 = 1.125 | | 20 | 20/16 = 1.25 | | 24 | 24/16 = 1.5 | | 30 | 30/16 = 1.875 | | 36 | 36/16 = 2.25 | | 42 | 42/16 = 2.625 | | 48 | 48/16 = 3 | ------------------------- 为了方便计算,时常将在 <html> 元素中设置 font-size 值为 62.5% : 相当于在 <html> 中设置 font-size 为 10px ,此时,上面示例中所示的值将会改变: | px | rem | ------------------------- | 12 | 12/10 = 1.2 | | 14 | 14/10 = 1.4 | | 16 | 16/10 = 1.6 | | 18

你们要的Web前沿技术PWA在这里

二次信任 提交于 2020-02-28 06:34:52
PWA是progress web app的缩写,是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送。 history模式 如果不希望看到丑陋的 # 可以使用history模式 , 其原理依赖于 history.pushState函数 a标签点击以后,如果没有# 必然会页面跳转发起请求 使用pushState函数可以改变url 比如 /abc 而不会发起请求 js通过location.pathname获取该值 /abc 做页面局部的替换 router-view的history简单实现原理 router-view实现图解 自制webpack插件实现骨架屏 原理分析: 1: 从路由A跳到路由B慢不慢? 你敢说慢? 因为A的时候各种js已经加载好了ok 2: 那到底是什么比较慢 ? A的首次加载 慢会带来什么? 1: 首屏白屏(量太大,渲染好久) 2: 首屏卡顿(加载一半,一半卡住) 解决方案: 1: 客户端太慢,渲染容易卡住。。 服务端渲染好页面,客户端就加载个html完事 2: 白屏也不错,但是如果能有个骨架屏,看起就爽了 插件实现思路 需要在vue的执行代码加载之前,先让用户看到骨架屏,带app代码执行 new Vue() 替换<div id="app"></div> 就好了 决定加载什么js的是index.html

将边框放在div内部而不是边缘

≯℡__Kan透↙ 提交于 2020-02-27 23:05:04
我有一个 <div> 元素,我想在它上面加一个边框。 我知道我可以写 style="border: 1px solid black" ,但这会增加2px到div的任何一侧,这不是我想要的。 我宁愿让这个边界距离div的边缘是-1px。 div本身是100px x 100px,如果我添加一个边框,那么我必须做一些数学来使边框出现。 有什么方法可以让边框出现,并确保框仍然是100px(包括边框)? #1楼 你也可以像这样使用box-shadow: div{ -webkit-box-shadow:inset 0px 0px 0px 10px #f00; -moz-box-shadow:inset 0px 0px 0px 10px #f00; box-shadow:inset 0px 0px 0px 10px #f00; } 示例: http : //jsfiddle.net/nVyXS/ (悬停到查看边框) 这仅适用于现代浏览器。 例如:没有IE 8支持。 有关 详细信息, 请参阅caniuse.com(框阴影功能) 。 #2楼 我知道这有点旧,但由于关键词“border inside”让我直接来到这里,我想分享一些可能值得一提的发现。 当我在悬停状态下添加边框时,我得到了OP正在谈论的效果。 边框将像素广告到框的尺寸,使其变得有弹性。 还有两种方法可以解决这个问题,这也适用于IE7。

CSS

别等时光非礼了梦想. 提交于 2020-02-27 14:29:05
我的页面结构如下: <div class="parent"> <div class="child-left floatLeft"> </div> <div class="child-right floatLeft"> </div> </div> 现在, child-left DIV将有更多内容,因此 parent DIV的高度根据孩子DIV增加。 但问题是 child-right 身高不会增加。 我怎样才能使它的高度等于它的父母? #1楼 请将parent div设置为 overflow: hidden 然后在子div中你可以为padding-bottom设置很大的数量。 例如 padding-bottom: 5000px margin-bottom: -5000px 然后所有子div都将是父级的高度。 当然,如果你试图将内容放在父div中(在其他div之外),这将无法工作 .parent{ border: 1px solid black; overflow: hidden; height: auto; } .child{ float: left; padding-bottom: 1500px; margin-bottom: -1500px; } .child1{ background: red; padding-right: 10px; } .child2{ background