codezha的博客

输出log、info、warn、error占位符%d、%s、%i、%f、%o、%c占位符作用%d数字%s字符串%i整数%f浮点数%o对象%c输出样式调试console.debug()清空console.clear()表格var thisObj = [　　　　{ name: ‘quber’, email: ‘qubernet@163.com’, qq: 757200834 },　　　　{ name.

function substrByByte (str, maxLength) => { if (!str || !maxLength) { return '' } let result = '' let temp = str.replace(/[^\x00-\xff]/g, "**") let temp1 = temp.substring(0, maxLength) let x_length = temp1.aplit("\*").length - 1 let

时间格式化Safari浏览器中不支持‘-’格式时间，格式化时间会出现异常，例如’2021-04-08’需要转换成’2021/04/08’格式，字符串转换方法如下date= date.replace(/-/g,'/')table布局音频播放

数据类型基本数据类型：string、number、boolean、null、undefined、symbol引用数据类型：object、array、functiontypeoftypeof操作符返回一个字符串，表示未经计算的操作数的类型console.log(typeof 42);// expected output: "number"console.log(typeof 'blubber');// expected output: "string"console.log(type.

注册账号并申请key高德开发平台引入public目录下index.html中通过src引入插件<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=xxxxx"></script>使用let AMap = window.AMapAMap.plugin('AMap.Geolocation', function() { var geolocati.

开发webAPP的过程中，通常因为业务逻辑或兼容性问题，需要H5和原生APP之间互相调用，以下为具体的代码操作系统判断通过浏览器提供的navigator.userAgent判断当前操作系统function paltform() { var ua = navigator.userAgent.toLowerCase() //微信 if (ua.indexOf('micromessenger') !== -1) return 'wechat' //ios (ipad/iphone)

电脑安装fiddler，安装完成后打开fiddler电脑开热点共享，手机连接热点，在WiFi设置中添加手动代理，IP配置为电脑IP，端口号配置为8888fiddler中设置connectiontools -> options ->connections 配置如下手机浏览器中输入ip:port（类似于192.xxx.xx.xx:8888），l点击安装证书（iOS需要信任证书：设置-通用-关于本机-证书信任设置，找到对应证书，启用）手机上操作我们就可以看到抓包信息了...

前后端我们通常都会遇到时间格式化处理的问题，通常我们都会采用时间处理插件moment.js或day.js来快速处理，如果只是简单的处理，也会采取自定义简单时间处理的方法。day.js使用传送门首先简单介绍下常见的几种时间：CST北京时间，China Standard Time,又名中国标准时间中部标准时间（北美洲），Central Standard Time (USA) UT-6:00澳州中部时间，Central Standard Time (Australia) UT+9:30中国时间，Ch

鼠标悬浮在需要复制的信息上，右键选择store as global variableconsole中hi出现temp1或temp2console中执行copy(temp1)或copy(temp2)就可以粘贴信息到其他位置了

什么是Day.js？Day.js 是一个轻量的处理时间和日期的 JavaScript 库，和 Moment.js 的 API 设计保持完全一样. 如果你曾经用过 Moment.js, 那么您已经知道如何使用 Day.js从API上来看，Moment.js和Day.js的常用API基本一致，Moment.js里面包含的API较全，但常用API如果基本可以满足我们的开发需要，Day.js如需要其他API，可安装插件来实现。从体积大小来看，Moment.js的体积大概200多KB，Day.js的体积只有..

为什么修改文件名？有些时候为了保证文件名唯一性，我们需要二次处理已选择的文件，文件名添加时间戳怎么修改？van-uploader文件上传组件为我们提供了before-read、after-read、before-delete属性，分别用来指定文件读取前、读取文件完成后、删除文件前的回调函数。通常文件上传方法是写在文件读取完成回调函数中的，首先我们需要确定我们在回调函数中拿到的文件是什么样的，浏览器中打印回调函数中的file参数仔细观察我们会发现，这个是在file文件的外层又封装了一层，我们..

日常开发我们通常都会用到回调函数，promise，setTimeout，我们有没有想过它们在浏览器中是怎样运行的，下面我们通过一个小例子来了解下console.log('script start');setTimeout(function() { console.log('setTimeout');}, 0);Promise.resolve().then(function() { console.log('promise1');}).then(function() { consol

选中记忆<Table no-data-text="暂无任何数据" stripe :columns="column" :data="listData" ref="selection" @on-select="handleSelectRow" @on-select-cancel="handleCancelRow" @on-select-all="handleSelectAll" @on-s..

日常开发，经常会遇到手机号脱敏显示的情况，可以通过正则实现脱敏let number = '13423456789'let pat = /(\d{3})\d*(\d{4})/let text1 =number.replace(pat,'$1****$2')//substring第一个参数是开始下标，第二个是结束下标let text2 =number.substring(0,3)+"****"+number.substring(7)//substr第一个参数是开始下标，第二个是截取几位let te

日常开发中，我们通常会遇到接口异步请求存在多层依赖的关系，需要多层嵌套异步接口请求，可以通过promise来解决问题封装单个请求func1(data) { return this.$axios.get('/xxx/xxxx/xxpatha', { params: { a: data } }) .then(res => { return Promise.resolve(res.bean)

前端实现多次调用同一个接口，所有数据均成功返回后，才可继续执行下面的代码封装请求数据方法getData(param) { return new Promise((resolve, reject) => { this.$axios .get(`/xx/xx/xxpath/${param}`) .then(res => { let content = res.data reso

blob转base64'data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), ''))注意：请求数据类型，responseType需要指定为arrayBufferblob转urlURL.createObjectURL(blob)注意：只能用于img标签...

最近开发小程序的过程中遇到了这样一个小问题，在wxss文件中通过background设置背景图片，要实现背景图片上显示文字的效果，发现背景图片不显示，设置背景图片的代码如下：.test { width:100rpx; height:30rpx; background:url('../../img/image.png') no-repeat; background-...

添加手机号输入框，绑定事件<input type="number" placeholder="请输入手机号" v-model="mobile" @keyup="filterTel" @blur="blurTel"/>添加输入、失焦事件，过滤非法字符methods中添加以下方法//输入事件filterTel: function () { this.mobile ...

媒体查询App.vue中样式中添加以下代码/* 适配iphoneX iphoneXS */@media screen and (device-width:375px) and (device-height:812px){ .pay-bot-cont { margin-bottom:34px; }}/* 适配iphoneXR iphoneXSMax */@...

安装依赖//cd 项目文件夹路径下,执行下面的命令npm install lib-flexible postcss-loader postcss-pxtorem --save//或者npm install lib-flexible postcss-loader postcss-pxtorem -Slib-flexible会自动为页面根据屏幕添加标签，动态控制initial-scal...

微信小程序中添加埋点的目的是了解小程序的详细使用情况，优化功能和用户体验，一共有两种方案。小程序埋点分别为代码埋点、无代码埋点，两者的区别在于埋点的时机和添加方法的不同。添加埋点有移动分析-mta、微信小程序运营平台，因移动分析-mta需要引入SDK所以选择了小程序运营平台。click上报新建事件添加配置点击保存并测试，指定开发者API上报新建事件并添加api配置点击...

自定义支持播放/暂停，进度条拖拽，静音/有声音播放的H5音频播放组件，效果图和具体实现代码如下：HTML代码<!DOCTYPE html><html lang="en"><style type="text/css"> .audio { display: flex; align-items: center; ...

最近接到这样一个需求，要求实现录制、试听、上传音频功能，选择的是getBackgroundAudioManager,声音录制和播放波形图是用css实现的，效果图及详细设计代码如下：xml文件<view class="servicePage"> <view style="width:100%;height:320rpx;position:absolute;z-in...

开发小程序时，我们通常会遇到这样几种情况：当前页面返回上一个页面，执行上一个页面的指定方法当期页面执行某些操作（如删除），返回上一个页面且执行指定方法仅使用生命周期已经不能满足要求，需要通过使用页面栈来实现以上两种场景的功能，核心代码如下：//当前页面执行上一个页面固定方法代码var pages = getCurrentPages();var prevPage = pages[...

微信小程序展示列表，列表中需要展示对应的用户图像，加载图片可能会遇到图片地址失效/错误的情况，如不做任何处理，图片会显示为非常不友好的默认加载失败样式，如果可以处理为图片地址为空或失效或图片加载失败，展示默认图片，地址有效则展示对应图片。<view wx:for-index="index" wx:for='{{list}}'> <image src="{{item.Url ...

前段时间接到了这样一个需求，注册页面中有多个输入框，要求第一个输入框输入汉字后，第二个输入框自动填充对应的拼音开头缩写。实现思路是这样的，第一步完成拼音转汉字缩写功能，第二步为第一个输入框添加失焦时间，失焦时计算当前对应拼音缩写，如第一个输入框对应内容为空，则清空第二个输入框，具体代码如下：完成拼音转汉字缩写功能新建util.js并添加以下代码export default { Con...

最近在项目中需要加载和使用一个SDK插件，需要按顺序加载CSS、js等动态资源，资源加载完成后，完成初始化即可正常使用该SDK插件。开发过程中因为忽略了动态资源都是异步加载，导致初始化失败，插件无法正常使用，以下两种方案可以解决该问题。以下方法为动态加载css、js资源方法loadHead(url) { const link = document.createElement("li...

之前的博客中提到过使用input标签时，禁止自动填充用户名和密码的解决方法（传送门），但此方法不适用于iview中的input组件，添加额外隐藏input框可以解决问题，代码如下：<Form> <div> <FormItem label="用户名" prop="verCode"> <!--禁止用户名自动填充-...

为什么用？vue本身已经有很多内置指令，如v-model、v-html、v-if、v-else、v-for等，这些指令使用起来非常方便，但是有些时候内置指令不能完全要求，需要自定指令，通常用于局部修改DOM，例如：页面加载时，某个输入框获得焦点（autofocus工作的情况下）。// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当...

实现表格导出功能时，后端接口返回一堆看不懂的乱码，第一反应是不是接口出错了，其实不是，后端直接返回了一个二进制流，前端需要通过blob对象来实现文件下载功能。后端返回结果如下：代码如下：let param = {};this.$http.post("/api/xxx/xxx/xxx",{ timeout:0, params:param, responseType:...

MD5加密（无解密方法，解密不可逆）适用场景：用户注册完成后，将加密后的密码发送给后端，后端将加密后的密码存储在数据库中，当用户登录时，前端依然发送加密后的密码，后台对比数据库中存储的密码和前端发送的密码。安装依赖：npm install crypto --save使用方法：import crypto from 'crypto' //引入依赖//使用示例let passw...

拉取代码git clone https://github.com/gzthink/testgit.git # 默认master分支git clone -b develop https://github.com/gzthink/testgit.git # 拉取develop分支下面提交代码、回退代码的演示均在develop分支操作提交代码进入下一级目录，完成下面的操作...

开发过程中经常会遇到路由跳转需要携带参数的情况，在大多数单页面中，一般都是通过使用vue-router来实现路由的。通过在Vue实例内部访问$router来访问路由实例，调用this.$router.push导航到不同的URL。提示：如果提供了path,params会被忽略params传参router.push({ name: 'testpath', params: ...

​ 浏览器默认的滚动条样式不是很美观，在有些需求中，我们需要更改默认滚动条样式。目前还无法做到兼容所有浏览器的范围内修改默认滚动条样式，Google、IE可更改默认滚动条样式，火狐暂不支持更改默认滚动条样式。​ 滚动条可修改以下样式：修改部分Google对应伪类滚动条宽高及背景::-webkit-scrollbar滚动条轨道::-webkit-scro...

长度不低于8位，包括数字、小写字母、大写字母、特殊符号4类中至少2类^(?![A-Z]+$)(?![a-z]+$)(?!\d+$)(?![\W_]+$)\S{8,20}$(?![A-Z]+$) 匹配不全是大写字母(?![a-z]+$) 匹配不全是小写字母(?!\d+$) 匹配不全是数字(?![\W_]+$) 匹配不是大小写字母、不是数字、不是下划线的...

urlArgs解决Require.js浏览器缓存问题通常项目上线后，可能会存在浏览器缓存导致代码未更新的问题，最简单的办法就是添加版本号，示例如下：<script src="a.js?v=xx"></script><link rel="stylesheet" type="text/css" href="b.css?v=xx">但是如果项目中是通过req...

GET和POST的区别在客户端和服务器之间进行请求-响应时，最常用的的两个方法就是GET（请求数据）和POST（提交要被处理的数据，如微博评论）GET请求查询参在GET请求的URL中发送，数据会显示在URL中/test/demo_form.asp?name1=value1&name2=value2GET请求可被缓存GET请求保留在浏览器历史记录中GET可被存为书签...

JavaScript创建对象的7种方式工厂模式function Person(){ var obj = new Object(); obj.name = 'aaa'; obj.say = function(){ console.log(this.name); } return obj; }var person1 = P...

JavaScript实现继承的几种方式原型链继承function Father(){ this.names = ['a','b'];}Father.prototype.getName = function(){ console.log(this.names);}function Child(){}Child.prototype = new Father();/...