Caniuse

CSS Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格。Grid(网格) 布局使我们能够将网页分成具有简单属性的行和列。 它还能使我们在不改变任何HTML的情况下，使用 CSS 来定位和调整网格内的每个元素。它允许 HTML 纯粹作为内容的容器。 HTML 结构不再受限于样式表现，比如不要为了实现某种布局而多次嵌套，现在这些都可以让 CSS 来完成。 定义一个网格 Grid(网格) 模块为 display 属性提供了一个新的值： grid 。当你将任何元素的 display 属性设置为 grid 时，那么这个元素就是一个 网格容器(grid container)，它的所有直接子元素就成了 网格项(grid items)。 让我们创建创建一个 3×3 的布局，做一个 Tic-Tac-Toe (井字游戏) 棋盘。首先，我们将写一些 HTML： HTML 代码： <div class = "game-board" > < div class = "box" > </ div > <div class = "box" > </ div > <div class = "box" > </ div > <div class = "box" > </ div > <div class = "box" > </ div > <div class = "box" >

❝ 树酱希望将前端的乐趣带给大家 本文已收录 https://github.com/littleTreeme/frontendThings 喜欢就star✨ ❞ ❝ 前沿：在掘金写作不知不觉已经过了四个月了，从一开始寥寥无几的阅读量，到现在有破万阅读的文章，感谢曾支持我的掘金友，希望在未来能加深产出文章的深度，今天从借此机会跟大家分享下树酱日常工作中常用的一些工具，或许可以帮到你提升日常的协作效率 ❞ 1.写作篇 ✏️ ❝ 基于之前很多童鞋在评论区，问树酱说比如思维导图很好看，用的是什么，首图是怎么制作的等等问题，于是通过一些工具的整理希望能帮助到大家 ❞ 1.1 语雀 ❝ 语雀是一个蚂蚁金服孵化出来的专业的云端知识库，类似wiki，目前已经覆盖了10 万阿里员工的使用，来进行文档编写及知识沉淀 官方链接🔗 ❞ 语雀我常用的两个方面 思维导图：一个是语雀自带的思维导图，个人觉得UI体验很强（外表协会） 日记编排：用语雀来保持记录每天在前端开发中遇到的问题及心得体会，方便复盘和回归，最重要的是排版体验高，支持编排，当你回顾你写的文章的时候，阅读体验高，像是在翻书一样 1.2 Process On ❝ ProcessOn是一个在线协作绘图平台,为用户提供最强大、易用的作图工具。支持在线创作流程图、思维导图、组织结构图、网络拓扑图、BPMN、UML图、UI界面原型设计等 ❞

首先，在page外定义一个函数用户判断是否为空对象 var isEmptyObject = function (e) { var temp; for (temp in e) return ! 1 ; return ! 0 } 然后，在page中的onload里面调用授权 onLoad: function () { var that = this ; if (app.globalData.userInfo) { this .setData({ userInfo: app.globalData.userInfo }) } else if ( this .data.canIUse) { // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况 app.userInfoReadyCallback = res => { this .setData({ userInfo: res.userInfo }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this .setData({ userInfo: res

之前wx.getUserInfo写在app.js中，为了尽量减少影响，加了一个登录授权页面tologin wx.login({ success: function (r) { var code = r.code; // 登录凭证 if (code) { // 2、调用获取用户信息接口 wx.getUserInfo({ success: function (res) { // console.log("小程序res") // console.log(res) var userInfo = res.userInfo; // console.log("用户信息") // console.log(userInfo) var timeStamp = Date.parse( new Date()) / 1000 ; var nickName = userInfo.nickName; var gender = userInfo.gender; var avatarUrl = userInfo.avatarUrl; var country = userInfo.country; var province = userInfo.province; var city = userInfo.city; var param = { code: code, nickname: nickName, logo:

　　高效的前端开发工具有哪些?在互联网中许多开发工具可以让前端开发人员的工作生活变得更加轻松。应用程序的功能越来越丰富，也导致了前端开发的复杂度大幅增加，急需好的开发工具。今天和大家分享一些前端开发常用工具，这些工具真的对于提高工作效率有很大的帮助。 　　高效的前端开发工具： 　　1、EnjoyCSS 　　运用CSS，非常简单的工具就是遇到困难时的救星。EnjoyCSS可以让你通过简单的UI设计你的元素，并且提供相关的CSS输出。 　　2、Prettier Playground 　　Prettier是一个代码格式化程序，支持JavaScript，包括ES2017、JSX、Angular、Vue、Flow、TypeScript等。它可以移除你的原始格式，并且将其替换为遵循最佳运行方式的、标准的一致样式。如此便捷的工具在我们的编辑器中十分流行，与此同时它还有一个线上版本，可以在线完成对代码格式的修正。 　　3、Postman 　　Postman就一直在我的开发人员工具集中。它在后端检查GET、POST、DELETE、OPTIONS和PUT在内的一系列端点这方面，起到了非常显著的作用。 　　4、StackBlitz 　　根据Chidume Nnamdi显示，StackBlitz是每名使用者都很喜欢的一款在线编辑工具。最重要的一点就是，它将IDE引入了web——Visual Studio

一、下载安装小程序开发工具 　　 登录微信公众平台： https://mp.weixin.qq.com/ 　　 进入小程序开发文档 　　 选择工具选项 　　 下载对应平台的开发工具，直接链接： https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 　　 安装小程序开发工具 二 、创建项目 　　项目创建流程 　　此时，开发工具将自动帮我们创建一个基础项目，开发工具操作面板结构如下： 　　整个界面大致分为A、B、C、D、E四个功能区域 　　A：模拟器展示 　　B：项目文件资源管理 　　C：代码编写区域 　　D：代码调试面板，与谷歌浏览器的开发者工具很相似。 　　E：项目配置 三、项目结构 　　项目中共有四种文件类型，对应功能如下： .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件 　　项目根路径下的app.js文件为项目启动交互逻辑文件，app.json文件为项目的全局配置文件。 　　pages目录下的每个子目录对应界面中的一个页面。 　　每个页面目录下的json文件是各个页面的配置文件。 　　数据传递到页面，使用双大括号{{}} 　　js文件的结构如下 Page({ data: { //

更新问题 微信小程序遇到新版本发布后，旧版本无法自动更新的困扰. 我之前进行开发的时候： 最笨的方法就是，删除小程序后再重新搜索打开就好; 注意:准确来讲，版本自动更新的方法越早进行补充越合理， 尤其适合前期使用人数较少的时候就做补充 以避免后期使用人数太多时而旧版本依然无法检测更新及时替换的情况 实现方案 1.小程序的运行机制 热启动：小程序打开后在一段时间内（目前5分钟）再次被打开，此时会将后台的小程序切换到前台。 冷启动：小程序首次打开或者销毁后重新打开 2.更新版本 冷启动时，如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，及新版本的小程序需要等下一次冷启动才会应用上； 如果马上应用最新版本，使用 wx.getUpdateManager API 进行处理。 实现一： /** * 检测当前的小程序 * 是否是最新版本，是否需要下载、更新 */ function checkUpdateVersion() { //创建 UpdateManager 实例 const updateManager = wx.getUpdateManager(); //检测版本更新 updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 if (res.hasUpdate) { /

# 1.CSS3简介 - 前缀 google/safari : -webkit- ie : -ms- firefox : -moz- opera : -o- - 前缀官方网址 参考手册：http://css.doyoe.com 权威网站：http://www.caniuse.com - 预处理器:pre-processor less/sass cssNext插件 cssNext:用来实现一些未来的标准（未完全在各大浏览器实现的功能） - 后处理器:post-processor 后处理器插件 autoprefixer : 可以帮助我们自动添加前缀 - postCss + 插件 （充分体现了扩展性） 用JS实现的css抽象的语法树 AST(Abstract Syntax Tree) 剩下的是留给了后人来做 来源： oschina 链接： https://my.oschina.net/u/4413947/blog/4282731

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

为优化用户体验，使用 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）