- 博客(16)
- 收藏
- 关注
RSS订阅原创 使用pdf.js在Vue、React中预览Pdf文件,支持PC端、移动端
PDF链接要渲染在页面上，pc端浏览器是可以直接显示PDF的，但是移动端浏览器、微信浏览器等不支持直接预览，打开以后会触发下载机制，通过尝试，最终选择了使用pdf.js。
2024-07-03 14:20:46
1624
4
原创 使用Mac电脑反编译微信小程序 （无需移动端模拟器）
以往反编译小程序源码都是要从移动端获取，现在pc端（mac和win）都支持了小程序，从pc端获取显然是更方便的，由于本人使用的的macbook，本篇文章将会讨论如何从mac端获取小程序源码。
2023-11-03 16:35:47
4027
1
原创 Websocket心跳检测、重连机制
为了获取实时数据，前端需要和后端保持通信，HTTP 协议只能是客户端向服务器发出请求，服务器返回查询结果。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。一般通过以下几种方式实现即时通讯。即时通讯：短轮询、长链接、长轮询、websocket短轮询的原理很简单，每隔一段时间客户端就发出一个请求，去获取服务器最新的数据， 一定程度上模拟实现了即时通讯。优点：兼容性强，实现非常简单缺点：延
2022-03-09 13:47:39
10844
原创 vue项目进行前端埋点，记录页面停留时间
数据埋点在现在的项目开发中都是不较比常见的，尤其是在电商公司，数据的统计分析尤为重要，通过数据分析可以提升用户的购买体验，方便运营和产品调整销售策略等等。埋点就是网站分析的一种常用的数据采集方法。目前主流埋点方案代码埋点可视化埋点无埋点注：关于埋点方式的详细介绍可以看我的另外一篇文章： 常见的数据埋点方式介绍本文主要介绍了代码埋点的方案代码埋点分为 命令式埋点 、声明式埋点一、命令式埋点命令式埋点，顾名思义，开发者需要手动在需要埋点的节点处进行埋点。如点击按钮或链接后的回调函数、页.
2022-01-17 14:47:30
5832
2
原创 常见的数据埋点方式介绍
首先我们要先了解数据埋点，到底有什么用处？1、对设计师而言根据埋点统计出页面元素的点击，页面按钮的点击转化，有助于在后续中作进一步视觉调优。2、对产品/运营/推广而言可作为产品/运营/推广当次产品功能/运营活动/渠道推广的部分效果评估指标；也可作为其下次产品/运营/推广需求的数据支撑。3、对整体项目而言将适量的数据，同步给项目组内的其他成员，能适当提高团队的荣誉感（数据表现好时）、危机感（数据表现差时）。常见的数据埋点方式有以下三种：代码埋点全埋点可视化埋点一、代码埋点
2022-01-17 14:03:07
5830
1
原创 vue自定义音频audio样式及操作面板
简介由于audio标签原生样式不能满足项目需要，需要自定义样式，项目使用技术为vue，主要进行了以下修改：1、隐藏原生audio标签2、通过div实现自定义样式3、控制div操作audio 对象的属性和方法audio原生样式⬇⬇⬇自定义audio样式⬇⬇⬇...
2022-01-11 13:24:00
18937
7
原创 基于element封装table、分页
在利用element-ui Table编写项目时,会存在表格展示的数据存在分页的情况,基本每个页面都要配置，很影响开发效率，也不利于后期维护，所以统一封装一下，便于开发使用。How to Use:在src/components目录中创建base-table，引用到自己的页面中，可以根据自己的需求自由更改。base-table组件封装<template> <div class="base-table bg-white"> <!-- 表格上方操作栏 ，
2021-11-05 14:19:52
1494
原创 vue实现一键复制
在个人项目中为了更好的完善体验，需要有一个一键复制的功能复制，主要的实现方法有以下几个：不使用插件使用input配合document.execComman方法可以实现；这个特性已经过时了，它在一些浏览器中仍然可以工作，但不鼓励使用它，因为它可能随时被删除。尽量避免使用它// 复制input标签中的内容<template> <div id="app"> 输入你需要复制的内容：<input id="copy" v-model="mes"/>
2021-10-25 15:29:52
1820
原创 基于vue的图片剪裁工具vue-croppe
基于vue的图片剪裁工具vue-croppe安装// npm安装npm install --save vue-croppa// yarn 安装yarn add vue-croppa使用引入插件两种引用方式// 全局注册 main.jsimport VueCropper from 'vue-cropper'Vue.use(VueCropper) // 组件内单独使用 userAvatar.vueimport { VueCropper } from 'vue-cropper'
2021-09-29 14:32:00
1530
1
原创 react监听页面滚动事件：window.addEventListener的scroll无效
react监听页面滚动事件：window.addEventListener的scroll无效在react项目中需要通过监听页面滚动高度，控制页面样式动态展示，所以在网上找了以后其他案例发现监听无效，代码如下：//在componentDidMount，进行scroll事件的注册，绑定一个函数，让这个函数进行监听处理 componentDidMount() { window.addEventListener('scroll', this.handleScroll); }//在componentWil
2021-09-22 13:41:49
10658
1
原创 nodejs+nginx获取真实ip,解决获取ip为127.0.0.1的问题
nodejs+nginx获取真实ip,解决获取ip为127.0.0.1的问题访问互联网上的服务时，大多数时，客户端并不是直接访问到服务端的，而是客户端首先请求到反向代理，反向代理再转发到服务端实现服务访问，通过反向代理实现路由/负载均衡等策略。这样在服务端拿到的客户端IP将是反向代理IP，而不是真实客户端IP。我的项目服务器是使用nginx做代理，由于nginx反向代理的问题，所以导致获取出来的ip都是::ffff:127.0.0.1配置Nginxlocation / { proxy_set_he
2021-09-18 19:11:55
2178
原创 uni-app实现列表的上拉加载，下拉刷新、回到顶部功能
在使用uni-app做app和小程序时，经常会遇到一些列表，这个时候就需要列表能够实现上拉加载更多、下拉刷新的功能，具体效果如下： 此功能比较简单，就不过多介绍了直上代码：HTML部分// 活动列表 <view class="activityList"> // 每一项活动（可替换） <view class="activityItem" v-for="(item,index) in activeList" :key='index'> <view clas
2020-07-03 11:07:26
4312
3
原创 Vue a标签实现点击下载，下载图片、txt文件，不是直接打开的方式
前段时间在项目中遇到文件需要下载，直接拿出了之前封装的下载指令，在用的时候发现在下载jpg、txt文件时，并不会直接下载，而是会在浏览器中打开文件，即使给a标签添加了download属性，也无济于事。我先把之前封装的指令贴出来吧，如果下载文件类型只是Exact、Word、Pdf格式的可以直接拿着用，如果有其他文件类型需求的，可以继续往文章下面看支持Exact、Word、Pdf格式下载l...
2020-04-27 11:51:56
14281
11
原创 Vue项目导出功能、带token导出Excel
在vue后台管理项目中，目前我常用的就两种导出方式一种是不需要携带token的，直接调用后台的接口，携带需要传递参数就行，具体实现代码如下：在main.js封装指令let baseDownloadUrl = 'http://xxxxxxx:8080' // 域名const PATH = { userList：'vue/export/userList' // 后台接口地址}//...
2020-04-27 10:55:13
3452
原创 微信小程序自定义封装顶部导航栏
微信小程序自定义封装顶部导航栏（自定义返回界面、动态设置标题）微信小程序官方的navigationBar只能设置颜色，字体大小，但是实际开发中多层页面嵌套则需要我们有返回上一级页面或者返回指定页面的功能，这个时候官方提供的就不能满足我们的需求了，但是官方也为我们提供了解决的方法NavigationNavigation是小程序的顶部导航组件，当页面配置navigationStyle设置为cu...
2019-11-20 13:55:25
4606
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人