- 博客(79)
- 收藏
- 关注
RSS订阅
原创 关于前端代码埋点数据上报的实现
前提最近项目有需求，需要对一个小程序以及官网项目就行数据埋点上报，但是又不让使用第三方的SDK，要自己封装，哎，难搞，没办法，就各种抠脑壳查资料，在这做个笔记，总结一下什么是数据埋点，有什么用个人理解就是对网站，项目进行业务数据，用户行为数据及其他实际需要的数据进行采集上报，是了解用户行为，分析用户行为，提高用户体验的一种方式，通过这些采集来的数据就可以进行分析，知道用户来源，访问量，点击量，停留时长等数据，将用户使用产品的行为进行可视化，对产品进行优化调整，常见的解决方案有三种，代码埋点、可视化埋
2020-12-16 16:25:04
4074
3
原创 前端开发中的长列表优化
众所周知，浏览器在渲染dom节点的时候，节点越复杂数量越多那么所消耗的时间就会越长。当业务需求为一次性要渲染大量的数据时，数据量过大且一次性全部渲染出来的时候会使浏览器卡顿或者卡死。一般情况下，列表形式的数据展示形式是最常见的，大部分情况下，常见的方式时普通分页加载和无限滚动加载，普通分页加载在这里就不说了大部分后台管理都采用这个方式，无限滚动则是根据鼠标滚动触底时加载下一页数据，实现的思路大致是监听父元素的 scroll 事件（一般是 window），通过父元素的 scrollTop 判断是否到了页面是.
2020-12-15 14:06:00
3058
原创 直播评论滚动到上面渐隐特效
大家都在看直播的时候看那个评论区评论，到顶部的时候会渐隐消失（如下图），现在小程序或者H5做直播或者视频播放的时候，也要实现该功能，那怎么实现呢，主要用了mask ，-webkit-mask-image这个css属性。下面写了个小demo，供大家参考，如果是小程序端 那自行替换标签，使用cover-view。评论区文字滚动当成轮播就行了，列子中视频地址自己更换成自己的（自己拿手机拍个视频放自己电脑上就行了）<!doctype html><html lang="en"><
2020-11-09 11:34:18
2075
原创 谷歌浏览器接口请求cookie突然无法携带的问题
最近突然遇到一个奇怪的事情，公司的一个后台项目，突然在自己浏览器上无法登陆，查看接口发现是接口没有携带cookie，但是换个浏览器就可以，比如火狐，别人的电脑在谷歌上却能登陆，这个问题可把我搞蒙了，找了一圈资料，终于发现一篇有用的。首先如果你用axios，那么先设置withCredentials为true，然后打开谷歌浏览器在Chrome中访问chrome://flags/，搜索SameSite并设置为disabled即可。原因是Chrome升级到80版本之后cookie的SameSite属性默认值由
2020-07-31 16:26:30
7690
11
原创 小程序关于获取位置信息，周边信息，搜索获取信息的demo
最近做了一个关于小程序定位的demo，主要实现的功能是获取用户当前位置信息，还有当前位置周边的位置信息，以及切换城市，搜索当前城市地标的功能，大概步骤为借助了腾讯地图的SKD，要使用它需要申请key，具体方法文档上写的很清楚在项目中引入下载好的SDK文件，然后new个实例出来，然后参考官方文档进行调取方法就可以了实现了一个小demo，是用uniapp写的。地址在我的git上。可以去看下https://github.com/Miaodashu/localtionDemo.git...
2020-07-14 15:41:43
637
原创 Vue-CLI配置多环境打包
vue-cli2.0版本我们在先在package.json在新增自定义打包命令，名字可以随意起。 "scripts": { "dev": "webpack-dev-server --inline --progress --host 0.0.0.0 --config build/webpack.dev.conf.js", "start": "npm run dev", "build:test": "node build/build-test.js", // 这是我定义的测试环境
2020-07-10 12:24:49
951
原创 涉及到英文文本换行问题
在项目中，把div设置了固定的width和height，有时会出现文字不能自动换行的情况，仔细查看就会发现如果是中文就会自动换行，如果是英文就不会，主要原因是因为英文文本之间没有加空格，浏览器会认为这是一个特别长的单词；解决方法.wrap { width:100px; height:100px; word-wrap:break-word; word-break:break-all;}...
2020-06-24 09:42:07
835
原创 使用vue开发的一些小技巧和注意事项
写这个呢是为了做个笔记，主要记录日常工作中遇到的一些问题和知识点。scoped属性在组件的style标签大家经常会注意到scoped属性，这个属性的作用主要是 使css只作用于当前组件中的元素。实现原理就是给当前页面元素加上唯一的自定义属性：data-v-唯一的属性，大家自己打开浏览器检查样式就会发现什么情况了。在项目开发中经常会覆盖使用的UI库组件样式，最好加个外层标签，防止样式污染，如下 /* 一般借助深度作用选择器 >>> */ div >>
2020-06-09 17:04:14
379
原创 vue启动项目的时候，报错‘cannot find module node-sass’,解决方案
在vue项目中，有时启动项目会发现报‘cannot find module node-sass’这个错误，解决方案如下执行cnpm install node-sass@latest即可解决，如果在执行cnpm的提示说cnpm不是内部命令也不是外部命令时，可参考这位老哥的方法，（比较粗暴）博客名称叫Erorrs...
2020-05-08 15:10:08
1348
原创 vue-cli3 配置生产环境清除console.log()
首先，先下载依赖npm i uglifyjs-webpack-plugin@1.1.1 --save-dev然后在vue.config.js文件里面进行如下配置const UglifyJsPlugin = require("uglifyjs-webpack-plugin")module.exports = { publicPath: BASE_URL, css: { // 配置css...
2020-04-02 17:04:34
1218
原创 格式化传给iview的级联选择器的数据格式
####在 iview-ui中，级联选择器的数据格式是他们限制死的，但是后台伙伴传给我们的数据格式跟要求的格式不一致，只能自己动手去遍历重构数据了，方法如下// 定义的map为后台返给自己的数据key值，res.data为后台返回的数据，按照下面格式，调用格式化数据的方法 const map = { label: "newsCategoryName", ...
2019-12-11 15:23:18
615
原创 iwew的Switch组件不显示问题
有些小伙伴使用ivew-ui， 在页面使用Switch组件时发现不显示，主要是没有配置 iview-loader， 具体配置请看我的这篇博客，方法二就是配置方法，https://blog.csdn.net/weixin_43990297/article/details/103404126...
2019-12-05 14:55:01
928
原创 给element-ui和ivew-ui的组件中的change事件传自定义参数
给element-ui和ivew-ui的组件中的change事件传自定义参数主要将方法再进行包装， 在组件的方法中 通过箭头函数将默认值传给函数内的方法，以下是ivew开关组件的，其他地方也适用 <Switch v-model="row.state" @on-change="((val)=>{handleSwitch(val,row)})"/>...
2019-12-05 14:51:14
230
原创 vue-cli3 配置loader
vue-cli3 vue.config.js中如何配置loader该配置方法可以配置多个loader， 代码如下方法一module.exports = { chainWebpack: config => { config.module .rule('expose1') .test(require.resolve('jquery')) ...
2019-12-05 14:45:29
10556
原创 element-ui+vue-treeselect下拉框的校验
element-ui+vue-treeselect下拉框的校验(ivew也适用)在项目开发中 使用了vue-treeselect的话，使用element-ui或者ivew自带的表单校验发现，trigger中blur和change均不生效，在选择了值之后验证依然存在，解决方法主要是使用vue-treeselect官网中api给出的事件中的input，在value改变后触发，将trigger设为b...
2019-12-04 10:20:49
4465
4
原创 js 活动倒计时
最近在项目中需要写活动倒计时，就在这记录一下，比较基础 ，还能继续优化封装 <span id="_d">00</span> <span id="_h">00</span> <span id="_m">00</span> ...
2019-11-26 09:09:37
297
原创 城市选择json数据
ELEment上的城市JSON数据http://shamoyuu.bj.bcebos.com/DontDelete/citys.json数据来源：https://www.cnblogs.com/shamoyuu/p/element_cascader.html
2019-11-12 13:50:21
911
原创 Nuxt.js 页面跳转后不会滚动至顶部，以及路由守卫应用
在做项目的过程中，遇到页面切换后不会滚动到顶部解决方案：在页面使用的layout中或者页面中，使用监听watch: { '$route': function(to,from){ document.body.scrollTop = 0 document.documentElement.scrollTop = 0 this.$refs.scrol...
2019-11-10 15:43:10
6618
5
原创 判断H5页面环境是否在小程序的webview中
用小程序提供的wx.miniProgram.getEnv可以获取环境参数，但是它有个问题就是无法在非微信环境下判断。所以在使用wx.miniProgram.getEnv前得先判断是否在微信环境中。<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></scri...
2019-11-10 09:41:49
1240
原创 项目开发中常见兼容问题
1. button标签里面包裹a标签，在IE浏览器上会出现兼容问题问题描述： a标签会被隐藏不显示解决方案:将button标签直接替换成a标签，不要包裹了在button标签上用onClick事件来进行页面跳转<button οnclick="window.location.href('/jsp/manage/manage-context.jsp')" ></button...
2019-11-06 18:56:01
604
原创 文本溢出省略号方案
第一种，单行文本溢出变成省略号单行文本溢出变成省略号，css控制，核心代码:overflow: hidden；（文字长度超出限定宽度，则隐藏超出的内容）white-space: nowrap；（设置文字在一行显示，不能换行）text-overflow: ellipsis；（规定当文本溢出时，显示省略符号来代表被修剪的文本）优点兼容好省略号出现的位置合适超出范围才会出现省略号...
2019-11-06 13:29:38
376
原创 移动端项目在nuxt中使用rem.js
移动端项目在nuxt中使用rem.js把近期项目中的nuxt配置rem.js分享下，配置后可以在项目中使用rem的单位以下是我用的rem.js的内容如果在项目中使用less或sass变量全局注入，不用单独引入的就配置如下把近期项目中的nuxt配置rem.js分享下，配置后可以在项目中使用rem的单位在nuxt.config.js中的head 配置项中配置， 将rem.js放在static目录...
2019-10-21 14:07:54
3328
2
原创 vue项目中配置LESS全局变量注入
vue项目中配置全局变量注入在日常项目中，很多人都用到了css预处理器 ，如sass，less， stylus，处理样式非常方便，尤其是嵌套，变量，函数等，让我们书写css非常nice，在项目中一般会建立一个样式文件夹（此处用less），存放公共样式和公共变量如项目主体色，字体大小等等的变量，但是在项目中使用这些变量的时候通常都要在style标签内用@import '***/***/***/*...
2019-06-27 10:42:21
3532
4
原创 多行文字超出部分显示省略号，以及在VUE项目中打包后失效问题
多行文字超出部分显示省略号，以及在VUE项目中打包后失效问题多行超出隐藏div {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}这样在平时的项目使用是没有问题的，但是在vue项目中，一打包上线就会...
2019-06-27 09:53:31
1454
原创 npm的organizations
npm的organizations大家在自己写一些库或者日常开发的时候都会发现很多的包名称是如下的"devDependencies": { "@babel/helper-compilation-targets": "^7.15.4", "@vue/cli-plugin-babel": "^4.1.0", "@vue/cli-plugin-eslint": "^4.1.0", "@vue/cli-service": "^4.1.0" }他们的结构为: @your_o
2022-01-07 10:58:19
1932
原创 npm link npm unlink usr/bin/node usr/bin/env node
npm link:npm link you-lib : 将当前项目中node_modules下指定的库文件连接到node全局node_modules下的库文件npm link: 将当前项目连接到node全局node_modules中作为一个库文件，并解析bin文件配置创建可执行文件npm unlink将当前项目从node全局node_modules中一处#!/usr/bin/node#!/usr/bin/env node第一种是直接执行/usr/bin/目录下面的node第二种事在环境变
2022-01-05 19:58:46
1116
原创 package.json中^符号和~符号前缀的区别以及如何锁定版本号
package.json中^符号和~符号前缀的区别node的各种包都有版本控制，迭代都非常快，版本号经常由三个数字来表示迭代，比如 "vue": "^2.6.10", "vuedraggable": "^2.24.1", "vuex": "^3.1.1", "webpack-merge": "~4.2.2"对应上面的版本号以 x.y.z ：为例子z ：表示一些小的bugfix, 更改z的号，y ：表示一些大的版本更改，比如一些API的变化x ：表示一些设计的变动及模块的重构之
2022-01-05 10:03:17
6427
原创 webpack一些理解
webpack它是一个静态模块打包器，当webpack处理应用程序的时候，它会递归的构建应用中的各个模块的依赖关系，形成一个依赖关系图，然后将所有模块打包成一个或多个bundle它会根据主入口配置，从主入口出发，识别代码中所有的导入语句，递归的找出所有依赖，将入口和其依赖打包到一个单独的文件中 默认支持js、json文件， 支持COMMON esmodel AMD等模块类型核心概念chunk代码块，一个chunk可能由多个模块组成，可以理解为主入口文件，其他依赖资源为modulebundl
2021-06-17 16:35:09
169
1
原创 关于前端项目开发中的样式穿透问题 ＜＜＜ /deep/ ::v-deep
以前在项目开发中，如果使用了第三方UI库，要覆盖样式，通常使用<<< 深度选择器来进行样式穿透比如<style scoped>.a >>> .b { /* ... */ }</style>但是如果项目中使用scss,less等预处理器却无法解析>>>，所以我们使用下面的方式.<style lang="scss" scoped>.a{ /deep/ .b { /* ... */ }}
2021-05-13 13:33:44
689
原创 在微信环境内打开H5，接口的HTTP的status状态为0
故事前景今天项目开发中遇到了一个问题，有个功能页面是H5页面，在正式环境中，用ios手机打开正常，在安卓手机使用微信却打不开 ，但是复制地址，在浏览器内又能打开，在测试环境中，ios和安卓又都可以。这一下子把我搞蒙了。排查问题跟项目经理确认后，增加生产环境的调试工具，发现在安卓机的微信环境打开h5页面，axios请求返回的http的status为0.没有正常响应。然后测试环境和正式环境的接口区别就是正式环境用了安全证书。其余东西都一样。推测是安全证书引起的问题确认问题跟后台以及运维了解，正式环境使
2021-04-12 17:33:42
3613
原创 iOS safari 阻止“橡皮筋效果”
window.onload = function(){ var stopScrolling = function(event) { event.preventDefault(); } document.addEventListener('touchstart', stopScrolling, {passive: false}); document.addEventListener('touchmove', stopScrolling, {pas
2021-04-07 10:50:09
565
原创 Ant 表格组件 dataSource不带key 引发的报错
按照 React 的规范，所有的数组组件必须绑定 key。在 Table 中，dataSource 和 columns 里的数据值都需要指定 key 值。对于 dataSource 默认将每列数据的 key 属性作为唯一的标识。如果 dataSource[i].key 没有提供，使用 rowKey 来指定 dataSource 的主键，如下所示。若没有指定，控制台会出现以上的提示，表格组件也会出现各类奇怪的错误。// 比如你的数据主键是 uidreturn <Table rowKey="u.
2021-03-19 17:01:32
1095
原创 关于antd升级为4.0 不再内置icon组件， 循环渲染动态icon的解决方案
从 4.0 开始，antd 不再内置 Icon 组件，请使用独立的包 @ant-design/icons。在项目开发中，经常会有需求是通过数据循环渲染出动态icon，比如后台项目的侧边栏等，如果你是4.0以前版本的，就不用看了， 此处只针对4.0版本的antd写一个方法，用来生成不同的iconimport * as Icons from "@ant-design/icons";const renderIcon = (iconName) => { return React.create.
2021-03-17 13:56:08
1975
原创 react项目开发中遇到的一些报错，（less-loader安装报错，图片路径显示异常等）
在此对项目开发中遇到的一些报错处理放在这里记录一下安装 less-loader 遇到的报错在进行 react 项目开发的时候，出现了这个错误，TypeError: this.getOptions is not a function这个实际上就是 less-loader 的版本过高，不兼容 getOptions 函数方法，所以需要对 less-loader 进行降级处理问题的解决：通过 npm uninstall less-loader 命令卸载原版本的 less-loader，然后 通过
2021-03-17 13:51:15
662
原创 react项目配置（less配置，别名配置，antd配置，跨域代理，压缩资源配置等）
在react脚手架中修改配置有两种方式使用npm eject 命令 将配置弹出来（不推荐，不优雅）使用customize-cra 来新增一个config-overrides.js文件 来进行项目配置接下来，主要使用第二种方式把一些项目开发中常见配置给记录一下首先 先安装 必要的两个依赖yarn add custom-cra react-app-rewired -dev 然后，修改package.json的配置"scripts": { "start": "react-app-r
2021-03-17 13:42:13
647
原创 react（关于装饰器的配置）
在react中，大家有的使用装饰器，比如路由，或者mobx等，但是会发现默认脚手架不支持，接下来就说一下怎么配置，网上大部分都是使用npm eject来弹出脚手架的默认配置，但这样并不优雅，社区提供了其他方案来解决修改配置的方式首先安装，以下几个依赖 customize-cra react-app-rewired @babel/plugin-proposal-decoratorsyarn add customize-cra react-app-rewired @babel/plugin-p
2021-03-17 13:23:41
314
2
原创 记录一次开发可视化表单拖拽生成工具开发完的收获新得
最近因为公司有需求，正好把老早就感兴趣的可视化表单生成工具给研究了一番，现在记录下心得体会。当时第一次看到这种拖拽生成表单或者页面的工具，就觉得很神奇，不知原理为何，后来查阅了一些资料和参考了一些开源项目，通过拆轮子搞懂了原理，解决了 自己的疑惑，在这里不将很详细的实现步骤，就记录下概要，自己在这个过程中的收获。https://github.com/Miaodashu/form_build.git一、 核心拖拽功能怎么实现的1. 使用原生的`HTML draggable` 属性，开启标签的`drag
2021-02-02 17:39:47
1269
5
转载 移动端H5兼容性问题
移动端H5兼容性问题HTML方向调用系统功能使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能，使用能快速调用移动设备的的图库/文件。这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端浏览器忽略。<!-- 拨打电话 --><a href="tel:10086">拨打电话给10086小姐姐</a><!-- 发送短信 --><a href="sms:10086">发送短信给10086小姐姐&l
2021-02-02 14:53:02
2951
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人