javascript
文章平均质量分 50
&時光
时间如梭,白驹过隙!
展开
-
替换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 · 711 阅读 · 0 评论 -
微信二次分享无法获取,标题、描述、icon
分享的内容不行在获取签名之前获取,切记签名最后获取created() { // 分享内容 this.getArticleDetail(); // 获取签名 this.setWxConfig(); },由于微信提供的api里的分享到好友,朋友圈,微信多出来的指定分享人,QQ。js接口里有新老分享js,由于ios都兼容,而安卓、一些分享还是调用的老接口 // 获取签名 setWxConfig(){ .原创 2021-11-19 10:07:50 · 789 阅读 · 0 评论 -
微信用<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 · 1034 阅读 · 0 评论 -
nginx命令与操作
个人建议大家不要停直接杀掉所有进程杀进程:taskkill /f /im nginx.exe启动:start nginx.exe原创 2021-10-15 14:50:45 · 264 阅读 · 0 评论 -
常用数字与字母的正则表达
验证数字的正则表达式集 验证数字:^[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 · 403 阅读 · 0 评论 -
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 · 1308 阅读 · 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 · 6367 阅读 · 0 评论 -
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 · 230 阅读 · 0 评论 -
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 · 235 阅读 · 0 评论 -
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 · 287 阅读 · 0 评论 -
diff算法(核心)
vue和react的虚拟dom都采用类似的diff算法,核心大概可以归为两点1,两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构;2,同一层级的一组节点,他们可以通过唯一的id进行区分。基于以上两点假设,是的虚拟的DOM的Diff算法的复杂程度从O(n^3)降到了O(n)。当页面的数据发上变化的时候,Diff算法只会比较同一层级的节点:如果节点类型不同,直接干掉前面的节点,在创建并插入新的节点,不会再比较这个节点以后的子节点了。如果节点类型相同,则会重新设置节点原创 2021-05-18 08:33:49 · 231 阅读 · 0 评论 -
微信小程序(开发中遇到的问题
最近,接触了一段时间的微信小程序,在小程序的开发过程中,遇到了不少坑,再次总结一下: 1.小程序所有接口域名必须为https,而且不能加端口号; 比如:在小程序后台设置时无端口号,调用时再加入,会出现本地调试可用,线上版本不可用的情况。 2.wx.request 请求最大并发数为5,如果超过此限制,可能会出现开发工具卡死等情况; 3.wx.navigateTo 页面路径最多5层,超过5层会出现跳转失败的情况。 尽量配合wx.redirectTo和wx.navi...原创 2021-05-17 14:18:49 · 677 阅读 · 0 评论 -
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 · 697 阅读 · 0 评论 -
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 · 376 阅读 · 0 评论 -
原生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 · 216 阅读 · 0 评论 -
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 · 622 阅读 · 0 评论 -
前端性能优化方案都有哪些?
前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么 ? 1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。 2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。 总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。 前端优化的途径有很多,按粒度大致可原创 2021-05-10 20:55:23 · 5889 阅读 · 0 评论 -
中级前端面试题必备知识点(2.5w+月薪)进阶
中级前端面试题必备知识点(2.5w+月薪)进阶前端已经不再是5年前刚开始火爆时候的那种html+css+js+jquery的趋势了,现在需要你完全了解前端开发的同时,还要具备将上线、持续化、闭环、自动化、语义化、封装......等概念熟练运用到工作中的一个职业,甚至用人部门还希望你了解并掌握深度学习及机器学习的相关概念。在面试过程中,各部门交叉面试的时候会提问一些关于后端的知识。假如你想要拿到2.5w+月薪,你的能力应该达到掌握以下全部知识点并有过开发后端接口与数据处理(node、java、c...原创 2021-05-09 19:27:38 · 1484 阅读 · 0 评论 -
购物车运动小球
第一步: 定义一个变量bSys: false, //判断单个小球运动的条件第二步:在需要的地方添加小球 <div className="shop"> <div className="cart"></div> <transition name="drop"原创 2021-05-09 19:09:39 · 211 阅读 · 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 · 1339 阅读 · 0 评论 -
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 · 179 阅读 · 6 评论 -
CSS3中transition、transform分不清楚?
CSS3中transition、transform分不清楚?前言css属性很多,无论是字母的拼写还是字面上的意思,很多人都容易混淆,包括我在内,也时不时需要去看看到底是咋回事,是不是也混淆过你~下面列举几个最容易混淆的属性:属性含义animation(动画)用于设置动画属性,他是一个简写的属性,包含6个属性transition(过渡)用于设置元素的样式过度,和animation有着类似的效果,但细节上有很大的不同transform(变形)用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没原创 2021-05-07 10:56:36 · 99 阅读 · 0 评论 -
JS取出两个数组中的不同或相同元素
希望对大家有用哟![1,2,3,4].filter(item=>[1,2,3,4,5,6].includes(item))原创 2021-05-07 10:22:49 · 467 阅读 · 1 评论 -
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 · 269 阅读 · 0 评论 -
防止穿透与可以穿透
防止穿透:行内属性@touchmove.prevent可以穿透:css样式 pointer-events: none;原创 2021-05-07 10:05:10 · 175 阅读 · 0 评论 -
函数组件与类组件
1. 函数组件看似只是一个返回值是DOM结构的函数,其实它的背后是无状态组件(Stateless Components)的思想。函数组件中,你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件(Presentational Components),接收Props,渲染DOM,而不关注其他逻辑。2. 函数组件中没有this。所以你再也不需要考虑this带来的烦恼。而在类组件中,你依然要记得绑定this这个琐碎的事情。如示例中的sayHi。3. 函数组件更...原创 2021-05-06 11:23:48 · 445 阅读 · 0 评论 -
工作不好找, 会这些react面试题可以助你一波
问题1:什么是虚拟DOM?主题: React难度: ⭐虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中,并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤,整个过程被称为调和。问题2:类组件和函数组件之间的区别是啥?主题: React难度: ⭐⭐类组件可以使用其他特性,如状态state和生命周期钩子。 当组件只是接收props渲染到页面时,就是无状态组件,就属于函数组件,也被称为哑组件或展示组件。函...原创 2021-04-30 11:03:38 · 162 阅读 · 1 评论 -
react中界面跳转 A界面跳B界面,返回A界面,A界面状态保持不变 localStorage方法
好像所有的单页面应用都会有个问题,就是我A作为一级界面,跳转到二级界面B的时候,在回到A界面,你会发现所有的参数都重新加载了很多时候假如我们的界面有很多条新闻列表,通过设置参数筛选出了一部分的新闻列表,这个时候我点击新闻标题进入了新闻详情,然后返回到A界面的时候,发现所有的条件都重置了,这样用户体验很显然是非常不好的。我还是个小菜鸟所以对于那种大佬们说可以使用redux可以实现的方法不是很明白,所以我就介绍下另外一种方法在跳转到B界面的时候,把你想要保留的数据啊参数啊,传递给B界面,在B界.原创 2021-05-04 18:48:09 · 1425 阅读 · 0 评论 -
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 · 387 阅读 · 2 评论 -
React脚手架安装配置
npm i create-react-app -g 全局安装create-react-app --version 查看版本create-react-app you-test 生成项目文件夹cd you-test 进入项目npm i react-router-dom -D 配置路由 npm start 启动//px转remnpm run eject //如果报错就执行,否则不需要git add .git commit -m 'init'npm run eject .原创 2021-04-27 21:25:21 · 107 阅读 · 0 评论 -
微信小程序请求的封装及跨域的解决。
建议把所有请求抽离到不同页面对应的js文件中,可以方便后期的修改和排查问题,小程序请求是通过微信后台来请求我们的后台地址来进行后端映射、你请求的接口实际到微信的后端做了一道映射,微信后端拿到你的 wx.request 调用的 url、用后端请求后端,所以不会出现跨域问题一、新建network文件夹并建立netwrok.js文件import baseURL from "./config.js";// 引入baseURL 后面会讲到export default function request(o原创 2021-04-27 21:14:59 · 8733 阅读 · 0 评论 -
vue脚手架的详细步骤
3.0版本:安装3.x版本的Vue脚手架: npm install -g @vue/cli基于3.x版本的脚手架创建Vue项目:使用命令创建Vue项目命令:vue create my-project选择Manually select features(选择特性以创建项目)勾选特性可以用空格进行勾选。是否选用历史模式的路由:nESLint选择:ESLint + Standard config何时进行ESLint语法校验:Lint on savebabel,postcss等配置文件如何放置.原创 2021-04-27 21:19:28 · 150 阅读 · 0 评论 -
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 · 277 阅读 · 2 评论 -
Vue 出场率99%的面试题
前言作为前端开发中现行最火的框架之一,Vue在面试中出现的频率不断增加。基于此,总结了一些Vue方面经常出现的面试题,留给自己查看消化,也分享给有需要的小伙伴如果文章中有出现纰漏、错误之处,还请看到的小伙伴留言指正,先行谢过以下 ↓1. 说一下Vue的双向绑定数据的原理vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应监听...原创 2021-05-02 14:17:14 · 159 阅读 · 0 评论 -
react配置异步请求数据,解决跨域问题
在src目录下配置,直接可以用const proxy = require('http-proxy-middleware')module.exports = function(app) { app.use( proxy('/api', { //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000) target: 'http://localhost:8080/api', //配置转发目标地址(能返回数据的服务器地址) change..原创 2021-04-27 21:04:16 · 218 阅读 · 2 评论 -
react如何配置解决PX转rem移动端适配问题
安装相关的依赖npm i lib-flexible --savenpm i sass-loader node-sass --save-devnpm i postcss-px2rem --save然后打开项目中config/webpack.config.js进行配置// 在配置文件中添加如下两行代码// px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的,如果是620 的就写 62const px2rem = ...原创 2021-04-29 10:38:40 · 700 阅读 · 0 评论 -
原生JS左右联动效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>Title&l...原创 2021-05-01 18:50:50 · 662 阅读 · 2 评论 -
在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 · 822 阅读 · 0 评论