- 博客(42)
- 收藏
- 关注
RSS订阅原创 微信小程序swiper真机调试疯狂抖动
swiper在真机调试中，滑动过快导致swiper自身疯狂滑动（抖动），官档上面的提到的点从 1.4.0 开始，change事件增加 source字段，表示导致变更的原因，可能值如下：autoplay 自动播放导致swiper变化；touch 用户划动引起swiper变化；其它原因将用空字符串表示。打印出触发源看到source为空，官方提供解决方法Tip：如果在 bindchange 的事件回调函数中使用 setData 改变 current 值，则有可能导致 setData 被不停
2021-11-18 14:55:30
526
原创 h5自动弹出ios键盘
Androidautofocus自动聚焦弹出IOS脚本无法直接调出ios键盘（处于安全考虑），只能通过行为事件来聚焦，行为事件：点击、触屏等人为操作。示例行为聚焦html<input id="ipt" autofocus="autofocus"></input><button id="box"> click me ！</button>JavaScriptdocument.getElementById("box").onclick
2021-07-27 12:07:25
2137
原创 微信小程序tap、blur执行先后顺序
需求输入手机号获取验证码实现设置手机号input通过bind:blur设置手机号l-icon：自己定义的icon组件van-field：vant-weapp插件<van-field value="{{ userInfo.userPhone }}" placeholder="手机号" title-width="2em" bind:blur="setDataInfo" data-key="userInfo.userPhone" error-message="{{ verifyUser
2021-07-26 16:14:14
816
原创 webview与App通讯-ReactNativeWebView
发送消息data为发送的数据，要以字符串的形式传入var data = { type: "scan", data: { type: "qrcode", },};window.ReactNativeWebView.postMessage(JSON.stringify(data));接收消息scanCodeCallBack(event) { // event.data：接收的数据},IOSwindow.removeEventListener("message", t
2021-07-23 13:57:08
217
原创 vue样式穿透
>>>原生css样式写法/deep/使用了预处理器 scss 、sass、less且vue-cli3以下版本::v-deep解决2中vue-cli3以上版本不能使用问题
2021-06-23 10:36:26
81
原创 微信小程序navigateBack时向上级页面传递参数
全局变量globalDate增加状态变量EventChannel微信官方示例代码设置监听wx.navigateTo({ url: 'test', events: { // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据 onFun1: function(data) { console.log(data) }, onFun2: function(data) { console.log(data) } }
2021-06-09 15:43:29
806
原创 @vue/cli图片转base64链式配置
vue.config.jsprocess.env.NODE_ENV === 'production'：生产环境生效limit: 5000：图片文件小于5kb则转换chainWebpack: config => { config.module .rule('images') .use('url-loader') .loader('url-loader') .tap(options => Object.assign(options, { limit: 5000
2021-05-26 17:24:31
464
原创 @vue/cli去除Console链式配置
vue.config.js如果你使用的是 webpack v5 或以上版本，你不需要安装这个插件。webpack v5 自带最新的 terser-webpack-plugin。如果使用 webpack v4，则必须安装 terser-webpack-plugin v4 的版本。chainWebpack: config => { if (process.env.NODE_ENV === 'production') { config.optimization.minimizer('te
2021-05-26 17:21:01
112
原创 微信小程序使用iconfont
iconfont官网地址在线加载选择图标添加入库（自定义ICON也可以，需要自己上传制作）添加至项目复制fontcss代码本地加载微信小程序不支持加载本地字体文件，但可以将字体文件转成base64引入下载字体文件转换字体文件文件转换地址复制base64至wxss使用引入将复制下来的css代码，引入项目即可，如果使用本地则将src: url中的链接改变为base64即可@font-face { font-family: "iconfont"; /* P
2021-05-24 16:45:34
500
1
原创 微信小程序-typescript保存自动编译
原理在本地跑一个node环境，执行脚本监听（fs模块）小程序文件目录下的文件变化，通过node子进程执行编译命令。使用在小程序根目录下新建nodeWatchjs文件const exec = require('child_process').exec;const fs = require('fs');const opt = { recursive: true// recursive <boolean> 指示应该监视所有子目录，还是仅监视当前目录。 这适用于监视目录时，并且仅
2021-05-20 11:48:12
765
原创 父子页面跨域通讯
postMessage简介该window.postMessage()方法安全地启用Window对象之间的跨源通信；例如，在页面和它产生的弹出窗口之间，或者在页面和嵌入其中的iframe之间。targetWindow.postMessage(message, targetOrigin, [transfer ]);targetWindowWindow.open：返回打开的窗口对象Window.opener：打开窗口内调用，返回源窗口对象HTMLIFrameElement.contentWi
2021-03-23 11:07:21
206
原创 JavaScript装饰器实现防抖节流功能
防抖装饰器封装function debounce(delay) { return function (target, key, descriptor) { const oldValue = descriptor.value; let timer = null; descriptor.value = function () { clearTimeout(timer); timer = setTimeout(() => { cons.
2020-12-21 17:36:01
542
原创 VUE兼容IE及iview按需引入兼容IE问题
支持版本介绍vue支持IE8以上的浏览器，vue数据追踪的核心defineProperty不被IE8及以下的浏览器支持，具体原因见vue官网介绍当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE
2020-09-18 11:07:31
528
原创 JavaScript变量类型判断详解
方法介绍在JavaScript中判断变量类型的方法常用的有那么几种typeofconstructorinstanceofObject.prototype.toString.call(obj)每一种方法都有不同的特性，下面逐个介绍typeoftypeof在开发过程中比较常用，通过表格展示typeof检测各种类型的返回值检测类型返回值String“string”Number“number”Boolean“boolean”undefind“und
2020-07-31 11:37:20
184
原创 vue-cli4+项目打包后生成可修改的配置文件
创建免打包JSON配置文件文件cli4+在public文件夹下面新建一个json配置文件，cli4版本以下则在static文件夹下新建即可{ "baseSize": 100, "autoLogout": 6900, "axiosConfig": { "withCredentials": true, "baseURL": "/api" }}通过axios获取在main.js中通过axios获取配置文件中的数据，cli4版本以下请求路径为/static/config.
2020-06-16 18:17:33
2958
原创 vue指令directive实现元素拖动
方法实现，位置计算Vue.directive('drag', { inserted: function(el, binding){ let self= el; //获取当前元素 self.onmousedown = (e) => { //鼠标相对拖动元素的位置 + 父元素距离边界距离 let disX = e.clientX - self.offsetLeft; let disY = e.clientY
2020-05-21 19:41:31
502
原创 vue-cli4中scss全局变量
vue add style-resources-loader（选择scss）执行过程中有个问题command failed: npm install --loglevel error vue-cli-plugin-style-resources-loader -D。看了网上的解决方案：a. 修改C:\Users\Admin\.vuerc中的useTaobaoRegistry:true，无效b. 清缓存 npm cache clean --force， 无效c. 使用最新版本的noe， 无效d...
2020-05-13 11:34:29
1353
原创 vue-cli4实现自适应布局
原理webpack打包时，通过postcss-pxtorem插件，将原先写的px单位转换成rem，然后通过amfe-flexible插件监听窗口变化，设置根元素得fontSize，实现自适应效果安装cnpm i amfe-flexible -S // 需要打包进项目 -Scnpm i postcss-pxtorem -D // 只需要本地使用 -D配置在项目vue.config.js...
2020-05-07 11:52:38
2027
3
原创 JavaScript节流防抖
事件节流（throttle）、防抖（debounce）事件节流（throttle）当页面监听滚动条触发回调函数时，如果不加以限制，在短时间内会触发很多次回调函数。非常影响页面性能。解决办法思路为，一段时间内只触发一次回调函数，事件节流则是在规定时间执行第一次的回调函数。throttle(fu, delay){ // 第一次执行，定义lastTime时间为0 let lastTime...
2020-04-28 23:18:20
122
原创 EVENT LOOP原理解析
JavaScript单线程介绍介绍JavaScript作为览器脚本语言，其特点便是与用户交互，操作DOM元素，从而决定了JavaScript单线程得运行机制，否则将会导致一些页面渲染得问题。例如，两个线程同时进行DOM操作，一个线程修改DOM样式，同时另一个线程同时也在修改同一个DOM得样式，那么问题来了，浏览器无法确定哪个线程为最终执行结果。特点任务排队执行，前一个任务结束，才会执行后一...
2020-04-26 19:32:05
1312
原创 JavaScript深拷贝解析与封装
JavaScript直接对数组对象赋值，是赋值该变量在堆内存中的引用，所以会存在浅拷贝的现象。解决思路是递归遍历，找到对象数组的最底层进行赋值，具体实现没什么好说的，直接贴封装好的代码deepClone(data) { var obj; // 判断是否为对象 if(data.constructor === Object){ obj = new Object...
2020-04-13 12:35:48
160
原创 JavaScript执行上下文原理解析
前端开发过程中经常会遇到作用域的问题，变量提升，闭包等等一些列的问题，那么这些问题的是怎么形成的，又是如何实现的，这里通过分析JavaScript中的执行上下文（EC）依次解开。首先思考一段代码var name = 'globalName';function F1() { console.log(name); console.log(F2); var name =...
2020-04-09 21:41:41
187
原创 Vue.extend实现toast封装
Toast.vue<template> <div v-if="showToast"> <div class="toastTip"> <p class="title"> {{ tipTitle }} </p> <p class="context"> {{toastTxt }} <...
2020-04-09 00:57:38
450
原创 JavaScript中new得实现
平时用到得new关键字究竟是如何实现继承得，继承包含继承一个对象所拥有的属性，以及继承该对象原型上的属性，下面针对这两句话实现一下new：继承对象自身的属性先通过代码实现第一句，继承该对象自身的属性，首先定义一个类People，并添加自身属性name以及agefunction People(name, age){ this.name = name; this.age = age;...
2020-04-04 16:08:52
125
原创 npm包的安装方式
npm install xxx安装到 node_modules， 不会将依赖写入package.json中注：在一台电脑上安装sass并且引用，当在另一台电脑上npm install后，存在报错，因为install并没有安装sass。npm i xxx -g全局安装包，不会安装到项目node_modules，也不会将依赖写入package.json中包在全局都能访问到，与npm i注意...
2020-03-31 15:50:48
415
原创 异步处理方法回调函数、Promise、async
在开发过程中经常会遇到一些异步操作，比如ajax请求，node读取写入文件，定时任务等等。通常情况下需要捕获异步返回的数据，从而进行下一步操作，下面介绍一下几种处理异步执行的方法CallBack回调事件callback，事件回调，异步处理完成，通过事件的调用，从而达到异步处理要求。经典的有ajax请求，node文件操作等，下面看一下node非阻塞代码实例：var fs = require("...
2020-03-11 16:54:23
564
原创 node version manage
windows版本下载链接下载完成后解压直接安装，安装后nvm -v查看版本号更换淘宝镜像(不更换会比较慢，跟cnpm一个道理)cmd修改镜像为淘宝镜像nvm node_mirror http://npm.taobao.org/mirrors/node/，nvm npm_mirror https://npm.taobao.org/mirrors/npm/修改 nvm 根目录里面 set...
2020-03-06 21:54:42
366
原创 Vue自定义插件实现
Vue自定义插件实现Vue.use源码分析插件是一个对象，必须包含install属性，且是个函数。因为使用插件时需要Vue.use(plugin),所定义的插件相当于use这个函数的一个参数。下面了解下Vue.use主要干了什么。先看看Vue.use得源码：Vue.use = function (plugin) { /* istanbul ignore if */ if (pl...
2020-01-16 14:44:05
289
原创 自适应布局postcss-px2rem
实现原理自适应布局是前端一直都存在的问题，通常常用的技术有媒体查询@media screen and (max-width:1366px)，还有rem布局，通过改变页面根元素font-size大小来实现自适应布局。可是都逃不过要计算的命运。有没有什么方法绕过这些花花绕，就写px也能实现自适应布局呢？答案是肯定的，有方案理论上就能实现，这样一来无论是写自适应项目，还是修改原有项目，都变得十分...
2019-12-24 19:10:06
1614
1
原创 webpack基本配置及使用介绍
webpack简介Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。首先在项目文件夹下安装webpack、webpack-dev-servercnpm i webpack webpack-dev-server -D配置package.json文件dev{ "name": "webpack...
2019-12-23 17:47:16
134
原创 WXS文件时间操作
WXS文件时间操作微信小程序开发中，无法直接在wxml操作Javascript代码。微信给出了wxs文件支持，类似引用外部的js文件实现部分操作。在wxs文件中无法进行new Date()操作，小程序文档提供了getDate()帮助我们实现时间的部分操作，具体看下列代码首先定义一个wxs文件，创建一个Object，并通过module.exports暴露出去，然后就可以在里Object里面...
2019-12-23 11:27:44
618
原创 Mixin实现自动保存搜索状态
Mixin实现自动保存搜索状态vue官网上的Mixins说的很迷，自己的理解总结两点定义一个mixin（对象）结构跟vue中script标签内的结构相同mixin中可使用组件中的变量等资源，反之组件中也可使用mixin对象中的资源，简称互相调用（先加载mixin中）下面通过路由query保存搜索参数看一下mixin对象export default { data ()...
2019-12-19 19:32:22
160
原创 微信小程序，实现vue-watch
微信小程序，实现vue-watch监听数据有三种情况监听某个属性监听my.name…类似监听多层对象 deepcall用法 function setWatcher (page) { //page 小程序page对象（this） let obj = page.data, watch = page.watch; Object.keys(watch).forEa...
2019-11-26 16:08:40
465
1
原创 Vue请求接口封装
vue接口封装封装请求方法import axios from 'axios'import { Message } from 'iview'//axios请求拦截service.interceptors.response.use(response => { //统一处理返回信息 const res = response.data //根据自己接口格式处理 ...
2019-11-13 16:20:35
3567
原创 微信小程序请求接口封装
废话不多说，直接上代码根据wx得request封装函数//自己定义请求路径let _url = require("./config.js").url;//参数（拼接得url，请求方法，请求参数，cookie..可以自己添加参数）function service(url, method, data, cookie) {//return一个promise对象 return new ...
2019-11-13 16:07:04
188
1
原创 JavaScript中 apply call bind的用法与区别
apply call bind 相当于改变函数内this的指向；## 定义动物类function Animal(name){ this.name=name;}apply//用法：var animal1 = {}; //{}Animal.apply(animal1, ['dog']); // {name: "dog"}**等同于将函数内的this指向anima...
2019-08-21 11:42:50
181
原创 canvas画圆角矩形
// (x,y):圆角矩形起始坐标; width: 矩形宽度; height: 矩形高度; r: 矩形圆角;draw(ctx, x, y, width, height, r){ ctx.beginPath(); ctx.moveTo(x + r, y); ctx.fillStyle = "rgb(61, 193, 254)";//矩形填充颜色 ctx.lineTo(x + wid...
2019-08-14 18:47:08
1209
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人