寂寞花如雪-优快云博客

原创前端之HTML

HTML（Hyper Text Markup Language--超文本标记语言）

2023-02-16 17:02:39 945

目录前言正文面试前简历的准备简历的重点格式问题不要针对性的写多份简历简历上不要给自己挖坑跟招聘者的沟通筛选合适的公司拒绝不合适不喜欢的公司确定面试确定面试后的准备前言2021年的春季，金三银四的时候，我也选择了加入告别当前城市前往另外一个城市求职的热潮。我是在四月的中下旬去放开的简历，我在求职的时候只使用了BOOS直聘，也没有主动的去投递一些简历。这样做不好的地方就是各种公司都会给你发信息或者打电话，有的也要加你微信。除了一些你比较排斥的工作类型，其他的合不合适你，是不是你喜欢的工作，只有在你去面试的时

2021-07-31 11:15:20 432

原创 CSS高级常用应用技巧汇总

1.单行和多行文本超出省略号<div class="container"> <p class="single"> <span class="c-red">单行溢出：</span>花半开最美，情留白最浓，懂得给生命留白，亦是一种生活的智慧。淡泊以明志，宁静以致远，懂得给心灵留白，方能在纷杂繁琐的世界，淡看得失，宠辱不惊，去意无留;懂得给感情留白，方能持久生香，留有余地，相互欣赏，拥有默契;懂得给生活留白，揽一份诗意，留一份淡定，多一份睿智，生命方能

2021-03-16 16:06:56 231 1

原创如何更好的进行webpack的打包优化

在前面的一篇文章里提到了，现有项目的升级，但升级结束并不意味这整个任务的结束。还有针对项目打包速度的提升，当一个vue的项目页面在200以上的时候，这个打包速度就会大幅度的降低。那么针对webpack的打包优化就是一件不得不做的事情了，webpack打包优化分为两部分，一部分是大小优化，另一部分是速度优化。大小优化1.Externalswebpack 提供Externals的方法，可以通过外部引用的方法，引入第三方库： index.html<script src="https://code.

2021-01-29 13:30:44 527 2

原创小程序的开发之使用SVG

昨天突然提出要在小程序中使用SVG，因为我们的小程序项目是有主题色的。不同的主题色时有些图片一直是固定的，显的有些格格不入，所以打算使用SVG来实现根据主题色的颜色进行变化。什么是SVGSVG是”Scalable Vector Graphics”的简称。中文可以理解成“可缩放矢量图形”。是一个基于XML的图形描述语言。它是可以用于描述静态图、动画，以及用户界面的一种图形格式。1999年由万维网联盟发布。于2013年成为W3C推荐标准。SVG有哪些优势与其他图像格式相比，使用SVG的优势在于：SV

2021-01-29 11:08:54 8551 7

原创记录一次vue-cli2下的webpack3.x升级webpack4.x的历程

目录写在前面的话安装 webpack-cli ，升级webpack重新安装node包升级webpack-dev-server至3.X升级html-webpack-plugin升级vue-loader增加VueLoaderPlugin插件代码安装babel-plugin插件转换es6代码。同时安装webpack webpack-dev-server webpack-cli写在前面的话由于公司项目是19年创建的，因此还是基于vue/cli2搭建的，webpack版本也是3.6.0。（当时有vue/cli3和

2021-01-14 11:00:48 1340 3

原创最实用的chrome插件

前言说真的第一次看到优快云这个插件的时候并没有感觉特别吸引我的地方，因为我个人安装了好多的插件。第二次看到优快云插件还是因为广告上说的参赛拿奖…（其实我的动机也不是很纯o(╯□╰)o…）插件地址优快云插件: 走起.对于谷歌的插件安装方式很多，可以下载到本地拖拽进入也可以直接通过商店安装。作为一个资深的专业人士当然是选择第二种啦。产品形象第一眼看到这个界面的时候感觉还可以，比谷歌干巴巴的页面好看了一丢丢。不过亮点在一集成了大多数的技术论坛和技术网站，对于一个开发人员来说是很友好的。同时自

2021-01-06 16:09:42 1217 8

原创使用gulp解决小程序代码包过大问题

前言在开发小程序项目的过程中，由于功能的不断增加导致了代码包体积的越来越大。相对其体积进行一下压缩处理，看了几篇给小程序瘦身的博客，决定给自己的项目做一套配置文件，使用gulp来支持小程序文件的编译以及上传之前压缩文件的空行之类的。通过gulp实现代码处理，要进行一些必须文件的配置，放在小程序根目录下，然后将小程序的所有文件移至src下。gulpfile.js – 使用了插件功能，支持gulp开头的插件const gulp = require('gulp')const SRC_DIR = '

2021-01-06 11:49:41 640 1

原创前端⽂件上传的分析

原理概述前端文件上传这个可以说是一个老生常谈的话题了，其中主要用的是全栈的思维，和对http协议、node⽂件处理的深入了解。在这里使用vue+element+nodejs来演示这个。1.上传功能初步实现formData <input type="file" @change="handleFileChange" /> <el-button type="primary" @click="handleUpload">上传</el-button>

2020-11-11 17:01:10 411 2

原创微信小程序中实现车牌输入功能

一、成品展示与介绍在点击输入框的时候会弹出车牌输入键盘二、相关思路解析首先车牌号码由31位汉字，26位字母，10位数字组成的，开头第一位由省份简称的汉字，第二位字母根据省份下的城市或地区区分，最后的五位或者六位，是有字母和数字组成的，共有七位的车牌号码和八位的车牌号码。其中的八位数的车牌号码为新能源车的车牌号码。再次是对于输入键盘的设计。这里设计了两个键盘一个是有31位汉字组成的，第二个是数字加英文字母。最后是对交互的设计，在本次的设计中是从第一位开始输入。从最后一位进行删除，这样做的好处是

2020-10-24 11:22:34 6800 6

原创小程序之RSA加密实现接口保护和多并发处理

前言近期由于客户现场出现了非法接口的调用，为了处理此类问题和杜绝后续问题的出现。针对公司现有的项目实现接口加密，防止接口被恶意的调用。设计思路：客户端存储超级私钥，客户端返回加密的公钥。客户端先使用超级私钥对公钥进行解密，使用解密出来的公钥对接口进行加密。把加密后的字符串进行验签发送给服务器，服务器进行字符串对比。相关引用文件文件的引用这里就只放截图了，源文件网上很容易找到的。这里使用jsencrypt.min.js是为了节省小程序的空间。获取服务器的加密公钥var baseURL = req

2020-09-16 15:05:26 1260 1

原创小程序中关于红包雨的实现

一、原型依据在我这个项目中小程序端所需要实现的只有红包雨的下落动画和通屏背景图的兼容，关于红包点击金额的计算是由后端实现的。首先来看下需要实现的效果图。二、实现代码首先是第一次进入的页面，在这个页面的时候会进行静默登录。静默登录成功的话会显示当前剩余次数，否则在点击开始的时候回跳转登录页面。不论是否登录成功都会去调用活动信息监测的接口，判断当前是否有可以参加的活动。在点击开始后进行三秒钟的倒计时，倒计时结束则转入下一个界面实现红包雨的下落。<!--RedEnvelopes/page

2020-09-15 15:24:26 3401 2

原创手把手带你打造自己的UI样式库（终章）

知识点汇总页面基础模型页面的基础模型部分介绍的是在浏览器中渲染一个页面时用到的建模方式。在这个模型中，它会把每个元素涉及成一个带有尺寸、边距的盒子（盒模型）；还设计了每个盒子排布的方式（定位）；同时这些盒子还可以有层叠关系，就要处理他们之间的叠加方式（层级）；此外，这个模型中还包含了页面的渲染方式（页面渲染机制）。这几种模型里都包含了什么具体内容，可以参考下图里的详细划分：CSS 基础CSS 基础部分讲的是 CSS 语言的特性，包括 CSS 选择器、样式优先级和计量单位。同时，这部分内容里还包含我

2020-07-26 09:44:18 1438 1

原创手把手带你打造自己的UI样式库（第五章）之常用页面切图的设计与开发

常用页面切图的设计与开发在一些大的前端团队中，前端工程师这个职位会出现一个分支，叫做重构工程师。重构工程师主要负责 HTML 和 CSS 的制作，也就是把设计稿转换成 HTML 和 CSS 代码。重构工作完成以后，把制作好的 HTML 和 CSS 交给 JS 工程师来完成 JS 逻辑的部分。一、首页的制作首页整个网站的核心，也是主要功能的入口位置。所以在设计这个页面的时候，我们会把最重要的内容安排进去。这个应用的首页会有搜索功能来直达各个模块，然后会使用网格组件来制作网站的导航，再下面会是一些推荐的文

2020-07-26 09:35:44 630 1

原创手把手带你打造自己的UI样式库（第四章）之UI框架的集成

UI 框架的集成这一章中我们把之前完成的代码进行优化、整合和包装，达到可以在实战项目中直接使用的状态。在这一章的内容里，会涉及到一些基于 nodejs 的工具，并且会使用 shell 脚本来完成一些辅助的工作。我们这一章主要包含两部分内容。第一部分是把我们之前零散的文件打包成一个最终压缩好的文件，提供给传统的项目使用。第二部分是再把压缩好的目标文件依照 npm 包的规则进行修改，并发布到 npm 源上，提供给一些基于 npm 的项目使用。下面来简单说下这两部分内容里都要做哪些事。一、文件方式的集成在

2020-06-23 16:03:08 1789 2

原创手把手带你打造自己的UI样式库（第三章）之常用样式组件的设计与开发

常用样式组件的设计与开发Search搜索框样式的设计与开发搜索组件的需求搜索框的功能比较简单，最基本的就是输入和提交两个逻辑。但是我们这个搜索框要额外的加一些细节，输入框分为输入状态和非输入状态，两种状态下输入框表现要有所不同。我们对这个搜索框组件会有以下要求在搜索框输入后，可以直接点击键盘上的搜索按钮进行查询。这样整个搜索工作都可以在屏幕底部的键盘中完成，不用再去页面顶部点击提交按钮，可以减小操作范围。在输入状态中，当输入框有内容时，提供一键清空的功能。在输入状态中，要有输入提示，且整个搜索

2020-06-05 17:41:31 1287 1

原创手把手带你打造自己的UI样式库（第二章）之移动端页面布局

移动端页面布局一项目的建立1 项目目录结构接下来要做的就是建立好项目的目录结构。一个项目的目录层级尽量扁平，不宜太深。根目录下面把样式库的核心CSS代码放在src目录下，里面包含主文件、公共样式和其他组件的样式文件。为了演示效果，在根目录下建立一个demo目录，来存放各个组件的演示代码。在后面还会在根目录下追加存放目标代码的dist目录和实战页面的page目录，这两个目录等用到的时候再建，现在可以按着下面的目录结构建立对应的文件夹和文件。2 基础文件的建立一、/src/reset.css文件

2020-05-29 17:29:08 1869 1

原创手把手带你打造自己的UI样式库（第一章）

这一章里主要是介绍一下页面结构基础，CSS 选择器，页面渲染机制，屏幕适配方案，CSS书写规范。页面结构基础盒模型在浏览器中，每一个 DOM 节点渲染后，都会在屏幕上占用一个方形的区域，这个方形的区域就被称为盒子，我们把这种渲染方式叫盒模型。在盒模型中，我们主要介绍盒模型的主要属性、两种盒模型和边距折叠这三个内容：一、盒模型主要属性上面的三幅画，其实就是 HTML 中的三个盒子。对盒子大小和位置能产生影响的一共有四类属性，他们分别是：宽度（width）和高度（height），这两个属性分别决

2020-05-19 11:53:33 1908 1

原创手把手带你打造自己的UI样式库（序言）

一、写在前面的话做前端开发的朋友，现在在写过 CSS时，大部分都是用些第三方的库。例如：Bootstrap，vant，easyUI，elementUI，layui之类的样式库或组件库。在使用这些组件库的时候，我们会发现用这东西写样式太省心了，按着文档给 HTML 上加几个 class，样式就神奇的出来了。习惯了用这些框架开发以后还会有一种错觉，就是我的 CSS 水平不错了，还能拿出几个挺像样的页面显摆显摆。但实际上，这通常是错觉，当遇到现有 UI 框架满足不了的需求时，自己写起样式来又会感觉特别吃力。

2020-05-16 16:53:43 3261 1

原创 2020大厂前端面试之vue专题（三）

21.v-model中的实现原理及如何自定义v-modelv-model 可以看成是 value+input方法的语法糖 input v-model checkbox v-model select v-model组件的v-model 就是value+input的语法糖理解:组件的 v-model 是 value+input方法的语法糖<el-checkbox :value="" @input=""></el-checkbox><el-checkbox v

2020-05-11 10:00:53 4638 6

原创 2020大厂前端面试之vue专题（二）

11.Vue中模板编译原理将 template 转化成 render 函数 function baseCompile( template: string, options: CompilerOptions ) { const ast = parse(template.trim(), options) // 1.将模板转化成ast语法树 if (options.optimize !== false) { // 2.优化树

2020-05-09 16:55:18 968 6

原创 2020大厂前端面试之vue专题（一）

1.谈一下你对MVVM原理的理解传统的 MVC 指的是,用户操作会请求服务端路由，路由会调用对应的控制器来处理,控制器会获取数据。将结果返回给前端,页面重新渲染MVVM :传统的前端会将数据手动渲染到页面上, MVVM 模式不需要用户收到操作 dom 元素,将数据绑定到 viewModel 层上，会自动将数据渲染到页面中，视图变化会通知 viewModel层更新数据。ViewModel 就是我们 MVVM 模式中的桥梁.2.请说一下响应式数据的原理？理解:1.核心点: Object

2020-05-09 09:51:05 3098 3

原创带你快速实现购物车功能

一、熟悉购物车所谓熟悉购物车，是指对购物车的所有商品的操作熟知。如：商品的单选、全选、数量的增加、规格的变化、商品的管理、收藏商品、删除失效商品等相关的逻辑操作。对全部的流程做到心中有数，实现的时候才会轻而易举。UI图二、具体购物车功能在本次代码中实现的功能包括商品的单选、全选、根据商品的类型判断不同类型的商品不能同时选中、不同的店铺也不可同时选中。同时也包括也数量、规格的变化，还...

2020-04-06 14:58:24 2793 6

原创关于小程序中地图的应用（联动搜索，模糊查询，定位导航）

小程序中地图的应用一、获取微信地址二、联动搜索及模糊查询三、导航一、获取微信地址在小程序的开发中，内置了获取微信地址的API接口。我们可以直接调用，对返回的数据进行相关的处理即可。代码如下： <view class="wx_address flex_c_m" bindtap='weChat'> <text class="iconfont iconwei...

2020-04-01 10:58:35 2585 2

原创 win10下虚拟机中安装Mac系统

一、下载虚拟机15.5.1版本我从官网上直接下载的最新版这样在安装Mac10.14和Catalina都行，之前用的15.0的版本安装Catalina是失败的。安装VM，等待安装完成。二、下载Unlocker3.0Unlocker是对虚拟机进行解锁的一款工具，不进行解锁是找不到Mac安装选项的。运行win-install等待完成就可以了。三、安装Mac系统此过程就直接上图了：...

2020-01-02 14:55:37 3359 2

原创 windows系统下安装深度系统deepin

前期准备DiskGenius（用来扩展分区）deepin-15.11-amd64.iso(深度系统镜像文件）相关文件下载首先下载安装时要用的工具，分别为:DiskGenius , UltraISODiskGenius是磁盘工具，创建系统分区。UltraISO是用来打开系统光盘镜像文件工具。Win8/8.1/10无需下载UltraISO工具，Win8/8.1/10...

2019-12-06 12:02:51 4646

原创 vue中对Cookie的封装

在utils文件中对Cookie的设置、获取、删除进行封装//设置cookieexport function setCookie (c_name, value, expire) { // var date = new Date() // date.setSeconds(date.getSeconds() + expire) //document.cookie = c_name + ...

2019-12-06 09:35:13 793 2

转载职业规划-IT方向（超详细，超具体）

前言今天是周五，本来想好好休息。前天写了一篇博文《说出我的故事，献给正在迷茫的你》，不少读者留言不知该如何做职业规划，于是继续拖着忙碌了一周疲倦的身体，坐在电脑前，吹着电扇，提笔写下这篇《职业规划-IT方向》。如果你是应届生，或者准备转行 IT，我想以我的个人经验，把我的所思所想分享给你，也许不一定对，仅供参考。如果你已经是老司机，看完我的博文，发现有不妥之处，或者还可以补充的地方，也欢迎提...

2019-12-05 10:26:26 361 2

原创小程序中的商品分类

一、左右布局分类效果图二、实现逻辑页面布局<view class="box"> <view class="b_top"> <view class="b_Search"> <text class="iconfont iconsousuo...

2019-12-03 14:11:28 3655 8

原创小程序之皮肤色

一、编写公共的样式首先写一套可以用来进行换肤的样式/* pages/member/skin/skin.wxss *//* 天空蓝 */ .blue-box { background: #5ba1e7 !important;}.extra-blue { color: #85bdf3 !important;}.blue-item { color: #a2cbf3 ...

2019-12-03 11:43:44 597 1

原创 vue中的高德定位

一、获取key及在index.htm中引入首先需要成为高德开发者，申请到适合项目的key.并在index.html中进行引入<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.3&key=d79ff396531b948ce14d5be1c733fc36"></script&g...

2019-12-01 14:58:56 1011

原创小程序之组件传参

父向子组件传参父组件传递user(e) { let id = e.currentTarget.dataset.id; let detail = e.currentTarget.dataset.detail; wx.navigateTo({ url: '/pages/member/package-payment-code/package-pay...

2019-11-30 10:19:42 952

原创小程序分享及返回上级页面

分享监听/** * 用户点击右上角分享 */ onShareAppMessage: function(res) { console.log(res) if (res.from === 'menu') { return { title: '邀请赢好礼', path: '/pages/member/membership-re...

2019-11-30 09:51:29 612

原创小程序通过高德api定位

高德开放者平台申请api下载amap-wx.js文件js中引入var amapFile = require('../../../utils/amap-wx.js');在onLoad中通过微信方法获取经纬度，进行逆编码onLoad: function(options) { var that = this; wx.getLocation({ type: 'wgs...

2019-11-19 12:33:36 1283 1

原创成为前端架构师的第一步

1.首先封装公共地址var baseURL = 'http://hmspapi.afarsoft.com/';module.exports = { baseURL: baseURL} 2. 封装请求var baseURL = require('/api.js');// 展示进度条的网络请求// url:网络请求的url// params:请求参数// message:进度条...

2019-11-17 17:33:53 403

原创小程序实现公农历选择器

前言在项目中会员进行注册的时候需要进行生日的选择，在常见的小程序前端框架中并没有农历的，不过倒是找到了插件实现农历的方法。但是为了在以后转版的方便，借鉴了一位大佬的算法，在其的基础上进行了二次开发。实现了可以随机选择公历或农历的一种。wxml文件<view class='modal-mask' wx:if="{{ showDatePickerPlus }}" bindtap='clos...

2019-11-13 16:11:02 1627 2

原创 ios部分机型出现select、input等控件点击后失效不可再次点击dug

问题描述在昨天晚上的时候测试突然告诉我一个问题，在iphone 6s中select选择器在第一次点击后，其他的选择无法点击。整个手机都属于暂时性死机状态。问题分析当时首先对代码进行了排查，排除是逻辑方面的问题。经过多方面验证发现只有6s会出现，这是对兼容性进行了进一步的考虑。多方面兼容后，发现也不是兼容的问题。在一步步的实验中发现当点击后，需要滑动一次才可以继续点击，这个时候发现有可能是弹...

2019-11-12 13:38:31 1049

原创 React的初步探索

1. React介绍React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram（照片交友）的网站。库与框架的区别library（库）：小而巧的库，只提供了特定的API；优点就是船小好掉头，可以很方便的从一个库切换到另外的库；但是代码几乎不会改变；Framework（框架）：大...

2019-11-10 11:29:30 264

原创 vue实现农历日期选择器

在项目中会员进行注册的时候需要进行生日的选择，由于通用的UI库都是公历的并且万年历的形式不符合。也在网上查了好多资料，最后找到一套算法感觉还是不错的。经过加工分析封装成了一个vue组件。实现公农历转换的算法/** * 数组LunarDaysOfMonth存入农历1901年到2050年每年中的月天数信息 * 农历每月只能是29或30天，一年用12(或13)个二进制位表示，从高到低，对应位...

2019-11-07 14:01:28 3322