<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[NAMECZ的博客]]></title><description><![CDATA[个人学习]]></description><link>https://blog.youkuaiyun.com/NAMECZ</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; NAMECZ]]></copyright><item><title><![CDATA[【HTML】基于jsQR实现的HTML单页面扫码功能]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/134955382</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/134955382</guid><author>NAMECZ</author><pubDate>Tue, 12 Dec 2023 18:13:33 +0800</pubDate><description><![CDATA[使用jsQR实现的HTML5单页面 扫码签到功能页面。选择jsQR的原因：html5-qrcode：使用简单，识别率低，二维码小不可解析@zxing/library： 识别率优于html5-qrcode，部分安卓模糊无法使用jsQR：轻量小巧实用简单，识别率高，小型二维码也可解析，可以自动对焦。]]></description><category></category></item><item><title><![CDATA[【JS】前端性能优化（思路梳理）]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/123225208</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/123225208</guid><author>NAMECZ</author><pubDate>Fri, 04 Mar 2022 14:42:57 +0800</pubDate><description><![CDATA[前言

性能优化，对于开发者来说都是老生常谈的问题了，每一个程序猿对于这个问题或多或少都能给出一些解答，当然在IT界me爬滚打多年的我也不例外。

性能优化的答案在百度上一搜一大把，但是往往都是东一嘴，西一句，导致背八股文的我说出的答案总是杂乱无章，一团乱麻。

所以我查阅了一些资料，整理了一些资源，将前端性能优化的思路梳理了一番，帮助各位在面对性能优化的问题上，能够回答的井井有条！

以下：






...]]></description><category></category></item><item><title><![CDATA[【webpack】webpack 入门教程]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/123175239</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/123175239</guid><author>NAMECZ</author><pubDate>Mon, 28 Feb 2022 11:04:43 +0800</pubDate><description><![CDATA[一、Webpack 是什么

Webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）

在Wbpack看来，前端的所有资源文件（ js / json / css / img / less / ... ）都会作为模块处理。

他将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）



二、为什么要使用webpack？

当我们在文件里使用less，sass等预处理语言，或者使用es6等新最新...]]></description><category></category></item><item><title><![CDATA[【React】React 详细教程]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/122854282</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/122854282</guid><author>NAMECZ</author><pubDate>Thu, 10 Feb 2022 16:39:45 +0800</pubDate><description><![CDATA[前言

1、react与vue的对比



1.1、什么是模块化

是从代码的角度来进行分析的

把一些可复用的代码抽离为单独的模块；便于项目的维护和开发



1.2、什么是组件化

是从UI界面角度来进行分析的

把一些可复用的UI元素抽离为单独的组件



1.3、组件化的好处

随着项目规模的增大，手里的组件就越来越多；

很方便就能把现有的组件拼接为一个完整的页面



1.4、vue中是如何实现组件化的

通过.vue文件来创建对应的组件

template 结构 script 行为 style]]></description><category></category></item><item><title><![CDATA[【小程序】云开发模式使用 npm 安装 vant 问题]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/121292699</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/121292699</guid><author>NAMECZ</author><pubDate>Fri, 12 Nov 2021 18:05:32 +0800</pubDate><description><![CDATA[一、在 miniprogram 文件夹内 初始化 生成 package.json 文件



进入终端后输入命令 npm init生成自定义 package.json 文件

或者 输入命令 npm init -y 生成默认 pageage.json 模板

完成后miniprogram 目录下会 多出 一个 package.json 文件



二、根据 vant 官方文档步骤操作

1、下载vant依赖


npm i @vant/weapp -S --production

2、修改...]]></description><category></category></item><item><title><![CDATA[【React】React 入门教程]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/121008157</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/121008157</guid><author>NAMECZ</author><pubDate>Thu, 28 Oct 2021 17:44:04 +0800</pubDate><description><![CDATA[一、jsx

1、 Script 类型一定要为 text/babel


&lt;script type="text/babel"&gt;&lt;/script&gt;

2、解析规则

遇到 &lt;&gt; 开头的代码以标签的语法解析 html同名的转换成html元素 其他标签需要特别解析
	jsx 页面里边想要解析 js 代码 必须要写在 {} 里边
	使用 ReactDOM.render 方法将 react 元素渲染在根节点里
	
&lt;body&gt;
    &lt;div id='roo..]]></description><category></category></item><item><title><![CDATA[【移动端】vue脚手架项目手机实时预览方法]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/108322892</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/108322892</guid><author>NAMECZ</author><pubDate>Mon, 31 Aug 2020 16:56:42 +0800</pubDate><description><![CDATA[在很多情况下，开发移动端项目 为了避免模拟器与真机之间的差异，大部分情况需要使用真机进行实测。

非脚手架项目的手机实时预览方法相对比较简单，请参阅我的另一篇文章【移动端】移动端项目手机预览方法

而脚手架项目则需要进行一些简单的配置才能实现手机实时预览的效果

今天我们这里讲一下如何使用手机实时预览 VUE 脚手架项目：



1、打开我们的 vue 项目目录，找到 config →index.js 文件





2、在dev模块下，找到并修改 host 为 “0.0.0.0” （默认为local...]]></description><category></category></item><item><title><![CDATA[【NPM】运行项目报错 或者 npm报错]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/106443955</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/106443955</guid><author>NAMECZ</author><pubDate>Sat, 30 May 2020 17:52:57 +0800</pubDate><description><![CDATA[在我们日常启动协作项目的时候，小概率会出现以下意外

1、项目运行失败

2、依赖报错

3、npm命令报错

出现这些问题的很大一部分原因是因为项目依赖版本不一致，或者npm本地缓存导致的。

解决方案如下：

1、项目运行失败，依赖报错

解决办法：

删掉node_module依赖文件夹和package-lock.json文件

注解：

node_module文件里存放的是我们项目所需要的依赖

package-lock.json里边记录的是我们项目所需依赖的版本号（npm install 时会自动]]></description><category></category></item><item><title><![CDATA[【Node】npm 和 yarn 配置淘宝镜像地址]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/106137608</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/106137608</guid><author>NAMECZ</author><pubDate>Fri, 15 May 2020 12:00:30 +0800</pubDate><description><![CDATA[众所周知 npm 和 yarn 都属于包管理工具其下载的资源包默认都是国外的地址，

所以下载速度常常十分缓慢，甚至失败！

当然，国内有 cnpm 的替代品以国内淘宝镜像为地址，下载速度得到了飞速提升，

但是 cnpm 也有非常严重的缺陷！

用 cnpm 下载的安装的模块都是以软链形式存在的，本来我们的模块文件就多，再加个软链又多一倍文件，导致很多编辑器检索目录非常缓慢甚至卡死！

所以我们最终采用重新配置 npm 或者 yarn 下载依赖包的仓库地址达到提升下载速度的目的。

1、npm 配置国内镜]]></description><category></category></item><item><title><![CDATA[【NUXT】nuxt 国际化 注意事项]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/105999121</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/105999121</guid><author>NAMECZ</author><pubDate>Mon, 11 May 2020 11:21:15 +0800</pubDate><description><![CDATA[最近公司有一个官网项目需要增加多语言，项目使用的是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...]]></description><category></category></item><item><title><![CDATA[【VUE】VUE 运行项目的时候报错 throw er; // Unhandled 'error' event]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/105619292</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/105619292</guid><author>NAMECZ</author><pubDate>Sun, 19 Apr 2020 18:26:31 +0800</pubDate><description><![CDATA[vue运行项目的时候报了一个错，throw er; // Unhandled 'error' event

这个报错有很多原因，如果你跟我的报错信息一样，那么请继续往下看

如下图



1、删掉依赖重装n多次没有效果

2、说占用端口号的，更换端口号也没效果

后来发现是电脑环境出了问题，于是给电脑配相应的环境

1、右键点击此电脑打开属性

2、点击高级系统设置



3、点击打开环境变量

...]]></description><category></category></item><item><title><![CDATA[【VUE】vue路由跳转Uncaught (in promise) undefined 需要点两次才能跳转成功]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/105615252</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/105615252</guid><author>NAMECZ</author><pubDate>Sun, 19 Apr 2020 17:48:00 +0800</pubDate><description><![CDATA[vue项目使用路由跳转，点击第一次时报下图的错误，点击第二次时才能正常跳转



网上查阅很多资料有解决办法如下图

1、版本升级问题，可降级操作 npm i vue-router@3.0 -S

   不过这个方法我没有尝试，不知道有没有效果，而且大家也要慎重操作因为。。。



2、在调用push的时候，设置回调函数

this.$router.push({ path: 'Home' }...]]></description><category></category></item><item><title><![CDATA[【Node】cnpm -v 没反应，光标一直闪动无响应]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/105569320</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/105569320</guid><author>NAMECZ</author><pubDate>Fri, 17 Apr 2020 08:56:28 +0800</pubDate><description><![CDATA[运行脚手架项目常常需要npm install 安装依赖，但是npm的速度真的让人不敢恭维，所以我们通常安装淘宝镜像cnpm来加快依赖的安装速度。

但是我安装完cnpm后，发现cnpm 命令毫无反应， cnpm -v 也毫无反应 查不出来版本号



从上图可以看出来我刚安装的cnpm ，但是cnpm -v的命令却毫无反应，只有光标在一直闪动

网上查阅好多资料让删除.npmrc文件  但...]]></description><category></category></item><item><title><![CDATA[【JS】数组/对象数组删除其中某一项]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/105090186</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/105090186</guid><author>NAMECZ</author><pubDate>Wed, 25 Mar 2020 14:06:41 +0800</pubDate><description><![CDATA[由于日常工作中经常需要对数组进行操作，最经常使用到的就是对数组进行的删除操作

对于我们前端来说，数组有两种区别

1、var arr = [ 'aaa' , 'bbb' , 'ccc' ,' ddd' , 'eee' ] 这种暂且称之为纯数组

2、var jsonArr = [ { name: 'cz' , age: '25'} , { name: 'mp' , age: '18'} ,...]]></description><category></category></item><item><title><![CDATA[【微信小程序】WePY入门教程]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/104926559</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/104926559</guid><author>NAMECZ</author><pubDate>Thu, 19 Mar 2020 11:56:32 +0800</pubDate><description><![CDATA[准备工作

一、脚手架的搭建

   1、安装wepy脚手架

      npm install wepy-cli -g

   2、查看wepy版本（出现版本号说明wepy脚手架安装成功）

      wepy -v

   3、如果脚手架为1.70版本以上，可以先查看项目模板

      wepy list

 ...]]></description><category></category></item><item><title><![CDATA[【GIT】GIT基础教程（新手必看）]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/104924310</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/104924310</guid><author>NAMECZ</author><pubDate>Tue, 17 Mar 2020 16:30:22 +0800</pubDate><description><![CDATA[准备工作



1、首先要下载git，git官网下载比较缓慢，这里提供一个淘宝镜像的网站

  https://npm.taobao.org/mirrors/git-for-windows/

   里边有各种版本的git，选择与官网一致的版本下载

   新手安装的时候直接下一步直至安装完成即可



2、下载并安装完成后，可以在开始菜单中看到以下三种git形态



...]]></description><category></category></item><item><title><![CDATA[【微信小程序】自定义纯净模态框（弹出框）]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/104520731</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/104520731</guid><author>NAMECZ</author><pubDate>Wed, 26 Feb 2020 17:51:04 +0800</pubDate><description><![CDATA[由于官方API提供的模态框只能显示简单的文字，但是在实际应用场景中，我们需要模态框上能够显示各种各样的组件和样式，所以，以此为基础模拟出一套可以供大家自定义的纯净版的模态框，满足大家各式各样的需求。

效果图：



WXML:


&lt;view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" h...]]></description><category></category></item><item><title><![CDATA[【微信小程序】cover-view中使用button不显示（关于cover-view的冷知识）]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/91049225</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/91049225</guid><author>NAMECZ</author><pubDate>Thu, 06 Jun 2019 20:32:18 +0800</pubDate><description><![CDATA[废话不多说，先看小程序文档



文档上写的清清楚楚可以在cover-view中使用button

但是我在实际使用中却碰到在cover-view中使用button，button不显示的问题！



项目中底部的button保存按钮是position-fixed固定在屏幕最下方的，列表中有input框，所以在真机滑动列表的时候，input框中的值会穿透button显示出来，令人懊恼！

后来将底部...]]></description><category></category></item><item><title><![CDATA[【微信小程序】多图上传(区分已上传和未上传的图片)和上传视频的封装方法]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/80333990</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/80333990</guid><author>NAMECZ</author><pubDate>Mon, 15 Apr 2019 19:50:29 +0800</pubDate><description><![CDATA[微信小程序中，上传图片一直是我最烦的东西，尤其是涉及到编辑，新老图片的交替，更是让人头大，所以我写了一个公共的方法来解决这个问题 该方法存放于util.js中


//多图片上传   arr需上传图片的数组     fun所有图片都上传成功后的回调函数
var uploadImgs1 = function (arr, fun) {
  let that = this;
  let num...]]></description><category></category></item><item><title><![CDATA[【移动端】部分安卓手机打开微信H5页面空白]]></title><link>https://blog.youkuaiyun.com/NAMECZ/article/details/87969867</link><guid>https://blog.youkuaiyun.com/NAMECZ/article/details/87969867</guid><author>NAMECZ</author><pubDate>Wed, 27 Feb 2019 13:56:58 +0800</pubDate><description><![CDATA[之前写过一个微信移动端的页面，最近有客户反映部分手机页面加载不出来。

拿到问题手机，进入http://debugx5.qq.com/ 页面 打开调试vConsole功能



没有发现任何异常。

该机型系统为 安卓8.0，微信为最新版本，页面js框架使用的是vue。

经过排查发现问题所在：

① 因为用的是后端框架，所以在vue中混编了一段php代码 问题机型识别不了vue+php代码所以报...]]></description><category></category></item></channel></rss>