tsang荒男的博客

原创 uni-app 人脸识别分析及实现(前端) + nvue开发源码

1、app开发一个人脸识别，实现刷脸功能首先要考虑的是实现流程：1、 打开摄像头——自动读取照片——传输给后端——后端交由第三发或自主开发来识别——返回结果（相识度比）2、 打开摄像头——自动读取视频——传输给后端——后端通过解析视频，截取图片交由第三发或自主开发来识别——返回结果（相识度比）那么通过分析，我们只需要做两步骤:打开摄像头和自动读取视频或照片2、打开摄像头分步骤分析：打开摄像头，并展示视频效果在html上，目前有两种方式：2.1、使用camera组件进行，借用.createCa

原创 数组循环的性能问题

测了一下数组循环性能，发现性能差距还是很大的，在数据量过大的时候，采用自带的api，会耗费更多的性能问题，然后做了一个总结。如果对于业务代码，数据量处理不大的话，这个性能大家可以忽略不计。毕竟api的使用，可以使代码可读性更高。因为做3D，为了保证每秒60桢的性能，一桢所有代码的处理时间不能超过16ms，因此对于api的使用会更加严谨。目前只跟针对for，map，foreach，reduce这四个api做测试测试代码如下：本次仅仅是简单测试，如果业务复杂的话，建议直接套用自己的处理逻辑临界数据没有体

原创 three实战：月球围绕地球

这个是我们3月份做的一个小demo，不过文章搁浅了，现在补回来吧，这个demo基本是入门级别的了，做之前需要了解一些3d知识，可以参考学习3D前需要了解的一些基础涉及的面有摄像头，场景，灯源，材质，运动，贴图，事件交互等等...

原创 学习3D前需要了解的一些基础

学习3D前需要了解的一些基础知识方向我使用的是three.js来实现3D,对于three的3D来说，橙色是X轴，绿色是Y轴，蓝色是Z轴，记住：左z右x朝上y，当我们确定方向的时候，我们脑中就很好的形成一个几何图形注意：如果我们引入建模师的建模，那么方向也以建模师设计的方向为主顶点任何的几何图形都有顶点，举个简单的2D例子，一个三角形，那么三角形的三个角就是它的顶点，我们通过3个点一组，表示一个顶点的xyz坐标，那么久就可以形成一个面，如下图所示立方体几何体本质上就是一系列的顶点构成，每个面至

原创 vue:echarts自定义地图

前言echarts有地图，但是echarts的地图只支持到三级（省市区），所以有的时候，我们就需要自己定制化地图准备我们绘制地图前，我们需要地图的点位置，这些有几种方式1、我们进入http://geojson.io自己绘制，手残党不建议自己绘制2、直接购买网上有很多可以购买的2.1、水经注软件购买下载，如果需要的地图绘制很多的话，建议此方法2.2、腾绘空间，他们家可以选择性购买，已长岭县举例子，才花费30不到转换成geo.json我们拿到的是其实是不是json格式，echatrs也支持

原创 关于uni-app小程序 Vue-Quill-Editor编辑器的内容在样式丢失

前言关于pc端使用Vue-Quill-Editor插件，但是在小程序中，样式缺丢失问题查找到Quill的样式我们在pc端的quill包中找到以下的css文件，并放入在style文件夹中<rich-text class="rich-text ql-editor" :nodes="details.newsContent | formatRichText"></rich-text>在rich-text中加入样式标签ql-editor并且在app.vue文件中引入 @imp

原创 uni-app小程序图片v-html自适应问题

自适应前言解决办法效果展示补充前言用v-html渲染富文本框，发现小程序图片没有办法自适应采用css去修改，发现不生效img{ width: 750upx!important;}解决办法uni的v-html转换成小程序是rich-text标签，则我们直接使用rich-text来实现富文本的渲染<rich-text :nodes="details.newsConten | filtersRichText"></rich-text>我们使用过滤器来把img的标签拿

原创 记:mac的vue2.9.6升级到最新版本

之前安装了 vue 2.9.6 的版本，但是现在想升级到最新版本4.5.15，结果输入官方给出的命令 npm uninstall vue-cli -g 却无法成功卸载，我直接使用暴力卸载的方式删除1、查找vue的目录which vue通过which可以找到vue的目录在/usr/local/bin然后我们通过下面命令到vue的目录下cd /usr/local/bin 2、强制删除vue文件rm -rf vue 如果没有权限，清使用sudo…3、安装最新版的vue

原创 uni如何自定义tabbar

前言目前遇到一个问题：项目有三个权限，每个权限对用不同功能，最开始使用的一个自己封装好的tabbat组件进行操作，根据不同权限跳转到不同页面，如果是tab页，则加载出相应的tabbar。搭建的时候发现一个很严重的bug，uni只允许跳转的层级是20层导致我们在tab切换的时候，层级很容易到20层，而且有切页效果每次都需要加载tabbat，会导致tabbat有闪现效果针对以上两个问题，我们进行了优化思路根据上面的问题，想到的一些解决方案解决思路方案：方案1：把所有的tab页合成一个ind

原创 前端算法——关于简单的渲染功能

做了一个关于简单渲染的功能let template = "this is {{name}} and I'm {{age}} years old and i'm {{sex}}"let data = { name: '小明', age: 18, address: 'BeiJing'}// 实现render(template, data) // 使得打印出 "this is 小明 and I'm 18 years old and i'm undefined"let templa

原创 前端性能优化之——CDN优化加载

问题：在首开体验中，会觉得特别慢分析：原因很多，其中一个原因是首开时需要加载很多的js和css文件，这是因为在Vue项目中，引入到工程中的所有js、css文件，我们编译时都会被打包进vendor.js，浏览器在加载该文件之后才能开始显示首屏。若是引入的库众多，那么vendor.js文件体积将会相当的大，影响首开的体验。解决方法：将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来(既外部的库文件

原创 前端性能优化之——浏览器http请求并发

什么是hhtp请求并发随着现在的网页设计的越来越炫酷，功能越来越丰富。伴随着的是网页加载的资源越来越多，常常一个页面加载的CSS、JS、图片、接口等超过几十上百个。但其实，在客户端，浏览器并不一定会对每个资源开个连接去请求加载，是有并发限制的总的来说：同一域名下，同一GET请求的并发数是1，也就是说上一个请求结束，才会执行下一个请求，否则置入队列等待发送；同一域名下，不同GET/POST请求的并发数量是6。当发送的请求数量达到6个，并且都没有得到响应时，后面的请求会置入队列等待发送。这其实是

原创 小程序开发框架比较

1、小程序为什么那么流行小程序开发算是这几年的流行趋势了，他为什么那么受欢迎呢？我们可以从几方面来分析成本低：相对于app来说，小程序开发成本低很多，一般公司都能接受客户体验好：微信小程序无需申请注册，在微信里面检索就可以开启，能够使用微信一键登录，给客户给予了便捷；并且无需安装顺应潮流：现阶段各种互联网大佬陆续发布微信小程序作用，都是在合理布局挪动网络平台平台客户群体大：一般大家称呼小程序都是只微信小程序，是因为微信的客户群体基数大，覆盖范围广2、小程序比较小程序的开发框架发展到现在也五

原创 前端:如何玩转自己的npm包

注册账号npm adduserUserName: zoeEmail: [email protected]登录npm如果有账号，可直接登录：npm login确定是否登录成功：npm whoami初始化npm新建文件夹：mkdir silder-verify进入文件夹：cd slider-verify初始化：npm init注意：填写package name时，一定要在npm官网查一下是否重名，如果重名，将无法publish初始化npm上传npm publish上传成功后续每次更新

原创 你可能还不知道的很酷JavaScript特性：如何优雅的编写代码

var a = null//console.log(a.name) //报错console.log(a?.name) //undefineda = {name:'zsf'}console.log(a?.name) //zsf在这里插入代码片

原创 数组Array常用方法汇总+实战

数组Array常用方法汇总一.JavaScript中创建数组的方式二、数组方法概括三、方法详解一.JavaScript中创建数组的方式（1）使用 Array 构造函数：var arr1 = new Array(); //创建一个空数组var arr2 = new Array(15); // 创建一个长度为15的数组var a = new Array([15]); //指创建一个数组，长度为1，并且第一位是15var arr3 = new Array("sf","zs","zsf"); // 创建

原创 无需证书微信小程序实现人脸识别—E证通

E证通前言收费标准接入准备小程序1、 添加服务器域名白名单2、添加业务域名白名单3、安装 SDK/小程序包4、SDK 调用步骤即实操代码4.1、初始化 SDK4.2、 调用 SDK5、拿到回调结果6、使用uni-app开发6.1、小程序运行后，在小程序中丢入sdk包6.2、把sdk包转换成uni-app代码前言微信小程序自开发人脸识别，有很大的限制，主要在于公司资质。有没有不用资质就接入人脸识别，有的，腾讯E证通，该服务目前只向已完成企业实名认证的腾讯云用户开放，使用E证通服务前需要您注册腾讯云账号并

原创 远程管理 Linux：putty软件(mac版windows版)

用它来远程管理 Linux 十分好用，其主要优点如下：完全免费在 Windows 9x/NT/2000 下运行的都非常好全面支持 SSH1 和 SSH2体积很小操作简单windows版本安装PuTTY用来远程操控服务器官网https://www.putty.org/找到putty.exe，一般是下载64位的，点击右键——连接另存为——保存到桌面或者自己想放在的文件夹里然后打开它，我们就可以进入PuTTY控制面板mac版本1、安装MacPortsMacPorts是一个包管理

原创 微信小程序关于使用canvas真机不生效，开发者工具正常的3种常见问题分析

canvans1、关于使用canvas真机不生效，开发者工具正常1.1、取微信小程序头像失败1.2、canvas图片出不来1.3、兼容canvas以后，图片还不出来1、关于使用canvas真机不生效，开发者工具正常此处遇到的bug有很多情况，我们分情况来解决1.1、取微信小程序头像失败报错信息如下：https://wx.qlogo.cn 不在以下 downloadFile 合法域名列表中那是因为我们用户头像是网络图片，要解决这个问题，只需要在微信公众号平台配置合法的downloadFile域名即

原创 使用axios实现文件流下载的安全问题

为什么要使用axios来下载文件？这涉及到安全问题，我们平时下载文件，一般都是使用window.location.href来实现，即我们打开网站，只要输入对应的下载接口都可以实现下载。例如：https://www.baidu.com?id=123,别人运用爬虫修改id的值，就可以获取到服务器的所有下载数据，因此我们需要加上一些权限校验安全方式安全方式我们考虑了几种实现方式（总体来说权限校验的重点还是token）对id进行加密处理（id+token加密）请求头带上token对id进行加密处理

原创 uni-app引入小程序自定义组件的混合开发

小程序自定义组件支持uni-app 支持在 App 和 小程序 中使用小程序自定义组件，从HBuilderX2.4.7起，H5端也可以运行微信小程序组件。小程序组件不是vue组件，并且每家小程序都有自己的组件规范，比如微信小程序的组件是wxml格式。平台支持情况小程序组件存放目录H5支持微信小程序组件（2.4.7+）wxcomponentsApp（不含nvue）支持微信小程序组件wxcomponents微信小程序支持微信小程序组件wxcomponents

原创 带你了解vue的$refs和ref（附带常见问题）

vue的方法通过vue的官方文档说明：通过文档我们知道，ref和$refs其实就是为了操作DOM的

原创 手把手教你写自动化路由

这里写目录标题前言思路使用node实现自动化router使用webpack实现自动化router前言在中大型项目中，每次新建页面都要去router文件中添加对应的router对象，会觉得特别麻烦，而且多人开发还不好方便维护，甚至当router层级发生变化的时候，可能要重写整个router对象数组，因此我们需要一个自动化router自动化router的最大好处：前端只需要专注写代码即可，无需关注路由的router文件中的router.js思路在vue中，router.js必须的写法{ path:

原创 Moment.js常见用法总结

时间插件引用常用的方法moment()获取get格式format设置subtract开始startOf()结束endOf()总天数Days in Month时间措关于ant选择时间的实战Moment.js是一个轻量级的js时间处理类库，其使用简单，方便了日常开发中对时间的操作，提高了开发效率。引用npm install moment常用的方法moment()获取当前的日期和时间moment()获取String的日期和时间moment(String)获取get获取当

原创 js关于url的解析和拼接

这里写目录标题前言思路1、理解url2、解析url2.1、全量解析前言我们经常会遇到需要自己解析url地址，或者是自己拼接url，因此我们需要一个专门对url处理的js思路1、理解urlurl有6部分组成例如:https://blog.csdn.net/weixin_43236062/article/details/109065450?id=1&name=huangnan ​协议：常见的协议有两种，一种是http 一种是https 后面接://域名/ip：blo

转载 一道关于async神奇的测试题

问大家x的输出是什么。代码如下：let x = 0;async function test() { x+= await 2; console.log(x);}test();x += 1;console.log(x)看到这里我想，这不就是在考microTask和marcoTask吗？那么答案应该不难，执行顺序是这样的：先执行test函数，test函数中直接就进入到x+=await 2了，那么放到microTask中执行x+=1执行console.log(x)，输出结

原创 computed和watch的区别和理解

这里写目录标题1、计算属性：computed初步了解computedcomputed例子computed属性2、侦听属性:watch初步了解watchwatch例子watch属性1、计算属性：computed初步了解computed1、支持缓存，只有依赖数据发生改变，才会重新进行计算2、不支持异步，computed是依赖的值改变会重新执行函数，计算属性是取返回值作为最新结果，所以里面不能异步的返回结果3、computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于da

原创 file、bolb、base64图片之间的相互转化

目录前言思路上传图片fileblobbase64图片压缩使用canvas压缩图片*代码base64转file*代码base64转blob*代码blob转base64*代码blob转file*代码file转bse64*代码前言基于uni-app开发公众号H5的上传图片并压缩的方法思路上传图片我们要清楚，图片的展示方式有三种：分别为file(文件流)、bolb(本地流)、base64(二进制流)fileFile 接口提供有关文件的信息，并允许网页中的 JavaScript 访问其内容。通常情况下

原创 mac电脑开发中一些常用的指令

因为mac并没有自带telnet,配了一天都没成功，太伤心了，然后就觉得自己傻傻的，为什么一定要使用telnet，其实mac有很多方法1:网络实用工具1、在 Mac 上，打开“网络实用工具” App ，位于“/系统/资源库/CoreServices/Applications”文件夹中。2、点按“简介”，然后从弹出式菜单中选取一个网络接口。但是，网络实用工具已经被弃用，因此我们只用使用命令去玩2:nc -zvnc -zv ip 端口3:pingping 将数据包发向用户指定地址。当包被接

原创 自我理解js执行顺序——附件练习题和自我解析的答案

目录前言js执行顺序微任务宏任务练习1练习2练习3前言现在每次文章开篇必前言，今天中午公司前端组发了一道题，当时面试也看过，没总结，导致看到题目知道是js执行顺序，并且包括宏任务，微任务，但是答案确差了很远，因此再次总结一下js执行顺序我们知道，js是一条流水线，没有多余的分支，而且是从上往下执行。原理是v8引擎是用来解析js的，因为v8引擎是单线程所以导致js也是单线程的，此时你会有疑问：但是我们所认识的定时器不是“多线程”吗？实际上定时器是假的‘多线程’。 这个问题留到后面你就知道了在v8

原创 vue中动态组件&&异步组件的用法和理解

目录前言思路动态组件异步组件代码动态组件代码异步组件代码孙组件祖组件前言想用数据去驱动组件的渲染，此时就选择用了动态组件和实现思路动态组件component有:is属性，它是控制要渲染那个组件，即当is的值为注册的值，即会把组件渲染进去，实现动态组件渲染<component :is="component"></component><script>import child from '@/componets/child'export default {

原创 手动封装一个uni-app表单校验公共方法

目录前言思路代码公共校验js校验代码使用前言使用uni-app开发小程序，因为没有使用插件，只能自己手动写校验思路第一时间考虑就是写一个自定义指令，这个指令包含两个功能，双向数据绑定和校验；但实际操作发现uni-app不允许使用自定义指令；因此，改用手动校验比较low的方法，此方法建立在element上，目前只是简单实现，后续会完善此方法以下是实现流程 封装一个公共js——需要校验时，传入校验值和rules——校验失败（提示+返回false）——校验成功（返回true）（相识度比）代码

原创 vue组件传值，非父子有五种

目录前言1、父组件向子组件传值1.1、props1.2、provide / inject2、子组件向父组件传值2.1、 this.$emit()2.2、 通过 callback 函数2.3、通过 $parent / $children 或 $refs 访问组件实例2.4、 $attrs / $listeners3、非父子组件之间传值3.1、$emit 和 props3.2、Bus总线程通信3.3、Vuex3.4、provide / inject3.5、 $attrs / $listeners前言Vue的

原创 testcafe:了解testcafe，并初尝试使用，入门（一）

testcafe前言一、简介二、入门安装TestCafe初尝试testcafe简单的运行代码在页面上执行操作观察页面状态断言三、fixturepagebeforeEachbeforeafterafterEachfixture的demo四、testbeforeaftertest的demo前言碰巧一个朋友想学testcafe，我正好想学英语，哈哈，相互碰撞一下，我教他testcafe,他教我英语。正好把我学习的过程记录下来，也方便教他一、简介1、纯的node.js-TestCafe不使用Selenium

原创 关于小程序转发分享功能，并实现计数埋点方式

小程序分享前言思路关于分享关于计数效果使用page分享全局分享单页分享使用Component组件分享全局分享单页面分享计数前言之前做的分享都是单页面分享，现在发现公司需要做所有页面的分享，然后指定页面和全局不一样，并且实现记录转发次数和分享者思路写一个全局的分享功能，单页面单独去写，关于分享去查了相关资料，发现有两种分享可以实现全局分享，单页面特定分享1、使用page分享，在微信左上角的…出点击分享 2、使用Component组件分享，创建一个button按钮点击分享关于计数根据官方的20

原创 项目一些常用的工具软件推荐

1流程图visio在线编辑https://www.processon.com/;jsessionid=B3AFBCF2E3F76683E8E7CAF3DBB37E9D.jvm1

原创 node安装在d盘，安装nodemon后，在命令窗口输入nodemon -v提示不是内部命令也不是外部命令

先为自己的粗心打一下此处是为了解决nodejs安装在d盘而非c盘的情况下：当初安装node.js的时候，并没有修改npm路径，导致运行npm i -g nodemonnodemon并没有安装在node.js下面，全局安装后，可在下面文件查看node_cache和node_global是否空空如也如果为空，这npm的下载路径并没有配置，此时我们需要配置指定的下载路径，在命令终端处，输入以下两条命令npm config set prefix “D:\Program Files\nodejs\no

原创 Hbuider 自定义模板

单页面模板修改在目录 HBuilderX\plugins\templates\file 下这些都是生成单页面的基础模板修改以后源文件名称和格式覆盖回去即可，重新启动hbuilderx即可生成你定制的模板创建项目模板修改在目录 HBuilderX\plugins\templates\file 下都是项目模板...

转载 关于iphone各个型号以及尺寸的详情

原创 ES11(ES2020)中Javascript 10 个新功能

1、BigIntBigInt，Javascript 中最期待的新功能终于落地。它允许开发者在 JS 中使用更大的整数进行数据处理。之前，Javascript 中最大的整数是2^25 - 1。但是，BigInt 不受此限制。BigInt是在数字后面加上n,这个n说明他的类型是BingInt,而不是Number;2、动态引入Javascript 的动态引入，允许你把 JS 文件作为一个模块动态的引入到你的应用中。这就像你使用 webpack 和 Babel 一样。这个功能可以帮助你处理按需加载的代