- 博客(317)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 web前端编码规范/编码习惯❤️
处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。其他属性只在组件 内部 起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。不要将他们一起放到一个独立的样式文件中，或者丢在文档的最底部。过度使用属性简写往往会导致更混乱的代码，其中包含不必要的重写和意想不到的副作用。坚持限制属性取值简写的使用，属性简写需要你必须显式设置所有取值。为了提高代码可读性，在数学运算外增加括号，并且在取值，变量和运算符之间增加空格。在属性上，使用双引号，不要使用单引号。
2022-06-02 15:55:37
464
原创 background的复合写法：图片、渐变色、纯色
的复合写法可以使用逗号分隔多个属性值，每个属性值对应不同的背景层。属性，表示不重复平铺图片，使用100% 100%指定了背景图片的位置，使用。函数定义了一个线性渐变背景层，角度为38度，颜色从白色。函数指了一个图片背景层，图片路径为。指定了背景图片的大小。设置了一个纯色背景层。这个写法中，首先使用。
2024-04-11 10:11:19
591
原创 如何解决h5版本升级后浏览器页面缓存刷新的问题
使用Service Worker：Service Worker是一种在浏览器后台运行的脚本，可以拦截和处理网络请求。通过在Service Worker中监听页面更新的事件，可以在页面更新时强制刷新缓存，确保用户获取到最新的版本。当版本号发生变化时，浏览器会重新下载最新的文件，从而避免使用旧的缓存文件。这样可以告诉浏览器不要缓存该页面，每次都从服务器重新获取最新的版本。
2024-03-05 09:07:45
1806
原创 在Uniapp中使用Echarts创建可视化图表
在uniapp中可以引入echarts创建数据可视化图表。使用npm安装echarts插件，命令如下：2. 引入Eharts在需要使用Echarts的页面引入：3. 创建实例创建画布元素：配置图表：总结我们可以单页面引入Echarts，也可以全局注册使用Echarts，在main.js中引入：
2024-01-05 10:39:05
3005
12
原创 从零开始学习Nginx
当我们修改了nginx的配置文件nginx.conf 时，不需要关闭nginx后重新启动nginx，只需要执行命令 nginx -s reload ，即可让改动生效。nginx的配置文件是conf目录下的nginx.conf，默认配置的nginx监听的端口为80，如果80端口被占用可以修改为未被占用的端口。打开浏览器，地址栏输入 http://localhost:80 回车，出现以下页面说明启动成功！如果使用cmd命令窗口启动nginx， 关闭cmd窗口是不能结束nginx进程的。
2024-01-04 15:02:34
444
原创 vue项目中javascript实现通知公告的上下循环滚动播放
vue项目中javascript实现通知公告的上下循环滚动播放。 infoList: [],//通知公告列表 timer: "",//播放定时器 speeds: 10, //滚动的速度,单位ms currentTop:0,//当前滚动上偏移量 pauseDuring:3000//通知公告的停顿时间
2023-05-06 14:02:53
2234
原创 css3实现消息提示的滚动播放
css3实现通知公告的滚动播放。@keyframes wordsLoop { 0% { transform: translateX(200px); -webkit-transform: translateX(200px); } 100% { transform: translateX(-100%);
2023-05-06 13:48:17
1082
转载 vuex的学习
mapState 函数返回的是一个对象，将它与局部计算属性混合使用。映射的计算属性的名称与 state 的子节点名称相同时。获取状态，声明计算属性。
2023-05-04 09:45:21
129
原创 javascript常用的一些公共方法
我们定义了一个包含所有 16 进制字符的字符串，并使用循环随机选择 6 个字符，然后将这 6 个字符拼接起来，加上。方法查找数组中指定属性名称的对象，找到后返回该对象的目标属性值。参数的值，如果大于 0，说明需要保留小数，我们就使用一个因子将随机数放大一定倍数，然后取整，最后再除以因子来保留指定的小数位数。如果不是数字，就判断是否为空、null、undefined，如果是，就返回一个默认值，否则就返回原始值。两个参数，分别用来控制返回的数的位数和保留的小数的个数。方法将匹配到的参数值进行解码，并返回该值。
2023-03-27 17:24:35
965
原创 ucharts图表的一些常用配置
申明一个配置对象，并且通过export，暴露出去。在common目录下，创建opts.js文件。在需要用到的地方import引入。组件标签中填写opts标签属性。在data数据中赋值。
2023-02-24 13:45:37
3383
原创 手机APP开发中遇到的一些问题
APP下载引导页H5开发，layer弹出层的应用，前端引导页使用插件js，谷歌浏览器如何开启暗黑模式，uni-app富文本图片存在间距的问题
2023-02-21 15:13:24
223
原创 uni-app框架开发过程中遇到的一些问题
设置titleNView、titleNView配置导航示例、uni-app发行成h5以后挂在5+APP的返回、修改原生导航titleNView的值不生效、原生导航设置边距、获取状态栏高度、左滑返回上一页，不是很灵敏
2023-01-18 11:00:29
1232
8
转载 字符串的相关方法
返回布尔值，表示参数字符串是否在源字符串的头部。返回布尔值，表示参数字符串是否在源字符串的尾部。这三个方法都支持第二个参数，表示开始搜索的位置。返回一个新字符串，表示将原字符串重复n次。返回布尔值，表示是否找到了参数字符串。
2023-01-05 16:13:49
169
转载 ES6 变量的解构赋值
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。注意，采用这种写法时，变量的声明和赋值是一体的。对于let和const来说，变量不能重新声明，所以一旦赋值的变量以前声明过，就会报错。只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。如果变量名与属性名不一致，必须写成下面这样。
2023-01-05 16:01:23
146
转载 异步回调promise
在promise原型里有then和catch方法，resolve由then方法提供，reject由catch方法提供。then方法表示的是成功之后的回调；catch方法表示的是失败之后的回调。实例状态全部成功，返回的承诺对象状态才是成功。实例状态任意一个成功，返回的承诺对象状态就是成功。async使用：等待一个函数执行完毕后，执行另外一个函数。resolve 和 reject 回调函数由谁提供？实例状态返回请求先成功的那一个。
2023-01-05 14:45:40
340
原创 uni-app引入海康威视h5player实现视频监控的播放
因为web-view组件默认就是占据整个视口的高宽，所以我们需要设置web-view的宽高，调整位置。将demo中bin文件夹下的文件原封不动复制到h5player文件夹中，txt文件可以删除。在uni-app应用内，pages页面中需要用到视频播放的页面，创建web-view组件。在uni-app项目中static文件夹下创建文件目录，我命名为h5player。在webplayer.html文件中，新增样式，宽高根据自己的需求调整。web-view组件的src需要动态改变，所以存储在data数据里。
2022-12-02 13:45:12
12545
64
原创 ucharts提示窗tooltips自定义format配置，换行展示标题
ucharts提示窗tooltips默认显示格式，显示横轴数据+类别+纵轴数据，如下图所示。修改ucharts中的config-ucharts.js和u-charts.js。在u-charts.js中textList最前头插入一个数据。config-ucharts.js中自定义format配置。记得在使用的时候为标签添加相应属性。
2022-11-29 11:13:08
6227
5
原创 在uni-app中使用uview分页查询，加载更多
在项目中经常出现一些列表，需要我们分页查询数据，手机滑动到底部才加载更多的数据。在uni-app项目中使用uview2.0的ui框架，我们可以按照以下的方式分页查询，加载更多。
2022-11-25 17:28:09
4584
4
原创 JavaScript遍历数组和对象的方法
for in 循环，数组和对象都可以遍历，item为array的下标，或者object的key。for of只能遍历数组，item为数组元素的值。
2022-11-25 17:13:25
352
原创 flex布局常用布局方式（一行显示固定个数，自动换行显示）
基于uni-app实现一行显示固定个数的元素，元素可以遍历生成的，并且自动换行显示，效果如下图所示。// 这里一行显示4个，所以是/4，一行显示几个就除以几 // 这里的60rpx = (分布个数4-1)*间隙20rpx, 可以根据实际的分布个数和间隙区调整 min-width: calc((100% - 60rpx) / 4); max-width: calc((100% - 60rpx) / 4); // 每行最右侧的那个不设置右外边距
2022-11-23 17:48:20
12569
2
原创 JavaScript/uni-app对接海康ISC openapi
下载海康开放平台的签名生成工具，阅读开发指南，获得签名，对比一下我们自己用js方法生成的签名，检查js方法是否正确。修改appKey，appSecret，接口地址，点生成签名按钮，得到我们需要的签名。JavaScript实现HMAC SHA256算法实现基于crypto-js。也可以在封装http请求的时候，直接动态生成一个签名，加入到请求头中。安装完成，在uni-app项目中出现crypto-js文件目录。可以创建文件signature.js，生成一个签名然后暴露出去。支持ES6导入、Modular。
2022-11-21 13:48:40
2948
3
原创 vue-element-admin后台前端解决方案（基于 vue 和 element-ui）
可以把 vue-element-admin当做工具箱或者集成方案仓库，在 vue-admin-template 的基础上进行二次开发，想要什么功能或者组件就去 vue-element-admin 那里复制过来。建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题。npm install出现报错：在C盘/用户/该账号目录下找到.gitconfig文件，配置.gitconfig文件。，更多详细内容可以查看。
2022-11-21 11:26:19
1144
原创 从零开始创建一个uni-app项目
uCharts是一款基于canvas API开发的适用于所有前端应用的图表库，开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni-app / taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝/京东/360）、快应用等更多支持 canvas API 的平台。选择uni-app项目类型，填入项目名称，浏览选择项目保存地址，选择uni-ui项目模板，vue的版本为2，点击创建，HBuilderX会为我们下载项目模板。安装完成后进行相关配置，
2022-11-11 10:52:11
1420
原创 uni-app框架开发app中出现的问题（持续更新中...）
具体看uview中的地址是哪个）中的图标字体文件font_2225171_8kdcwk4po24.ttf，保存到本地，可以放入static文件夹中。找到uview-ui/components/u-icon/u-icon.vue中修改文件的第41、163行两个线上地址为本地地址。因为在uview中的图标字体资源使用的是阿里的线上地址，我们将文件下载下来，然后引入本地资源就行了。无法加载iconfont.js，css修改图标字体颜色。.........
2022-08-15 10:25:46
4751
4
原创 MUI框架开发app中出现的问题（持续更新中...）
使用MUI框架开发APP，开启沉浸式导航以后，我们导航要留足状态栏的高度距离，但是在不同的机型下，状态栏的高度是不一样的，所以我们要获取状态栏的高度，动态修改导航的上偏移量。首先，如果开启了沉浸式导航，就要获取状态栏的高度，导航栏的整体高度为自身高度加上状态栏高度，上边距为状态栏高度。双击标题栏滑回顶部：@doubletap=“scrollToTop()”，触发代码关键词：mh。在需要修改的状态栏颜色的前一个页面引入MUI H5模板的common.js。在需要修改状态栏颜色的页面修改状态栏颜色。
2022-08-09 14:19:22
804
转载 Echarts的相关配置信息
饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要xAxis，yAxis。dataZoom 组件可以实现通过鼠标滚轮滚动，放大缩小图表的功能。默认情况下 dataZoom 控制 x 轴，即对 x 轴进行数据窗口缩放和数据窗口平移操作。
2022-07-21 13:45:02
641
原创 web一些实用的网址（免费API、美图、实用工具）
高速稳定免费APi接口调用平台、保罗 API、墨天逸— 随机图片API、网易云音乐 API、韩小韩API接口站、Ten▪Api免费提供Api服务、AI人工智能图片放大、头像壁纸、小森平的免费下载音效、时光邮局、在线工具、键盘按键值、在线生成uuid、书签地球草料二维码等、爱资料工具
2022-07-15 11:42:11
40050
转载 TypeScript基本使用
TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准。安装 typescript：安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码，以下是查看版本号：然后执行以下命令将 TypeScript 转换为 JavaScript 代码：很多 IDE 都有支持 TypeScript 插件，如：Visual Studio，Sublime Text 2，WebStorm / PHPStorm，Eclipse 等。................
2022-07-12 16:25:16
1491
原创 MUI框架快速开发
使用MUI框架搭建项目，首先我们要下载一个HBuilderX。使用HBuilderX新建一个项目，在工具栏选择文件–新建–项目。选择5+App项目，选择mui项目模板，输入项目名称，创建成功！项目目录如下，包含基本的mui的css、js文件，入口文件是index.html。输入mh可以快速生成标题栏。生成的代码如下。页面效果如图所示。输入mbo，创建项目主体代码。在mui-content包含的盒子内书写代码，属于项目主体的代码，当需要滚动的时候，mh生成的标题栏仍然一直在顶部。输入
2022-07-12 14:38:00
3507
转载 NPM 方法使用Echarts
安装完成后 ECharts 和 zrender 会放在 node_modules 目录下，我们可以直接在项目代码中使用 require(‘echarts’) 来使用。
2022-07-04 10:46:50
6478
转载 CSS 单位（相对长度、绝对长度）
相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。rem与em的区别：在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。...
2022-07-04 10:28:40
205
原创 MUI底部导航的样式修改
使用MUI的底部导航栏想要修改导航顶部分割线。添加子页面的时候要为底部导航预留位置。如上bottom的值为50px，因此底部导航栏只有50px的位置。设置导航栏分割线最好使用线条，因为阴影有一个区域，不好为其预留位置展示。.........
2022-07-01 09:09:25
598
原创 移动端APP开发中遇到的问题（持续更新中...）
提前调用5+APi、设置titleNView、titleNView配置导航示例、uni-app发行成h5以后挂在5+APP的返回、修改原生导航titleNView的值不生效、原生导航设置边距、获取状态栏高度、安卓手机键盘抬起改变视口高度、判断机型，适配安全区域、手机底部适配、行为验证码
2022-06-10 16:15:51
656
2
原创 echarts图标x轴内容展示不全
刚刚修改了一下人家做的项目中的echarts图表，展示的是很多月份的数据，然后页面一进去是从5月开始，看不到前面月份的数据，但是只要我们缩放一下，我们就可以看到完整的数据，一开始我以为是样式的问题，画布没有展示完全，后面发现是ehcarts配置的东西有问题，最终定位到是区域缩放控制器的配置问题。注释掉start就可以完整展示1-4月的数据。
2022-06-02 14:03:14
639
前端-css-reset.css
2020-09-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人