- 博客(74)
- 收藏
- 关注
RSS订阅原创 【HTML】基于jsQR实现的HTML单页面扫码功能
使用jsQR实现的HTML5单页面 扫码签到功能页面。选择jsQR的原因：html5-qrcode：使用简单，识别率低，二维码小不可解析@zxing/library： 识别率优于html5-qrcode，部分安卓模糊无法使用jsQR：轻量小巧实用简单，识别率高，小型二维码也可解析，可以自动对焦。
2023-12-12 18:13:33
824
原创 【JS】前端性能优化（思路梳理）
前言性能优化，对于开发者来说都是老生常谈的问题了，每一个程序猿对于这个问题或多或少都能给出一些解答，当然在IT界me爬滚打多年的我也不例外。性能优化的答案在百度上一搜一大把，但是往往都是东一嘴，西一句，导致背八股文的我说出的答案总是杂乱无章，一团乱麻。所以我查阅了一些资料，整理了一些资源，将前端性能优化的思路梳理了一番，帮助各位在面对性能优化的问题上，能够回答的井井有条！以下：...
2022-03-04 14:42:57
379
原创 【webpack】webpack 入门教程
一、Webpack 是什么Webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）在Wbpack看来，前端的所有资源文件（ js / json / css / img / less / ... ）都会作为模块处理。他将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）二、为什么要使用webpack？当我们在文件里使用less，sass等预处理语言，或者使用es6等新最新...
2022-02-28 11:04:43
954
原创 【React】React 详细教程
前言1、react与vue的对比1.1、什么是模块化是从代码的角度来进行分析的把一些可复用的代码抽离为单独的模块；便于项目的维护和开发1.2、什么是组件化是从UI界面角度来进行分析的把一些可复用的UI元素抽离为单独的组件1.3、组件化的好处随着项目规模的增大，手里的组件就越来越多；很方便就能把现有的组件拼接为一个完整的页面1.4、vue中是如何实现组件化的通过.vue文件来创建对应的组件template 结构 script 行为 style
2022-02-10 16:39:45
3738
原创 【小程序】云开发模式使用 npm 安装 vant 问题
一、在 miniprogram 文件夹内 初始化 生成 package.json 文件进入终端后输入命令 npm init生成自定义 package.json 文件或者 输入命令 npm init -y 生成默认 pageage.json 模板完成后miniprogram 目录下会 多出 一个 package.json 文件二、根据 vant 官方文档步骤操作1、下载vant依赖npm i @vant/weapp -S --production2、修改...
2021-11-12 18:05:32
1423
4
原创 【React】React 入门教程
一、jsx1、 Script 类型一定要为 text/babel<script type="text/babel"></script>2、解析规则遇到 <> 开头的代码以标签的语法解析 html同名的转换成html元素 其他标签需要特别解析 jsx 页面里边想要解析 js 代码 必须要写在 {} 里边 使用 ReactDOM.render 方法将 react 元素渲染在根节点里 <body> <div id='roo..
2021-10-28 17:44:04
454
原创 【移动端】vue脚手架项目手机实时预览方法
在很多情况下，开发移动端项目 为了避免模拟器与真机之间的差异，大部分情况需要使用真机进行实测。非脚手架项目的手机实时预览方法相对比较简单，请参阅我的另一篇文章【移动端】移动端项目手机预览方法而脚手架项目则需要进行一些简单的配置才能实现手机实时预览的效果今天我们这里讲一下如何使用手机实时预览 VUE 脚手架项目：1、打开我们的 vue 项目目录，找到 config →index.js 文件2、在dev模块下，找到并修改 host 为 “0.0.0.0” （默认为local...
2020-08-31 16:56:42
1122
6
原创 【NPM】运行项目报错 或者 npm报错
在我们日常启动协作项目的时候，小概率会出现以下意外1、项目运行失败2、依赖报错3、npm命令报错出现这些问题的很大一部分原因是因为项目依赖版本不一致，或者npm本地缓存导致的。解决方案如下：1、项目运行失败，依赖报错解决办法：删掉node_module依赖文件夹和package-lock.json文件注解：node_module文件里存放的是我们项目所需要的依赖package-lock.json里边记录的是我们项目所需依赖的版本号（npm install 时会自动
2020-05-30 17:52:57
2131
3
原创 【Node】npm 和 yarn 配置淘宝镜像地址
众所周知 npm 和 yarn 都属于包管理工具其下载的资源包默认都是国外的地址，所以下载速度常常十分缓慢，甚至失败！当然，国内有 cnpm 的替代品以国内淘宝镜像为地址，下载速度得到了飞速提升，但是 cnpm 也有非常严重的缺陷！用 cnpm 下载的安装的模块都是以软链形式存在的，本来我们的模块文件就多，再加个软链又多一倍文件，导致很多编辑器检索目录非常缓慢甚至卡死！所以我们最终采用重新配置 npm 或者 yarn 下载依赖包的仓库地址达到提升下载速度的目的。1、npm 配置国内镜
2020-05-15 12:00:30
1505
1
原创 【NUXT】nuxt 国际化 注意事项
最近公司有一个官网项目需要增加多语言，项目使用的是vue + nuxt+ iview 框架。安装依赖npm install --save vue-i18n根据nuxt官网的国际化demo，完成项目的国际化部署。官网Demo :https://zh.nuxtjs.org/examples/i18n其中要注意的几点1、nuxt.config.js 中plugins: [ { src: '~plugins/i18n.js', // ssr: fals...
2020-05-11 11:21:15
2261
1
原创 【VUE】VUE 运行项目的时候报错 throw er; // Unhandled 'error' event
vue运行项目的时候报了一个错，throw er; // Unhandled 'error' event这个报错有很多原因，如果你跟我的报错信息一样，那么请继续往下看如下图1、删掉依赖重装n多次没有效果2、说占用端口号的，更换端口号也没效果后来发现是电脑环境出了问题，于是给电脑配相应的环境1、右键点击此电脑打开属性2、点击高级系统设置3、点击打开环境变量...
2020-04-19 18:26:31
3795
3
原创 【VUE】vue路由跳转Uncaught (in promise) undefined 需要点两次才能跳转成功
vue项目使用路由跳转，点击第一次时报下图的错误，点击第二次时才能正常跳转网上查阅很多资料有解决办法如下图1、版本升级问题，可降级操作 npm i [email protected] -S 不过这个方法我没有尝试，不知道有没有效果，而且大家也要慎重操作因为。。。2、在调用push的时候，设置回调函数this.$router.push({ path: 'Home' }...
2020-04-19 17:48:00
5876
8
原创 【Node】cnpm -v 没反应，光标一直闪动无响应
运行脚手架项目常常需要npm install 安装依赖，但是npm的速度真的让人不敢恭维，所以我们通常安装淘宝镜像cnpm来加快依赖的安装速度。但是我安装完cnpm后，发现cnpm 命令毫无反应， cnpm -v 也毫无反应 查不出来版本号从上图可以看出来我刚安装的cnpm ，但是cnpm -v的命令却毫无反应，只有光标在一直闪动网上查阅好多资料让删除.npmrc文件 但...
2020-04-17 08:56:28
1749
原创 【JS】数组/对象数组删除其中某一项
由于日常工作中经常需要对数组进行操作，最经常使用到的就是对数组进行的删除操作对于我们前端来说，数组有两种区别1、var arr = [ 'aaa' , 'bbb' , 'ccc' ,' ddd' , 'eee' ] 这种暂且称之为纯数组2、var jsonArr = [ { name: 'cz' , age: '25'} , { name: 'mp' , age: '18'} ,...
2020-03-25 14:06:41
20834
4
原创 【微信小程序】WePY入门教程
准备工作一、脚手架的搭建 1、安装wepy脚手架 npm install wepy-cli -g 2、查看wepy版本（出现版本号说明wepy脚手架安装成功） wepy -v 3、如果脚手架为1.70版本以上，可以先查看项目模板 wepy list ...
2020-03-19 11:56:32
2263
1
原创 【GIT】GIT基础教程（新手必看）
准备工作1、首先要下载git，git官网下载比较缓慢，这里提供一个淘宝镜像的网站 https://npm.taobao.org/mirrors/git-for-windows/ 里边有各种版本的git，选择与官网一致的版本下载 新手安装的时候直接下一步直至安装完成即可2、下载并安装完成后，可以在开始菜单中看到以下三种git形态...
2020-03-17 16:30:22
5906
1
原创 【微信小程序】自定义纯净模态框（弹出框）
由于官方API提供的模态框只能显示简单的文字，但是在实际应用场景中，我们需要模态框上能够显示各种各样的组件和样式，所以，以此为基础模拟出一套可以供大家自定义的纯净版的模态框，满足大家各式各样的需求。效果图：WXML:<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" h...
2020-02-26 17:51:04
2509
原创 【微信小程序】cover-view中使用button不显示（关于cover-view的冷知识）
废话不多说，先看小程序文档文档上写的清清楚楚可以在cover-view中使用button但是我在实际使用中却碰到在cover-view中使用button，button不显示的问题！项目中底部的button保存按钮是position-fixed固定在屏幕最下方的，列表中有input框，所以在真机滑动列表的时候，input框中的值会穿透button显示出来，令人懊恼！后来将底部...
2019-06-06 20:32:18
7986
原创 【微信小程序】多图上传(区分已上传和未上传的图片)和上传视频的封装方法
微信小程序中，上传图片一直是我最烦的东西，尤其是涉及到编辑，新老图片的交替，更是让人头大，所以我写了一个公共的方法来解决这个问题 该方法存放于util.js中//多图片上传 arr需上传图片的数组 fun所有图片都上传成功后的回调函数var uploadImgs1 = function (arr, fun) { let that = this; let num...
2019-04-15 19:50:29
1831
原创 【移动端】部分安卓手机打开微信H5页面空白
之前写过一个微信移动端的页面，最近有客户反映部分手机页面加载不出来。拿到问题手机，进入http://debugx5.qq.com/ 页面 打开调试vConsole功能没有发现任何异常。该机型系统为 安卓8.0，微信为最新版本，页面js框架使用的是vue。经过排查发现问题所在：① 因为用的是后端框架，所以在vue中混编了一段php代码 问题机型识别不了vue+php代码所以报...
2019-02-27 13:56:58
6337
2
原创 【JS】浮点数计算精度受损问题（浮点数化为整数计算后再还原的弊端）
浮点数的精度受损，相信大家都有了解过，但是我相信多数还是和我一样没有深入研究过，一知半解。在此博客之前，我对浮点数的加减计算都是先将浮点数乘上10的n次方化为整数，计算后，再除去10的n次方。我觉得整数计算肯定不会出现什么精度受损的问题。事实上，整数计算确实不会出现什么问题。但是，问题出在了化整的时候。举个例子：// 乘法 =====================0.07...
2019-02-26 11:33:26
684
原创 【Mint-UI】Picker之省市区三级联动(动态获取数据)
前一段时间写了一个基于微信端的保险项目，用到了mint-ui的picker，当时在选择地区的三级联动这一块，确实徘徊很长时间，很大程度是因为不太理解mint-ui的文档，用了很多很复杂的方法，最后还是苦心钻研文档，才发现，官方提供的方法写起来非常简单。现在回过头来，觉得有必要记录一下，指引那些和我曾经一样懵懂的少年。ok，抒情到此为止，介绍一下背景，项目没有搭建vue脚手架，引入的vue和mint...
2018-12-27 17:37:14
7524
31
原创 【JS】Promise用法30秒速成（仅限小白观看）
此篇文章专为初学者准备 之 Promise最基础最简单的用法，若想要深入了解，请退出并联系廖雪峰。 郑重声明：本人并未深入研究promise，本文章仅为了让新手快速掌握使用方法，文章内一些不当言论，请勿当真，有兴趣的请前往promise官方教程。（保命要紧） 1、Promise是一个构造函数，我们使用的时候一般是包在一个函数中，然后在需要的时候运行这个函数2、Promise构造...
2018-12-11 15:34:58
915
原创 【JS】FormData的使用以及提交数组的方法
一、创建FormData的方法通常有两种：1、 创建一个空的formData对象let formData = new FormData();2、通过HTML表单元素创建FormData对象let formData = new FormData(someFormElement); 二、FromData对象数据的 添加 删除 和 覆盖。1、添加数据（若对象内没有该key...
2018-12-03 10:40:08
35760
5
原创 【Mint-UI】Action sheet 用法及详解（内含取消事件的触发方法）
鉴于mint-ui官方文档的极简描述和对功能介绍的点到为止，许多功能的完全实现是需要通过阅读源码才可以知道其真正的用法。今天给大家介绍一下Action sheet的用法，以及我踩过的坑，感觉比较有意义，希望能帮到各位。效果图：首先我先带大家看一下官方的介绍：actions为一个对象数组，页面上以每个对象的name为名称来渲染菜单列表，点击相应的对象名称则会触发相应的method...
2018-12-03 10:39:43
4771
原创 【移动端】识别微信端和移动终端
经常写移动端的同学应该都知道，因为iOS和Android系统的差异化，导致一些样式和功能在两种终端上会展示出不同的页面效果。为了兼容以及对不同终端用户体验的提升，我们需要识别出不同的终端，并且定制出不同的方案。在写微信端项目的时候，有时我们希望用户的操作环境始终在微信端里，这样的话，我们也需要对微信端进行识别终端识别：var u = navigator.userAgent;va...
2018-12-03 10:39:04
592
3
原创 【微信小程序】scroll-view 注意事项
之前用到scroll-view的时候踩过一次坑，解决后，觉得不是什么很深的坑，遂没有做记录，结果这次又用到了，同一个坑又掉进去一次，心里很难受，难受我没长脑子，也难受我眼高手低，所以这一次，我决定记录下来，给自己一个警醒！横向滑动注意事项：1、scroll-view 中使用float无效；2、scroll-view 中使用flex依然无效；3、scroll-view 样式中使...
2018-11-27 11:58:11
1608
2
原创 【Mint-UI】search组件的使用及详解（内含取消事件的触发）
用过Mint-UI的同学都知道，Mint-UI的文档写的极简，刚接触的同学难免会因为文档不够详细而晕头转向无法下手（日常吐槽）由于项目的需要，入坑了mint-ui的search组件，文档写的果然让人摸不到头脑。下边直接看效果：我们开发的是基于微信浏览器的移动端项目，该图是在微信开发者工具网页版上测试的在ios 或者Android里的键盘上会出现搜索按钮，点击搜索按钮触发事件...
2018-11-12 15:04:46
7985
10
原创 【VUE】CDN 引入 Axios 和 Qs 及其使用方法
通常一些小型的项目，没必要大费周章的搭建脚手架，直接以CDN的方式引入vue.js 即可享受到vue的便利性那么我们想用到vue中的一些功能，比如axios 呢。注意：Axios与Qs必须配合使用，否则后台会拿不到数据CDN引入：Axios：<script src="https://unpkg.com/axios/dist/axios.min.js"></scri...
2018-11-12 12:39:00
21781
原创 【VUE】关于修改数组后，页面不渲染的问题
首先要解决这个问题，我们要清楚产生这个问题的原因。vue之所以能够监听Model的变化，是因为Javascript语言本身提供了Proxy或者Object.observe()的机制来监听对象状态的变化。但是，对于数组元素的赋值却没有办法直接进行监听，因此会产生以下情况：比如我们vue的data里创建一个json数组：list:[ {"name":"苹果"}, ...
2018-11-12 11:48:21
10202
原创 【移动端】移动端项目手机预览方法
移动端项目，手机预览方法：环境要求：node安装成功第一步：打开命令行工具 ① win + r 打开windows运行窗口 ② 输入 cmd 打开命令行工具第二步：安装全局http服务 nmp install -g http-server （npm安装全局http服务） ...
2018-11-01 17:08:23
1924
原创 【VUE】脚手架项目搭建详细流程
整理了一下VUE大型项目脚手架的搭建，和一些自己的理解，不对的地方欢迎指出！第一步：下载NODE 下载NODE，在这里是为了用到node里边的npm，node下载成功后第二步：win+ R打开 windows 运行窗口，输入 cmd 打开命令行工具第三步：①在命令行工具里输入 node -v 出现版本号 说明 node下载成功 ...
2018-11-01 16:57:08
1164
原创 【CSS】静态螺纹进度条和静态流程布局
为了方便复用，在此记录一下！效果如图所示css核心代码：.active{ background-color:#fea6a2; background-image:repeating-linear-gradient(135deg, transparent 0, transparent 0.1rem, #FC786E 0.1rem, #FC786E 0.2rem); ...
2018-11-01 16:15:19
747
原创 JS 数组，数组对象的合并去重方法
这次对数组的操作，我们使用es6的新语法来完成，所以在看下边代码之前，我们要了解我们下边要用到的es6中的set集合，和for...of 方法：首先介绍set集合：ES6提供了新的数据结构Set,它类似于数组，但是成员的值都是唯一的，没有重复的值。Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。注意：向set加入值的时候，不会发生类型转变，所以 5 和 '5...
2018-09-03 11:31:08
28753
11
转载 rem布局实现不同分辨率移动终端的自适应、整体缩放
前言现在手机屏幕分辨率越来越多，但我们的需求比较唯一——最佳视觉。 当用户浏览网页时，根据屏幕的尺寸，来向用户展示更适合用户的布局、文字、图片、按钮等等，因此，rem应运而生。 rem（font size of the root element）是指相对于根元素的字体大小的单位。一旦根节点html 定义的 font-size 变化，那么整个网页中运用到 rem的也会随之变化。加之当前手机淘...
2018-08-29 17:28:44
768
原创 JS Date时间各种格式互转
首先要先了解一下Date 有几种格式分别是什么：1、标准日期：2018-08-29 或者 2018-08-29 14:00:002、中国标准时间：Wed Aug 29 2018 14:43:23 GMT+0800 (中国标准时间)3、时间戳：15355270754424、毫秒数：1535527075442000 注意：时间戳 * 1000 = 毫秒数注意：苹...
2018-08-29 15:30:03
4070
原创 【小程序】 获取昨天，今天，明天的xx-xx-xx格式的日期，picker中可用
小程序picker 日期选择中经常要用到 年-月-日 格式的时间，写下来方便以后使用//昨天的时间var day1 = new Date();day1.setTime(day1.getTime()-24*60*60*1000);var s1 = day1.getFullYear()+"-" + (day1.getMonth()+1) + "-" + day1.getDate();...
2018-08-21 18:24:11
3223
原创 CSS魔幻属性之图片间隙问题
最近看到一篇CSS魔幻属性的文章，感触很深，不过我想，与技巧相比，有些常见css布局难题，有时候更加让我们的日常开发变得踌躇沮丧吧。为什么此处li标签内的p元素看起来独自撑开了一行这是我在segmentfault上看到的一个问题，以前自己遇到过，所以就很热情洋溢的去回答了一下，难道遇到个自己会的，示例代码是这样的： li{ display: inline-bloc...
2018-08-01 13:21:36
346
原创 Linux 命令操作
入门必备命令命令格式： 命令 [选项] [参数]必备命令 cd: 切换工作目录 - :表示刚才的工作目录 ~ : 表示用户的家目录 . :表示当前目录 .. :表示上级目录 / :表示根目录 pwd:打印工作目录 ls: 列出指定目录的内容 -a...
2018-07-31 15:38:04
510
原创 Ubantu 常用命令
一.使用Ubantu安装nodejs 1.安装前先安装nodejs的版本管理器nvm，在命令行里输入以下命令（安装完毕要重启终端）： wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash 2.运行之后使用以下命令查看是否安装成功： command -v...
2018-07-31 15:36:50
649
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人