- 博客(39)
- 收藏
- 关注
RSS订阅
原创 vue-awesome-swiper autoplay (自动轮播)不生效 解决 方案
仅针对vue-awesome-swiper版本在4以上的很多小伙伴引入的swiper版本都已经达到了4-6，发现autopaly按照之前的配置方式不生效。原因是：官方已经将autoplay单独的分离了出来，需要单独引入。话不多少，完整的配置方案和使用方法如下：// main.js文件import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/swiper-bundle.min.css'Vue.use(VueAwesomeSwi
2020-11-30 15:53:02
5693
2
转载 2024年北京家庭新能源积分入围预测
根据这两年查询资料的经验，每年5月26号公布入围名单，再加上审核时间，基本上8月份前审核通过的都能拿到指标！2024年：按照往年“上涨分”和“入围几率”预估上涨5-8分。按照最稳妥分8分计算，入围分预估为68分。请各位借鉴朋友谨慎做出安排！2022年入围分数为56分，较上一年上涨6分，入围几率为20%（大概）2023年入围分数为60分，较上一年上涨4分，入围几率为19%（大概）所以基本68分以上没问题，那么取个整数70分以上妥妥的！2021年入围分数为50分，入围几率为22%（大概）
2023-11-28 11:50:00
13643
1
原创 微信小程序瀑布流 开箱即用 真香！！！
微信小程序瀑布流自己写是不是很头疼，亲测好用，并已上线。以上两个一样的，git打不开的，就去gitee看。以下链接是开源的代码仓库，克隆下来自己看吧。
2023-03-27 17:06:37
258
原创 微信小程序 canvas 卡顿 闪退
在当前页面不做任何操作，一般停留十几秒或以上，再次操作页面时，就会出现页面卡住或闪退，卡顿的时长一般根据你停留的时长来决定（且不做任何操作），停留的越久卡顿越明显。经过逐行排查，当我把canvas标签删除后，发现卡顿和闪退的情况再也没有出现。会很有规律的出现卡顿，甚至于小程序闪退。页面中使用 canvas标签 绘制海报。未再次出现卡顿及闪退的情况。
2023-03-16 16:01:59
1208
原创 微信小程序 微信支付的商户绑定流程及开发必要条件
申请接入微信支付（微信商户）方式。商户申请绑定微信小程序的方式。如何获取商户API证书。如何获取APIv2密钥。
2023-03-16 15:17:55
1113
原创 微信小程序 WXS标签 wxml中执行逻辑
官方链接WXS | 微信开发文档WXS 语法参考场景当需要在页面的wxml标签中执行逻辑判断的话，可以使用WXS标签，一种是直接在wxml中写逻辑，一种是引用。如下：1.直接将逻辑写在wxs标签中// page.jsPage({ data: { array: [1, 2, 3, 4, 5, 1, 2, 3, 4] }})<!--wxml--><!-- 下面的 getMax 函数，接受一个数组，且返回数组中最大的元素的值 --><wxs.
2022-03-09 16:47:40
750
原创 JS 时间格式化 时间戳 日期
JS 时间格式化为：yyyy/MM/dd hh:mm:ss 或者 yyyy-MM-dd hh:mm:ss一行代码搞定1. 先给答案，再来讲解（很简单）：// 举例：2021/10/16 16:39:00new Date().toLocaleString('chinese',{hour12:false}) // 举例：2021-10-16 16:39:00new Date().toLocaleString('chinese',{hour12:false}).replace(/(\/)/g,'-')
2021-10-16 16:52:14
365
原创 Charles 抓包 完整 教程
###window系统，傻瓜教学，一步一步跟着来就没有问题。哪一步不会留言，最晚半日回复1. 下载最新版本 Charleshttps://www.charlesproxy.com/download/2. 安装过程：一直下一步即可。3.打开 Charles4. proxy—>SSL Proxying Settings勾选 Enable SSL Proxying在Location中添加你要抓包的域名，比如：baodo.test.com点击Ok即可5.proxy—>Proxy
2021-06-02 17:53:58
1722
原创 vue 全景图 photo-sphere-viewer 实现
亲测可用，一步一步教你在vue中使用photo-sphere-viewer，仅需5分钟！！！1.安装photo-sphere-viewer的3.5.1版本npm install photo-sphere-viewer@3.5.1 --save2. 页面引入import photoSphereViewer from 'photo-sphere-viewer';import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'3.搞一张全景图，如果搞
2021-06-01 15:50:08
3331
17
原创 js 手写 原型链 继承
直接上代码function Animal() { this.colors = ['black', 'white']}Animal.prototype.getColor = function() { return this.colors}function Dog() {}Dog.prototype = new Animal()let dog1 = new Dog()dog1.colors.push('brown')let dog2 = new Dog()console.
2021-05-28 11:14:00
771
原创 vue项目 uTools 内网穿透 记录
1. vue.config.js添加：disableHostCheck:true devServer:{ disableHostCheck:true, },2.安装uTools3.uTools中安装插件内网穿透4. 启动启动vue项目 将本地的ip地址和启动项目的端口记录下来打开内网穿透插件填写内容：1.节点：腾讯云上海（也可以试下其他的）2.连接方式：http服务3.外网域名：根据规则添加域名即可4.内网地址：填写记录下来的ip地址5.内网端口：填写记录下来的
2021-05-13 16:19:13
336
1
原创 vue-cli3.x 项目文件解析
.gitignore 文件配置文件禁止上传到git仓库public 文件夹放置静态文件.browserslistrc 文件浏览器版本适配####babel.config.js就是配置babel的，用的时候再看
2021-04-09 18:38:13
135
原创 vue-cli3.x版本搭建
1.安装npm install -g @vue/cli2.初识化项目vue create 项目文件名称3. 初始化中需要填写或选择如下：? Please pick a preset: 请选择脚手架如何搭建，三个选项默认：使用vue2，babel及eslint默认： 使用vue3，vue3的babel，eslint手动选择 选择该项? Please pick a preset: ❯ Default ([Vue 2] babel, eslint) Default (Vue 3
2021-04-09 18:19:12
404
原创 vue-cli2.x 项目文件解析
.babelrc文件babel-loader（es6转es5）的一个配置文件，用于自定义转换后至少要适配哪些浏览器及哪些版本static 文件夹放置静态文件.gitkeep 文件如果某个文件夹下有该文件，那么当我将代码上传到git时，就算该文件夹是空的，也要上床.editorconfig对代码风格进行统一，默认配置如下root = true[*]charset = utf-8 #编码格式indent_style = space # 缩紧风格（使用空格）indent_size = 2
2021-04-09 16:45:49
95
原创 VueCli2.x版本搭建
1.安装npm install -g @vue/clinpm install -g @vue/cli-init第一个指令目前安装的都是3.x版本以上，通过第二个指令@vue/cli-init可将2.x的版本模版也安装上，那么两这版本的就都可以使用了2.初识化项目vue init webpack 项目文件名称3. 初始化中需要填写或选择如下：project name 输入项目名称：一般情况下跟项目文件名称一样，直接回车不填写的化，默认使用项目文件名称。注意项目名称不可以存在大写英文字母和汉字
2021-04-09 15:03:22
216
原创 webpack中引入vue的报错
bundle.js:1310 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
2021-04-08 21:06:54
244
原创 js javascript let 变量 深入 理解
let理解:let 声明的变量支持块级作用域let 不存在变量提升let 存在暂时死区(不能在初始化之前，使用变量)根据下面代码块深入理解:(涉及块级作用域、变量提升相关知识)// 代码段1var liLists = document.querySelectorAll('li') // 共5个lifor( var i=0; i<liLists.length; i++){ liLists[i].onclick = function(){ console.log(i)
2021-03-27 11:37:16
447
原创 高阶函数 简单 实现 数组 的 map reduce filter 方法
/** * 简单实现一个类似于arr.map()的高阶函数 * */ Array.prototype.map = function (fn) { let newarr= [] for(let key in arr){ newarr.push(fn(arr[key],key)) } return newarr } let arr = [1,2,3,4,5,6] arr=arr.map((item,index)=...
2021-03-26 16:15:05
96
原创 vue3.0 ref和reactive区别
区别如果在template里使用的是ref创建的数据，那么底层会自动帮我们添加.vaue如果在template里使用的是reactive类型的数据，那么vue不会自动帮我们添加.value如果决定是否在template里添加.value通过ref创建的数据里有一个字段： __v_isRef: true，通过该字段判断，如果有并且值为true，说明为ref创建的。我们怎么来判断导入 import {isRef, isReactive} from 'vue'直接调用即可,参数为要判断的数
2021-03-09 01:13:32
671
原创 vue3.0 ref
导入refimport {ref} from 'vue'什么是ref？ref本质： ref本质还是reactive，当我们给ref函数传递一个值之后，ref函数底层自动将ref转换成reactiveref(18) -> reactive({value:18})所以如果使用了ref来创建数据的话，在tamplate中不需要通过.value获取，系统会自动添加。在逻辑代码中需要通过.value的方式获取数据...
2021-03-09 01:03:00
357
原创 vue3.0 reactive
导入import {reactive} from 'vue'什么是reactive？reactive是vue3中提供的实现响应式数据的方法在vue2中响应式数据是通过defineProperty来实现的，而在vue3中响应式数据是通过ES6的Proxy来实现的本质就是将传入的数据包装成一个Proxy对象reactive注意点：reactive参数必须是对象或数组，当然数组也是对象（json/arr）如果reactive传递了其他对象默认直接修改该对象时，界面不会自动更新如果想更新
2021-03-09 00:54:40
345
原创 vue3.0初识
vue3.0源码地址github.com/vuejs/vue-next/releases/tag/v3.0.0vue3.0六大亮点性能比vue2.x快1.2-2倍按需编译，提及比vue2.x更小组合API（类似React Hooks）更好的Ts支持暴露了自定义渲染API更先进的组件vue3.0为什么快diff算法优化vue2.x diff算法是对DOM进行全量比较。而vue3.0在创建虚拟DOM的时候根据DOM中的内容会不会发生变化，来添加静态标记，只会比较添加了静态标记
2021-03-09 00:23:51
71
原创 vue中使用swiper制作电影轮播切换
1. 下载包npm install vue-awesome-swiper swiper --save2.引入包main.js文件中:import VueAwesomeSwiper from 'vue-awesome-swiper'import 'swiper/swiper-bundle.min.css'Vue.use(VueAwesomeSwiper)3.布局及配置<template> <div> <swiper :options="option
2020-11-27 10:17:06
1035
原创 创建、发布、使用、更新 npm包的过程
切换npm源//淘宝镜像npm config set registry https://registry.npm.taobao.org// npm 原始镜像npm config set registry https://registry.npmjs.org/npm 官网https://www.npmjs.com/npm 检测是否登录 npm who am inpm 填写登录信息npm adduser创建、发布、使用、更新 npm包的过程创建- 新建文件夹 文件夹中通过c
2020-11-11 17:46:31
173
原创 Typescript 类型注解 类型推断
1.type annotation 类型注解function getTotal(one : number, two : number){ return one + two }const total=getTotal(1, 2)其中 one : number 就属于类型注解2.type inference 类型推断当鼠标移至xiaoJie对象时，自动推断出对应属性的类型注：当ts能够自动推断出类型的时候不需要写注解，如果推断不出来，需要添加注解...
2020-10-25 22:33:27
363
原创 typeScript 基础静态类型和对象静态类型
基础静态类型const count : number = 1;const myName : string = 'panda';对象静态类型，包括：对象类型const xiaoJieJie:{ name:string, age:number} = { name:'大脚', age:18}数组类型const xiaoJieJies : string [] = ['123','大脚，‘江疏影']类类型class Person{}const
2020-10-25 21:40:15
161
原创 typescrip 静态类型（Static Typing）
静态类型定义了变量的数据类型后，后续代码不能够赋值其他类型，不然代码会报错。let count : number = 1count number ='字符串'这种情况是会报错的,给count定义了number类型后，后续赋值不可以再给count赋值其他类型2. 给变量定义了某种了类型后，目前验证在vscode中直接在该变量后添加.符号即可自动扩展出该类型对应的方法。3. 自定义一个对象属性的类型，便于管理和构建数据结构。举例：interface personType{ age:n
2020-10-24 23:36:35
204
原创 typescript 安装 在node环境下执行
1.安装npm install typescript -gnpm install ts-node -g2.使用ts-node转译并执行ts文件中的代码，指令如下：ts-node 文件名ts-node的作用是将ts文件直接编译成js并且执行完成后打印出js的执行结果
2020-10-24 23:11:40
419
原创 webpack Watch Mode webpack-dev-server 热模替换
webpack-dev-server编译后不写入任何输出文件。相反，它将捆绑文件保留在内存中，并像在服务器根路径上挂载的真实文件一样提供它们。如果您的页面希望在其他路径上找到捆绑文件，则可以使用publicPath开发服务器的配置中的选项进行更改。
2020-09-08 16:07:33
189
原创 webpack Using source maps
inline-source-map理解：当webpack捆绑您的源代码时，很难将错误和警告跟踪到其原始位置。例如，如果将三个源文件（a.js，b.js和c.js）捆绑为一个捆绑（bundle.js），并且其中一个源文件包含错误，则堆栈跟踪将仅指向bundle.js。这样就造成了追溯错误的困难，因为您可能想确切知道错误来自哪个源文件。为了使查找错误和警告更加容易，JavaScript提供了源映射，该源映射将已编译的代码映射回原始源代码。如果错误源于b.js，则源映射将准确告诉您。对于本指南，
2020-09-08 11:41:39
95
原创 webpack Output Management 输出管理
1.设置HtmlWebpackPlugin理解:HtmlWebpackPlugin默认情况下每次打包(npm run build)也都会生成最新的（dist目录下）index.html文件。即使你改动了index.html文件，它也会在再次打包时恢复并生成完整的，最新的。与webpack所配置的出口文件名保持一致。配置：npm install --save-dev html-webpack-pluginwebpack文件: const path = require('path'); con
2020-09-08 11:32:18
128
原创 webpack Asset Management(css,图像,字体等文件的载入)
习前了解:element.classList属性用于返回一个元素的className集合并且该属性拥有add，remove，toggle，contains方法add用于给元素添加新的类名1.js中获取css文件webpack环境下:通过import从JavaScript模块中获取CSS文件，您需要安装style-loader和css-loader并将其添加到module配置中。npm install --save-dev style-loader css-loaderwebpack.con
2020-09-07 17:45:10
268
原创 搭建webpack简易目录
1.搭建webpacknpm init -ynpm install webpack webpack-cli --save-dev2. 目录结构webpack-demo|- package.json|- webpack.config.js|- /dist |- main.js |- index.html|- /src |- index.js|- /node_modules3.总结webpack用于编译JavaScript模块。生成构建依赖关系图，它使用该图生成优化的文件（
2020-09-07 16:09:59
103
上传视频 获取视频第一帧 做为封面 完整代码+注释 前端js
2022-09-20
怎么让vuecli3的包变小
2022-09-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人