分类 Web前端

微信小程序登录授权最佳实践

公司业务开展,最近完成了一个微信小程序的开发。场景是这样:同一微信开放平台下拥有相同主体的APP和微信小程序来完成同样的业务,用户进入app或者微信小程序时必须获取用户的unionid来确认当前的用户身份,完成登录。小程序“获取用户信息”api(getUserInfo)的调用方式和之前相比有了较大更新,优雅的实现用户授权和登录非常重要,以下是我在微信小程序授权登录相关流程在开发时候的实现思路和总结,分享如下。

一、微信小程序登录流程时序

登录流程时序

说明:

  1. 小程序调用wx.login() 获取 临时登录凭证code ,并回传到开发者服务器
  2. 开发者服务器以code换取 用户唯一标识openid 和 会话密钥session_key。
  3. 临时登录凭证code只能使用一次
read more
Web前端

Proxy及Reflect

Proxy & Reflect

Reflect

先讲 Reflect 是因为 Proxy 要配合 Reflect 使用的

  1. Reflect 兼容性
  2. Reflect 是什么
  3. Reflect 对象的设计目的(为什么)
  4. Reflect 静态方法(怎么用)
  5. Reflect 操作对象与老方法的对比优势(优势对比)
  6. Reflect 操作对象能力扩展举个例子:(能力扩充举例)

Reflect 兼容性

read more
Web前端

ESLint规范选讲

1. ESLint 规范选讲

1.1 References

1.1.1 优先使用 const 来声明变量; 避免使用 var.

  • eslint: prefer-const, no-const-assign

1.1.2 如果申明的变量必须要改变, 使用 let.

read more
Web前端

JavaScript 模块化简析

所有原创并不精彩,所有精彩并非原创

历史

JavaScript 随着时间的推移所负责的责任越来越重从最开始的添加表单验证功能之类的脚本到angular 应用开发框架,随着js任务越来越重就急需模块化的解决方案。

模块化的基础条件就是开辟一片独立的上下文,那些拥有模块化功能的语言或通过物理文件组织模块,或以抽象的 namespace package 组织模块,而JavaScript 并没这种能力只能从语法上开辟独立的上下文,就目前浏览器端运行的js来说能开辟独立上下文的方式只有一种方式 function

  • 传说中最开始的刀耕火种用闭包各种全局变量组织结构
  • AMD UMD commonjs es6
  • kmath
  • webpack analyse
  • 现在webpack 支持 AMD commonjs es6 ,因为webpack只是格式上的支持
read more
Web前端

ES6/7异步全面解析

众所周知JS是单线程的,这种设计让JS避免了多线程的各种问题,但同时也让JS同一时刻只能执行一个任务,若这个任务执行时间很长的话(如死循环),会导致JS直接卡死,在浏览器中的表现就是页面无响应,用户体验非常之差。

因此,在JS中有两种任务执行模式:同步(Synchronous)和异步(Asynchronous)。类似函数调用、流程控制语句、表达式计算等就是以同步方式运行的,而异步主要由setTimeout/setInterval、事件实现。


传统的异步实现

作为一个前端开发者,无论是浏览器端还是Node,相信大家都使用过事件吧,通过事件肯定就能想到回调函数,它就是实现异步最常用、最传统的方式。

read more
Web前端

从0到1手写一个vuejs

前言

vue的实现原理是一个很值得探讨的话题,无论是从实现机制还是实现思想都很有借鉴意义,对于个人也是一个很好的提升。
以下便是对于vue的一个简单实现原理的概述,同时简单实现一个demo。
接下来,请跟随我的步骤一步一步褪去vue的外衣,抚摸他,把玩他...

将虚拟DOM树渲染到真实的DOM

整体的思路便是首先创建虚拟的dom对象,然后根据虚拟的dom对象创建真实的dom并塞入文档结构

1、每一个dom节点都是一个虚拟的dom对象,他都会包含tag(节点名称)/data(数据)/children(子元素)/text(text节点)四个属性

read more
Web前端

laravel + webpack + vue脚手架构建入门

考虑 - 决定脚手架依赖

这次的项目是一个管理后台,介于以下两点原因:

  1. 这个项目最终会交由后端同学维护,所以前端相关流程应该尽量简单且最好基于后端同学熟悉的框架
  2. 项目前端部分必须有较快的开发效率,不能沿用之前后端同学开发后台时的完全laravel、前后端完全耦合的方法(项目目录可能较为混乱、开发效率低)

所以决定用laravel(后端同学熟悉的后端脚手架) + webpack + vue(入手较为容易的JS框架)

laravel-mix

read more
Web前端

webpack常见优化方案

概念

webpack可以看做是模块打包机。它通过分析项目结构,找到 js、css、图片等模块或资源,并将其打包为合适的格式以供浏览器使用。

功能

  • 代码转换:TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
  • 文件优化/压缩:压缩 JavaScript、CSS、HTML 代码,压缩合并图片等。
  • 代码分割:提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
  • 模块合并:在采用模块化的项目里会有很多个模块和文件,需要构建功能把模块分类合并成一个文件。
    等等...

webpack4主要变化

read more
Web前端

代码质量管理——如何写出优雅的代码

好好写代码

作为一个刚写代码不久的小菜鸟,工作的半年多让我越发意识到提高代码质量的重要性。从前只会关注实现功能,慢慢的开始关注性能,现阶段则发现其实还有很多细节也是(如可读性、易用性、可维护性、一致性)提高代码质量的关键。“实现功能”跟“优雅地实现功能”是两码事。

大部分归纳自网络,将多篇文章的观点汇总加工了一下,也融合了一些个人的见解。

原则

  • 单一职责原则
  • 易用性原则
  • 可读性原则
  • 复杂性守恒原则:无论你怎么写代码,复杂性都是不会消失的

    注:如果逻辑很复杂,那么代码看起来就应该是复杂的。如果逻辑很简单,代码看起来就应该是简单的。

read more
Web前端

永不消失的遮罩:鲜为人知的 Context 大坑

这是一个令人费解的遮罩问题,经过各种调试与查阅资料后,发现由 z-index 一路牵扯到 Stacking Context,浑水竟然如此之深...

永不消失的遮罩

众所周知,z-index这货能控制元素的层级,遵循近大远小、后来居上的规则,可以把元素举高高或者打入幕后。
比如在做各种浮层/层叠定位的时候,拿来用一用。

read more
Web前端