zaoqinghuan的博客

原创 数组中map遍历会改变原数组吗？

提到map用法，很多人想到forEach，那么这两种方法的区别是什么？会有人说，forEach会改变原数组；map不会改变原数组，返回一个新数组。事实是这样的吗？答案不是，这种说法不准确，是有条件的。1、当数组的值为基本类型的时候，map遍历数组，当对数组中的值做处理的时候，的确不会改变原数组。let a = [1,2,3]b=a.map(item => { item = item+1 })console.log(a) // [1,2,3]console.log(b) // [2,3,4]

原创 vue的运行机制简述

一、vue初始化做了什么？1、创建Vue实例对象2、init过程会初始化生命周期，初始化事件中心，初始化渲染、执行beforeCreate周期函数、初始化 data、props、computed、watcher、执行created周期函数等。3、初始化后，调用mount方法对Vue实例进行挂载（挂载的核心过程包括模板编译、渲染以及更新三个过程）。4、如果没有在Vue实例上定义render方法而是定义了template，那么需要经历∗∗编译阶段∗∗。需要先将template字符串编译成renderfu.

原创 移动端封装一个滚动加载的组件实现分页功能

在移动端项目中，用户通过向上滑动，加载列表数据，实现分页的功能。当总页数为1页或者是最后一页时候，底部显示“没有更多数据”字样，否则显示“滑动加载更多”的字样。一、组件的封装1、html2、jsexport default {props: {parentPullUpState: {default: 0},onInfiniteLoad: {type: Function,require: false}},components: {// “van-loading”: Loading

原创 vue电商—商品详情实现电商图片放大镜，移入放大效果，移出放大消失

方法一、封装成组件页面使用该组件放大镜组件代码 方法二、使用vue插件vue-piczoom1、安装vue-piczoomnpm install vue-piczoom --save2、使用组件默认是100%的高宽，所以建议将组件包含在一个有固定高宽的容器内。如： import PicZoom from 'vue-piczoom'export default { name: 'App', components: { PicZoom }}.

原创 移动端使用better-scroll插件水平滑动

移动端项目开发中，处理滚动列表是再常见不过的需求。1、better-scroll 常见的 html 结构：2、安装better-scroll插件 npm i better-scroll -D页面引入import BScroll from “better-scroll”;2、初始化better-scrollbetter-scroll 的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已

原创 实现页面平滑滚动到某个位置

背景：在一些项目中，在页面的右下角会有一个返回顶部的按钮。点击这个按钮，页面会平滑的滚动到顶部。我们向大家介绍了页面平滑滚动的2种方法。一、window.scrollTo()window.scrollTo(x, y) 可以通过传入文档(HTML 中的 document)中的x轴坐标和y轴坐标将页面滚动到某个位置。该 API 还支持传入一个 options 对象，其中left属性等同于x轴坐标；top属性等同于y轴坐标；behavior 属性表示滚动行为，其类型为 String，可选值有 3 个：smo

原创 微信小程序基于wx-charts的canvas组件横向滚动

在微信小程序里插入折线图，可以使用wx-charts，在绘制到canvas上。wx-charts具体用法就不介绍了。折线图显示后，却发现了一个问题：数据x轴长度不确定，导致如果数据很长的话，数据就会挤在一起，如果长度较大，canvas能滚动就好了。在网页中，我们直接设置父元素固定宽度，子元素宽度超过父元素，让父元素overflow：auto;就行了，可是对微信小程序的canvas组件不起作用。第一时间想到scroll-view组件，但是scroll-view组件不能作为canvas的父元素。但是研究

原创 深入理解vue中的slot插槽

在vue中，有一个插槽的概念。什么是插槽？插槽是子组件提供给父组件使用的一个占位符，父组件可以在这个占位符中填充任何模板代码，如HTML，组件等，填充的内容会替换子组件中的slot标签。也就是说插槽是组件的一块HTML模板，这块模板显示不显示，怎么显示由父组件来决定。插槽有普通插槽（匿名插槽、具名插槽）和作用域插槽。一、匿名插槽匿名插槽，也可以叫它默认插槽，或者与单个插槽（vue的官方叫法），我们可以叫它匿名插槽。因为它不用设置name属性。单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一

原创 小程序组件中监听父组件传来的properties值

前提: 在小程序中，子组件需要接受父组件传来的2个值A和B，子组件需要同时根据A和B做一些业务处理。通常，我们可以在properties单独的针对A和B进行监听，但是我们发现，在A中使用B，取不到B值，或在B中使用A，取不到A值。这是为什么呢？其实这个涉及到事件循环的知识。那么，有没有同时能监测到这两个值的方法呢？所以针对子组件需要同时根据A和B做一些业务处理的情况，我们需要同时监听这两个值变化。只要有一个值发生变化，都会重新处理相关业务。参考微信开发文档：https://developers.w

原创 浏览器环境和node环境下的事件循环

前提：浏览器中的事件循环（Event Loop）和node环境下的事件循环表现是不同的。因为运行和执行是两个概念，不同的环境造就不同的人生。一、浏览器中的 Event Loop1、核心概念事件循环中的异步队列有两种：macro（宏任务）队列和 micro（微任务）队列。宏任务队列可以有多个，微任务队列只有一个。（1）常见的 macro-task 比如：setTimeout、setInterval、 setImmediate、script（整体代码）、 I/O 操作、UI 渲染等。（2）常见的 mi

原创 当 async/await 遇上 forEach

一、问题描述在这个例子中，通过 forEach 遍历的将每一个数字都执行 multi 操作。代码执行的结果是：1 秒后，一次性输出1，4，9。这个结果和我们的预期有些区别，我们是希望每间隔 1 秒，然后依次输出 1，4，9；所以当前代码应该是并行执行了，而我们期望的应该是串行执行。 forEach 的回调函数是一个异步函数，异步函数中包含一个 await 等待 Promise 返回结果，我们期望数组元素串行执行这个异步操作，但是实际却是并行执行了。二、怎么解决方法一、方法二、利用for of 代

原创 Vue中computed和watch的区别

一、计算属性computed :1.结合源码分析， 支持缓存，只有依赖数据发生改变，才会重新进行计算得到新值，新值和旧值进行比较，如果相等，取缓存，不会重新渲染视图，反之，渲染视图（这是vue后来的优化，之前是只要依赖数据发生变化，便会重新渲染视图）2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值4. 如果一个属性是

原创 Vue.nextTick 的原理和用途

一、问题及原因在项目中，我们会发现sopPopups的值在被修改为true后，结果打印出来的sopPopups值还是之前的false,但是在this.$nextTick中打印sopPopups的值为true。这是为什么呢？？原因：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新，dom更新是一个异步过程。具体来说，异步执行的运行机制如下（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。（2）主线

原创 异步组件的用法

随着项目越来越大，性能问题已经成为了困扰业务发展的重要因素。业务发展、用户体验都非常迫切的需要释放页面的负载，提高页面加载速度。vue项目中，异步组件的使用有利于项目的性能优化。一、什么是异步组件异步组件就是定义的时候什么都不做，只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存，缓存是以备下次访问。结合vue的源码分析，异步组件的本质是：实现了2次渲染，先渲染成注释节点（占位），当组件渲染成功后，调用forceRender重新渲染二、异步组件的三种方法1、工厂函数实现在大型应用中，.

原创 小程序ios端，日期不识别横杠“-”符

在做小程序的项目中，对接口返回的时间格式，有时为“2021-03-20 11:28:50”，前端对该格式转为时间戳的过程中，发现不生效且在苹果手机上。所以解决的方法有两种。方法1、让接口直接返回时间戳的格式方法2、前端对格式进行特殊处理，将“-”转为"/"：...

原创 JavaScript中的常用操作

在项目开发中整理了常用的一些js技巧，灵活的运用，会增强你解决问题的能力，也会对你的代码简洁性有很大的改观，有利于指导工作的开展一、数组去重1、利用set数据结构，set类似数组，成员都是唯一的，没有重复的，本身是构造函数，所以可以new。const arr=[1,1,1,4,5,5,4,3,9,3];function unique(arr){uniqueArray.from(new Set(arr)) // 或者 […new Set(arr)]}newArr(arr)2、利用indexOf

原创 性能优化实战

互联网项目，最重要的便是用户体验。对于网站的性能，在行业内有很多既定的指标，但就以前端er而言，我们应该更加关注以下指标：白屏时间、首屏时间、整页时间、DNS时间、CPU占用率。今天，我们将从性能优化的以下方面展开介绍一、网络传输性能优化1、善用缓存，不重复加载相同的资源浏览器的缓存策略（1）为了避免用户每次访问网站都得请求文件，我们可以通过添加 Expires 或 max-age 来控制这一行为。Expires 设置了一个时间，只要在这个时间之前，浏览器都不会请求文件，而是直接使用强缓存。而

原创 我在项目中是这样配置Vue

在开发vue项目的时候，对整个项目会有一些配置。这对整个项目是有很大的帮助的一、启用gzip压缩，让页面加载更快一般来说，gzip的开启只要服务端去做就好，但是服务端需要先根据设置好的压缩等级去压缩文件，然后再将压缩文件返回到浏览器。而这里，webpack的CompressionWebpackPlugin插件可以帮我们生成gzip的压缩文件。可以如果提前将压缩文件存放在服务器中，服务器在处理请求的时候将节省资源的压缩时间，直接读取服务器上的.gz文件。在vue-cli2中，只需要将config/ind

原创 移动端添加调试器

有时候我们开发的移动端项目在PC端浏览器显示的很正常，但是到了手机上就有问题了，这可就让人很纠结，只能盲改，如何能在手机上面查看log,查看接口请求等等，你需要使用vConsole方法一、安装vcosole1、yarn add vConsole -S 或者 npm i vConsole -S2、main.js 引用// 开发环境下面使用vConsole进行调试if (process.env.NODE_ENV === ‘development’) {const VConsole = requir

原创 移动端适配

之前有一种流行已久的移动端适配方案，那就是rem。const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;document.querySelector(‘html’).style.fontSize = deviceWidth / 7.5 + ‘px’;设置根font-size后，px和rem的转换比例成了100, 为比如UI稿一个长宽分别为120px40px，那么开发者对应的写成1.2

原创 小程序怎么使用scss、less这些css预处理器语言

css预处理器语言在开发过程中使用很方便。当在开发小程序的过程中，如果我们使用mpvue或者wepy这些框架，是可以使用css预处理器语言的，但是开发原生小程序时，由于原生小程序不支持css预处理器语言,我们想使用它。该怎么办？方法：使用gulp监听小程序目录下所有的scss文件，使用gulp-sass编译成css文件，然后利用gulp-rename重命名css为wxss，保存到sass所在目录下，这样编译后的wxss文件就与对应的js、json文件在同一个目录了。gulp学习网站：https://

原创 小程序base64生成的二维码，在部分机型上无效

在项目的开发过程中，发现部分手机多次生成海报后，绘制的海报上的由base64生成的二维码不生效。在确定后台接口返回的base64格式的二维码无问题后，那么我们一步步分析，失效原因可能是前端转换base64或者绘制二维码导致的。经过仔细分析、查找，发现是由于转换base64的过程存在本地缓存的问题，所以，我们采用先删除本地的缓存，再去转换base64的方法。一·、删除缓存、转换base64const fsm = wx.getFileSystemManager();1、删除缓存function rem

原创 vue单页面使用loaction.href跳转新页面，返回原来页面后，页面不刷新

在vue项目中，有时我们会遇到这样的问题：没有使用keep-alive。在微信浏览器或者在企业微信环境下，在A页面中用window.location.href跳转到新页面B，然后点击浏览器返回按钮回到之前的页面A，这时，我们会发现用nginx起的服务页面会不刷新，在用node起服务中页面是正常刷新的。为什么会出现这样的问题呢?是因为微信浏览器对页面进行了缓存。解决方法:...

原创 vue禁止某个页面通过浏览器返回

需求是：需要某个路由不能通过浏览器返回，同时不影响相互之间的切换1、.在路由配置中给这个当前路由添加meta信息2、在全局的router.beforeEach 函数里面获取allowBack的状态，同时更新vuex的allowBack的值注意写在next()的后面，因为写在next()前面location.href并不是to的地址，这点跟vue1.0有点不同。location.href 获取的仍不是to的地址，所以得根据to的信息来拼起来3、在app.vue的mounted里面写onpopst

原创 小程序输入框字数统计

//1、文本输入change(event){let_cursor=this.getByteLen(event.detail.value);this.setData({text:event.detail.value,count:_cursor})},//2、获取字符串长度（汉字算两个字符，字母数字算一个）getByteLen(val){...

原创 git重置用户git账号与密码

1、git config --system --unset credential.helper2、git config --global credential.helper store3、git pull输入用户名(邮箱)+密码

原创 微信小程序swiper 前后边距的使用-----previous-margin和next-margin的使用

小程序里经常使用swiper组件来实现轮播滑动的效果。但是有时候我们需要露出前一张和后一张图片一部分，我们可以使用previous-margin和next-margin属性。　　previous-margin：前边距，可用于露出前一项的一小部分　　next-margin：后边距，可用于露出后一项的一小部分假设设置 一个图片的尺寸为宽为600rpx,高为600rpx，前一张图片露出为20rpx,后一张图片露出为20rpx。这里使用的ip6的屏幕尺寸，宽为750rpx (rpx单位：可以根据屏幕宽度进行自

原创 getCurrentPages()的使用

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。注意：1、不要尝试修改页面栈，会导致路由以及页面状态错误。2、不要在 App.onLaunch 的时候调用 getCurrentPages()，此时page 还没有生成。一、跨页面赋值1、 let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。let prevPage = pages[ pages.leng

原创 小程序canvas绘制图片并保存

之前写过一篇小程序分享，体验不是很好。因为用户点击去分享时，canvas绘制并转换成图片需要一定的时间，用户视觉等待的时间有点长。为了更好的优化这一体验，我们可以这么做：1、用户点击去分享，先用页面标签将海报图绘制出来；2、当用户点击保存的时候，我们执行绘制canvas绘制，canvas转换图片，保存图片的过程。一、用页面标签把海报图画出来，这个不需要讲解了，前端都能做到；二、我们详细讲解一下canvas绘制的思路：1、配置海报上的信息，需要绘制什么内容2、用户点击保存按钮// 点击保存事件

原创 校验数组中对象键值是否重复

方法一、双重for循环3、利用es5中的every方法function checkRepeatName (arr) {const obj = {}let flag = arr.every(item =>{return obj[item.name] ? false : obj[item.name] = true})return flag},this.checkRepeatName(formdata) // false, 有重复...

原创 页面倒计时的写法

写法一、es61、声明类Timer/**类说明@class Timer@constructor/export default class Timer {/*http请求@constructor@param {Object} count： 计时数量， 默认60 progress： 计时进度事件 complete： 计时结束事件@return {Number}/constructor (options) {this.options = opt

原创 vue使用install函数把组件做成插件方便全局调用(封装公用组件)

在项目中，我们有时需要把自定义组件做成插件，方便全局使用。下面以弹框提示为例。一、在components文件夹中新建alert.vue，用作弹框提示组件的样式，内容，功能。二、在同级目录下建alert.js文件。这里是核心思想...

原创 CSS-遮罩不设具体高度的父元素

小程序中给定宽度，高度自适应，可以用mode=‘widthFix’,来保持原图片的宽高比不变。所以父元素的高度是根据图片的高度来变化的。与图片同级的是一个css遮罩，需要完全覆盖这个父元素。方法：只需要把遮罩层绝对定位在四个角，就可以实现遮盖住父元素具体样式：.video_descript{position: relative;margin: 25rpx 0rpx;// 图片样式....

原创 nvm管理node版本

在项目开发中，会出现不同项目使用不同node版本的情况，如果去网站下载不同的node会比较麻烦。我们可以使用nvm来管理node。一、安装nvm管理工具下载地址：https://github.com/coreybutler/nvm-windows/releases，选择nvm-setup.zip下载安装。安装结束后，在cmd执行nvm -v，查看nvm是否已自动配置到环境变量中。二、使用n...

原创 canvas绘制文本换行的方法

原创 小程序二维码base64转为图片（二维码的获取）

一、base641、base64图片2、base64图片转换为本地图片可参考https://blog.csdn.net/bocongbo/article/details/84954567这篇博客二、下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为 50MB。封装一个请求接口的方法...

原创 小程序分享海报图

在做小程序商城项目时，用户需要点击海报图，并完成分享的功能，但是微信小程序暂时没有分享到朋友圈的功能，这里分享的思路是用 canvas画布生成一张分享图片，将该图片保存到相册，用户将带有分享二维码的图片发到朋友圈，其他人可以识别图中二维码的方式进入小程序的指定分享页面。下面就核心的代码做简要介绍。1、组建created2、商品详情页面传值到海报图组件，比如标题，价格，网络图片路径等。3...

原创 三、配置html模板

1、我们打包js文件名称不是一直是固定的嘛(output.js)，这样每次就不用改动引入文件名称了，实际上我们日常开发中往往会这样配置:dist文件夹生成：2、js文件打包好了,但是我们不可能每次在html文件中手动引入打包好的js，为了缓存，你会发现打包好的js文件的名称每次都不一样。webpack打包出来的js文件我们需要引入到html中，但是每次我们都手动修改js文件名显得很麻烦，因...

原创 vue首页加载优化

vue项目将打包代码部署上线后访问项目,会发现页面会出现长时间的空白等待。这个严重影响了用户的体验。可以通过下面方法优化。一、引入cdn。链接https://www.bootcdn.cn/造成加载时间过慢的元凶是vendor文件，该文件存放的是项目中所有的第三方依赖。比如vuex、vue-router、jquery等。优化的一个要点就是分离第三方依赖。但是分离的时候要考虑到，即便将依赖分离后依...

原创 二、自定义配置

1、新建一个build文件夹,里面新建一个webpack.config.js2、在packages.json中，更改打包命令3、npm run build