- 博客(36)
- 收藏
- 关注
原创 javascript
1.创建节点(Es6支持以下)createElement通过传入指定的一个标签名来创建一个元素,如果传入的标签名是一个未知的,则会创建一个自定义的标签,注意:IE8以下浏览器不支持自定义标签。var div = document.createElement(“div”);createTextNode用来创建一个文本节点,var textNode = document.createTextNode(“一个TextNode”);cloneNode是用来返回调用方法的节点的一个副本,它接收一个bool参
2020-09-29 19:02:54
167
原创 swiper
一.Swiper常用于移动端网站的内容触摸滑动Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!二.基本用法swiper使用需要两个文件,一个是swiper.css,里面规定了一些在这个滑动轮播插件中常用的样式,当然如果你愿意的话可以自己定义样式另外一个是swiper.js这个是插件的主体部分。这些文件可以在官
2020-09-28 18:41:41
248
原创 性能优化
前端是庞大的,包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的,针对方方面面的资源都有不同的方式。那么,前端优化的目的是什么 ? 1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。 2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。 总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。 前端优化的途径有很多,按粒度大致可
2020-09-24 18:54:16
399
原创 web前端的兼容问题
1、不同浏览器的标签默认的外补丁和内补丁不同.即随便写几个标签, 在不加样式控制的情况下, 各自的margin和padding差异较大.解决方案: CCS里: *2、块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大会使得ie6后面的一块被顶到下一行.解决方案: 在float的标签样式中加入 display: inline; 将其转化为行内属性3、设置较小高度标签(一般小于10px),在IE6,IE7,遨游中高度超出自己设置高度IE6、7和遨游里这个标签的
2020-09-23 19:40:22
175
原创 jQuery
1.jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对
2020-09-22 18:34:46
146
原创 react
React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。由于 React的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。所以,越来越多的人开始关注和使用,认为它可能是将来 Web 开发的主流工具。这个项目本身也越滚越大,从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Nat
2020-09-21 19:31:50
167
原创 微信支付功能
进行微信支付,在小程序端我们主要做三件事:注:服务端调用统一下单API、签名算法不再本次分享讨论范围内,请期待毛毛的下次分享。使用** wx.login **获取临时登录凭证code,发送到后端获取openIdwx.login({success (res) {if (res.code) {// 发起请求,换取openIdwx.request({url: ‘’,data: {code: res.code}})}}})2.将** openId **以及相应需要的商品信息发送到.
2020-09-20 20:55:38
176
原创 Flutter
1.Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。Flutter 开源、免费,拥有宽松的开源协议,适合商业项目。2.Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台 [3] 。Flutter 可以方便的加入现有的工程中。在全世界,Flutter 正在被越来越多的开发者和组织使用,并且 Flutter是完全免费、开源的。它
2020-09-18 19:25:09
220
原创 Vant
轻量,可靠的移动端Vue组件库是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。在新项目中使用 Vant 时,推荐使用 Vue 官方提供的脚手架 Vue Cli 创建项目一:安装npm install -g @vue/cli***通过 npm 安装在现有项目中使用 Vant 时,可以通过npm或yarn安装通过 npm 安装npm i vant -S通过 yarn 安装yarn add vant二:使用推荐手动按
2020-09-17 21:33:02
206
原创 vue3.0和vue2.0的区别
vue3.0和2.0的区别Vue-cli3.0于 8月11日正式发布,看了下评论,兼容性不是很好,命令有不少变化,不是特别的乐观vue3.0 的发布与 vue2.0 相比,优势主要体现在:更快、更小、更易维护、更易于原生、让开发者更轻松;更快 1、virtual DOM 完全重写,mounting & patching 提速 100%; 2、更多编译时 (compile-time)提醒以减少 runtime 开销; 3、基于 Proxy 观察者机制以满足全语言覆盖以及更好的性能;
2020-09-16 19:32:10
1802
原创 Echarts
一.Echarts是啥?1、 Echarts,一bai个纯 Javascript 的图表库,可以流畅的du运行在 PC 和移动设备上,兼zhi容当前绝大部分浏dao览器(IE8/9/10/11),Chrome,Firefox,Safari等。2、底层依赖轻量级Canva+库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。3、ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果,并且对移动端做了深度的优化。二.Echarts的优点echarts的优点:
2020-09-15 19:03:16
1586
原创 element-ui
1.Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI 。原网址:https://blog.youkuaiyun.com/u012285967/article/details/530238252.开发环境1.安装webpacknpm install -g webpack3.安装vue-clivue-cli是什么?vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。使用步骤:安装vue-cli:npm
2020-09-14 19:11:40
130
原创 盒子居中的十种居中方式
1.第一种:利用margin,div1的宽减去div2的宽就是div2margin-left的数值:(100-40)/2=30div1的高减去div2的高就是div2margin-top的数值:(100-40)/2=30<html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body>
2020-09-09 18:53:37
314
原创 原生JS的图片赖加载
有时候一个网页会包含很多的图片,例如淘宝京东这些购物网站,商品图片多只之又多,页面图片多,加载的图片就多。服务器压力就会很大。不仅影响渲染速度还会浪费带宽。比如一个1M大小的图片,并发情况下,达到1000并发,即同时有1000个人访问,就会产生1个G的带宽。为了解决以上问题,提高用户体验,就出现了懒加载方式来减轻服务器的压力,优先加载可视区域的内容,其他部分等进入了可视区域再加载,从而提高性能。vue项目中的打包,是把html、css、js进行打包,还有图片压缩。但是打包时把css和js都分成了几部分,
2020-09-08 19:09:40
130
原创 ES6/7/8的语法
一.javascript的组成1.ECMAScript:javascript核心语法,不依赖平台例如:定义变量,if,switch,for,数组Api,字符串API,正则Api…2.DOM:(Document Object Model)针对浏览器标签操作 例如:获取id,获取类名,获取标签名注:操作真实DOM,引起重绘和回流–>才引出虚拟DOM 重绘:主要指页面颜色的改变,不影响DOM的空间变化 color,background 回流:指页面元素的尺寸(width,padding,he
2020-09-03 19:40:42
187
原创 JS的原型链,闭包,继承
一.js的原型链原型链是JS特有的一种继承机制原型链会涉及到___proto___,prototype原型链的顶端就是null应用场景:继承优点:把相同或类似的方法写在原型上,方便实例化对象复用缺点:不好理解,通常只前端人才理解ES6推出class extends来实现继承二.JS的继承继承是面向对象开发思想的特性之一面试对象的三大特点:封装,继承,多态继承主要分ES5和ES6的继承方式ES5的继承–主要通过函数实现类原型链继承//创建一个父类function Parent()
2020-09-02 19:54:25
363
原创 预习闭包
1、什么是闭包?闭包是指有权访问另外一个函数作用域中的变量的函数。可以理解为(能够读取另一个函数作用域的变量的函数)复制代码1 function outer() {2 var a = ‘变量1’3 var inner = function () {4 console.info(a)5 }6 return inner // inner 就是一个闭包函数,因为他能够访问到outer函数的作用域7 }复制代码很多人会搞不懂匿名函数与闭包的关系,实际上,闭包是站在作用域的角度上来定义的。因为i
2020-09-01 20:33:52
104
原创 JS的防抖和节流
一.防抖的实现防抖主要还是用定时器来实现的在固定的时间内没有触发事件,会在固定时间结束后触发,如果固定时间内触发事件了,会在延长固定时间再触发二.节流的实现1.时间戳的方法来实现节流:无论在固定时间内是否有事件触发,都会按照固定时间规律触发2.定时器实现三.new的特点new的特点new 一个构造函数,会自动reutrn一个实例化对象new完的实例化对象____proto___自动指向构造函数的prototypenew构造函数传参自动赋值给当前实例化对象四,call,apply,
2020-08-31 23:33:43
140
原创 JS的方法
一.js数据类型“JavaScript的数据类型共有六种。分别是undefined、null、boolean、number、string、object(ES6新增第七种Symbol数据类型,它的实例是唯一且不可改变的类型的值)。”二.js数组的方法1.push2.concat方法3.pop方法删除数组中的最后一个元素且会将这个被删除的元素返回4.splice 方法删除或插入指定位置的元素函数的原型为splice(index,howmany,element1,…,elementX)in
2020-08-27 22:03:40
243
原创 递归组件
一.什么是递归组件?简单来说就是在组件中内使用组件本身,下面我们就来看看如何在项目中使用递归组件去解决我们上面问题。首先我们先创建一个 List 的递归组件<template> <div> <div class="list-item" v-for="(item, index) in list" :key="index"> <div class="item-name"> <
2020-08-26 21:57:47
3616
原创 坚决UI组件的样式穿透问题
scoped看起来很好用,当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。1、stylus的样式穿透 使用 >>>.wrapper >>> .swiper-pagination-bullet-activebackground: #fff复制代码2、sass和less的样式穿透 使用 /deep///
2020-08-24 20:43:05
254
1
原创 vue的登录授权获取token
一.获取时遇到的问题无法获取token:坚决方案:首先先检擦封装的登录接口和验证码接口是否有问题,在main.js中引入 import ‘./http/request’在http文件夹中的request.js文件中创键一个axios实例baseURL:env.prod.baseUrl+vipUrl在获取验证码的页面中引入登录接口和验证码接口,看是否有问题将token存储到本地,成功后跳转到我的页面...
2020-08-21 00:07:19
744
原创 vue axios和日期库的使用
一、axios数据请求封装env.jsrequest.jsapi.js二、生产环境,开发环境切换1.第一种方法:通过配置.env文件来实现参考:https://cli.vuejs.org/zh/guide/mode-and-env.html第二种方法第一步:通过创建不同环境js文件,再通过cross-env来切换configdev.jsprod.jsdev.jsmodule.exports = {BASE_URL: “https://test.365msmk.com”};p
2020-08-19 20:49:21
111
原创 Vue的axios和日期库使用
一、axios数据请求封装env.jsrequest.jsapi.js二、生产环境,开发环境切换1.第一种方法:通过配置.env文件来实现参考:https://cli.vuejs.org/zh/guide/mode-and-env.html第二种方法第一步:通过创建不同环境js文件,再通过cross-env来切换configdev.jsprod.jsdev.jsmodule.exports = {BASE_URL: “https://test.365msmk.com”};p
2020-08-19 19:14:42
241
原创 vue axios和日期库的使用
一、axios数据请求封装env.jsrequest.jsapi.js二、生产环境,开发环境切换1.第一种方法:通过配置.env文件来实现参考:https://cli.vuejs.org/zh/guide/mode-and-env.html第二种方法第一步:通过创建不同环境js文件,再通过cross-env来切换configdev.jsprod.jsdev.jsmodule.exports = {BASE_URL: “https://test.365msmk.com”};p
2020-08-19 19:12:57
315
原创 Vue3.0的安装与使用
一、重新认识vue-cli安装最新版本脚手架vue-cli官网:https://cli.vuejs.org/zh/目前版本:v4.5.x安装:npm install -g @vue/cli2.使用vue脚手架创建项目第一种命令行vue create 项目名(字母开头,不要大写) 回车default (自动安装)manually (建议:手动安装)第二种:以图形界面方式创建vue ui3.vue-cli4.5目录结构publicindex.html —入口html页面静态资源–j
2020-08-19 01:58:42
764
原创 webpack构建环境
一.前端的构建工具1.grunt2.gulp3.webpack(主流构建工具,https://webpack.js.org/)4.Fis3(百度)二.webpack是什么WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。三.为社么要用webpack今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和
2020-08-17 19:31:14
106
原创 js逻辑题分析
一.针对于预加载,变量提升function Foo(){getName=function (){alert(1)}return this;}Foo.getName=function () {alert(2)}Foo.prototype.getName=function () {alert(3)}var getName=function () {alert(4)}function getName() {alert(5)}判断下面输出的结果Foo.getName()getName
2020-08-14 20:29:06
320
原创 git常用指令
将本地项目提交到git仓库************************************************git配置git config —-global user.email “github邮箱”git config —-global user.name “github用户名”1 git init 实例化启动gitgit add 文件名 将文件添加到暂存区git add . 将所有文件添加到本地仓库暂存
2020-08-14 07:35:33
63
原创 微信小程序配置注册和登录
1.第一步先在.wxml文件中写入布局2.在http文件夹中的index.js中封装接口3.在auth.js中封装一些登录授权的方法4.在我的页面中调用方法
2020-08-13 00:55:23
1046
原创 微信小程序封装接口
1.先创键一个http文件夹在http文件夹里在创键一个api.js文件, env.js文件 , index.js文件,request.js文件2.env.js里面是用来配置环境的,有开发环境,生产环境,测试环境3.request.js文件是用来封装Ajax, 请求参数的 。还得要引入env.js文件 ,必须改专属域名url:是地址method:是请求参数的请求方式get , postdata:代表传递的参数4.index.js主要就是用来访问自己写的接口需要引入re
2020-08-10 23:11:28
206
原创 微信小程序登录授权
1.下载天使童装项目源码:https://github.com/EastWorld/wechat-app-mall2.需要登录授权的页面必须要传递token哪些页面需要token商品中详情页:收藏,加入购物车我的:购物车页面token值从哪里来?1.何为token:前端鉴权的一种方式,token由后端生成,token是有时效性2.微信小程序登录授权拿到token第一步:登录流程参考文档:https://developers.weixin.qq.com/miniprogram/dev/f
2020-08-08 21:09:32
268
原创 微信小程序的第三方UI框架
一.微信小程序UI框架的1.在小程序的终端中输入 npm init -y 初始化package.json2. 安装需要的小程序的UI框架第三方包 npm install weui-miniprogram3.配置小程序支持npm打开开发者工具–详情–本地设置–勾选—使用npm模块打开开发者工具–工具–构造npm4.在全局样式中的app.wxss引入第三方框架样式。 @import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style
2020-08-07 18:29:06
1073
原创 微信小程序如何创键自定义模板和自定义事件,组件通讯
一.自定义模板先创键一个public文件夹,在public中创键一个template文件夹,在创键一个mouvie_modan文件夹,在这个中创建两个wxml文件在父模块中用import引入父模块接受子模块二.自定义组件子组件如何创键第一步:就是先创建一个component文件夹第二步:引入组件把引入的父组件中的details.json文件的usingComponents添加要使用的子组件例如:{“usingComponents”:{“组件名”:“要引入的子组件路径”,“Dia
2020-08-07 02:08:13
286
原创 微信小程序的事件和内置组件
一.微信小程序中的事件冒泡和阻止事件冒泡bind+事件名=“方法名” 向上传递事件,即事件冒泡catch+事件名=“方法名” 阻止事件冒泡二.微信小程序的生命周期1.整体小程序的生命周期App({onLaunch() {},监听小程序的初始化,只触发一次onShow () {}, 小程序启动切换到前台运行onHide() {} , 小程序切换到后台运行})2.小程序页面级别的生命周期page({ onLoad(){},//页面创键完,只触发一次,
2020-08-05 20:19:58
557
原创 微信小程序
1.微信小程序是啥微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。主要类型为:企业、政府、媒体、其他组织或个人的开发者,均可申请注册小程序.2.微信小程序的上线时间2017年1月9日,张小龙在2017微信公开课Pro上发布的微信小程序正式上线。3.微信小程序有什么样的功能?微信小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中,通过公众号关联,用户可以实现公众号与
2020-08-04 18:45:06
783
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人