在前文《flutter系列之开发环境搭建》中，已经介绍过了flutter环境的搭建，如果你的环境已经一切就绪，接下来本文将分享如何在模拟器中debug自己的应用。 我们总共分三步为大家介绍 第一步：启动模拟器， 第二步：安装你的应用到模拟器， 第三步：使用IDE调试flutter应用。 第一步： 启动模拟器 我们使用命令创建一个应用，例： flutter create flutter-study-demo， cd flutter-study-demo 进入应用目录。 查看设备： flutter emu…
背景概述 由于一个后台项目整合了多个系统，并且由多个团队共同维护，项目开发迭代排期及测试、上线的时间节点都不一样，并且后台项目前端代码都在一个git仓库，使得不同团队不同功能代码合并冲突不断并不易统一版本，开发测试也相互影响。其二，项目在同一个服务上代码体积变得越来越大，部署时间变慢。此外相同服务下的公共代码体积也会变大，进而会影响页面加载速度。因此非常有必要将前端微服务化，经过一系列调用及综合项目本身情况，采用微前端框架qiankun，拆分项目为多个微应用，解决上述项目中的痛点问题。 微前端如何解决上述项目中的痛…
1.什么是WebSocket及原理 WebSocket是HTML5中新协议、新API。 WebSocket从满足基于Web的日益增长的实时通信需求应运而生，解决了客户端发起多个Http请求到服务器资源浏览器必须要在经过长时间的轮询问题，实现里多路复用，是全双工、双向、单套接字连接，在WebSocket协议下服务器和客户端可以同时发送信息。 原理： WebSocket 同 HTTP 一样也是应用层的协议，但是它是一种双向通信协议，是建立在 TCP 之上的。 2.理解各种协议和通信层、套接字的含义 IP：网络层协议；（…
最近在推进多个不同项目中使用nvmw管理不同的node版本，其中有一个项目之前使用对应的node版本npm run dev 和 npm install 都是正常的，切换回项目node版本，再次使用npm run dev 时却报错： npm ERR! code EIO npm ERR! errno -4070 npm ERR! syscall read npm ERR! EIO: i/o error, read 经过查询资料了解到是因为windows的cmd 系统编码问题，在Windows命令提示符中存在Unicod…
web前端安全攻防揭秘 Web安全的关键点 1.数据与指令 2.浏览器的同源策略 3.信任与信任关系 4.社会工程学的作用 5.攻防不单一 6.场景很重要 web前端安全最受关注的三种前端攻击包括：XSS攻击、CSRF攻击、界面操作劫持 1. XSS攻击 1.1. Cross Site Script（跨站脚本攻击 ） 恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。 1.2. XSS攻击可以分成两种类型： 1.非持久型X…
理解什么是重绘和重排？ 1、重绘(Repaint) 重绘（repaint或redraw）：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。 重绘不会带来重新布局，所以并不一定伴随重排。 "重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。 但是，"重排"必然导致"重绘"，比如…
前情介绍： 最近做的一个vue项目中，使用echart图表组件展示数据，展示方式是点击按钮弹出弹层，在弹层中展示图表，使用vue组件方式：通过监听数据变化，在调用图表组件的页面中使用如下方法刷新数据: this.$nextTick(function() { // 在这里赋值图表数据，渲染视图 }) 问题描述： 弹出层的图表展示有时无法100%自适应宽度，图表数据展示如果是在页面中正常初始化就展示没有问题，但是如果是在初始化的弹层里默认为display:none，弹层显示的时候，图表自适应宽度计算会有一定几率出现宽度…
eruda--移动端调试神器： Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获 XHR 请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。 1.eruda安装 npm i eruda --save 2.Main.js 引用 import eruda from 'eruda' eruda.init(); 3.开启面板 面板简介： 1）. console面板 捕获 Console 日志，支持 l…
一、 PWA登场背景 很长时间以来我们对项目采用web app 还是 native app的选择上有一些不可调和的矛盾点，究其实质就是用户体验和性能成本问题。 Web App vs Native App 优缺点对比： 理想很美好，优点： 开发成本较低：使用web开发技术就可以轻松的完成web app的开发。 维护比较轻松：web app和一般的web一样，维护比较简单，它其实就是一个站点。 跨平台：一套代码实现android 和 ios系统同时运行。 免安装：打开浏览器，就能使用。 快速部署：升级不需要通知用户，在…
最近做的在线竞答的项目需要使用websocket保持实时通讯，实现同步推题多用户在线竞答。在做过的过程中发现websocket断线频率较高，通过网上查询资料了解到nginx代理的websocket转发，无消息连接会出现超时断开问题。网上资料提到解决方案两种，一种是修改nginx配置信息，第二种是websocket发送心跳包。 下面就来总结一下本次项目中实践中解决的websocket的断线 和 重连 这两个问题的解决方案。 首先我们来看看websocket的断线问题处理，在说明这个问题之前先来说说websocket，…