自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(116)
  • 资源 (3)
  • 收藏
  • 关注

原创 Vuex状态管理模式

VuexVuex官网概述是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式;采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。解决什么问题多个视图依赖于同一状态;来自不同视图的行为需要变更同一状态。怎么做把组件的共享状态抽取出来,以一个全局单例模式管理。优势组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的

2021-01-14 23:33:46 18

原创 vue.js组件通信的六种方式(父子组件、多层父子组件、非关系型组件)

vue.js组件通信父子组件通信三种方式父子组件通信方式一(props和$emit)父子组件通信之方式二(ref和$ref)父子组件通信方式三($parent和$children)多层父子组件通信两种方式多层父子组件通信方式一($attrs和$listeners) 多层父子组件通信方式二(provide和inject)非关系组件通信非关系组件通信($on、$off、$emit、$once)...

2021-01-03 22:24:54 45

原创 javaScript之navigator 对象判断设备、客户端(微博、QQ、微信)、浏览器

javaScript之navigator 对象判断设备、应用客户端、浏览器1、判断PC2、判断设备3、判断不同应用客户端4、区分各个浏览器话不多说,直接上代码1、判断PCfunction IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPa

2020-11-11 20:38:58 545 1

原创 正则表达式(二)正则对象下的方法、字符串方法、元字符

正则匹配方法正则对象底下的方法test匹配到返回true;匹配不到返回falselet str = "abc123fda123";// let reg = /\d+/g;let reg = /efg/g;console.log( reg.test(str) );exec匹配到返回第一次匹配到的结果、索引、匹配对象;匹配不到返回nulllet str = "abc123fda1234";let reg = /\d+/g;console.log(reg.exec(s

2021-02-28 21:46:59 4

原创 正则表达式(一)正则表达式的创建

正则表达式能干什么查找替换验证分割为什么要学正则表达式let str = "afdsa234fda231dfsa111fdsaf444";从以上字符串中找出数子串,返回数组如果采用函数实现function getNumber(str){ let arr = []; let temp = ""; for(let i=0;i<str.length;i++){ if(!isNaN(str[i])){ // 数字

2021-02-28 20:59:31 15 2

原创 微信小程序(十二)uni-app框架开发及组件库

uni-appuni-app官网uni-app 简介uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。uni-app 诞生的背景多端泛滥体验不好生态不丰富uni-app 优势跨平台更多:一套代码多端使用,能优雅的在一个项目里调用不同平台的特色功能。运行体验更好:组件、api 与微信小程序一致,兼容weex 原生渲染。通用技

2021-02-28 19:49:49 43

原创 微信小程序(十一)底层框架与性能优化

底层框架技术选型Hybrid技术小程序的架构要求:快!加载快、渲染快……渲染界面的技术:Hybrid 技术,介于原生技术和web 技术之间。若使用纯客户端原生技术,小程序代码需要与微信代码一起编包,跟随微信发版,这种开发节奏必然是不对的。所以小程序像Web 技术那样,有一份随时可更新的资源包放在云端,通过下载到本地,动态执行后即可渲染出界面。若使用纯 Web 技术来渲染小程序,UI渲染跟 JavaScript 的脚本执行都在一个单线程中执行,这就容易导致一些逻辑任务抢占UI渲染的资源。所以,渲

2021-02-28 15:22:34 35

原创 微信小程序(十)云开发及webSocket 通信

云开发什么是云开发云开发就是在开发微信小程序、小游戏,无需搭建服务器,使用微信云平台的API 进行核心业务开发,从而实现快速上线和迭代。云开发的四大基础功能:云函数 :无需自建服务器。在云端运行的代码,微信私有协议天然鉴权,开发者只需编写自身业务逻辑代码。数据库 :无需自建数据库。一个既可在小程序前端操作,也能在云函数中读写的 JSON 数据库。云存储:无需自建存储和 CDN。在小程序前端直接上传/下载云端文件,在云开发控制台可视化管理。云调用 :原生微信服务集成。基于云函数免鉴权使用小程

2021-02-19 13:38:58 55

原创 微信小程序(九)微信登录(授权)、获取微信登录凭证code、openid

微信登录微信登录面对的问题:怎么获取用户在微信的信息怎么获取小程序用户的唯一身份标志获取openid的方法wx.login() 方法可以获取微信登录凭证code使用code 可以向微信服务器换取微信用户的唯一识别标志openid微信服务器提供的接口地址:https://api.weixin.qq.com/sns/jscode2session?appid=<AppId>&secret=<AppSecret>&js_code=<code&

2021-02-19 12:53:45 97

原创 微信小程序(八)https网络通信、本地数据缓存、设备能力

Https网络通信wx.request() 的作用:往服务器传递数据,从服务器拉取信息。request() 有两种方法把数据传递到服务器:get请求:通过url传递参数,如 url:'https://test.com/getinfo?id=1&version=1.0.0'post 请求:通过data传递参数,如:data: { id:1, version:'1.0.0’ },建议使用post 传递数据,因为url 的最大长度是1024字节,url上的参数需要拼接到字符串里,参数的值

2021-02-19 12:31:04 20

原创 uni-app子组件里的onLoad、onShow里的方法等不执行?

子组件里的onLoad、onShow里的方法等不执行?最近在做关于疫情小程序时发现一个问题,采用uni-app,在父组件调用子组件时,发现子组件里的onLoad、onShow里的方法不执行?请教了师父后,记下了。uni-app里,只有页面有生命周期,子组件是没有生命周期的,如果想用,那么用vue的生命周期。毕竟uni-app是把vue又封装了一次。...

2021-02-04 18:08:25 201

原创 微信小程序(七)界面交互反馈的几种方法

交互反馈用户在小程序上进行交互的时候,某些操作可能比较耗时,需要我们予以及时的反馈,去舒缓用户等待的不良情绪,这样的反馈就是交互反馈。常见的交互反馈有:触摸反馈Toast和模态对话框界面滚动触摸反馈通常页面会摆放一些button按钮或者view区域,用户触摸按钮之后会给按钮换个颜色。用户触摸后的样式设置可用通过组件的hover-class属性实现:<button hover-class="sky" bindtap="pay">支付</button>

2021-01-25 22:23:33 26

原创 微信小程序(六)小程序组件、事件冒泡、事件捕获、页面数据this.setData()、wxAPI

组件一个小程序的页面是由多个组件组成的。小程序的宿主环境提供了一系列基础组件,如view、text。但有的时候,我们还需要自定义组件。自定义组件的名称要小写:<xiaochnn></xiaochnn>自定义组件自定义组件的方法:在主项目下建立components 文件夹,在其中建立testcom文件夹,在此文件夹上右击“新建 Component”,这样就可以建立出json、wxml、wxss、js 四个文件。组件的json中设置 “component”: tr

2021-01-24 22:51:22 42

原创 微信小程序(五)生命周期、页面下拉、页面上拉、页面滚动、转发、页面跳转

生命周期页面的生命周期首先要考虑三个事件:页面初次加载时:onLoad,在页面没被销毁之前只会触发1次。页面显示时:onShow ,从别的页面返回到当前页面时,都会被调用。页面初次渲染完成时:onReady,在页面没被销毁前只会触发1次,在逻辑层可以和视图层进行交互。页面显示后,随着用户的操作,还会触发其它的事件:页面不可见时:onHide,wx.navigateTo切换到其他页面、底部tab切换时触发。返回到其它页时:onUnload,wx.redirectTo或wx.nav

2021-01-24 22:24:23 34

原创 微信小程序(四)深入理解小程序及其宿主环境(构造器,运行机制)

宿主环境宿主环境是微信客户端给小程序提供的一种环境 。宿主指的就是微信客户端,也就是官方API里的wx 对象。宿主环境会把我们写的各种文件整合到一起,进行解析,然后在微信APP 里显示出我们所看到的样子。宿主环境可以为小程序提供微信客户端的能力,比如微信扫码,这是普通网页不具备的。双线程下的界面渲染原理在渲染层,宿主环境会把WXML转化成对应的JS对象,也就是虚拟Dom。在逻辑层发生数据变更的时候,我们可以用setData方法把数据从逻辑层传递到渲染层。在渲染层对比虚拟Dom的前后差

2021-01-24 22:09:08 25 1

原创 微信小程序(三)wxml基本语法

wxml关于项目目录结构参考微信开放文档指南篇。JSON配置JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。常见的json 配置文件有3种:小程序配置 app.json:做全局配置页面配置 page.json:对小程序具体页面的配置工具配置 project.config.json:对开发者工具的个性化配置,如域名校验、代码上传时自动压缩等注意:小程序无法在运行过程中去动态更新JSONJSON语法SON文件都是被包裹在一个大括号{}

2021-01-24 21:36:59 39

原创 微信小程序(二)我的第一个微信小程序(获取用户信息失败)

入门篇我的第一个小程序步骤申请AppID,去微信公众平注册小程序服务,并申请是开发者,在开发管理里获取AppID。安装开发者工具。原生的wxml适合用微信开发者工具开发。新建项目。(学习不建议使用云开发)注意:避坑!!!AppID必须是注册的小程序服务里的AppID,不能是订阅号、服务号等的AppID,负责会出现获取用户信息失败,这是我学习小程序的第一坑,查了好久才发现问题。此外,获取手机号个人是不能获取的,没有权限,必须是单位认证的。...

2021-01-24 20:59:46 58

原创 微信小程序(一)初始微信小程序

初始微信小程序小程序与普通网页的区别线程网页开发是单线程的,js线程和渲染线程是互斥的。小程序有一条js逻辑线程和多条渲染线程两种线程。DOM网页开发可以操作DOM。小程序中不能操作DOM。运行环境网页是在PC 端和移动端的浏览器上运行。小程序是在android、iOS、小程序开发者工具上运行。小程序发展史2016年1月11日,微信之父张小龙时隔多年的公开亮相,解读了微信的四大价值观。张小龙指出,越来越多产品通过公众号来做,因为这里开发、获取用户和传播

2021-01-24 20:41:26 28

原创 echarts图表引入主题样式(js和json)

echarts主题样式主题样式构建工具下载主题引入echarts主题样式有两种方法:js和json引入主题引入js主题文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>主题样式</title> <style> #main{ margin: 20p

2021-01-24 00:51:32 82

原创 关于echarts直角坐标系中多坐标轴的实现与效果优化

多坐标轴你是否在处理多坐标轴时,纵轴数据总是感觉不完美,视觉效果还不好呢?我们看代码+注释<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多坐标轴</title> <style> #main{ margin: 20px; width:

2021-01-24 00:20:14 18 1

原创 vue.js+elementUI中插槽的使用

插槽条件判断 <el-table-column label="是否管理人员" align="center" width="100"> <template slot-scope="scope"> <p v-text="scope.row.isManage == 1 ? '是' : '否'"></p> </template> </el-table-column>字典匹配 <el-tabl

2021-01-24 00:07:38 49

原创 css中引入下载字体的方法

下载的字体文件格式一般为xxx.TTF在css中引入:@font-face{font-family:electronicFont;src:url(../font/DS-DIGIT.TTF)}使用.center-num{ line-height: 75px; color: #ffeb7b; font-size: 64px; font-family: electronicFont;}

2021-01-23 23:59:54 26

转载 使用百度地图定位的坐标转化!GPS=>百度坐标

百度地图坐标转换目前国内主要有以下三种坐标系:WGS84:为一种大地坐标系,也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。GCJ02:又称火星坐标系,是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。BD09:为百度坐标系,在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标,bd09mc表示百度墨卡托米制坐标。非中国地区地图,服务坐标统一使用WGS84坐标。百度对外接口的坐标系为BD09坐标系,并不是GPS采集的真实经纬度,在使用百度

2021-01-23 23:56:25 43

原创 echarts(十四)关于ecarts在大屏中的使用

大屏大屏的尺寸一般是1920*1080。大屏可以不用考虑浏览器的兼容性,只要谷歌能兼容就行。大屏的制作原理是在浏览器中,建立多个echarts 容器,将不同的echarts 图表放入其中。echarts颜色主题颜色主题是修改全局样式的方法。echarts 内置了两套主题,分别为 ‘light’ 和 ‘dark‘,其设置方法为:echarts.init(dom, 'light’)若要使用其它主题,需要去主题编辑器下载。大屏自适应大屏在自适应屏幕时要考虑两个方面:echarts

2021-01-23 23:44:40 15

原创 echarts(十三) 结合百度地图使用

百度地图百度地图开放平台地址社区贡献者维护的Apache ECharts (incubating)相关作品百度地图的使用方法在HTML 中引入百度地图,详情见文档<script type=“text/javascript” src=“http://api.map.baidu.com/api?v=3.0&ak=****"></script>在echarts中使用百度地图引入 echarts.js、bmap.js 以及 https://api.map.

2021-01-23 23:33:37 31

原创 echarts(十二)关于echarts的响应式布局

echarts响应式布局在echarts 里,如何适配不同尺寸的屏幕呢?简单点的可以通过为尺寸、位置等属性设置百分比来实现。复杂些的就需要自定义响应规则。自定义响应规则的方法建立基础配置项 baseOption建立规则配置列表 media建立query建立此规则下的配置信息optionecharts 实例基于baseOption 和media 绘制图表const myChart = echarts.init(document.getElementById('main'

2021-01-21 00:23:20 33

原创 echarts(十一)实现折线图标记点的拖拽

我是爱码士echarts实现折线图标记点的拖拽实现步骤正常绘制折线图-在折线图的所有标记点位置绘制原生图形为原生图形绑定鼠标事件:拖拽时,将原生图形的位置赋予标记点鼠标移动时,显示提示鼠标抬起时,隐藏提示 /*尺寸*/ const symbolSize = 20; /*点位*/ const data = [[0,0], [20, 20], [40,40]]; /*实例化echarts*/ const myChart = echart.

2021-01-21 00:18:25 85

原创 echarts(十)高级篇(富文本标签)

高级篇同志们,装逼时刻到!!!富文本标签效果:实现步骤用formatter 写文本片段formatter:‘{a|文字内容}\n'+'{b|文字内容}\n'+'默认样式{x|样式 x}’用rich 设置文本样式const myChart = echarts.init(document.getElementById('main'));// 数据const data=[ {name:'杨戬',value:80,img:'./images/yj.jpg'},

2021-01-21 00:09:08 56

原创 echarts(九) 高级篇(鼠标事件监听、组件交互事件监听、代码触发 ECharts 中组件的行为[信息高亮提示])

高级篇监听事件ECharts 使用on 绑定事件,事件名称对应 DOM 事件名称,均为小写的字符串。如:myChart.on('click', function (params) { // 控制台打印数据的名称 console.log(params.name);});鼠标事件监听ECharts 支持常规的鼠标事件类型,包括 ‘click’、‘dblclick’、‘mousedown’、‘mousemove’、‘mouseup’、‘mouseover’、‘mouseout

2021-01-21 00:01:29 104 3

原创 echarts(八)高级篇(区域缩放、视觉映射)

高级篇区域缩放作用:概览整体,观察细节区域缩放的方式:框选型数据区域缩放组件(dataZoomSelect):提供一个选框进行数据区 域缩放。即 toolbox.feature.dataZoom,配置项在 toolbox 中。内置型数据区域缩放组件(dataZoomInside):内置于坐标系中,使用户可以在坐标系上通过鼠标拖拽、鼠标滚轮、手指滑动(触屏上)来缩放或漫游坐标系。滑动条型数据区域缩放组件(dataZoomSlider):有单独的滑动条,用户在滑动条上进行缩放或漫游。

2021-01-20 23:43:47 25

原创 echarts(七)高级篇(数据集dataset、行列映射、维度映射、编码映射)

高级篇数据集 datasetdataset 数据集组件是从ECharts 4 开始有的,用于数据管理。dataset 的优点:基于原始数据,设置映射关系,形成图表。数据和配置分离,便于单独管理。数据可以被多个系列或者组件复用。支持更多的数据的常用格式,例如二维数组、对象数组等。const mainDom = document.querySelector('#main');const chart = echarts.init(mainDom);// 数据源const sou

2021-01-20 23:27:44 55

原创 echarts(六) 高级篇(异步数据的更新)

高级篇异步数据的更新请求数据的方式:ajax、fetch 都可以。数据的更新有两种思路:请求到数据后,setOption()。先setOption(),有什么先配置什么。等请求到数据后,再追加配置。注:在数据加载的过程中,还可以使用echarts 实例对象的loading 功能显示 loading:showLoading()隐藏 loading:hideLoading()思路一 请求到数据后,setOption() const myChart = echarts.i

2021-01-19 23:58:46 147 1

原创 echarts(五)高级篇(多坐标轴、复杂多坐标轴)

高级篇多坐标轴多坐标轴的常见应用就是一个图表有两个y 轴。 /*基于准备好的dom,初始化echarts实例*/const myChart = echarts.init(document.getElementById('main')); /*指定图表的配置项和数据*/const option = { /*图例*/ legend:{data:['学习人数','就业人数']}, /*提示*/ tooltip:{}, /*x 轴*/ xA

2021-01-19 23:45:06 65

原创 echarts(四)常用图表(雷达图、仪表盘、地图(省市县)及其常用配置项)

入门篇ECharts 数据可视化实验室雷达 radar雷达图的每个变量都有一个从中心向外发射的轴线,所有的轴之间的夹角相等,同时每个轴有相同的刻度。雷达图表适合对比变量在数据集内的高低,比如产品性能、排名、评估等。常用配置项图例 legenddata 数据orient 排列方式horizontal 水平,默认vertical 垂直legend:{ orient:'vertical'},indicator 雷达图的指示器集合 []name 指示

2021-01-19 00:18:18 44

原创 echarts(三)常用图表(折线图、饼图、散点图、K线图极其常用配置项)

入门篇ECharts 数据可视化实验室折线图 line折线图主要用来展示数据相随着时间推移的变化。非常适合用于展示一个连续的二维数据。常用配置项x轴data 类目轴数据boundaryGap 边界留白axisLabel 标签margin 标签偏移量 xAxis:{ data:['html','css','js','canvas'], boundaryGap: 0},series 系列集合type 系列类型,linename 系列名d

2021-01-18 23:54:57 48

原创 echarts(二) 常用配置项及组件(标题,提示框,图例,工具栏,坐标轴,系列,标记点(线))

入门篇基本配置项需要在option配置。标题 title主标题 text副标题 subtext位置 leftleft 左对齐right 右对齐center 居中主标题样式 textStylecolorfontSize副标题样式 subtextStylecolorfontSize可见性 showtrue 可见,默认false 不可见title:{ text:'主标题', subtext: '副标题', left:'ce

2021-01-18 23:21:03 19 1

原创 echarts(一)我的第一个数据可视化图

入门篇Echarts官网CDNecharts画图的两种方式canvas :点阵图,缩放失真,适合图形数量非常大的图表。svg:矢量图,缩放不失真,适合图形数量较少的图表。引入方式npm在线定制CDN使用入门建立dom 容器引入 ECharts实例化echarts建立图表配置项显示图表入门案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-

2021-01-18 22:46:22 32 1

原创 vuex状态管理模式(三)(actions,modules)

Vuexactionsmodules

2021-01-14 23:25:54 19

原创 vuex状态管理模式(二)(getter,mutation)

getter概述动机 :需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数。如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。和计算属性一样,会缓存。使用通过属性访问:store.getters.xxx。通过函数访问: 返回一个函数,来实现给 getter 传参。mapGetters: 将 store 中的 getter 映射到局部计算属性。示例store/index.js

2021-01-13 23:38:57 21

原创 vuex状态管理模式(一)(state)

VuexVuex官网概述是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式;采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。解决什么问题多个视图依赖于同一状态;来自不同视图的行为需要变更同一状态。怎么做把组件的共享状态抽取出来,以一个全局单例模式管理。优势组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的

2021-01-13 22:28:09 21

vue.js、node.js制作美女相册

vue.js+node.js

2021-01-03

解决跨域封装的jsonp.js文件

解决跨域封装的jsonp

2020-12-22

echarts.min.js

echarts离线js包 包含了所有图表和组件

2020-12-17

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除