- 博客(61)
- 收藏
- 关注
RSS订阅原创 H5页面长按识别二维码
vue 写的H5 ，内嵌在小程序上<img src="图片路径" style="width: 200px;background-size:100% 100%;height: 200px;-webkit-touch-callout : none;">直接在微信访问长按就可以实现微信原生直接写长按识别二维码aaa(e){ let img = e.target.dataset.src; wx.previewImage({ current: img, ...
2022-04-24 18:05:38
4704
原创 微信小程序封装wx.request请求以及携带token
首先在pages中新建一个api的文件夹，对ajax请求统一管理，文件夹中request.js完成对wx.request的封装，在index.js中完成接口管理，目录以下图：ajax 在request.js中对wx.request进行封装，代码以下：jsonvar tokenKey = "access-token";var serverUrl = "http://124.204.51.174:8080/gcs"; // 例外不用token的地址var excep...
2021-12-14 11:13:46
14507
2
原创 判断App版本号
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2021-11-20 16:14:53
647
原创 微信获取签名demo
<html><head> <title>微信js</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">.
2021-11-19 10:42:11
326
原创 点击实现复制粘贴
<!DOCTYPE html><html><head> <title>点击复制</title></head><style> #test{ background-color: #FD5643; }</style><body> <textarea id="test" type="text" name="" value="this is .
2021-11-19 10:21:20
658
原创 替换URL上指定参数
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>D.
2021-11-19 10:11:23
682
原创 微信二次分享无法获取，标题、描述、icon
分享的内容不行在获取签名之前获取，切记签名最后获取created() { // 分享内容 this.getArticleDetail(); // 获取签名 this.setWxConfig(); },由于微信提供的api里的分享到好友，朋友圈，微信多出来的指定分享人，QQ。js接口里有新老分享js,由于ios都兼容，而安卓、一些分享还是调用的老接口 // 获取签名 setWxConfig(){ .
2021-11-19 10:07:50
706
原创 微信用＜wx-open-launch-app＞拉起第三方APP报 ferrMsg: config: invalidsignature
先看后台配置：一定要看好请求参数是否正确到这里就可以确认后台没有问题，我们在用验签工具验签https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisignH5就这点代码，不要怀疑自己安装weixin-js-sdknpm install --save weixin-js-sdk需要的页面引入importwxfrom'weixin-js-sdk';wx.config({ debug...
2021-10-15 15:17:00
880
原创 nginx命令与操作
个人建议大家不要停直接杀掉所有进程杀进程：taskkill /f /im nginx.exe启动：start nginx.exe
2021-10-15 14:50:45
223
原创 常用数字与字母的正则表达
验证数字的正则表达式集 验证数字：^[0-9]*$验证n位的数字：^\d{n}$验证至少n位数字：^\d{n,}$验证m-n位的数字：^\d{m,n}$验证零和非零开头的数字：^(0|[1-9][0-9]*)$验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$验证非零的正整数：^\+?[1-9][0-9]*$验证非零的负整数：^\-[1-9][0-9]*$验证非负整数（正整数 + 0） ^\d+...
2021-08-06 09:41:00
289
原创 vue中使用swiper-slide时，循环轮播失效？
前言 vue 项目中使用时，组件swiper-slide 如果用v-for循环的话，loop：true 就不能无缝轮播，每次轮播到最后一张就停止了？？？正文 代码如下： <swiper :options="swiperOption2"> <swiper-slide v-for="(item, index) of showProduct" :key="index"> <el-row> <el-col :xs
2021-08-06 09:38:32
1146
3
原创 hash和history的原理和区别
原理区别hash原理：hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则history原理： 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化history模式利用了HTML5 History Interface中新增的pushState()和replaceState()方法，这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础上，他们提
2021-05-22 14:04:39
6241
原创 v-if和v-for谁的优先级高？如何同时使用？
首先：永远不要把v-if和v-for同时用在同一个元素上。其次：当 Vue 处理指令时，v-for比v-if具有更高的优先级将users替换为一个计算属性 (比如activeUsers)，让其返回过滤后的列表将：<ul> <li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} </li>...
2021-05-22 13:58:48
205
原创 sass和less的区别之我见
1.编译环境不一样Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中。2.变量符不一相less是@，而scss是$,而且它们的作用域也不一样，less是块级作用域3.输出设置不一样Less没有输出设置，sass提供4种输出选项，nested,compact,compressed和expanded nested：嵌套缩进的css代码(默认) expanded：展
2021-05-19 08:47:30
188
原创 Vue-router中keep-alive的理解
Vue-router的API文档中对于keep-alive的介绍并不多，所以对于初学者来说，可能并不太理解什么是keep-alive、作用是什么，什么时候用，怎么用？所以，通过这篇文章，我为大家详细讲解一下这四个问题。如有错误，还请大家指正，谢谢！1、什么是keep-alive keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗，简单一点来说就是从页面1链接到其他页面后回退到页面1不用在重新执行页面1的代码，只会从缓存中加载之前已经缓存的页面1，这...
2021-05-18 09:06:59
241
原创 diff算法（核心）
vue和react的虚拟dom都采用类似的diff算法，核心大概可以归为两点1,两个相同的组件产生类似的DOM结构，不同的组件产生不同的DOM结构；2，同一层级的一组节点，他们可以通过唯一的id进行区分。基于以上两点假设，是的虚拟的DOM的Diff算法的复杂程度从O(n^3)降到了O(n)。当页面的数据发上变化的时候，Diff算法只会比较同一层级的节点：如果节点类型不同，直接干掉前面的节点，在创建并插入新的节点，不会再比较这个节点以后的子节点了。如果节点类型相同，则会重新设置节点
2021-05-18 08:33:49
211
原创 微信小程序（开发中遇到的问题
最近，接触了一段时间的微信小程序，在小程序的开发过程中，遇到了不少坑，再次总结一下： 1.小程序所有接口域名必须为https，而且不能加端口号； 比如：在小程序后台设置时无端口号，调用时再加入，会出现本地调试可用，线上版本不可用的情况。 2.wx.request 请求最大并发数为5，如果超过此限制，可能会出现开发工具卡死等情况； 3.wx.navigateTo 页面路径最多5层，超过5层会出现跳转失败的情况。 尽量配合wx.redirectTo和wx.navi...
2021-05-17 14:18:49
597
原创 babylon.js入门日记系列
一直就有一个给宝宝写游戏的念头.百度一番.选了这个babylon.js(巴比伦).先说好,游戏开发方面我是啥也不会, 要是把你带沟里去了,你也别介意.好了,说干就干,开始.........babylon.js是什么?babylon.js是一个完整的JavaScript框架，用于构建HTML5，WebGL，WebVR和Web Audio的3D游戏和体验. 除了游戏用来在页面实现一些3D场景也是没问题的.官网环境搭建Babylon 环境相对简单,只需要引入三个脚本文件即可babylon.js
2021-05-14 15:21:05
591
原创 JS实现移动端购物车左滑删除功能
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>js侧滑显示删除按钮</title> <st...
2021-05-13 20:08:10
341
原创 原生js、vue、react 购物车运动小球
所有版本大同小异有详细备注，一目了然react版 <div className="ball" > <img src={"http://www.ibugthree.com/" + obj.img_src} alt="" /> </div> // 当前运动小球 let ball = e.currentTarget.parentNode.lastChild; // 小球显示 .
2021-05-12 19:09:55
185
原创 W3C 代码标准规范
W3C通过设立领域（Domains）和标准计划（Activities）来组织W3C的标准活动，围绕每个标准计划，会设立相关的W3C工作组织（包括工作组、社区组、商务组等）。W3C会根据产业界的标准需求调整Domains和Activity的设置及相关的工作组设置。截至2014年7月，W3C共设立5个技术领域，开展24个标准计划。查看所有工作组列表（英文）。w3cinteraction domain 交互技术标准领域主要关注Web与用户交互的接口和技术标准，包括(X)HTML及其他用于Web的标记语.
2021-05-11 08:20:47
584
原创 前端性能优化方案都有哪些？
前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ? 1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。 2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。 总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。 前端优化的途径有很多，按粒度大致可
2021-05-10 20:55:23
5650
原创 h5和css3的新特性有哪些？
html5是构建Web内容的一种语言描述方式。html5是互联网的下一代标准。css3是css（层叠样式表）技术的升级版本。下面我们来看一下HTML5余css3的新特性有哪些。CSS3新特性:1.颜色：新增RGBA，HSLA模式2. 文字阴影（text-shadow、）3.边框： 圆角（border-radius）边框阴影： box-shadow4. 盒子模型：box-sizing5.背景：background-size 设置背景图片的尺寸background-origi
2021-05-10 19:06:21
278
2
原创 中级前端面试题必备知识点（2.5w+月薪）进阶
中级前端面试题必备知识点（2.5w+月薪）进阶前端已经不再是5年前刚开始火爆时候的那种html+css+js+jquery的趋势了，现在需要你完全了解前端开发的同时，还要具备将上线、持续化、闭环、自动化、语义化、封装......等概念熟练运用到工作中的一个职业，甚至用人部门还希望你了解并掌握深度学习及机器学习的相关概念。在面试过程中，各部门交叉面试的时候会提问一些关于后端的知识。假如你想要拿到2.5w+月薪，你的能力应该达到掌握以下全部知识点并有过开发后端接口与数据处理（node、java、c...
2021-05-09 19:27:38
1325
原创 购物车运动小球
第一步： 定义一个变量bSys: false, //判断单个小球运动的条件第二步：在需要的地方添加小球 <div className="shop"> <div className="cart"></div> <transition name="drop"
2021-05-09 19:09:39
194
3
原创 CSS3中的变形处理——transform功能（旋转、缩放、倾斜、移动）
1 transform属性在CSS3中，可以利用transform功能实现文字或图像的旋转、缩放、倾斜、移动这4中类型的变形处理。（1）浏览器支持到目前为止：Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上浏览器支持该属性。2 旋转使用rotate方法，在参数中加入角度值，角度值后面跟表示角度单位的“deg”文字即可，旋转方向为顺时针方向。transform：rotate（45deg）；3 缩放使用scale方法来实现文字或图像的缩放..
2021-05-08 18:05:06
1279
原创 react实现路由懒加载之我见
下载 react-loadableyarn add react-loadable或者npm install --save react-loadable2、个人习惯吧，进行了封装，在utils文件夹下新建loadable.js文件，配置如下：import React from "react";import Loadable from "react-loadable";// 加载动画const loadingComponent = () => { return <d..
2021-05-07 15:31:14
162
6
原创 CSS3中transition、transform分不清楚？
CSS3中transition、transform分不清楚？前言css属性很多，无论是字母的拼写还是字面上的意思，很多人都容易混淆，包括我在内，也时不时需要去看看到底是咋回事，是不是也混淆过你～下面列举几个最容易混淆的属性：属性含义animation（动画）用于设置动画属性，他是一个简写的属性，包含6个属性transition（过渡）用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同transform（变形）用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没
2021-05-07 10:56:36
77
原创 CSS样式穿透
VUE中CSS样式穿透1. 问题由来在做两款H5的APP项目，前期采用微信官方推荐的weui组件库。后来因呈现的效果不理想，组件不丰富，最终项目完成后全部升级采用了有赞开发的vant组件库。同时将webpack顺利从3升级到4（项目结构 webpack+vue+vue-store+vue-router+vant+less）。相信好多做TOB的开发朋友都会选择顺手组件库。组件库内置了很多样式，方便了我们开发者，同时又因高度封装，有时也会给我们带来一点点困扰。比如，在使用vant组件库中的环形进度条时，
2021-05-07 10:30:27
411
2
原创 JS取出两个数组中的不同或相同元素
希望对大家有用哟！[1,2,3,4].filter(item=>[1,2,3,4,5,6].includes(item))
2021-05-07 10:22:49
420
1
原创 文字超出，后面出现三个点
这是css样式，直接放入对应div的css样式里即可overflow: hidden; //超出部分隐藏text-overflow: ellipsis; //文字超出部分截断display: -webkit-box; //显示为webkit的盒子，这是css3新增的属性，很有用，可以进行弹性的分配。-webkit-line-clamp: 1; //行数：1，也可以尝试其他行数-webkit-box-orient: vertical; //分配的盒子的方向，水平。...
2021-05-07 10:11:50
322
原创 vuex如何传值
个人写法，希望对大家有帮助！import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ modules: { login: { state: { callv: '', }, mutations: { addcallv(state, arg) { state.callv = ar
2021-05-07 10:08:23
209
原创 vue和react的区别之我见
react和vue都是做组件化的，整体的功能都类似，但是他们的设计思路是有很多不同的。使用react和vue，主要是理解他们的设计思路的不同。1.数据是不是可变的react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。react在setState之后会重新走渲染的流程，如果shouldComponentUpdate返回的是true，就继续渲染，如果返回了false，就不会重新渲染，PureComponen
2021-05-06 11:43:01
105
原创 函数组件与类组件
1. 函数组件看似只是一个返回值是DOM结构的函数，其实它的背后是无状态组件（Stateless Components）的思想。函数组件中，你无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件（Presentational Components），接收Props，渲染DOM，而不关注其他逻辑。2. 函数组件中没有this。所以你再也不需要考虑this带来的烦恼。而在类组件中，你依然要记得绑定this这个琐碎的事情。如示例中的sayHi。3. 函数组件更...
2021-05-06 11:23:48
378
原创 react中界面跳转 A界面跳B界面，返回A界面，A界面状态保持不变 localStorage方法
好像所有的单页面应用都会有个问题，就是我A作为一级界面，跳转到二级界面B的时候，在回到A界面，你会发现所有的参数都重新加载了很多时候假如我们的界面有很多条新闻列表，通过设置参数筛选出了一部分的新闻列表，这个时候我点击新闻标题进入了新闻详情，然后返回到A界面的时候，发现所有的条件都重置了，这样用户体验很显然是非常不好的。我还是个小菜鸟所以对于那种大佬们说可以使用redux可以实现的方法不是很明白，所以我就介绍下另外一种方法在跳转到B界面的时候，把你想要保留的数据啊参数啊，传递给B界面，在B界.
2021-05-04 18:48:09
1342
原创 webpack的安装及打包
1.创建项目目录并初始化创建项目，并打开项目所在目录的终端，在命令框输入命令：npm init -y2.创建首页及js文件创建一个src文件，在src里创建index.html页面，初始化页面结构：在页面中摆放一个ul，ul里面放置几个li，并在文件夹中创建index.js文件安装jQuery打开项目目录终端，输入命令:npm install jQuery -S导入jQuery打开index.js文件，编写代码导入jQuery并实现功能：3.然后在项目根目录中，创
2021-05-04 14:57:37
326
2
原创 vue，react 如何配置请求服务器数据
第一步：先在src下创建第二步：配置 Service.js 直接粘贴无需改动，参考代码如下：import axios from "axios";/** * @description: 发送网络请求 * @param {object} config 一个配置对象 * @return {*} 返回请求的结果 */export function request(config) { // 创建一个axios实例 const instance = axios.cr...
2021-05-04 13:41:29
241
2
原创 Vue 出场率99%的面试题
前言作为前端开发中现行最火的框架之一，Vue在面试中出现的频率不断增加。基于此，总结了一些Vue方面经常出现的面试题，留给自己查看消化，也分享给有需要的小伙伴如果文章中有出现纰漏、错误之处，还请看到的小伙伴留言指正，先行谢过以下 ↓1. 说一下Vue的双向绑定数据的原理vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听...
2021-05-02 14:17:14
135
原创 在react中引入Ant Design Mobile后导致px转rem失效问题及配置文件别名失效问题的解决办法
npm install antd --save 用npm /cnpm 引入antd 目前使用的cnpm 查看配置文件 即可看到我们刚刚引入了版本为2.1.0 修改webpack.config.js 引入 ant design的样式文件 (注：如果引用了react-router，可将样式文件引入root.js中，如图2) 使用ant design组件 查看结果 ...
2021-05-01 18:51:15
672
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人