- 博客(14)
- 收藏
- 关注
RSS订阅原创 mpvue-手动封装小程序省市区选择器
之前在mpvue小程序的项目中有遇到手动封装一个省市区选择器组件的需求，但当时因为时间比较紧，做得不是很好，一直挺遗憾。最近抽了一些时间终于重新把这个组件重新封装了一遍。这篇博客主要介绍一下怎么用和一些实现的原理。 先展示一下做好的效果： 
626
2
原创 Webpack项目接入Babel详解
npm init -y 首先在项目根目录下运行： npm init -y 来创建项目的package.json文件。-y参数可以直接以默认配置生成package.json，避免多次填写信息的麻烦。 安装webpack和webpack-cli 运行命令： npm install --save-dev webpack webpack-cli 安装webpack到本项目。注意：在webpack 3中，webpack与webpack-cli是在同一个包中。为了方便管理，在webpack
2020-06-27 23:26:47
1026
原创 Vue实现仿百度计算器
功能简介 计算器的功能和样式都是参照百度计算器完成。主要实现的功能包括: 数字的加减乘除运算 计算中的退格 将数字转化为百分数形式 还有一些对错误计算式的自动处理，代码中的注释有说明，就不再一一列举。 功能演示 bug提示 因为计算主要依赖eval()实现，所以计算浮点数时，存在JS原生运算浮点数的缺陷。对小数运算有误差。 源码地址 计算器分别采用了.html和.vue两种形式完成，.html的使用起来更方便。.vue的代码更规范一些。 源码地址 ...
2020-06-23 16:07:03
604
原创 调用drawImage()在canvas标签中不显示图像的问题及解决方案
问题描述 初学红宝书中的canvas标签，在学到drawImage方法的时候，根据书上的代码敲了一遍但在自己的canvas中显示不出图像。 书中代码： var image=document.images[0]; context.drawImage(image,10,10); 照着敲到了自己的代码中，结果canvas中始终是一片空白。 原因 百度之后，得出原因：等图片加载成功后才可以绘制，当图片未加载成功时使用drawImage()，不会被调用，绘制会失败。 解决方案 1.当图像使用img标签时
2020-05-30 21:22:02
6016
原创 Vue报错 Uncaught TypeError: Right-hand side of instanceof is not an object的解决办法
使用props时，本来想在子组件中为传入的prop添加类型验证。我写成了这样： props: { isShow: 'Boolean' } 但为prop添加类型验证时，属性的值应该是构造函数而不是字符串。应该改成： props: { isShow: Boolean; } ...
2020-05-30 21:15:52
2125
原创 JavaScript数组方法forEach()、map()、filter()的比较
forEach() 最简单的形式 Array.prototype.forEach(callback(currentElement)) 此方法的作用是：对数组中的每个元素都执行一次传入的callback回调函数，数组中的每个元素会依次传入回调函数，参与回调函数的执行。currentElement就是指当前被传入的数组元素。 返回值：没有返回值(undefined) var arr = [1, 2, 3]; var result = arr.forEach(function(curr
2020-05-30 20:54:51
545
原创 关于:last-child的误解
先上一段菜鸟教程中对它的用法的解释： :last-child选择器用来匹配父元素中最后一个子元素。 我也是这么一直简单地认为的。然而这样的理解其实是不全面的。最近有遇到一个场景是选中列表中的最后一项为它添加边框。我就照着我的理解写了（错误示范）： <ul class="container"> <li class="item">one</li> <li class="item">two</li>
2020-05-30 20:49:20
2086
原创 总结JS中判断数据类型的三种方式
JS现有数据类型 在了解如何判断数据类型之前，我们首先要明确现在JavaScript中有几种数据类型。 JavaScript中数据类型分为两类：基本数据类型和引用数据类型。基本数据类型包括：Boolean、String、Number、Null、Undefined、Symbol（ES6新增）、BigInt（ES6新增）七种。引用数据类型包括：Object、Function、Array、Date、RegExp 五种。一张图概括： typeof typeof一般用于判断基础类型，它的具体用法是：
2020-05-30 20:45:28
569
原创 No installations recognized 以及 nvm use切换node版本无效的解决办法
两个问题出现的背景： 我在安装nvm之前已经安装了Node.js。 第一个问题：No installations recognized 安装之后，使用nvm list命令我以为会列出我之前已经安装的版本号，但却出现了No installations recognized提示，意为没有安装的版本。 原因：一顿百度后，了解到在安装nvm之前要卸载已经安装的node版本。 解决办法：卸载node.js，再使用nvm install latest安装最新版本的node.js。注意一定要卸载干净！
2020-05-28 14:13:42
19333
1
原创 区分多列选择器的bindchange和bindcolumnchange事件
最近有用到小程序的多列选择器组件<picker mode="multiSelector">，但官方文档中对这个组件的两个事件bindchange和bindcolumnchange事件解释得比较简略。自己总结了一下这两个事件的区别。 触发时机的不同 在多列选择器中，bindchange只在点击“确定”按钮之后触发，而bindcolumnchange在每一次滚动选择器中的任何一列后都会触发。我们可以实际实验一下。以下是部分代码： <picker mode="multiSelect
2020-05-28 14:12:19
5655
原创 mpvue使用一周踩坑合集
使用mpvue开发小程序差不多整整一周了。在此总结一下使用过程遇到的一些坑和比较特别的用法。 mpvue不支持在组件上定义v-show 这一点官方文档也有提到并建议使用v-if代替。但v-if与v-show有一个最大的不同就是，v-if的切换过程，实际上有子组件的销毁和重建。而v-show只是简单的通过display这个CSS属性进行切换。 这个不同带来的影响是：如果在组件的生命周期里定义了一些操作，并使用v-if代替v-show，每一次切换都会触发执行这些生命周期函数中的操作。而与我们想使用v
2020-05-28 14:11:12
609
原创 个人收藏夹各类网站推荐及前端学习入门书籍推荐
工具类 Can I use：https://caniuse.com/#home 用来查CSS属性在浏览器之间的支持情况，一些属性在浏览器之间的兼容情况不一致。例：border-radius属性 可以得知此属性在IE6-8、Opera10.1中不能使用 阿里巴巴矢量图标库：https://www.iconfont. cn/ 用来获取一些可爱的小图标，比如汉堡类： ProcessOn：https://www.processon.com/ 在线作图网站，支持流程图、思维导图、UML等多
2020-05-28 14:09:27
670
原创 理解Array.prototype.reduce()的执行过程
之前对reduce()一直不理解，今天专门看了一遍MDN文档感觉明白了一些。在此记录一下自己的一些理解。 Array.prototype.reduce()方法的作用： 对数组中的每个元素执行一次传入的回调函数（按索引升序执行），并将结果汇总为单个值。 小例子感受一下reduce()的作用：求数组元素的和 var arr = [1, 2, 3]; var result = arr.reduce(function(accumulator, currentValue){ return accumula
2020-05-28 14:06:47
601
1
原创 npm install命令各个参数的区别
dependencies与devDependencies的区别： 首先要明确package.json中dependencies字段与devDependencies字段的区别，不同参数效果的不同也主要体现在这两个字段上： dependencies：它包含的依赖包是需要发布到生产环境中的，是项目正常运行必须依赖的包。 devDependencies：它包含的依赖包只在开发时使用，不用于生产环境，如果只需要项目正常运行，则不必安装这里面的包。 npm install package 安装单个包到项目中：
2020-05-28 14:03:59
2691
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人