热爱sunny-CSDN博客

原创一文搞定react-router-dom最新版V6路由的入门及使用

本文主要以版本为主，旧版过多概念不介绍，想必诸位应该也知道该库是做什么用的 😅，主要引领大家入门了解 react-router-dom 的使用，快速上手最新React Router v6 版本。

2024-03-07 23:59:57 2872 3

原创一文搞定react中redux状态管理及使用，redux、reduxjs/toolkit、redux-persist持久化入门

React Redux是React官方提供的Redux绑定库，它提供了一些方便的方法来连接React组件和Redux store。React Redux中文文档Redux Toolkit是一个Redux工具包，它提供了一组方便的方法来简化Redux的开发。Redux Toolkit官方文档redux-persist是一个Redux持久化库，它允许你将Redux store的状态保存到本地存储中，并在需要时将其恢复。redux-persist文档。

2024-03-07 15:39:30 1492 6

原创 uniapp视频倍速播放插件，uniapp视频试看插件——sunny-video使用文档

uniapp视频倍速播放插件，uniapp视频试看插件——sunny-video使用文档。

2023-11-24 17:19:43 3300

原创微信小程序相机相册授权后，需要重启客户端才能正常调用相机，无法调起窗口选择图片，无反应解决方案

微信小程序相机相册授权后，需要重启客户端才能正常调用相机，无法调起窗口选择图片，无反应解决方案，通过勾选...

2023-11-15 22:26:03 1508

原创 uniapp获取公钥、MD5，‘keytool‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

- 通过命令的形式获取 - `win+r`调出黑窗口 - `cd`到证书所在目录 - 输入`keytool -list -v -keystore test.keystore`,其中 `test.keystore`为你的证书名称加文件后缀 - 按照提示输入你的证书密码，就可以查看证书的信息- 通过uniapp云端查看(**证书是在DCloud开发者中心生成的**)，具体生成步骤: [点击这里查看](http://t.csdnimg.cn/Fvf0t) **推荐此方法** - 进入管理后

2023-10-10 16:36:00 2278

原创 axios使用axiosSource.cancel取消请求后怎么恢复请求，axios取消请求和恢复请求实现

在前端做大文件分片上传，或者其它中断请求时，需要暂停或重新请求，比如这里大文件上传时，可能会需要暂停、继续上传，如下GIF演示：这里不详细说文件上传的处理和切片细节，后续有时间在出一篇，大文件上传，切片上传、断点续传、秒传等😀。不扯远了，紧接本篇主题😅。

2023-08-17 18:30:03 1901

原创 uniapp分享微信提示由于不支持的分享类型无法分享到微信，App分享为微信小程序方法,由于不支持的分享类型无法分享到微信,由于应用和小程序未绑定在同意微信开放平台账号，无法分享到微信.

在使用uniapp开发App分享微信，提示，就很苦恼，明明已经按照文档，该配置的都配置了，结果兴致勃勃的分享一下，结果提示一个这种错误，记录一下解决方案。管理中心小程序uni.share到这里就完成了~

2023-04-24 21:59:46 6462 2

原创 python以及PyCharm工具的环境安装与配置

python以及PyCharm工具的环境安装与配置，PyCharm设置中文

2023-04-16 13:08:09 359

原创 uni开发APP问题解决方案（持续更新）

iOS下拉刷新时顶部漂移，iOS登录时键盘顶部闪烁，iOS底部手势提示线适配，如果想去除IOS软键盘上方横条，在pages.json中某个页面或者全局配置 style，关键代码：softinputNavBar:none

2023-03-31 16:36:24 182

原创 eslint报错Component name “home“ should always be multi-word，文件命名规则导致问题解决方案

新建vue项目的时候，往往需要配置eslint进行代码的格式化，但使用过程中也是会遇到各种问题，就比如：Component name “Home” should always be multi-word.eslintvue/multi-word-component-names其实这是eslint对命名的校验，要以多词组件名称命名，防止与现有和未来的 HTML 元素发生冲突。

2023-02-12 22:15:57 14973

原创 git报错error: File: *** 115.44 MB, exceeds 100.00 MB.解决；git提交文件大于100M错误处理解决方案

在提交git push的时候出现error: File: 363c***062e 115.44 MB, exceeds 100.00 MB.删除commit中的大文件；意思就是`363cf***e062e`这个commit的文件超过的100MB，如何解决呢？

2023-01-10 18:29:03 641 2

原创安卓App生成签名证书，uniapp生成自有证书打包

uniapp安卓打包生成自有证书，签名。从HBuilderX3.2.0及以上版本开始支持服务器生成证书（推荐这种方法），服务器生成一键操作，比较简单。自己一步一步操作相对还是比较麻烦的。

2022-10-19 18:22:47 3738 4

原创 uni开发app获取应用缓存，获取应用版本号,禁止屏幕转动

有时候在使用app的时候，如果手机打开了自动旋转屏幕，转动手机就会出现自动横屏，导致界面样式和预期不一致。

2022-09-09 09:30:26 1402

原创原生js 或vue实现60分钟倒计时案例

使用场景类似于订单倒计时,或答题倒计时,代码如下在Vue中封装了如下的方法原生js 和上面相差不大,修改相应的参数

2022-06-09 10:45:29 757

原创 vue PC端下拉触底,请求分页数据

vuePC端下拉触底分页请求新数据,PC端网页下拉触底请求新数据,PC端分页请求在vue的生命周期中销毁移除添加的监听事件完成以上步骤就完成了触底分页请求!

2022-06-01 09:44:54 1383

原创 uni微信H5实现预览.pdf文件

用uniapp开发H5，客户需求需要直接预览.pdf文件，最开始想到了uni提供的方法uni.openDocument(OBJECT)但是仔细一看该方法不支持h5使用，果断就放弃了。又尝试使用iframe嵌套的形式，在电脑端运行的时候发现是可以使用的，但到了真机发现这种方法也是不行，都是直接跳转到了web浏览器进行下载。通过查阅，发现使用一个插件可以实现在线预览的效果，也就是本篇文章的主角pdf.js官方网站pdf.js: 点击查看.如下，官网也是非常简洁。可以点击download进行下载，这里

2022-03-29 22:31:42 4516 13

原创纯css实现多张图片或logo左右无间隙滚动，

主要使用css实现滚动，借助少量js实现无间隙滚动代码如下：<style>/* 在需要的父盒子添加使用滚动动画 */.box1{ width:90vh; height:100px; animation: move 20s linear infinite;}.box1{ width:90vh; height:100px; animation: move2 20s linear infinite;}/*图片元素向右滚动*/@keyframes move { 0%

2022-03-17 22:43:31 2732

原创自适应瀑布流布局，masonry.pkgd.min.js插件的使用

使用方式1.在页面底部引入 imagesloaded.pkgd.min.js2.同样引入masonry.pkgd.min.js点击下载使用的js文件直接上代码块<style>.grid { padding: 20px; }.grid__item{ margin-bottom: 20px; float: left; width: 220px; } .grid__item img { max-width: 100%}</style><d

2022-03-17 22:28:28 1258

原创 js实现数字滚动，插件jquery.counterup.min.js的使用方式

推荐一个常用的数字滚动动画插件，jquery.counterup.js 该插件可以控制动画的延迟时间和动画过渡时间。但它依赖于Waypoints.js插件来监听滚动事件。从而实现页面滚动到数字可视窗口，实现让数字从零到指定数值的滚动。使用方式首先引入jQuery.js引入 jquery.waypoints.js (点击下载)监听页面滚动事件引入jquery.counterup.js (点击下载)数字动画插件在需要的滚动的数字上添加class类名counter作为数字的容器在页面添加js代码

2022-03-17 21:49:24 3942 4

原创 uniapp小程序swiper 修改小圆点样式——uni-swiper-dot轮播图自动轮播及使用

1、使用uni-swiper-dot 轮播图指示点地址：插件地址.2、使用HBuilderX导入组件3、按照官方文档使用，4、文档中并没有说自动轮播，添加属性autoplay="true"就可以了。解决如下 <swiper class="swiper-box" @change="change" autoplay="true" >...

2021-11-14 17:59:49 4655

原创 node.js安装和vue全局安装教程

1、node.js安装1.1 在node.js 中文网，下载node.js安装包，官方中文网址. 如下界面按照自己的需求进行下载安装，这里我选择的是 Windows 64位 .msi安装包。2、下载完成之后，傻瓜式安装，一直点击next就可以了。配置淘宝镜像是我们下载更快，npm config set registry https://registry.npm.taobao.org// 查看是否配置成功npm config get registry3、全局安装vue-cli脚手

2021-11-13 16:40:20 2300

原创 uni小程序通过经纬度获取详细位置，将经纬度转换为城市序列码，uniapp lb-picker省市区级联的使用

文章目录一、背景二、准备实现2.1 第一个需求（获取经纬度）2.2 第二个需求（省市区级联）2.2.1 省市区级联插件（uniapp lb-picker选择器）2.2.2 省市区级联使用一、背景1、项目开发中有这么一个需求，用户刚进入页面，获取用户当前的位置，匹配最近的教师（和后端进行配合，传入经纬度就好）。2、同时要有关联省市区级联3、根据用户的位置，关联到省市区级联上二、准备注意：在做uni微信小程序定位时，需要先在 manifest.json中进行提前配置scope.userLocat

2021-10-30 21:19:37 3968

原创 jQuery学习详细使用篇day3

day03 - jQuery目标：能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery 对象的拷贝方法能够说出 jQuery 多库共存的2种方法能够使用 jQuery 插件1.1. jQuery 事件注册jQuery 为我们提供了方便的事件注册机制，是开发人员的福音，操作优缺点如下：优点: 操作简单，且不用担心事件覆盖等问题。缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑

2021-09-20 21:39:27 168

原创 jQuery学习详细使用篇day2

day02 - jQuery目标：能够操作 jQuery 属性能够操作 jQuery 元素能够操作 jQuery 元素尺寸、位置1.1. jQuery 属性操作 jQuery 常用属性操作有三种：prop() / attr() / data() ;1.1.1 元素固有属性值 prop()*** 所谓元素固有属性就是元素本身自带的属性，比如元素里面的 href ，比如元素里面的 type。语法注意：prop() 除了普通属性操作，更适合操作表单属性：disabl

2021-09-20 21:07:02 219

原创 jQuery使用详细使用篇day1

day01 - jQuery1.1. jQuery 介绍1.1.1 JavaScript 库 JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。简单理解：就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如 jQuery，就是为了快速方便的操作DOM，里面基

2021-09-20 20:51:12 193

原创一篇文章总结jQuery的使用

=day1=1、jQuery介绍理解：jQuery就是一个js文件，里面封装了原生的js代码，使用jQuery可以加快开发效率。2、jQuery基本使用(1)jQuery的入口函数jQuery有两种常见的入口函数：第一种：简单$(function (){代码体})//相当于DOM页面加载完成后，在执行代码体第二种：繁琐$(document).ready(function(){代码体})(2)jQuery对象和DOM对象转换***理解：因为原生js比jQuery更大

2021-09-20 19:21:09 201

原创使用js和css完成文本上下自动滚动效果

11-监控区域(monitor)-布局html结构：  <div class="monitor panel"> <div class="inner"> <div class="tabs"> <a href="javascript:;" class="active">故障设备监控</a> <a href="

2021-09-19 23:02:26 1086

原创 element-UI实现分页效果实现

分页效果分页官网分页结构size-change：每页显示条数改变事件current-change：当前页改变事件current-page：当前页，指定的值为queryInfo.pagenumpage-sizes：显示的可切换的每页条目数page-size：当前每页条目数，，指定的值为queryInfo.pagesizelayout：页面显示哪些功能total：总条目数：指定的值为totalpagesize改变事件 - 当前页..

2021-09-15 22:14:53 467

原创 vue-router实现首页路由的重定向效果

效果如下：需要在home界面的main区域显示一个welcome界面这里涉及到子组件welcome是home的子组件新建Welcome.vue组件：components目录下注册组件路由当访问home的时候，直接重定向到welcomewelcome组件占位将home中的main主体放置路由占位符问题：当访问/home的时候重定向到/welcome，那不是只显示个welcome文字？其实不是，因为welcome是home的子组件，所以即使重定向到welcome，..

2021-09-15 21:09:14 921

原创通过axios拦截器添加token验证,Vue添加全局请求头token

需求简介：有权限的数据，需要从后台获取，但是获取之前，我们先来处理一个逻辑除了登陆接口，其他的接口，在访问的时候，都需要传递一个授权的token那意思就是之后所有的请求，我们都需要添加一个请求头，这样太麻烦了能不能一次性添加？可以的通过请求拦截器拦截器介绍- 这个config对象中有请求头，通过headers获取具体如下添加axios.interceptors.request.use(config => {// console.log(config)c

2021-09-15 19:27:35 1368 1

原创 js模板引擎—art-template的使用

相关概念之前在渲染UI结构时候，拼接字符串是比较麻烦的，而且很容易出现问题模板引擎，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面好处减少了字符串的拼接操作使代码结构更清晰使代码更易于阅读与维护art-template模板引擎简介art-template 是一个简约，超快的模板引擎，中文官首页：点击前往.安装浏览器访问 http://aui.github.io/art-template/zh-cn/docs/installation.html找

2021-09-15 14:47:24 913

原创 jQuery的jQuery.ajaxPrefilter()处理统一请求根路径

介绍：jQuery.ajaxPrefilter()函数用于指定预先处理Ajax参数选项的回调函数。（可以理解为请求拦截器了，在请求前做一些事件处理）每次调用$.get() 或 $.post() 或 $.ajax() 的时候，会先调用ajaxPrefilter()这个函数在这个函数中，可以拿到我们给Ajax提供的配置对象$.ajaxPrefilter( function( options ) { console.log(options.url) // 获取出请求的地址 //发起真正的Aja

2021-09-15 10:22:27 1114

原创微信小程序实现下拉刷新和上拉触底，获取新数据

一、启用下拉刷新（两种方式）1、全局下拉刷新在app.json的window节点中，将enablePullDownRefresh设置为true2、局部下拉刷新在页面的json文件中，将enablePullDownRefresh设置为true二、配置下拉刷新在全局或页面的.json文件中，通过backgroundColor和backgroundTextStyle来配置下拉刷新窗口的样式，其中：backgroundColor：用来配置下拉刷新窗口的背景颜色，仅支持16进制的颜色值backgrou

2021-09-14 22:34:11 25494 4

原创路由前置守卫—访问权限处理—router.beforeEach()的介绍使用

1、先简单介绍一下beforeEach，它是Vue-router 的钩子函数，有三个参数,分别是：1.1）to:router 即将进入的路由对象1.2）from:当前导航即将离开的路由1.3）next:function,进行管道中的一个钩子，如果执行完了,则导航的状态就是 confirmed2、使用2.1）在router.js中定义使用，需要在路由的export default导出前进行使用。2.2）通过router.beforeEach((to, from, next) => {}) 代

2021-09-09 14:53:55 1342

原创 js高级—理解浅拷贝和深拷贝

1、浅拷贝只是拷贝一层，更深一层对象级别的值拷贝引用。也就是拷贝了内存地址。2、深拷贝拷贝多层，每一级别的数据都会拷贝。也就是会重新开辟一个新的空间进行存储，修改的话不会影响原数据。浅拷贝案例代码：//案例一只拷贝一层var obj = { id:1, name:'lisi'}var newObj={}//应用for in 遍历对象for(var k in obj){//k是属性名也就是id、name//obj[k]属性值得到的就是对象里面的1、lisi newObj[k]

2021-09-08 12:06:41 131

原创 uniapp开发h5、微信小程序—配置Vuex步骤方法

注：开发工具使用的是HBuilder X1、在项目根目录中创建 store 文件夹，专门用来存放 vuex 相关的模块2、在 store 目录上鼠标右键，选择新建 -> js文件，新建 store.js 文件3、在 store.js 中按照如下 4 个步骤初始化 Store 的实例对象：// 1. 导入 Vue 和 Vueximport Vue from 'vue'import Vuex from 'vuex'// 2. 将 Vuex 安装为 Vue 的插件Vue.use(Vue

2021-08-30 18:04:15 6941 1

原创微信小程序—实现搜索功能，搜索历史记录功能

本文主要基于微信小程序实现和uni-app实现搜索商品和历史记录的功能。不详细介绍，主看代码注释即可！！1、搜索组件页面代码块<template> <view>  <view class="search-box"> <uni-search-bar @input="input" :radius="100" cancelButton="none"></uni-search-ba

2021-08-29 22:25:20 3721 1

原创 Vue开发使用vue-print-nb插件实现页面打印功能

vue-print-nb插件的安装打开项目终端，运行如下代码进行插件的安装$ npm i vue-print-nbvue-print-nb插件的使用首先在文件中引入，注册该插件。注：可以在main.js中注册，也可以单独封装一个负责所有的全局自定义组件的文件//main.js 中使用import Print from 'vue-print-nb' //引入插件Vue.use(Print) // 注册打印组件或在scr/components/index.js进行注册// scr/comp

2021-08-04 18:32:26 1226

原创 VS Code插件Prettier - Code formatter格式化无效解决

在Vue代码格式插件文章配置好json文件后，保存后代码还是为进行自动格式化。可以在此的基础上添加代码。1、进入设置面板2、点击按钮打开json文件3、复制以下代码追加粘贴 "typescript.preferences.quoteStyle": "single", "editor.tabSize": 2, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },

2021-06-28 11:51:20 10988 1

原创 Vs Code中Vue代码格式插件，Vetur、ESLint 、Prettier - Code formatter的介绍使用及相关配置

文章目录一、插件的介绍与安装1、Vetur插件2、ESLint 插件3、Prettier - Code formatter插件二、相关文件配置总结前面主要先对插件进行介绍和如何安装，之后在进行文件的配置，悉知！！！一、插件的介绍与安装1、Vetur插件Vetur是一款Vue代码高亮显示的一款插件，在没有使用此插件前，以 .vue的文件名代码是没有颜色的！！！安装步骤：在扩展商店中搜索（ Vetur ）点击安装2、ESLint 插件ESLint插件主要用来检测代码的语法格式，以便我们

2021-06-28 11:33:04 16171 4