- 博客(117)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 微信分享网页链接自定义标题，图片,文字描述
我先描述一下该h5的业务场景：想实现微信中的h5页面分享给好友或者是朋友圈时有自定义的标题，描述，分享图片；而不是...如下图前提条件：1、请确认公众号已经认证，只有认证的公众号才具有分享相关接口权限2、登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。(需要调用微信接口的h5域名)3、配置IP白名单，基本配置-公众号开发信息-IP白名单。(调用后台接口的域名)h5实现具体步骤如下：（只有前端部分，别问为啥，因为后端我不会···泪目）1.页面引入JS-.
2020-06-19 11:37:24
2300
7
原创 flex布局最常用的几种样式
总结几点我在做项目的时候记不清的样式啊......首先，大家得知道Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意1：父元素设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。我们常用的布局方式无非按水平方向排和垂直方向排，那么告诉这个盒子：排列方向(默认...
2018-09-16 21:53:07
5649
原创 浅谈对原型及原型链的理解
在开篇我先总结一下原型的作用：1.数据共享 节约内存内存空间2.实现继承注意：函数也是一个对象，对象不一定是函数。(对象有__proto__属性，函数有prototype属性)此处说明，方便大家理解下文。下面我将举例说明为什么要使用原型例1：function Person(name) { this.name=name; this.eat=function () {...
2018-08-15 12:00:18
19368
转载 http常见的form表单请求方式
转载与：https://blog.csdn.net/weixin_34233856/article/details/92419632?utm_term=http%E6%8F%90%E4%BA%A4form%E8%A1%A8%E5%8D%95&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~sobaiduweb~default-0-92419632&spm=3001.4430
2021-04-09 10:11:44
569
原创 vue使用高德地图原生API实现省份添加背景色，文字标注；实现点聚合和点标记点击之后出现信息窗体的功能
功能描述：初始状态下，可以看到所有数据在地图上的分布的省份及相应的分布数量，点击点标注可以弹出对应的详细信息。该例子使用了高德地图原生API去实现上述功能，效果图如下:下面附上实现步骤：1.vue使用高德地图原生API。vue使用高德地图原生API的步骤在我的这篇博客中：https://blog.csdn.net/wsymcxy/article/details/114082139?spm=1001.2014.3001.55012.在步骤1的基础上在index.html中新加下面代码...
2021-03-03 14:50:43
3410
4
原创 vue项目中使用原生的高德地图API
在vue项目中使用高德地图，大家应该会使用vue-amap组件，但vue-amap中的大部分功能还是要使用高德地图原生API,所以我直接使用了高德地图原生API进行开发。首先附上高德地图原生API文档地址：https://lbs.amap.com/api/javascript-api/example/map-lifecycle/map-show1.index.html中添加：<script type="text/javascript" src="http://webapi.amap.co
2021-02-25 15:04:22
3346
7
转载 css实现环形水波纹和背景水波纹
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; ...
2020-12-28 16:55:10
1453
1
原创 vue实现父子组件之间传参并且实现封装组件
需求描述：封装一个进度条组件，点击该组件，传值给父组件父组件通过属性给子组件传值，子组件用props来接收父组件的值子组件通过$emit给父组件传值，父组件通过相应的方法接收子组件的值父组件：parent.vue<template> <div> <Progress v-for="(item,index) in text" :key="index" :parentData="item" @clickProgress="progress">&.
2020-12-28 14:10:53
431
1
原创 echart常用配置项tooltip
tooltip ={ //提示框组件 trigger: 'item', //触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 triggerOn:"mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'clic.
2020-12-28 09:39:54
1238
原创 vue中使用echart并在echart中添加警戒线
vue中使用echart并在echart中添加警戒线，通过配置visualMap和series.markLine实现警戒线效果 this.myChart1 = this.$echarts.init(document.getElementById('myChart1')) this.option1 = { title: { text: '温度趋势图', textStyle: { color: '.
2020-12-22 11:18:34
1028
原创 vue中使用echart实现三维立体图
echart实现三维立体图，这个有一个踩坑点，echart在渲染数据的时候，会有过渡动画效果，当数据量大的时候，会使图表在绘制过程中卡住，解决这个问题的办法是去掉过渡动画效果：grid3D.viewControl.animation = false。 this.myChart3 = this.$echarts.init(document.getElementById('myChart3')) this.option3 = { title: { t.
2020-12-21 14:53:57
3810
2
原创 vue+ elementv UI 使用Tree组件实现定位展开某一个父节点并选中该父节点下的某一个子节点
elementv UI 中的Tree组件实现定位展开某一个父节点并选中该父节点下的某一个子节点（或者选中该父节本身）如图所示：<template> <div> <el-tree :data="deviceList" ref="tree" :props="defaultProps" node-key="id" :default-expanded-k..
2020-12-21 14:21:19
2062
原创 css实现渐变色的百分比进度条
<div class="con-footer"> <div class="con-image-text"><span>1</span><span class="qiti-right">796 正常</span></div> <div class="progress-out"> <...
2020-11-16 16:09:08
1660
原创 vue中使用echarts
第一种：渐变曲线图且改变网格样式 <div id="myChart1" :style="{width: '100%', height: '330px'}"></div> this.myChart1 = this.$echarts.init(document.getElementById('myChart1')) this.option1 = { // 用于区域缩放 dataZoo..
2020-11-16 15:59:28
426
原创 vue实现动态等分刻度尺并显示报错点
首先描述一下业务逻辑：要求在一段长度不固定的电缆上面显示故障点（电缆最长10000米）思路：判断电缆长度的位数，根据电缆位数去计算刻度尺的坐标。第一种：刻度间的距离是10的整数倍splitCable(num) {// num表示电缆长度 let i = parseInt(num); let l = 0; let a = [0,1,2,3,4,5,6,7,8,9,10] while(i >= 1){ i=i/10; l++; if(l==1){..
2020-10-30 15:47:53
1052
转载 数字正则表达式
验证数字：^[0-9]*$验证n位的数字：^\d{n}$验证至少n位数字：^\d{n,}$验证m-n位的数字：^\d{m,n}$验证零和非零开头的数字：^(0|[1-9][0-9]*)$验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$验证非零的正整数：^\+?[1-9][0-9]*$验证非零的负整数：^\-[1-9][0-9]*$验证非负整数（正整数 + 0） ^\d...
2020-10-29 13:29:14
4375
原创 vuex的用法
vuex是一个专门为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。把组件共享的状态抽取出来。核心概念：state computed: { count () { return this.$store.state.count } }mapState辅助函数+对象展开运算符 computed: { ...mapState({ token:
2020-09-30 15:19:46
77
转载 KeepAlive详解
什么是KeepAlive？首先，我们要明确我们谈的是TCP的 KeepAlive 还是HTTP的 Keep-Alive。TCP的KeepAlive和HTTP的Keep-Alive是完全不同的概念，不能混为一谈。实际上HTTP的KeepAlive写法是Keep-Alive，跟TCP的KeepAlive写法上也有不同。 TCP的keepalive是侧重在保持客户端和服务端的连接，一方会不定期发送心跳包给另一方，当一方端掉的时候，没有断掉的定时发送几次心跳包，如果间隔发送几次，对方都返回的是RST，而不
2020-09-09 15:56:22
9396
1
原创 常用HTTP状态码
200：ok请求成功。一般用于get和post请求。304：未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望返回在指定日期之后修改的资源。403：服务器理解请求客户端的请求，但是拒绝执行此请求。404：服务器无法根据客户端的请求找到资源。500：服务器内部错误，无法完成请求。...
2020-09-07 14:31:54
125
转载 http与https的区别
超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。 为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安全，HTTPS在HTTP的基础上加入了SSL协议，SSL依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信
2020-09-07 14:07:29
174
原创 vue-cli项目安装sass依赖详细教程
一、安装对应依赖node模块：1.npm install node-sass --save-dev2.npm install sass-loader --save-dev二、解决 $ npm install node-sass --save-dev 失败的问题npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-b
2020-09-04 10:49:38
1490
转载 webStore中使用typeScript
webStore中使用typeScript: https://www.jianshu.com/p/310eaba45d99
2020-08-31 14:49:23
187
原创 js常用方法积累
1.url地址获取参数 2.toast提示 3.倒计时60s 4. 手机号码验证 5.时间格式转化1.url地址取参数 function GetQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); ...
2020-08-25 17:02:16
123
原创 前端常用工具收集
1.对于制作精灵图有些人感到很麻烦，这里给大家推荐一个自动生成精灵图的工具：https://www.toptal.com/developers/css/sprite-generator，你只需要添加相关资源，他就会自动帮你生成精灵图和对应的css样式....
2020-08-24 18:02:21
107
原创 css基本书写规范
1.书写顺序位置：position,z-index,display,float 大小：width,height,padding,margin,border,overflow 文字：font,line-height,letter-spacing,color,text-align 背景：background,border 其他：animation,transition2.书写规范缩写：/* 优 */.text{ padding:0 1em 2em;}/* 劣 */.tex
2020-08-06 15:19:17
108
原创 js实现数字验证码和路径取参
function getImgCode() { var s=new Array(0,1,2,3,4,5,6,7,8,9); var v = ''; hiddenCode = ''; for(var i=0;i<4;i++){ var r=Math.floor(10*Math.random()); var a=s[r]; v+=a+' '; ...
2020-08-05 11:25:50
139
原创 js字符串中间部分字符替换
身份证号或者手机号等等字符串想实现替换中间几位字符串 function replacepos(text,start,stop,replacetext){ let mystr = text.substr(0,start-1)+replacetext+text.substr(stop+1); return mystr; }, replacepos('测试文字csdn', 2, 4, "**") // 测试**csdn...
2020-07-06 11:03:57
2820
原创 个人记录一个完整的vue项目开发及遇到的问题
本人第一次着手一个完整的vue项目，从2019.12开始至2020.7结束，中间由于各种需求的的变动，真正的开发时间只有3个月。总结一些我遇到的一些问题：1.同一个路由但是参数不同(例如page?id=1与page?id=2)，无法刷新页面？ 解决方法：利用<router-view>的key属性，这两个路由的$route.fullPath并不一样, 所以组件被强制不复用, 相关钩子加载顺序为:beforeRouteUpdate => created => moun...
2020-07-03 17:27:10
226
原创 vue实现post请求，下载后端返回文件流
get请求，浏览器可以直接下载后台返回的文件流，但是post请求，浏览器不会直接下载。直接贴代码： myPlanEdit(type) { this.$http.defaults.headers.common['token'] = this.token; this.save_type = type let datas = { 'id':this.planId, 'name':this.dataObj.name
2020-05-22 17:50:25
11356
3
原创 css实现超出部分显示省略号
/*显示一行，省略号*/ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all;/*显示两行，省略号*/text-overflow: -o-ellipsis-lastline; overflow: hid...
2020-04-23 15:15:57
673
原创 img标签与background的区别
问题描述：在实际开发中，会遇到大图作为背景图片的场景，这时图片的展示方式有两种。第一种是使用<img>标签去显示，第二种是以背景图片显示。img:html中的标签img是网页结构的一部分，会在构建dom结构的时候就去加载图片。background:以css背景图存在的图片会等dom结构加载完成，才开始加载。当使用backgruong设置背景图片的时候 会出现背景图片...
2019-12-09 17:02:14
767
原创 <table></table>标签的属性的用法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>表格学习</title> <style> table{ border: 1px solid gainsboro...
2019-10-18 15:52:43
505
原创 html中嵌套iframe，在iframe内部操作，使其滚动到外层html的顶部
$("html,body",window.parent.document).animate({scrollTop:0},1000);//可置顶父窗口，但是不适应用于跨域；
2019-10-18 11:38:17
977
转载 安卓与ios兼容性问题解决
1、new Date获取时间戳在安卓机上new Date('2019-9-10')可以成功获取时间戳，ios无法获取处理方法: 将字符串中-替换成/，.replace(/\-/g,'');2、点击复制功能安卓和ios是不同的实现方式，详见我之前的一篇博客https://blog.csdn.net/weixin_39327883/article/details/89207116...
2019-10-14 11:37:19
1207
原创 各浏览器的内核及浏览器中的兼容性工具：https://www.caniuse.com
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。浏览器内核可以分为两部分，一部分是渲染引擎，负责生成dom树，负责渲染和重绘，另一部分是JS引擎，负责js的解释执行。Chrome:Blink,2013.4.3之前使用的是WebkitOpera:BlinkIE:6,7,8,9,10使用的都是Trident内核，IE11开始支持Web...
2019-10-14 10:52:43
1286
转载 基础-React实现tab切换
nav.jsx如下：import React from 'react';import "./css/nav.css"class TabsControl extends React.Component { constructor() { super() this.state = { currentIndex: 0 ...
2019-09-29 16:54:00
748
原创 h5实现上下滑动切页
安卓系统下正常使用，ios系统下无法滑动切页，那位大神可以找到问题，多谢大佬<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...
2019-09-25 11:33:48
4796
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人