- 博客(97)
- 收藏
- 关注
RSS订阅原创 小程序 转盘抽奖 demo
// pages/draw/draw.jsconst app = getApp()let { config, Comm} = require('../../utils/util.js');let { AJAX,} = require('../../utils/ajax.js');var timer;var n = 1;var which = 1; //中奖项 var drawCode = 0;var deg; //中奖度数// var luck = [15, 45, 75
2020-11-03 10:57:12
1014
原创 vue excel文件上传、下载、预览、预览日期格式转换
安装xlsxnpm install xlsximport XLSX from 'xlsx'上传与预览页面组件 <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body> <el-upload ref="upload" accept=".xlsx, .xls" :disabled="upload.isUploading" action=""
2020-10-23 11:48:18
870
原创 小程序开发 登录
小程序的登录一般来说可将登录的方法写在app.js中，这样可方便其他的页面调用。第一步，获取登录凭证（code）getAppCode: function (callback) { let _this = this; wx.login({ success: function (data) { // console.log(data); callback && callback(data.code) },
2020-08-03 14:10:32
404
原创 小程序开发 封装页面跳转常用的方法
封装常用的公共方法需要定义一个公共的js文件，保证其他页面可以正常使用。因此我将页面跳转常用的方法放在了utils文件当中。const utils = { /* 保留当前页面，跳转到指定url页面，但是不能跳到带tabbar的页面 */ pageGo: function (url, cb) { if (url) { wx.navigateTo({ url: url,
2020-07-18 00:07:50
681
原创 笔记 前端需要了解的浏览器兼容问题
css兼容性问题不同浏览器的标签默认的外补丁和内补丁不同，解决方案：用通配符*来设置各个标签的内外补丁是0（即设置margin和padding为0）；div的垂直居中问题 vertical-align：middle；文字居中：将行距增加到和整个div一样，高line-height=行高；margin加倍问题：设置为float的div在ie下的margin会加倍。解决方案：为这个div设置样式：display:inline;js兼容性问题在标准的事件绑定中绑定事件的方法函数为addEventL
2020-05-24 16:52:30
273
原创 笔记 前端需要了解的html5新元素
用于绘画的 canvas 元素；用于媒介回放的 video 和 audio 元素；对本地离线存储的更好的支持；新的特殊内容元素，比如 article、footer、header、nav、section；新的表单控件，比如 calendar、date、time、email、url、search；...
2020-05-24 16:47:57
140
原创 笔记 前端需要了解的浏览器向服务器的请求方式
GET：获取数据POST：提交数据HEAD：请求头信息PUT：上传文档到服务器DELETE：删除远程服务器上的某个文档OPTION：本地环境请求接口的时候，每次请求接口之前都会多一次OPTIONS请求
2020-05-24 16:38:05
294
原创 笔记 前端需要了解的线程与进程的区别
一个程序至少有一个进程，一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度
2020-05-24 16:30:47
427
原创 笔记 前端需要了解的attribute和property的区别
定义Property：属性，所有的HTML元素都由HTMLElement类型表示，HTMLElement类型直接继承自Element并添加了一些属性，添加的这些属性分别对应于每个HTML元素都有下面的这5个标准特性: id,title,lang,dir,className。DOM节点是一个对象，因此，他可以和其他的JavaScript对象一样添加自定义的属性以及方法。property的值可以是任何的数据类型，对大小写敏感，自定义的property不会出现在html代码中，只存在js中。Attribute
2020-05-24 16:26:51
943
原创 笔记 前端需要了解的用js去除字符串空格
正则去除所有空格:：str = str.replace(/\s*/g,"")去除两头空格:：str = str.replace(/^\s*|\s*$/g,"")去除左空格： str = str.replace( /^\s*/, “”)去除右空格： str = str.replace(/(\s*$)/g, "")str.trim(str)局限性：无法去除中间的空格var str = " xiao ming ";var str2 = str.trim();console.log(st
2020-05-24 16:23:16
272
原创 笔记 前端需要了解的BFC
什么是BFC?BFC指的是Block Formatting Context，它提供了一个环境， html元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其他环境中的布局，决定了元素如何对其内容进行定位，以及和其他元素的关系和相互作用。其中：FC(Formatting Context)指的是页面中的一个渲染区域，并且拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。块级格式化上下文，指的是一个独立的块级渲染区域， 只有block-level box参与，该区域拥
2020-05-24 16:12:12
152
原创 笔记 前端需要了解的微信小程序优劣势
优点无需下载，通过搜索和扫一扫就可以打开。良好的用户体验：打开速度快。开发成本要比App要低。安卓上可以添加到桌面，与原生App差不多。为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程， 不能通过审查的小程序是无法发布到线上的。劣势限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。依托
2020-05-23 17:28:24
368
原创 笔记 前端需要了解的微信小程序与H5的区别
运行环境的不同传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。开发成本的不同只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG。获取系统级权限的不同系统级权限都可以和微信小程序无缝衔接。应用在生产环境的运行流畅度长久以来，当HTML5应用面对复杂的业务逻辑或者丰富的页面交互时，它的体.
2020-05-23 17:15:43
316
原创 笔记 前端需要了解的html5 为什么只需要写DOCTYPE
原因html5 不是基于sgml (标准通用标记语言)，不需要对dtd文件进行引用，但是需要doctype来规范浏览器的行为，否则浏览器将开启怪异模式，而html4.01 基于sgml，需要引入dtd，才能告知浏览器文档使用的文档类型。作用<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。告诉浏览器按照何种规范解析页面严格模式与混杂模式严格模式的排版和JS运作模式是 以该浏览器
2020-05-23 17:12:47
330
原创 笔记 前端需要了解的优化图像的方法
不用图片，尽量用css3代替。 比如说要实现修饰效果，如半透明、边框、圆角、阴影、渐变等，在当前主流浏览器中都可以用CSS达成。使用矢量图SVG替代位图。对于绝大多数图案、图标等，矢量图更小，且可缩放而无需生成多套图。现在主流浏览器都支持SVG了，所以可放心使用！使用恰当的图片格式。我们常见的图片格式有JPEG、GIF、PNG。基本上，内容图片多为照片之类的，适用于JPEG。而修饰图片通常更适合用无损压缩的PNG。GIF基本上除了GIF动画外不要使用。且动画的话，也更建议用video元素和视频格式，或.
2020-05-23 16:53:37
238
原创 笔记 前端需要了解的微信小程序相关文件类型
WXML:（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以 构建出页面的结构。内部主要是微信自己定义的一套组件。WXSS :(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式，js :逻辑处理，网络请求app.json:必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入 口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置 导航条样式，配置默.
2020-05-23 16:50:04
355
原创 笔记 前端需要了解的微信小程序原理
微信小程序采用JavaScript、WXML、WXSS三种技术进行开发，从技术讲和现有的前端开发差不多，但深入挖掘的话却又有所不同。JavaScript首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中，因此一些H5技术的应用，需要微信App提供对应的API支持，而这限制住了H5技术的应用，且其不能称为严格的H5，可以称其为伪H5，同理，微信提供的独有的某些API，H5也不支持或支持的不是特别好。WXMLWXML微信自己基于XML语法开发的，因此开发时，只能使用微信提供的现有
2020-05-23 16:45:45
389
原创 笔记 前端需要了解的小程序生命周期
Data Object 页面的初始数据onLoad Function 生命周期函数–监听页面加载onReady Function 生命周期函数–监听页面初次渲染完成onShow Function 生命周期函数–监听页面显示onHide Function 生命周期函数–监听页面隐藏onUnload Function 生命周期函数–监听页面卸载onPullDownRefresh Function 页面相关事件处理函数–监听用户下拉动作onReachBottom Function 页面上拉触底事件.
2020-05-23 16:40:27
127
原创 笔记 前端需要了解的小程序页面跳转
wx.navigateTo(OBJECT)保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面wx.redirectTo(OBJECT)关闭当前页面，跳转到应用内的某个页面。wx.switchTab(OBJECT)跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面wx.navigateBack(OBJECT)关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。...
2020-05-23 16:36:50
145
原创 笔记 前端需要了解的jQuery选择器
基本选择器：#id，class，element，*；层次选择器：parent > child，prev + next ，prev ~ siblings；基本过滤器选择器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt；内容过滤器选择器： :contains ，:empty ，:has ，:parent；可见性过滤器选择器：:hidden ，:visible；属性过滤器选择器：[attribute] ，[attribute=value] ，[at.
2020-05-23 16:24:43
104
原创 笔记 前端需要了解的CDN
CDN的全称：是Content DeliveryNetwork，即内容分发网络，加速的意思，那么网站CDN服务就是网站加速服务。CDN加速原理CDN加速将网站的内容缓存在网络边缘（离用户接入网络最近的地方），然后在用户访问网站内容的时候，通过调度系统将用户的请求路由或者引导到离用户接入网络最近或者访问效果最佳的缓存服务器上，有该缓存服务器为用户提供内容服务；相对于直接访问源站，这种方式缩短了用户和内容之间的网络距离，从而达到加速的效果。CDN的特点本地加速 提高了企业站点(尤其含有大量图片和静态页
2020-05-21 21:30:11
185
原创 笔记 前端需要了解的模块化知识
什么是模块化？模块化就是为了减少系统耦合度，提高高内聚，减少资源循环依赖，增强系统框架设计；让开发者便于维护,同时也让逻辑相同的部分可复用；模块化开发：针对js、css，以功能或业务为单元组织代码。js方面解决独立作用域、依赖管理、api暴露、按需加载与执行、安全合并等问题，css方面解决依赖管理、组件内部样式管理等问题。模块化的过程第一步，将整个系统按功能、格式、加载顺序、继承关系分割为一个一个单独的部分；第二步，将功能或特征相似的部分组合在一起，组成一个资源块。将每个资源块按找需求,功能场景以及
2020-05-21 21:17:43
96
原创 笔记 前端需要了解的html5语义化
用正确的标签做正确的事情；html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO；使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解；...
2020-05-21 20:58:59
66
原创 笔记 前端需要了解的css中 link 和@import 的区别
link属于HTML标签，而@import是CSS提供的;页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;import只在IE5以上才能识别，而link是HTML标签，无兼容问题;link方式的样式的权重 高于@import的权重。...
2020-05-21 20:54:53
119
原创 笔记 前端需要了解的JSON及JSON与XML的区别
原理：JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。JSON与XML的区别数据体积方面：JSON相对于XML来讲，数据的体积小，传递的速度更快些。数据交互方面：JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。数据描述方面：JSON对数据的描述性比XML较差。传输速度方面：JSON的速度要远远快于XML。...
2020-05-21 20:52:55
179
原创 笔记 前端需要了解的jsonp的原理
通过动态创建script标签，其scr指向非同源的url，并传递一个callback参数给服务端，服务器返回一个以callback参数作为函数名的函数的调用和一系列参数，页面接收到响应后执行回调并对数据进行处理。优点：JSONP可以跨越同源策略，实现跨域传输，不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；JSONP兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；在请求完毕后可以通过调用callback的方式回传结
2020-05-21 20:37:47
149
原创 笔记 前端需要了解的同源策略
同源策略简单的说就是一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合。其实主要是用来防止 CSRF 攻击的。简单点说，CSRF 攻击是利用用户的登录态发起恶意请求。也就是说，没有同源策略的情况下，A 网站可以被任意其他来源的 Ajax 访问到内容。如果你当前 A 网站还存在登录态，那么对方就可以通过 Ajax 获得你的任何信息。...
2020-05-21 20:33:30
193
原创 笔记 前端需要了解的JavaScript 与 HTML 之间交互的事件模型分为几个阶段
捕获阶段：在事件冒泡的模型中，捕获阶段不会响应任何事件；目标阶段：目标阶段就是指事件响应到触发事件的最底层元素上；冒泡阶段：冒泡阶段就是事件的触发响应会从最底层目标一层层地向外到最外层（根节点），事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；...
2020-05-21 20:31:04
88
原创 笔记 前端需要了解的axios
特点：axios 对原生xhr封装从Promise实现版本，符合最新es规范Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API它可以拦截请求和响应它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据安全性更高，客户端支持防御 XSRF以登录为例： userLogin({commit},obj){ //console.log(obj) return axios({ url:api.user
2020-05-17 20:49:15
212
原创 笔记 前端需要了解的MVVM
什么是MVVM？MVVM是Model-View-ViewModel的缩写，MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。与MVC 有什么区别？传统的 MVC 架构通常是使用控制器更新模型，视图从模型中获取数据去渲染。当用户有输入时，会通过控制器去更新模型，并且通知视图进行更新MVC 有一个巨大的缺陷就是控制器承
2020-05-17 18:18:53
183
原创 笔记 前端需要了解的渐进增强和优雅降级之间的不同
优雅降级Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。渐进增强从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。...
2020-05-17 18:05:34
127
原创 js中阻止事件冒泡和默认事件
使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。防止冒泡和捕获：w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true取消默认事件：w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;...
2020-05-17 17:45:41
126
原创 笔记 前端需要了解的ajax
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。（异步无刷新）优点：减轻服务器的负担,按需取数据,最大程度的减少冗余请求局部刷新页面,减少用户心理和实际的等待时间,带来更好的用户体验基于xml标准化,并被广泛支持,不需安装插件等,进一步促进页面和数据的分离缺点：ajax不支持浏览器back按钮。安全问题 AJAX暴露了与服务器交互的细节。对搜索引擎的支持比较弱。破坏了程序的异常机制。不容易调试。AJAX的工作原理：创建ajax对象（XMLHttpReq
2020-05-17 17:43:21
208
原创 js中添加、移除、移动、复制、创建和查找节点
创建新节点createDocumentFragment() //创建一个DOM片段createElement() //创建一个具体的元素createTextNode() //创建一个文本节点添加、移除、替换、插入appendChild() //添加removeChild() //移除replaceChild() //替换insertBefore() //插入查找getElementsByTagName() //通过标签名称getElementsByName() //通过元素的
2020-05-17 17:27:07
228
原创 笔记 事件委托
事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown……）的函数委托到另一个元素；一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。事件委托的好处包括：动态绑定事件与减少内存消耗。...
2020-05-17 17:07:50
91
原创 笔记 浏览器内核
IE: trident内核Firefox：gecko内核Safari：webkit内核Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome：Blink(基于webkit，Google与Opera Software共同开发)
2020-05-17 16:57:22
96
原创 笔记 前端需要了解的时间复杂度
什么是时间复杂度？通常使用最差的时间复杂度来衡量一个算法的好坏。常数时间 O(1) 代表这个操作和数据量没关系，是一个固定时间的操作，比如说四则运算。对于一个算法来说，可能会计算出操作次数为 aN + 1，N 代表数据量。那么该算法的时间复杂度就是 O(N)。因为我们在计算时间复杂度的时候，数据量通常是非常大的，这时候低阶项和常数项可以忽略不计。当然可能会出现两个算法都是 O(N) 的时间复杂度，那么对比两个算法的好坏就要通过对比低阶项和常数项了。...
2020-05-17 16:49:18
374
原创 笔记 从输入 URL 到页面渲染的整个流程
DNS 查询 DNS 缓存建立 TCP 连接（三次握手）连接复用发送 HTTP 请求（请求的四部分）后台处理请求4.1 监听 80 端口4.2 路由4.3 渲染 HTML 模板4.4 生成响应发送 HTTP 响应关闭 TCP 连接（四次挥手）解析 HTML下载 CSS（缓存解析 CSS下载 JS（缓存解析 JS下载图片解析图片渲染 DOM 树渲染样式树执行 JS...
2020-05-17 16:45:41
145
原创 笔记 Webpack 性能优化
减少 Webpack 打包时间优化 Loader对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，然后对 AST 继续进行转变最后再生成新的代码，项目越大，转换代码越多，效率就越低。可以优化 Loader 的文件搜索范围module.exports = { module: { rules: [ { // js 文件才使用 babel test: /\.js$/,
2020-05-17 16:41:42
149
原创 笔记 前端性能优化的方法
减少 HTTP 请求 ；减少 DNS 查找 ；避免重定向 ；使用 Ajax 缓存；延迟载入组件；预先载入组件 ；减少 DOM 元素数量；切分组件到多个域；最小化 iframe 的数量；不要出现http 404 错误；减少资源体积减少资源请求次；使用CSS缩写；减少代码量；减少查询层级：如.header .logo要好过.header .top .logo；减少查询范围：如.header>li要好过.header li；避免TAG标签与CLASS或ID并存：如a.top、.
2020-05-17 16:17:39
110
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人