- 博客(33)
- 收藏
- 关注
RSS订阅原创 web前端性能优化方法
图像延迟加载是网页性能优化的常用方法，这是因为大多数网站包含多张图片，而图片文件通常是 HTML 页面中最大的占用空间的内容之一。图片延迟加载可以通过让网站仅在页面被滚动到图片显示位置上时，才加载这些图片来降低网页相关内容的加载速度。4.延迟加载：页面中某些元素（如图片、视频等）可能并不是页面首次加载时就必须显示的，因此可以将这些元素设置为延迟加载，等到用户快速滚动到它们附近时再加载这些元素。总之，通过以上的优化方法，可以减少页面加载时间、提高用户体验和优化页面性能，使页面更加高效和快速。
2023-05-20 12:11:08
327
原创 git常用命令
19. 从本地抓取代码到本地项目并且合并代码。18. 在本地拉取最新代码，而不是全部克隆。3. 把本地代码提交到你自己的远程仓库。git commit -m ''提交说明信息"14.创建分支并切换到当前分支。2.拷贝远程仓库代码到本地仓库。10.查看当前工作目录状态。9.查看之前所有操作记录。15.查看分支有哪些文件。4. 提交代码到暂存区。5.提交代码到本地仓库。6.查看提交历史记录。7.查看提交历史记录。
2023-04-26 15:37:54
281
原创 uniapp app安卓系统真机调试
选择连接你手机的USB接口单击右键>属性>电源管理>取消允许计算关闭此设备以节省电源。选择浏览>找到你电脑上的adb.exe文件添加路径进来，选中真机运行时打开调试视图。（2）在uniapp上选择运行>运行到手机或模拟器>Android模拟器端口号设置。（3）如果尝试上面两个方法都不行，可以关闭uniapp，然后 断掉手机与点奥连接。（1）打开我的电脑。然后重新连接手机与电脑，再打开uniapp重新上面的第二步和第三步的步骤执行。2.找到手机设备，如 上面第三步一样，但是点击运行后同步资源失败。
2023-04-25 22:25:00
7010
原创 使用websocket书写即时通讯功能
5. 在浏览器运行index.html文件，输入内容点击发送按钮即可实现即时通讯功能。2.在客户端上创建websocket链接（文件名称：websocket.js）注意：要使用websocket创建即时通讯，要先安装websocket。3. 创建发送消息事件（文件名称：index.html）在不同浏览器上打开多个窗口，都可以实现接收另一端发送的消息。4.运行websocket服务器（在终端运行）
2023-04-16 14:33:24
113
原创 http网络协议知识总结
TCP和HTTP是两个不同的协议，TCP是传输层协议，HTTP是应用层协议。HTTP协议和TCP协议是一对多的关系，即一个HTTP连接只对应一个TCP连接，但一个TCP连接可以对应多个HTTP连接。HTTP/3是HTTP协议的最新版本，它是基于HTTP/2的优点进行改进的。HTTP/3使用了更加安全的加密算法，使用QUIC协议的多路复用技术和头部压缩技术，这些都是HTTP/2的优点。HTTP/2是第二个主要版本的HTTP协议，它改进了HTTP/1.x的性能，可以提高网站性能和用户体验。
2023-04-15 18:18:55
133
原创 总结面试题
Generator 函数是 ES6 提供的一种异步编程解决方案，Generator 函数是一个状态机，封装了多个内部状态，可暂停函数, yield可暂停，next方法可启动，每次返回的是yield后的表达式结果。发布/订阅，性质与“事件监听类似”，但是明显优于后者，因为我们可以通过查看”消息中心“，了解存在多少信号，多少个订阅者，从而监听程序的运行。bind在改变this指向的时候，返回一个改变执行上下文的函数，不会立即执行函数，但是call和apply在改变this指向的同时执行了该函数。
2022-10-31 11:01:06
138
原创 vue在线预览各类型文件
此文章是在vue-admin-template后台上做的功能1.新建组件previewFile => index.vue<template> <div :class="['dialog-box',isCollapse?'analysis-dialog':'analysis']"> <el-dialog :title="`${file.title}文件预览`" :visible.sync="file.dialogVisible"
2022-05-26 14:28:32
9295
15
原创 封装一个类，下载图片、【复制文本和复制图片到粘贴板上，分享到微信、QQ好友】等多功能
navigator.clipboard复制图片到粘贴板，实现复制图片进行到微信、QQ上粘贴分享给好友
2022-05-24 11:05:02
1517
原创 选择城市，按城市的首字母进行排序
1.新建父组件choiceCity.vue<template> <view class="choiceCity"> <view class="nav-top"> <view class="searchBox"> <u-icon name="search" size="35" color="#888"></u-icon> <input class="searchInput" type="text"
2022-01-04 11:32:49
15741
2
原创 vue input输入框防抖debounce函数的使用
方法一：这种方式很简单，但是能实现一样的功能。<template> <div> <input class="inputBox" type="text" placeholder="搜索项目名称" v-model="searchValue" @keyup.enter="searchBtn" @input="searchBtn"> </div></template><script>let t
2021-12-27 17:32:44
6368
3
原创 uniapp APP分享功能
这次笔记只有逻辑代码：<script> const DETAIL_PAGE_PATH = '/pages/template/list2detail-detail/list2detail-detail'; function _handleShareChannels(provider) { let channels = []; for (let i = 0, len = provider.length; i < len; i++) { switch (pro
2021-12-10 11:55:02
1305
原创 uniapp表单验证方法封装
本次代码完全是uniapp官方源码，写在这里是记录笔记，如果想看源码，可以打开uniapp软件新建项目，选择uniapp官方项目案例即可。本次目的是学习代码规范，因为觉得自己写的代码太臃肿，后期维护太难。1.在根目录新建文件common,在文件里面新建一个js文件，名称随意。//graceChecker.js/**数据验证（表单验证）来自 grace.hcoder.net 作者 hcoder 深海*/export default { error:'', check : fu
2021-12-10 11:10:30
2330
原创 使用uni.getSystemInfo获取手机信息，设置动态导航栏+状态栏的高度。
onLoad(){ //获取状态栏+导航栏的高度 let _that = this; uni.getSystemInfo({ success(e) { if(e.platform == "ios"){ _that.statusBarHeight = e.statusBarHeight + 45; }else{ _that.statusBarHeight = e.statusBarHeight + 50; } } })}注意：微信小程序的e.pl.
2021-11-27 16:51:19
3515
原创 使用uniapp的WebSocket建立聊天框
在APP.vue文件<script> export default { globalData:{ connectUrl:"ws://*******************.com:8282",//url }, onLaunch: function() { this.createConnect(); }, onShow: function() { console.log('App Show') }, onHide: function() {
2021-11-12 22:16:51
4036
原创 定义全局过滤器-时间格式
1.在main.js文件import Vue from 'vue'import App from './App'Vue.config.productionTip = falseApp.mpType = 'app'const app = new Vue({ ...App})//格式化时间1Vue.filter('format', function(originVal) { const dt = new Date(originVal) const y = dt.getF
2021-11-12 14:39:10
99
原创 使用uni.chooseLocation获取并选择附近的地址
<view class="ReleaseItem"> <view class="ReleaseName">地址</view> <view class="salaryBox" @click="choiceAddress"> <view class="salary">{{region?region:"请选择"}}</view> <u-icon name="arrow-right" color="#999"><.
2021-11-02 10:28:00
4703
原创 uniapp h5微信授权登录
直接上代码：<view class="IconBox"> <view class="tips">——第三方登录——</view> <view class="IconItemBox"> <view class="IconItem" @click="weixinLogin"> <u-icon name="weixin-fill" size="45" color="#07C160"></u-icon&g
2021-10-28 17:55:58
900
原创 css transition下拉动画效果实现
解决问题：这个功能一般都在官网头部导航栏上看到的效果，鼠标放上去就下拉，鼠标离开就收缩。唯一难点就是下拉的高度随内容变化，而不是固定的，下面就是解决方法。代码如下：<template> <div class="test"> <div class="nav"> <div class="mian_nav"> <div class="logoIcon"> <img src
2021-10-23 17:26:41
2312
原创 var、let和const的区别
1.共同点：var/let/const共同点是全局作用域中定义的变量，可以在函数中使用2.不同点：使用 var 可能造成不小心定义了同名变量，var可以重复定义变量。而let和const都不可以重复申明变量，不过不同作用域可以重新声明。let和const全局声明的变量不存在于window对象中，这与var声明不同。let可以改变值，这是与const不同点，但是const申明的引用类型可以改变值。let price = 90;price = 88;console.l...
2021-10-21 01:11:02
204
原创 vue项目滚动文字通知
1.特别说明：此项目适合vue开发的pc端用户，如果是用vue开发的移动端项目，可能会很麻烦。因vue开发的移动端需要转px为rem，这里需要用到行内样式变量，除非你可以将行内样式的px转化为rem，不然手机不适配屏幕。2.直接代码拿走：<div class="noticeBox" > <div class="notice-main"> <div class="notice-title"> <sp
2021-10-15 12:12:06
1156
原创 vue项目导航连续点击会报错
解决方法：1.在路由文件index.js{ path: '/ProductIntroduction', name: 'ProductIntroduction', component: function(){ return import('../views/ProductIntroduction.vue').catch(err => err) }, },添加catch(err => err)即可。2.同样在路由文件index.js
2021-10-08 12:16:24
145
原创 使用Vue.observable()进行状态管理
随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍的是 vue.js 2.6 新增加的 Observable API ，通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。...
2021-09-29 18:22:36
150
原创 css3动画+swiper轮播图做一个随轮播图切换，内容从两边动画进来的效果。
如图中的效果：下面是这个过程的步骤：1.swiper安装使用npm install swiper@3 --save-dev2、main.js引入import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'//这里引入swiper样式import 'swiper/dist/css/swiper.min.css'Vue.config.p
2021-09-26 20:18:45
911
原创 用uniapp开发H5，学到一个新的知识，操作上一页数据
最近用uniapp开发H5，学到一个新的知识，操作上一页数据…比如：选择地址。1.在StoreManagement页面data() { return { Address:"",//地址 //obj:{} }},//跳转选择地址页面toStoreAddress(){ uni.navigateTo({ url:"../StoreAddress/StoreAddress" })},2.在选择地址StoreAddress页面//返回上一页按钮preservationBtn(
2021-09-17 21:40:23
293
原创 uniapp H5 getLocation获取当前城市位置
今天用uniapp的uni.getLocation获取位置，但是获取的是当前的经纬度，而不是当前的城市，那怎么办？在线问一下度娘，也绕路很多弯路，最后成功解决了这个问题。第一步：安装vue-jsonp，它可以解决跨域问题，还可以将经纬度解析为城市下面是安装命令npm install –save vue-jsonp然后在main.js引入这个import {VueJsonp} from 'vue-jsonp';Vue.use(VueJsonp);引入之后在需要获取位置的页面写入如下代码u
2021-09-07 14:40:36
4298
10
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人