- 博客(97)
- 收藏
- 关注
RSS订阅原创 小程序（或h5）无法显示阿里云服务器上的图片
使用images.weserv.nl方案 不需要改服务器白名单 无法显示出来在返回的图片链接上加上前缀：2 使用no-referrer方案,在其它标签上也可用
2022-12-03 16:56:31
2346
1
原创 微信授权登录返回code无效，签名不一致
在项目中，微信授权登录偶尔出现code无效，签名不一致的返回提示，但是就是偶然性原因：没有调用wx.login()就获取用户的encryptedData、signature等信息先看下官方的登录流程很多开发者会把 login 和 getUserInfo 捆绑调用当成登录使用，其实 login 已经可以完成登录，getUserInfo 只是获取额外的用户信息(昵称、头像)。在项目中，我进行授权登录除了wx.login()返回的code，还需要encryptedData、signature等参数传给
2020-12-26 12:03:35
7992
1
原创 前端读取Excel表格数据批量导入
前端要实现一个功能，读取Excel表格批量导入题目（有种做法是前端请求后端接口，后端接口会返回相应的模板文件，然后前端在模板文件里面写好数据，把模板文件post给接口，接口读取文件返回读取的数据给前端，其实就是把读取Excel表格的数据给后端处理，这种方式感觉比较麻烦）我是使用elment ui里面的组件upload组件 + XLSX插件前端实现读取Excel数据。1 安装XLSXnpm install --save xlsx2 在main.js引入import XLSX from 'xlsx'
2020-12-09 14:14:17
2899
1
原创 upLoad上传图片
使用element ui的组件el-upload上传图片，一般使用两种方式base64形式加载公共模块的方法，如果没有服务支持，会报跨域报错。处理这种报错的方式有很多种方法，下面介绍一种使用本地开启http-server服务的处理方式如项目中没有开启服务使用load();加载模块下面报错底部空白处理方式本地先安装node服务；然后安装http-servernpm i http-server -g 或者 npm i http-server所在项目中运行打开cmd命令行，输入http-server 或者在vscode编辑器中终端打
2020-12-04 10:00:18
2347
原创 vue安装less使用报错
第一步：安装less依赖：npm install less less-loader --save第二步：修改webpack.base.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加{ test: /\.less$/, loader: "style-loader!css-loader!less-loader", options: { sourceMap: true }// 可以看到当前标签样式来自于哪个less文件}第三步：<
2020-11-16 11:46:24
778
1
原创 小程序和APP、H5之间的跳转
小程序和app之间跳转此功能需要用户主动触发才能打开 APP，不由 API 来调用；<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>当小程序从 APP 分享消息卡片的场景打开（场景值 1036） 或从 APP 打开的场景打开时（场景值 1069），小程序才会获得打开 APP 的能力，此时用户点击按钮可以打开分享该小程序卡片/拉起该小程序的
2020-06-02 10:00:57
2699
原创 实现输入六位密码弹框
思路：将input框隐藏 ，用六个li格子当框，，焦点聚焦在input上，通过监听input框输入的长度，根据输入长度判断控制格子内小黑点是否显示，同时用正则替换非数字。<div id="payPwd"> <div style="text-align: center">支付密码</div> <input ref="pwd" typ...
2019-12-19 15:30:51
1136
原创 网页布局什么时候用图片背景，什么时候用img标签
前端页面布局中，有时候用的图片作为img标签插入，有时候是css背景图background-image，两者之间有什么区别呢？差异1--img是html标签，占位，background-image是CSS样式，不占位2--在网页加载过程中，img作为网页结构内容的一部分，会在加载结构的过程中加载，而background-image作为css样式的一部分，会在结构加载完成后开始加载。(如果你引...
2019-11-30 10:53:49
1749
原创 JS判断移动端上拉和下滑
根据触碰屏幕开始时候的坐标位置和结束时候在竖直方向（Y轴）的坐标位置，判断方式是上拉还是下滑 var startY; //定义开始时候的坐标位置 document.addEventListener('touchstart',function (ev) { startY = ev.touches[0].pageY; }, false); docume...
2019-11-28 10:01:32
2817
转载 优化点
键盘弹出类型<!-- 有"#" "*"符号输入 --><input type="tel"><!-- 纯数字 --><input pattern="\d*">调用手机系统的某些功能<!-- 拨号 --><a href="tel:10086">打电话给: 10086</a><!-- 发送短信...
2019-10-09 15:31:07
355
原创 前端面试题常问问题总结
鉴于本人面试经历 ，整理出部分前端面试题CSS盒模型，怪异模式垂直居中方法三栏布局选择器权重计算方式清除浮动的几种方法flex什么是BFC，怎样生成BFC,有什么特点position属性如何用css实现一个三角形笔试题说说你对this的理解数组去重、数组乱序防抖和节流对象深拷贝call、apply、bind的作用和区别sleep函数跨域是什么，如何实现new...
2019-10-09 11:24:13
1360
原创 小程序你不知道的事
1 阻止事件冒泡正常事件绑定使用的是bindtap，使用catchtap事件替换bindtap2 更改radio的大小radio组件的时候，设置width和height后不生效，设置transform:scale(0.5)3 scroll-yscroll-y无论为true或false都无效，都会滚动,设置scroll-y="{{some}}” 有效4 获取text组件文本值e.d...
2019-09-13 14:08:03
152
原创 处理iphoneX底部的横条
iphoneX手机取消了实体Home键，取而代之的是主界面底部不显眼的横条“Home Indicator”。当网页底部fixed 元素时候，一部分元素可能就被这个横条遮挡住，怎么适配解决呢？一：<meta name=“viewport” content=“width=device-width, viewport-fit=cover”>二：页面主体内容限定在安全区域内,如果不设置...
2019-09-05 09:39:27
4217
原创 mac系统下构建使用vue项目
1 进入node官网安装node js安装成功后运行 node -v检查是否安装成功$ npm -v4.2.02 安装webpack需要先获取root权限所以现在terminal（终端）内输入 sudo -s 然后输入密码再输入如下$ sudo npm install webpack -g3 安装vue-clisudo cnpm install --global vue-c...
2019-08-11 11:42:52
1236
原创 小程序接入客服功能
小程序使用客服功能其实很方便，如下 <button open-type="contact" send-message-title="{{itemName}}" send-message-path="/pages/detail/detail?itemId={{itemId}}" sendMessageTitle="{{itemName}}...
2019-08-09 10:31:06
7461
原创 scroll-view横向滚动无效
可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。要容器可以横向滚动，属性设置scroll-x发现滚动不了，会被撑开高度换行需要加上overflow:hidden;white-space:nowrap;...
2019-08-08 15:35:27
2612
原创 小程序单击、长按事件的冲突
购物车列表商品长按可删除，单击可进去商品详情、所以要处理单击、长按事件的冲突。代码如下<view bindtap='goDetail' bindtouchstart='bindTouchStart' bindtouchend='bindTouchEnd' bindlongtap='longTap' data-id='{{item.itemId}}' > longTap: fun...
2019-08-02 09:28:51
1910
1
原创 computed和watch
watch和computed都是以Vue的依赖追踪机制为基础的：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动。区别：computed是一个计算属性,类似于过滤器,如果在data里面定义数据再在computed里面书写会报错data () { return { firstName: '...
2019-07-29 15:27:50
126
原创 列表滚动，标题切换fixed固定
效果如下，当列表滚动时标题切换粘附固定头部代码如下<div class="table" id="tab"> <div v-for="(item,k) in list"> <div :class="['title',fiexdItem ==k?'fiexd':'']" > {{item.name}} </div...
2019-07-19 10:34:47
717
原创 防抖和节流
在前端开发中会遇到一些频繁的事件触发，比如keyup、keydown、滚动加载请求…频繁的触发会导致卡顿。防抖的原理：一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件<input id="inp"/> function debounce(func,...
2019-07-18 10:01:13
257
原创 display: table布局
display的table和table-cell一般情况应用场景1 顶部高度固定，剩余高度自适应<div class="table"> <div class="top">头部</div> <div class="content"> 内容区 </div> </d...
2019-07-17 15:57:47
383
转载 TCP的三次握手与四次握手
借鉴别人的博客和资料三次握手过程第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状...
2019-07-17 10:02:09
151
原创 setTimeout、Promise、Async/Await 的区别
一、event loopJS主线程不断的循环往复的从任务队列中读取任务，执行任务，这中运行机制称为事件循环（event loop）。二、Microtasks、MacrotasksMicrotasks和Macrotasks是异步任务的一种类型，Microtasks的优先级要高于Macrotasks，下面是它们所包含的api：microtasks process.nextTick prom...
2019-07-11 14:32:16
1124
原创 小程序分享带参数
小程序分享带参数有两种方式： <button open-type="share" data-cardNo='{{cardNo}}' hover-class='none'> <view class='shareType'>分享给好友和微信群</view> </button> onShareAppMessage: function...
2019-07-09 10:34:12
1142
原创 函数的预编译
js是一门解释性语言 执行分三步：语法解析、预编译、解释执行。下面分析一下预编译过程（预编译发生在函数执行前的一刻）预编译分为四步：1 创建OA对象2 找到形参和变量声明，将变量和形参数名作为OA属性并且赋值为undefined3 将实参和形参对号赋值4 在函数体里面找到函数声明（如果函数体里面有函数声明），值就是函数体...
2019-07-07 15:21:44
476
原创 头部固定 剩余高度自适应布局
头部固定、剩余高度自适应布局可以用很多方式， 比如flex 、calc() 等等，但是兼容性没那么好， 现在列举些兼容比较好的方案方案1代码如下 <div> <div class="top">我是头部</div> <div class="middle"> 我是主体信息 </div> </...
2019-06-24 14:16:57
1037
原创 清除浮动的几种方式
代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>css</title> </head> <style type="text/css"> *{ margin:0; padding: ...
2019-06-23 11:56:18
747
原创 双飞翼布局和圣杯布局
实现左右固定宽度 ，中间自适应的布局（中间先加载渲染）， 代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>css</title> </head> <style type="text/css"> *...
2019-06-23 11:37:33
35804
原创 call,apply,bind
call,apply,bind都是用来改变this指向，调用一个方法，看下例 var person = { name:"jet li", say:function(){ console.log(this.name); } } var fn = person.say; fn() // Cannot read property 'nam...
2019-06-21 11:26:50
142
原创 prototype和__proto__
prototype和__proto__关系图概念prototype是函数的一个属性（每个函数都有一个prototype属性），这个属性是一个指针，指向一个对象。它是显示修改对象的原型的属性。__proto__是一个对象拥有的内置属性，是JS内部使用寻找原型链的属性。跟浏览器环境有关，IE不可以访问var Person = function(){};var p = new Person(...
2019-06-19 11:14:50
2482
原创 Class
ES6的类，其实是一个语法糖，完全可以看作构造函数的另一种写法。class Point { // ...}typeof Point // "function"Point === Point.prototype.constructor // true上面代码表明，类的数据类型就是函数，类本身就指向构造函数。那跟传统构造函数又有啥区别？通过构造函数，定义并生成新对象。下面是一个例子。...
2019-06-14 17:28:39
132
原创 Proxy 和 Reflect
Proxy 字面意思代理，可以理解为一个构造函数，var proxy = new Proxy(target, handler);上述生成 Proxy 实例，其实是一个object的变种，可以在handler里面做一些自己想要做的逻辑，修改原有语言定义好的功能改造成你自己想要的效果。target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。 var obj =...
2019-06-14 15:14:11
1018
原创 Generator函数
Generator 函数是 ES6 提供的一种异步编程解决方案(异步编程方式有：回调函数 、事件监听、 发布/订阅者 、 Promise对象)。语法上，可以把理解成，Generator 函数是一个状态机，封装了多个内部状态。定义Gernerator函数function*test(){ yield 'hello' yield 'word' return 'ok'; ...
2019-06-14 14:30:30
353
原创 async和await的使用
async其实是ES7的才有的，其实是异步操作的进化，其实就是封装一个Promise的对象返回 async function test(){ return 1111 } console.log(test()) //Promise {<resolved>: 1111}async方法在普通的函数前加上"async"关键字即可。执行这个函数，发现并没有返...
2019-06-14 11:19:58
426
原创 Promise的使用
一个 Promise 就是一个对象，它代表了一个异步操作的最终完成或者失败。本质上，Promise 是一个绑定了回调的对象，而不是将回调传进函数内部。假设，现有一个名为 createAudioFileAsync() 的函数，在给定的配置文件和两个回调函数的情况下，这个函数能异步地生成声音文件。传统写法如下：// 成功的回调函数function successCallback(result) ...
2019-06-14 09:51:23
208
原创 vue自定义指令
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。有的情况下，对普通 DOM 元素进行底层操作，这时候就会用到自定义指令下面定义了一个v-test指令绑定数据name<template> <div class="hello"> <div v-test='name'></div> <...
2019-06-13 16:54:29
42919
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人