YolkPie

抓包作为一名前端开发，利用代理工具抓包是最基础的技能。通过抓包，我们可以获取的信息有下面这些： 具体的url 请求的Method，Status等信息 请求接口携带的参数 请求头信息（cookie、UA、请求参数等） 返回头信息（返回结果、是否支持跨域等） 这部分和其他的代理工具没什么区别，都在Network模块里，不熟悉的话多点点就找到了。需要啰嗦几句的是，如果页面出问题，我们抓包的排查步骤是什么：首先确认控制台是否报错（见下节），确认页面地址及url携带的参数是否正确，还要确认要加载的静态资源或者接口的请求是否有非200的情况，当然，如果确切知道问题出在哪个接口上，直接查看接口的请求头和返回值信息就行了。 查看控制台报错远程调试页面或者线上页面出现问题时，我们希望能够看到控制台的报错。这里有三种实现方式： 使用log规则 在页面注入vConsole 使用Weinre 如果只是简单查看控制台报错的话，经常用的是前两种方式，Weinre我会在下文中的Weinre模块单独说明。这里以查看京东首页的控制台内容来举例。 使用log规则使用log规则很简单，在Rules里增加以下规则： ...

证书的安装不依赖于代理工具，Fiddler、Charles、Whistle都可以依照下面的步骤安装。(注意：证书的下载方式在不同代理工具中是不同的，这里默认已经下载了证书) 安装证书的核心在信任证书的这步操作上，这两个字其实也是本文的核心。 Windows 双击下载好的证书文件，点击安装 选择存储位置为当前用户 选择将所有的证书都放入下列存储 这一步是关键的“信任”的步骤：点击浏览按钮，选择受信任的根证书颁发机构 导入完成 Mac 双击下载好的证书，系统会将证书添加到钥匙串并自动打开钥匙串的窗口，在钥匙串中找到wistle证书并选中，会发现页面提示该证书不受信任 右键该证书，选择简介 -> 信任 -> 使用此证书修改为始终信任 关闭窗口时系统会要求输入电脑密码，照做就行 回到钥匙串窗口，此时页面会提示此证书已标记为受账户信任 iOS 系统设置 -> 通用 -> 描述文件与设备管理 选择已经下载的证书 点击安装 输入密码，这个密码是手机的开机密码 继续点击安装 安装完成。别急，不要忘了核心的信任二字：iOS 10.3以下的版本会自动给安装的证书添加信任，如 ...

简介whistle是基于Node实现的跨平台web调试代理工具，同类型的工具有Fiddler和Charles，主要用于查看、修改HTTP、HTTPS、Websocket的请求、响应，也可以作为HTTP代理服务器使用。 在使用了Fiddler、Charles以及whistle这三款代理工具之后，总结出来的whistle的优势有以下几点： 配置简单：whistle的配置类似于系统hosts的配置，一切操作都可以通过配置实现，支持域名、路径、正则表达式、通配符、通配路径等多种匹配方式。 支持扩展：whistle提供了插件扩展能力，通过插件可以新增whistle的协议实现更复杂的操作、也可以用来存储或监控指定请求、集成业务本地开发调试环境等等，基本上可以做任何你想做的事情，且开发、发布及安装whistle插件也都很简单。 内置weinre：通过weinre可以修改调试移动端DOM结构、捕获页面异常等。 界面简单易懂：从界面来看，whistle的功能划分为了network（网络）、rules（规则）、values（数据）、pulgins（插件）四大模块，通过tab页签进行切换。 文档全面：wh ...

前言一般情况，react-native项目是集成在Ios或Android应用中，我们没有权利在rn项目中执行App应用更新操作。有时候，rn项目的部分功能依赖于App应用的最新版本，此时就需要提示用户版本更新，并跳转到应用商店。Android 端应用商店不统一，无法正确的引导用户；但在Ios端，可以快速引导用户跳转应用商店AppStore下载最新版本的App。下面的方法，以京东App为例： 判断京东App是否需要版本升级1）获取当前引用的版本 1234567891011function getClientVersion() { return new Promise((resolve) => { JDNativeSystem.getClientVersion().then((res) => { resolve(res || '') }).catch((err) => { resolve('') ...

代码质量 与 设计模式应用一、代码指标1、健壮性 什么意思呢？ 百度：在异常和危险情况下系统生存的能力。用人的健壮性做个比方： 如果一个人很健壮，那一般的小病小灾打不倒他，如感冒、咳嗽对比过来，一个程序很健壮，那在出现预期之外的错误(eg:文件不存在)，减少找bug的难度和影响程度。 健壮性好的代码有哪些特点 减少找bug的难度 很多同学可能有这么一个问题：发现自己每天写代码 2小时，改bug 6小时， 一天8个小时就这么过去了降低对程序的影响程度 如果程序出现了问题，不至于这一个问题让我们整个系统跑不起来了 保证健壮性的手段 健壮性不同其他性能，没有多抽象的概念，也没有多深的思维，主要就是个人的习惯 1、参数层面 基础类型判断 先来看下面一个例子： 123456789101112function add(a, b){ return a + b;}// 正常入参 没什么问题add(1,2);// 少传一个参数时add(1) // ==> NaN 这里是不会报错的哦！// 这时如果这个返回值是通过 axios.get()传到后台 ...

介绍一些小程序的扩展的工具类库。 目录：1、瘦身工具 通过剔除无用文件、压缩图片、复用代码等方式减少小程序代码包体积。 1.1 安装1npm install -g miniprogram-slim 1.2 使用1234567891011121314151617181920212223242526Usage: miniprogram-slim <command>Options: -v, --version output the version number -h, --help output usage informationCommands: //分析miniprogram的依赖关系，找出未使用的文件 analyzer [options] Analyze dependencies of miniprogram, find out unused files //检测源代码中的重复 cpd [options] <dir> Det ...

前言沉浸式标题栏，简单来说，即是透明栏，标题栏和状态栏不再是传统的黑色或白色，而是透明的，使得手机应用界面占据整个屏幕空间，页面从上向下滚动时，状态栏和标题内容慢慢由透明变成不透明，退出沉浸模式。以上交互，主要通过设置状态栏 StatusBar 和 透明度 opacity 来实现。 设置 opacity初始情况下，标题栏和状态栏的透明度opacity为0，页面向下滚动一段距离(这里设定为标题栏的高度)后，其透明度一点点的由0变为1。基本思路是：const opacity = 滚动的距离 / 标题栏的高度完整代码： 12345678910111213141516171819202122232425262728293031323334353637383940414243import React, {PureComponent} from 'react'import { View, Text, ScrollView } from 'react-native'import TitleBar from '. ...

前言各种技术框架，比如 vue、react 和小程序，实现父子组件和兄弟组件通信的方案有很多，大多方案都强依赖于框架本身。这里介绍一种通过发布和订阅的方式来实现组件通信的方案，纯 JavaScript 实现，可以适用于各种框架。 发布订阅模式发布订阅模式包含三部分内容，发布者、订阅者和数据处理中心。订阅者把自己想监听的事件和回调函数信息写入到数据处理中心去；当事件触发时，发布者发布该事件到数据处理中心，由数据处理中心统一执行订阅者写入到数据处理中心对应事件的回调函数。 比如A组件需要向B组件传递数据，通过发布订阅模式来实现的思路是： 在B组件里添加（on，事件监听）一个事件订阅，监听的事件名称和回调函数； 当A组件需要给B组件传递数据时，可发布（emit）对应的事件名称并携带相应的数据,数据处理中心根据相应的事件执行回调函数并传递数据给B组件 定义数据处理中心用来存储事件和回调函数信息 123456class Emitter { constructor() { // 数据处理中心，用来存储事件和回调函数信息 this ...

WebSocket简介WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。 原理&机制原理网站上的即时通讯是很常见的，比如网页的QQ，微信等。按照以往的技术能力通常是采用轮询等技术解决。HTTP协议是非持久化的，单向的网络协议，在建立连接后只允许浏览器向服务器发出请求后，服务器才能返回相应的数据。当需要即时通讯时，通过轮询在特定的时间间隔（如1秒），由浏览器向服务器发送Request请求，然后将最新的数据返回给浏览器。缺点：会导致过多不必要的请求，浪费流量和服务器资源，每一次请求、应答，都浪费了一定流量在相同的头部信息上，而在WebSocket中，只需要服务器和浏览器通过HTTP协议进行一个握手的动作，然后单独建立一条TCP的通信通道进行数据的传送。WebSocket同HTTP一样也是应用层的协议，但是它是一种双向通信协议，是建立在TCP之上的。广泛被用来做即时通讯，以替代轮询。 机制WebSocket是HTML5的新的协议。它实现了浏览器与服务器全双工通信，能更好的节省 ...

前言互联网设计的不断发展，设计提效推动着设计思维的转变。我们不仅要完成业务需求的设计，在关注视觉表现的基础上，还需要加强对项目协同和体验的关注，逐步形成组件化思维做设计。我们不设计界面，我们是设计构成界面的元素。 那什么是组件呢？ 组件是经过设计元素解耦，具有标准规范和可复用场景的基本模块。从字面上理解：“组”是设计元素的组合方式，“件”由不同的元件组成。当我们把页面中的不同结构做成组件化，再把不同的组件组成页面，当我们替换组件内容中的元素时，页面中的元素也被替换了。原子设计是就是组件化设计的核心思想。 那组件和设计规范又有什么样的关系？毕竟他们都有颜色、图标、文字、弹窗等相同内容。我觉得这两者应该是相辅相成、相对独立又相互包含，比如工厂里的零件包，里边有螺丝钉、螺丝帽、生产组装说明书，设计规范就类比一纸详细的产品生产组装说明书，组件库则更像是一堆零件+使用说明书，零件的组装就是依照生产组装说明书组装。那我们组件库也是依附于当前的设计规范产生，同时未来我们也将依据设计规范来产出新的符合规范的组件。 原子理论说到UI组件库，几乎每篇文章都会说原子理论。在化学中，原子是化学变化中的最小粒子 ...