自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(91)
  • 收藏
  • 关注

原创 uni-app踩坑——打包成app后无法获取位置信息

问题描述:使用 uni.getLocation(OBJECT) 接口在真机模拟上可以获取经纬度,但是打包成安卓app就一直走fail失败处理函数,同一个设备环境下运行的。 解决方案:本人参考以下优秀作者作者博客:https://blog.csdn.net/u010227042/article/details/106560509可以按着作者所教的步骤一步步往下走,但是后面发现还是无法获取获取位置,试了半天才发现问题所在,就是 SHA1,不要复制作者文中的SHA1(切记!切记!切记!),因为那个可

2021-09-04 00:33:17 1489

原创 vuex

文章目录前言一、vuex使用步骤二、vuex基本的对象前言Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。引自官方一、vuex使用步骤// 引入Vue、Vuex三方件import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ modules: { use

2021-01-12 20:04:29 161

原创 vue-router导航卫士

导航守卫    vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航,多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。    参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫全局前置守卫全局前置守卫:router.beforeEachconst router = new V

2021-01-11 20:36:49 210

原创 vue中computed和watch

computed(计算属性):        作用:能够避免数据冗余,通过计算,可以在已有的data数据中生成新的变量,计算属性的变量将会被缓存        触发时机:当依赖的响应式属性变化才会重新计算示例:<div id="app">{{fullName}}</div>var vm = new Vue({ el:'#app', data:{ fristName:'z

2021-01-05 20:40:51 113

原创 vue中router与route区别

文章目录前言一、$route对象二、$router对象1、push2、go3、replace4.一般使用replace来做404页面前言vue-router中经常会操作的两个对象route和router两个。一、$route对象       $route对象表示当前的路由信息,包含了当前 URL 解析得到的信息。包含当前的路径,参数,query对象等。$route.path 字符串,对应当前路由的路径,总是解析为绝对路径,如"/foo/b

2021-01-04 20:49:46 1803

原创 vue过滤器起步

文章目录前言一、创建过滤器二、过滤器使用三、实例前言    过滤器,顾名思义,过滤就是一个数据经过了这个过滤之后出来另一样东西,可以是从中取得你想要的,或者给那个数据添加点什么装饰,那么过滤器则是过滤的工具。例如把‘Hello改成成‘Hello World’,那么可用过滤器给值‘Hello’后面添加上‘ World’;或者把时间戳改为我们想要的时期等都可以使用过滤器。一、创建过滤器定义过滤器全局过滤器Vue.filter('过滤器名称', func

2020-12-29 20:59:16 60

原创 vue生命周期钩子函数

文章目录前言一、vue的生命周期是什么二、vue生命周期钩子执行顺序前言    vue所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同, this.fetchTodos 的行为未定义一、vue的生命周期是什

2020-12-28 20:54:48 301

原创 Vue自定义指令

文章目录前言一、注册全局注册:局部注册:二、属性自定义指令属性钩子函数参数三、 传入多个值前言除了核心功能默认的内置指令(v-model等等),vue也允许注册自定义指令。注意,在vue2.0中,代码复用和抽象的主要形式是组件,但是在有些情况下,我们需要对普通的DOM元素进行底层操作,这时候就需要我们用到自定义指令。一、注册全局注册: Vue.directive('指令名', { inserted: function (el) { //指令属性 .

2020-12-22 19:58:14 186

原创 Vue常用指令和修饰符

文章目录一、指令v-textv-htmlv-prev-cloakv-oncev-showv-ifv-elsev-else-ifv-forv-onv-bindv-model二、修饰符事件有关的修饰符.trim.number.lazy一、指令v-textv-text主要用来更新textContent,可以等同于JS的text属性。<h1 v-text="msg"></h1>v-html双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v

2020-12-21 23:38:14 225

原创 利用canvas绘制表盘

canvascanvas简介HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。准备工作在我们开始画时钟之前,我们需要页面上画一个canvas用来绘制时钟,而且canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成。其中width和height是画布的宽和高,并给它取个id后面方便找到她。canvas.getCont

2020-12-15 23:31:40 905 1

原创 path路径模块

ath模块是node.js中处理路径的核心模块。可以很方便的处理关于文件路径的问题。join() 将多个参数值合并成一个路径const path = require(‘path’);console.log(path.join(’./a’, ‘b’, ‘c’));basename() 获取路径中的文件名const path = require(‘path’);//获取文件名,包含扩展名console.log(path.basename(’./a/b/c/1.txt’));//获取文件名,去掉扩

2020-12-15 22:51:14 295

原创 理解 Promise

文章目录前言基本概念名称状态特点基本用法前言    Promise 是异步编程的一种解决方案,比传统的解决方案——callback回调函数和事件——更合理且更强大。它最早由社区提出并实现,ES6将其写进了语言标准,统一了用法,并原生提供了Promise对象。Promise说得通俗一点就是一种写代码的方式,并且是用来写JavaScript编程中的异步代码的基本概念名称译为“承诺”,这也就表达了将来会执行的操作,代表异步操作;状态pending状.

2020-12-08 19:59:55 91

原创 node-fs文件模块

文章目录前言一、读取文件1.异步方式2.同步方式二、写入文件1.覆盖式写入2.追加式写入三、文件的其他操作前言fs模块是nodejs的一个内置模块,fs模块用于对系统文件及目录进行读写操作。fs模块提供了一些操作系统文件相关的api,所有的文件系统操作都具有同步和异步的形式。异步的形式总是把完成回调作为其最后一个参数。 传给完成回调的参数取决于具体方法,但第一个参数总是预留给异常。 如果操作被成功地完成,则第一个参数会为 null 或 undefined。一、读取文件1.异步方式fs.rea

2020-12-07 20:32:21 123

原创 es6新增的Symbol、Set 和 Map

Symbol    Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种分别是:undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object);    Symbol 值通过Symbol函数生成,可以作为对象的属性名使用,保证不会与其他属性名产生冲突;let s = Symbol();ty

2020-12-01 23:42:03 93

原创 var、let和const的区别

    我们主要通过声明、初始化、值的可变性、作用域、变量提升等多个方面来详细了解var、let、const等关键字功能与特点。声明var,let:可以先声明,后赋值(初始化),默认值是 undefined。const:不能将声明与初始化单独分开,否则报错,没有默认值。var:声明的标识符可以被重复声明多次,多次声明进行的都是覆盖操作,const,let:同一个标识符不能同时声明多次,否则报语法错误。let variable;let

2020-12-01 20:55:02 99

原创 AJAX跨域问题

文章目录前言一、什么是跨域?二、使用步骤1.引入库2.读入数据总结前言jsonp是跨域问题的一种解决方案,是一种常用的跨域手段,只支持JS脚本和JSON格式的数据本质是利用同源策略的漏洞一、什么是跨域?当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域例如: http://www.abc.com/1.html / http://www.abc.com/aaa.html https://www.abc.com/1.html / http:/

2020-11-23 23:13:25 65

原创 jquery中serialize()

文章目录前言一、定义和用法二、使用三、注意事项前言我们在表单ajax请求中,往往会传递一些参数,要是一个个获取感觉很麻烦,于是jQuery提供serialize()方法,让我们可以方便快捷的获取到表单中想要的值。一、定义和用法serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。$("form").serialize

2020-11-23 20:08:05 4237

原创 原生AJAX请求

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、AJAX五部曲1.创建一个异步对象xmlhttp;2.调用open方法设置请求方式和请求地址;3.设置请求头(post需要)4.监听请求完成函数5.发送请求二、案例前言ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用。本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信.提示:以下是本篇文章正文内容,下面案例可供参考一、A

2020-11-17 20:59:52 105

原创 移动端 touch事件

文章目录前言一、事件类型二、touch和click当同一个对象同时绑定touch事件和点击事件:1.触摸并移动2.触摸不移动3.touch模拟点击前言    随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开那些触摸事件。一、事件类型touchstart : 触摸开始(手指放在触摸屏上)<div

2020-11-17 20:02:28 258

原创 bootstrap中的导航栏

    导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的容器代码组合,它很容易扩展,而且在折叠板插件的帮助下,它可以轻松与其它内容整合。Bootstrap提供了一套基础CSS样式,与此同时还提供了一组前端组件,其中就有导航栏。    导航栏:navbar    导航栏容器可以包含以下几个常用组成:品牌LOGO(.navbar-brand )导航菜单(.navba

2020-11-10 22:53:46 1519

原创 移动端中的视口

文章目录前言三种视口1.布局视口2.视觉视口3.理想视口前言    在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致。在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度。而移动端则较为复杂,它涉及到三个视口:布局视口、视觉视口和理想视口。三种视口    移动端浏览器通常宽度是 240px~640px,而大多数为 PC 端设

2020-11-10 20:33:14 523

原创 jquery过滤选择器

文章目录一、基本过滤选择器1.first和:last2.not(取非元素)3.even和:odd4.eq(x)5.gt(x)和:lt(x)6.header二、 内容过滤选择器1.contains(text)2 . :empty3. :has(selector)三、 内容过滤选择器1. :hidden2. :visible四、属性过滤选择器1.[attribute]2.[attribute = value]和[attribute != value]3. [attribute ^= value], [at

2020-11-08 23:49:17 122

原创 jquery—动画效果

元素的显示和隐藏效果show() 显示hide() 隐藏toggle() 开关,显示则隐藏,隐藏则显示 <div></div> <input type="button" value="隐藏" onclick="f1()" /> <input type="button" value="显示" onclick="f2()" /> <input type="button" value="开关效果" onclick="f3()

2020-11-01 22:36:01 102

原创 Jquery过滤选择器

过滤选择器    过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM元素,该选择器都以“:”开头,按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过滤和表单对象属性过滤选择器.基本过滤选择器:first 返回第一个元素//改变第一个 p元素的背景色为红色$('p:first').css({backgroundColor:'red'});:last 返回最后一个元素//改变最后一个 p元素的背景色为

2020-10-26 00:00:28 151

原创 transform属性

     transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、、缩放scale和位移translate。位移translate    translate()函数可以将元素向指定的方向移动,类似于position中的relative。或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。translat

2020-10-25 22:51:14 873

原创 使用百度地图API

文章目录前言第一步:注册百度账号和AK第二步:获得创建项目的AK第三步:将JS文件引用到项目第四步:创建地图容器第五步:设置地图中心点以及控件前言百度地图API是一个免费开放的接口,用于获取百度地图的资源,并进行相关操作。第一步:注册百度账号和AK进入百度地图开放平台>控制台>创建应用应用名称随便取一个,只要符合命名规范就可以了应用类型根据自己的项目类型进行选择白名单由于是自己本地测试,所以只填*就可以第二步:获得创建项目的AK控制台>应用管理>我的应用第

2020-10-25 22:27:24 559

原创 CSS3-animation

    animation是制作动画时使用的属性,之前的过渡都是需要人为触发,要么改变hover、要么就是改变css、要么就是改变类名,此时animation属性可以自己直接动画。创建动画关键字“ @keyframes”指示动画本身。接下来动画的命名,“ XXX…”。花括号{ }包含关键帧列表。在这种情况下,它是开始帧0%和结束帧100%。同样,开始和结束帧也可以写为关键字“ from ”和“ to”。例如:@keyframes bk{ from{

2020-10-18 23:59:44 136

原创 过渡transition

    W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。”    下面我们来看看transition如何使用:transition 属性是一个简写属性,用于设置四个过渡属性:transition-property:规定设置过渡效果的

2020-10-18 21:31:33 170 1

原创 html5 拖拽事件

文章目录前言一、设置元素可拖拽属性:draggable二、拖拽元素事件2.读入数据总结前言拖拽是个非常普遍的功能。在使用电脑的过程中,拖放一个东西是相当常见。很多javascript都类似实现了相关的功能,例如,jQueryUI的draganddrop组件。在HTML5中,拖拽(draganddrop)成为了标准操作,任何元素都可以进行拖放。一、设置元素可拖拽属性:draggabletrue表示可拖拽。false表示不可拖拽。auto默认值,img和带href属性的a标签则表示可拖拽,其他

2020-10-09 23:56:09 898

原创 localStorage与sessionStroge

文章目录前言一、localStorage存储setItem获取getItem删除一、sessionStorage存储setItem获取getItem删除总结前言localStrorage与sessionStrorage是html5的一个新对象,用来进行本地的存储,当前所有主流浏览器都支持,但是低版本不支持一、localStoragelocalStorage:是能长时间存储本地浏览器的数据,当一个标签页改变,其他标签页跟着改变存储setItem // 存储一个数据 local

2020-10-09 20:54:26 430

原创 canvas和svg区别

文章目录前言一、Canvas描述二、SVG描述三、区别历史:功能:技术:总结前言Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的。一、Canvas描述通过Javascript来绘制2D图形。是逐像素进行渲染的。其位置发生改变,会重新进行绘制。二、SVG描述一种使用XML描述的2D图形的语言SVG基于XML意味着,SVG DOM中的每个元素都是可用的,可以为某个元素附加Javascript事件处理器。在 SVG 中,每个被绘制的图形均被视为对象。

2020-10-09 19:19:21 200

原创 初识svg

什么是svg?SVG全称Scalable Vector Graphics,指可伸缩矢量图形.什么是矢量图?计算机中显示的图形一般可以分为两大类:位图,矢量图。 平时拍的照片就是位图,它是由一个个像素点组成,放大后就是马赛克。 而矢量图只能靠软件生成,也就是需要设计师来创造出的图像,其元素对象可编辑,图像放大或缩小不影响图像的分辨率, 说白点也就是再怎么放大也不会有马赛克或锯齿。因为它本来就是人用软件创造出的图形。SVG优点:SVG 是一种基于 XML 语法的图像格式,其他图像格式都是基于像素处理的

2020-10-08 23:58:29 125

原创 了解canvas画布

一、什么是 Canvas?HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像画布是一个矩形区域,可以控制其每一像素canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法二、canvas基本使用添加canvas元素(创建画布)<canvas id="myCanvas" width="300" height="300"> </canvas>canvas画布的默认尺寸是300*150通过JavaScript绘制图像&l

2020-09-27 23:57:10 1819

原创 HTML5 Video和Audio

文章目录前言一、视频Video1.video常用属性2.video常用方法3.video支持的视频格式二、音频Audio1.audio常用属性2.audio支持的视频格式前言  HTML5未出来之前,在线的音频和视频都是借助Flash或者第三方工具实现的,现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中,不需要安装任何插件就能播放音频和视频。原生的支持音频和视频,为HTML5注入了巨大的发展潜力。一、视频Video1.video常用属性autoplay: 自动播放。值是au

2020-09-27 19:59:41 226

原创 JavaScript之节流与防抖

    我们在开发的过程中会经常使用如scroll、resize、touchmove等事件,如果正常绑定事件处理函数的话,有可能在很短的时间内多次连续触发事件,十分影响性能。因此针对这类事件要进行节流或者防抖处理防抖    当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时。简单防抖的实现:// 防抖function debounce(fn,

2020-09-21 00:40:45 48

原创 BOM History和location

一、History对象1.什么是HistoryHistory 对象包含用户(在浏览器窗口中)访问过的 URL。History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问。注释 :没有应用于 History 对象的公开标准,不过所有浏览器都支持该对象。2.history对象的方法back()方法会让浏览器加载前一个浏览过的文档。 history.back()等效于浏览器中的“后退”按钮forward()方法会让浏览器加载后一个浏览的文档。hist

2020-09-20 21:10:34 159

原创 获取窗口属性,获取dom尺寸

查看滚动条的距离window.pageXOffset/pageYOffsetie8及ie8以下不兼容document.body/document.Element.scrollLeft/scrollTop兼容性比较混乱,用时取两个值相加,因为不可能存在两个同时有值 var x = window.pageXOffset; var y = window.pageYOffset; console.log("pageXOffset:" + x,"pageYOf

2020-09-13 18:38:36 245

原创 JS定时器

基本语法setInterval() :以指定时间为周期循环执行(循环定时器)setInterval(expression,milliseconds)setTimeout(): 只在指定时间后执行一次(延迟定时器) setTimeout(expression,milliseconds)    其中参数一既可以是字符串,也可以是匿名函数,或者是一个函数名,参数二是延时或者重复执行的毫秒数。创建定时器:setTimeout(function ()

2020-09-13 17:48:46 162

原创 关于DOM的事件操作

事件的三要素    事件的三要素:事件源、事件、事件驱动程序。比如,我用手去按开关,灯亮了。这件事情里,事件源是:手。事件是:按开关。事件驱动程序是:灯的开和关。再比如,网页上弹出一个广告,我点击右上角的X,广告就关闭了。这件事情里,事件源是:X。事件是:onclick。事件驱动程序是:广告关闭了。于是可以总结出:谁引发的后续事件,谁就是事件源。事件源:引发后续事件的html标签。事件:js已经定义好了。事件驱动程序:对样式和html的操作。也就是DOM。

2020-09-06 23:49:16 149

原创 innerText和innerHTML

    几乎所有DOM元素都有innerText,innertHTML属性(注意大小写),分别是元素标签内的文本表示形式和HTML源代码,这两个属性是可读可写的。<body><div id="one"> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p> <p>这是一段文字</p>

2020-09-06 23:03:57 188

空空如也

空空如也

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

TA关注的人

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