自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(82)
  • 收藏
  • 关注

原创 关于微信小程序上线流程的简单总结

最近负责公司里边小程序的一个埋点功能,修改完之后体验了一次小程序上线的一个流程。前提条件首先小程序在微信公众平台后台一定是已经申请开发了,自己也一定要有开发者权限,同时我们也需要有微信开发者工具。开发与测试我们在dev环境下开发完没有问题,就可以进行提测,交给测试人员进行测试,当然一般我们可以在本地自测一下。小程序交给测试的时候一般是给一个二维码,获取二维码需要我们在test代码环境下运行,然后在微信开发工具中找到上传,填写相应的版本号和描述,点击上传,之后到微信公众平台,找到小程序下的版本管理,

2021-08-13 17:09:03 5544 4

原创 简单记录mac使用的小问题

上周刚接触mac,在开发的过程中遇到了一些小问题在此记录一下。npm问题新机npm -g的时候往往需要在头部加上sudo命令;部分项目使用npm都需要sudo?解决方案:每次都要sudo,解决mac上的目录权限问题应用图标问题在launchpad中无法正常移除图标?解决方案:mac删除launchpad中无法正常移除的图标...

2021-08-13 15:53:06 300

原创 多个await的执行顺序?

今天讨论问题,涉及到了多个await执行顺序的问题,折腾了半个多小时终于弄懂了。下边是个简单的代码:function test1() { console.log(111);}function test2() { console.log(222);}async function test3() { await test1(); await test2();}test3();这个执行起来很容易理解,输出结果为111、222。那么下边改造一下:function test1() {

2021-07-06 17:28:43 7717 4

原创 三个前端实际应用场景问题总结

求真实ip拆分真实地址为IP地址,将一个无符号32位整数拆分为4*8位无符号整数,然后拼成一个ip地址题目分析: 32位无符号整数,这里可以理解为32位的二进制数,将其转换为ip,一个ip由4个8位二进制组成,再将二进制转换为十进制即可。function getIp (num) { let ipRes = ''; for (let i = 0; i < 4; i++) { let res = num.toString().substring(i*8, i*8+8); //

2021-07-03 22:33:58 865

原创 输入url之后发生的事情(完整汇总)

总体步骤1、先查找强缓存,命中直接使用,没有命中往下进行2、没有命中强缓存,浏览器发送请求,并根据请求头里边的参数判断是否命中协商缓存,命中直接使用,没有命中往下进行3、没有拿到缓存则进行DNS域名解析4、建立tcp连接,三次握手5、发送http请求6、服务器处理http请求,并返回http报文7、浏览器解析和渲染页面8、连接结束,四次挥手步骤详解1、查找强缓存强缓存会根据请求头或响应头的两个参数,分别为Expirse和Cache-Control,来判断是否命中强缓存Expirse

2021-06-07 16:09:33 476 3

原创 1px问题解决方案汇总

为什么会有1px的问题首先有一个dpr的概念,dpr也就是设备像素比: dpr = window.devicePixelRatio = 物理像素/逻辑像素。出现移动端1px问题主要是因为设备的物理像素和逻辑像素不同导致的,不同的设备所拥有的物理像素是不同的,也称硬件像素,在pc上一般dpr=1,但是在移动设备中dpr常常不为1,这也就导致了在移动端上1px展示的看起来比较粗。解决方案1、媒体查询和0.5px@media screen and (-webkit-min-device-pixel-ra

2021-06-06 15:14:44 2995 2

原创 处理项目中靶位点实时展示的算法问题

最近写的一个射击app项目,里边的一个功能是将后台返回来的靶位坐标数据实时渲染到前端页面上。这里边要考虑到两个难点,一个是靶位传过来的坐标的原点是以靶子的正中心来算的,而我们在页面中的位置原点是从左上角算的,所以涉及到原点位置的转换;另外一个难点就是传过来的靶子是有一个大小的,这里我们用 size 属性来定义,那么这个 size 和我们页面中所展示的图片之间是需要有一个等比例转换的。推算过程原点转换,我们利用了数学上的一个简单的原理来解决了这个问题:width/2 + x;height/2 - y

2021-05-27 16:48:19 142

原创 js中的垃圾回收

首先,js的垃圾回收是自动执行的,并且一般会按照固定的时间间隔进行执行。垃圾回收机制回收那些在函数执行完之后,已经使用过后边不会再使用的变量,而查找这些已经被使用过的变量,一般有两个策略。标记清除标记顾名思义就是在变量上标记一些垃圾收集器能够识别的标识。如何标记并不重要,重要的是采用什么策略。我们可以将所有的变量都先标记上,然后那些不再被用到的变量就把它上边的标记清除,在垃圾收集器运行的时候,查找这些没有被标记的变量,进行删除达到垃圾回收的目的。或者我们先将所有的变量都标记上,把那些被引用的变量以

2021-05-23 11:35:35 625

原创 富文本回车间隔过大,将回车效果修改为shift+回车的效果

这段时间做的一个app,后台使用了tinymce这个富文本,本来的时候感觉挺好用的,可能是后来修改了一些东西导致用起来效果没有那么好了。其中发现tinymce富文本下的回车案件生成的回车产生行与行之间的间隔较大,而shift+回车产生的间隔是正常的,我们希望按下回车时的效果能和按下shift+回车的效果一致,一下是解决方案。在tinymce初始化init下生命如下属性:setup: function (editor) { editor.on('keydown', function (event) {

2021-05-11 09:47:59 1152

原创 一道js面试题引发的思考

这几天我们同学之间讨论了一个面试题,这里来总结一下。这里是这道面试题:function f() { return f;}console.log(new f() instanceof f);首先,它的答案是false。最开始自己思考的时候,就在想 new f() 和 f 返回的结果都是什么,可以看出,最后返回的都是f函数本身,这个时候就理所当然的认为结果是true了。但这道题其实是考察instanceof这个api的。这个api就是来判断左边是否是右边的实例,是即返回true,不是即返回fa

2021-05-01 21:06:53 216

原创 射击app项目实时聊天阶段性总结

介绍这段时间参与研发射击app,这是一款为射击爱好者服务的一个app,用户包括射击爱好者以及射击商品供应商。用户可以使用该app进行动态、文章的发布,购买射击商品,参加线上人机对战、真人对战以及实时聊天等。主要职责这次我作为该项目的一个开发人员,主要负责了该项目中前端实时聊天和实时消息部分的功能。技术实现技术上我们实时通讯使用了websocket,在数据变化监听上使用了vuex,在前端数据持久化上主要使用了uniapp提供的api:‘uni.setStorageSync(KEY,DATA)’、‘u

2021-04-24 17:23:59 124

原创 vue项目基本的环境搭建

今天简单的描述一下vue项目基本的环境是如何搭建的,以及一些注意事项。其实很早有想写这篇文章的想法,但是想着这种问题挺基础的,而且网上也有挺多的教程,不过周围刚接触前端项目的同学经常来问我怎么搭建前端环境,所以想想还是有必要总结一下的。目录结构首先看一下基本项目应该具备的目录结构:如上图,这个项目结构一般是我们开发项目所需要的最基本的结构,各个文件夹的作用也在图中标明。创建完这样的项目结构之后,我们就要开始进行一些具体的环境搭建配置了。网络拦截配置配置网络拦截器,我们一般需要在utils文件

2021-04-10 16:56:34 456

原创 vue指令的部分总结

v-if和v-for为什么不建议放在同一个元素上使用原因:如果我们将v-if和v-for同时写在同一个标签内,那么v-for会比v-if优先执行,再去判断v-if中的条件是否满足,这样会造成性能浪费v-if和v-show的区别区别:v-if在html中会只渲染满足条件的,而v-show会设置行内样式来改变是否展示如果页面中元素展示和隐藏回来会切换了话,那么v-if的开销会更大,因为需要对dom进行销毁和重新创建v-for循环中:key的作用没有key时候的渲染过程:一个应用场景:使用v-for

2021-03-28 16:30:19 78

原创 css实现三角形

使用css实现三角形是借助了border在css中具有斜切角的属性我们将元素的宽高都设置为0,只设置border的宽度<div class="div1"></div>.div1 { width: 0; height: 0; border-top: 100px solid darkmagenta; border-left: 100px solid chartreuse; border-right: 100px solid cyan; border-b

2021-03-19 15:34:21 293

原创 对node.js中express框架的简单总结

介绍: express是快的、开放的、体积很小的node框架,弥补了node中原生的http在某些方面的不足,提升了我们平时的开发效率。安装:npm install --save express使用:var express = require('express');var app = express();app.listen(3000, function() { console.log('running...');})路由上的使用:getapp.get('/', function(

2021-03-09 17:42:58 149

原创 vue中监听vuex的方法

当我们想要在页面中实时监听vuex的变化的时候,可以使用watch来监听,写法如下:watch: { "$store.state.xxx" (newval, oldval) { console.log(newval); }}

2021-02-21 08:45:26 1107

原创 webpack入门介绍

Loader: webpack默认只能打包js或者json,如果想要对less、sass等进行解析,则需要通过loader对某些功能进行解析Plugin: 插件,增强打包能力,比如压缩mode打包环境: 开发环境和生产环境、none,开发环境下会对打包的代码进行压缩配置文件最初的打包配置:npm init -y安装webpack配置:npm install webpack webpack-cli -gnpm install webpack webpack-cli --save-dev打包命令

2021-02-07 12:05:53 99

原创 使用uniapp开发的一些注意事项

uniapp是基于vue框架的一个能够跨平台运行的优秀前端框架,兼容性方面uniapp做的很好,但是在开发的时候有很多的坑,特别是习惯了vue开发之后再去使用uniapp会出现一些习惯性的错误。uniapp在开发环境下可以不使用package.jsonpackage.json文件在vue项目中是在npm init也就是项目初始化的时候创建出来的,在npm install的时候,通过扫描package.json里边的配置来进行依赖安装生成node_modules文件。但是uniapp项目中,初始化之后的

2021-01-25 16:37:09 5706

原创 新手使用Android studio对uniapp进行开发调试的总结

一、安装Android studio因为是新手开发,所以从最开始安装Android studio开始。我安装Android studio参考了以下两篇博客,博主已经说明的非常详细了:安装Android studiogradle安装失败解决补充:在安装完Android studio之后新建项目ide会自动安装gradle,但是这个时候因为网络需要翻墙会导致安装失败,或者安装速度缓慢,解决方案上文第二篇博客博主已经说清楚了,但是博主使用的下载方式依然缓慢。这里说一下比较快的一种方式:通过 gradl

2021-01-07 22:30:19 11507 1

原创 解决项目部署之后出现的Error: Cannot find module ‘@/views/xxx‘问题

这次项目在最后的部署阶段,需要部署一个测试服务器的环境,正常的环境是开发环境和生产环境,分别是‘development’和‘production’,这次了解到除了这两种还存在有‘test’,也就是测试环境。在package.json中的配置如下:"scripts": { "dev": "vue-cli-service serve", "prod": "vue-cli-service build", "test": "vue-cli-service build"}然后在服务器上进行

2020-12-05 16:43:03 38741 4

原创 科研管理系统项目总结

在本次的科研管理系统的研发过程中,我担任了前端前台开发组的负责人,领着其他四名同学一起进行开发任务,我个人担任的开发任务是封装一个前端的搜索组件,下面我对这次的项目经历做一个多方位的总结。团队管理角度自己之前虽然担任过一些管理的任务,但是这次对项目组的管理让我体会了更多,首先我想说的是做管理其实就是一个磨练自己心智的一个过程,项目负责人需要有能力去承担并克服开发过程中遇到的各种困难及压力,我的能力还是有待提高,因为这次管理最后让我有些心累,有种疲惫的感觉,倒不是组员之间,而是对于正在进行中的任务的监督和

2020-11-27 17:20:55 462

原创 最近作为一个项目前台负责人的感受

自己目前参与做商业项目也有一段时间了,从最开始的项目组成员到现在开始慢慢着手进行项目管理,这个过程的感悟还是比较深的,下面我从几个方面来表达一下自己的感受。个人任务作为一个项目负责人的时候,除了要完成自己分内的工作之外,最重要的任务就是推进整个项目向前进行,做到统筹规划的作用,前期根据每个人的个人能力以及时间条件安排分配好开发时间,开发过程中总结遇到的问题并及时对各个问题进行解决,各个问题都需要有相应的解决方案,不能让一个问题搁置太长时间,开发调试阶段需要确保代码同步并确保在服务器上的环境是没有问题的,

2020-11-15 11:24:05 244 1

原创 近一周的项目体验

最近这一周一直在忙着做项目,因为我们这一部分有了新的需求,又因为离联调不远了,所以一直在加班加点的修改样式,对接接口。这一周忙下来一直没有休息,感觉挺辛苦的,但是在我的精神沉入到了项目的功能实现上时我又觉得非常的享受,同时这次项目也让我学到了不少新的知识和经验。首先前端环境上,对于接口服务器的引用,应该分为测试开发环境和生产提交环境,一个环境用于平时写代码用,一个环境用于最后项目部署之后用,毕竟最后代码是要部署到真正的线上的服务器上;另外就数据库而言,前端人员不能够碰触它,也应该不应有权限去打开它,前端

2020-11-01 17:23:36 231

原创 js作用域与作用域链

作用域:在js中,作用域相当于一部分代码占据的一块地盘,在编写js代码的时候,作用域就确定了分类:全局作用域、函数作用域、ES6之后的块级作用域作用:使变量之间关联,不同作用域下的变量不会有冲突作用域与执行上下文之间的区别:如果对执行上下文不理解可以参考这篇博客:理解执行上下文执行时间:  每个函数的作用域在函数定义的时候就已经确定了,而不是调用的时候。  全局执行上下文是在全局作用域确定之后在js代码执行之前创建的。  函数作用域是函数的局部作用域完成之后,函数体代码执行之前创建的。

2020-10-18 15:28:10 143 1

原创 typescript的安装运行与自动编译

简介:typescript是JavaScript的超集,遵循最新的ES5、ES6规范,并扩展了JavaScript的语法。typescript更像后端的Java、C#等面向对象语言。Vue、React中也集成了typescript。安装:cmd打开黑窗口,执行全局安装命令:npm install -g typescript。版本查看:tsc -v。文件创建与编译:创建文件为xxx.ts文件。因为浏览器不支持解析ts文件,所以需要先将ts文件编译成js文件。打开终端到项目所在位置输入:tsc

2020-10-18 11:13:42 365 1

原创 迎新项目点赞功能总结

在这次迎新项目中,我负责了分享集赞功能,因为之前写过类似的,所以这次写的时候本以为会写的比较快,但是后期还是出现了很多很多问题。之前虽然说做过点赞分享功能,但是没有完全的将整个流程跑通,另外在上次做的时候后期是学长帮我处理了一下逻辑最后才成功的,代码的逻辑我懂,但是在这次项目中还是出现了问题。配置问题首先在配置上,因为获取openId需要code,code需要前端请求微信第三方接口,而想要请求微信接口需要条件,首先在第三方接口中需要传入appId,这个appId需要是自己的微信测试号,或者需要某个公众

2020-10-10 19:57:09 223

原创 变量提升与执行上下文

变量提升在js代码进行编译的时候,存在有变量提升和函数提升变量提升:通过var定义的变量,在定义语句之前就可以访问到,这个时候值为undefined函数提升:通过function声明的函数,在之前就可以直接调用,这个时候值为已经定义过的函数如何产生那么变量提升和函数提升是如何产生的呢?此时需要提到js的执行上下文执行上下文首先,执行上下文的操作是一个对js代码进行预编译的操作,是js代码运行之前的一个过程上下文可以理解为当前页面中从上到下的代码js的执行上下文分为全局执行上下文和函数执行上

2020-10-04 08:42:47 222

原创 JS数据类型的一些总结

undefined和nullundefined表示定义未赋值,null表示定义并且赋值了,只是赋的值为null。null的使用当初始赋值为null时,表示将要赋值为对象结束前,让相应的对象成为垃圾对象(被垃圾回收器回收)数据类型和变量类型是不一样的数据类型分为:基本类型对象类型变量的类型分为:基本类型 保存的是基本类型的数据引用类型 保存的是地址值(一个变量,等于的只是一个指向堆内存的地址,只是栈里边的一个引用地址)所以typeof一个变量的时候,其实是根据它指向的地址找到了相应

2020-09-27 12:11:30 88

原创 项目中使用vant组件总结

这段时间在做一个公众号的项目,使用到了vant组件库,今天来总结一下使用到的组件,太简单的就不总结了,主要记录一下自己遇到的一些坑。前期引入工作就不说了,在官方文档中有详细说明,本次项目引入方式是使用了导入全部组件。按钮组件按钮组件使用起来很简单,主要是样式上的修改,css上可以直接使用父子选择器选中button,也可以直接给按钮组件绑定一个class来修改样式。Calendar 日历日历组件设置的选择日期区间,项目需求上需要设置默认的一个日期区间,是从七天前到今天的这段时间,查看过vant的日历

2020-09-19 21:02:22 1120 2

原创 JS的函数和方法

在js中,函数和方法是不同的。函数定义function fun() { console.log("123456");}上边的 fun() 是函数。方法定义var obj = new Object();obj = { "name": "张三", "age": 18}obj.out = function() { console.log(obj.name);}obj.out();上边的 obj.out() 是方法。this指向问题在函数中function fun() {

2020-08-22 22:18:36 284

原创 CSS实现居中的各种方法

使用CSS实现元素居中在实际应用中非常常见,下边我说一下我所总结的几个实现元素居中的方法。html基本代码 <div class="father"> <div class="child"></div> </div>css基本代码 * { margin: 0; padding: 0; } .father { width: 100%; height: 600

2020-08-16 11:04:45 634

原创 理解CSS中的“潜规则”BFC

之前学习前端一直没有听说过BFC,后来才知道这个概念,而且除了BFC,还有IFC、GFC和FFC,今天来总结一下什么是BFC。FC在说明BFC之前,需要大概了解一下什么是FC,FC是Formatting Contexts格式上下文,表示页面中一块渲染区域,并且有一套渲染规则,它决定了其子元素如何定位,以及和其他元素的关系和相互作用。BFC1、什么是BFCBFC是Block Formatting Contexts块级格式化上下文,就如上边所说,BFC有着它自己的渲染规则,使用了BFC的元素会在页面

2020-08-09 21:54:45 228

原创 对TCP/IP协议中三次握手、四次挥手的理解

三次握手TCP/IP协议是传输层的面向连接的安全可靠的协议,三次握手是为了保证能够建立一个安全可靠的连接。第一次握手第一次握手是客户端发起的,客户端向服务端发送一个报文,在这个报文里,SYN位为1,同时发送一个seq。第一次握手是为了通知服务端,客户端这边要开始进行发送数据了,需要建立连接。第二次握手第二次握手是服务端接收到第一次握手之后发送给客户端的,在这次握手中,服务端会发送一个SYN位为1,ACK位为1,ack为第一次握手的seq+1,同时再发送一个seq的报文给客户端。第二次握手是为了

2020-07-30 11:32:29 320

原创 团队项目开发流程总结

项目1、开发流程在确定好开发人员和项目需求之后,就需要进行任务分配和项目排期,团队成员需要根据个人的情况去理性的评估完成任务内容自己所需要花费的天数。所谓承诺即交付,项目团队开发成员在确定过任务完成日期之后,就必须在规定的时间内按质按量的完成。每个成员在结束一天的任务之后,应该按照正规的流程将自己的代码提交到git仓库中。在所有成员的任务基本完成之后,可以开始进行项目的整体联调,将每个人的代码合起来进行整体调试,测试项目是否能够跑通,发现问题,并在相对较短的时间内进行修改,然后再次联调、测试。(注意:

2020-07-29 22:35:42 3468 1

原创 前端学习路线的建议和个人感悟

写在前头在互联网行业中,前端是非常重要的角色,它所服务的对象往往是直接使用相关软件的用户,前端页面写的漂亮与否,对于用户的使用体验影响是非常大的,前端就是互联网行业相关产物的门面。所以,我认为前端学习,首先是要有一个将页面写好看的信念,并学会去欣赏自己还有其他人所写出来的东西。能够感受什么样的页面是好看的,什么样的页面是不好看的,如果说一个前端工程师不在意前端页面的效果,那么我认为这不是一名合格的前端工程师。这里所说的并不是要让前端工作者的页面赏析水平都要和页面计师一样,但是最起码需要多去观察不同页面

2020-07-27 18:03:36 878

原创 前端中括号使用总结

js中的[]在js中,[]的作用除了数组之外,还有解构赋值和对于对象属性的操作。下边展示一些代码样例。解构赋值:let obj = [1,2,3];let obj2 = [4,5];let obj3 = [6,7];let [a,b,c] = [obj,obj2,obj3];console.log(a,b,c);console.log([a,b,c]);let data = [1,2,3,4];let [d,e,f,...g] = data;console.log(d,e,f,g);

2020-07-24 11:39:33 1483

原创 js中回调函数的理解和使用

js的一些特性说到回调函数,不得不说到js的一些特性,js是单线程、非阻塞、异步、任务循环的一种语言,单线程导致js只能一次只做一个事情,一次只执行一段代码;阻塞简单的说就是代码运行很慢的程序,而js的单线程使阻塞更容易发生。...

2020-07-20 22:04:00 973

原创 第一次项目前端开发总结

第一次项目前端使用uniapp开发,但是因为个人技术能力问题,在开发过程中遇到了很多的问题,下边总结一下。代码结构uniapp是基于vue的一个前端框架,所以使用起来和vue查的不太多,但总体来讲要比vue方便很多。首先页面跳转的时候需要在pages.json文件中注册组件路由地址,才可以在<navigator></navigator>标签中指向相应的页面。单个页面结构中,html部分代码是由一个<template></template>标签包裹的,但

2020-07-19 20:13:05 520

原创 新手使用uniapp开发项目遇到的问题总结

tabbar导航栏问题在写项目的时候前期需求要求底部导航栏中间部分凸起,样式为一个蓝色的圈圈,而原生的uniapp不支持自定义底部导航栏,于是需要进行自定义修改。解决方法:在uniapp官网的插件市场中,根据别人写的插件,使用非原生的方式自行实现底部导航栏和页面跳转(此时pages.json对底部导航栏的功能将不再使用)。实现原理:将一个需要跳转的页面写成一个组件,当点击导航栏的时候,去判断自定义的底部导航栏index,不同的index,使不同的组件出现或消失。优点:可以方便的对底部导航栏进行

2020-07-19 14:54:16 3666

原创 Markdown基本使用

Markdown学习标题三级标题四级标题字体Hello,World !Hello,World !Hello,World !Hello,World !引用好好学习天天向上分割线分割线是三个 - 号或三个 * 号图片一个 ! 和 [] ,在 [] 里边写上图片名字,然后在后边加上 () ,选择图片即可,可以放置本地图片,也可以放置网络图片[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jj7IX1gj-1595127649280)(C:\User

2020-07-19 11:02:22 106

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除