自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

前端开发

web前端开发

原创 js设计模式

不常用原型模式重新创建一个对象开销比较大,不合适,通过原型模式,帮你在原有对象克隆或拷贝出对象Object.create是原型模式的一种实现const obj={ name:'xiaoming', getName(){ console.log(this.name) }} let a=Object.create(obj)a.name='lili...

2020-08-08 21:07:50 64

原创 【持续更新】重学webpack

安装webpack webpack-cli -Dwebpack进行0配置打包工具 ---->输出后的结果(js模块)npx 5.2支持的语法// 打包npx webpack

2020-07-31 14:57:03 64

原创 【持续更新】typecsript语法

简介介绍typescript是微软开发的一款编程语言;是js的超级,遵循最新的es6、es5规范,扩展了js的语法;更像后端java、c#这样的面向对象语言,可以让js开发大型企业项目;angular2+基于ts语法,最新的vue、react也集成ts。安装npm install typescript -gtsc index.ts语法...

2020-07-27 17:50:22 33

原创 jwt

例子npm init -ynpm i express jsonwebtoken dotenvnpm i nodemon -D// package.json"scripts": { "devStart": "nodemon server.js", "devStartAuth": "nodemon authServer.js", "test": "echo \"Er...

2020-04-12 23:28:05 89

原创 微信小程序(nodejs支付)

小程序支付文档小程序支付api:requestPayment

2020-03-07 23:30:45 136

原创 vue ssr和vue-server-renderer原理

原理程序想要成为可交互的spa就必须要用client bundle// 安装npm i vue-server-renderer express -D步骤:1)用renderToString()把vue实例挂载的内容变成html,返回给客户端1、把vue实例变成html// nodejs服务器const express = require("express");const Vu...

2020-02-25 10:28:36 723

原创 keep-alive原理

什么是keep-alive?keep-alive是vue中的一个内置组件,能够把不活动的组件保存到缓存当中,而不是直接销毁他,其实是一个抽象的组件,不会渲染到真实dom中,页不会出现在父组件链中,作用是提供给路由切换用的。提供include与exclude两个属性,允许组件有条件进行缓存。实现原理其实就是在created时将需要缓存的VNode节点保存在this.cache中,在rende...

2020-01-20 23:52:42 188

原创 vue-router原理

hash1、onhashchange事件这是一个HTML 5新增的事件,当#值发生变化时,就会触发这个事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。它的使用方法有三种:window.onhashchange = func;<body onhashchange="func();">window.addEventListene...

2020-01-20 11:34:36 158

原创 vuex实现原理

vuex是什么?为什么会出现?为什么出现:vue一般是单项数据流,作用:多个组件共享数据或者是跨组件传递数据,怎么实现?

2020-01-16 22:07:23 489

原创 微信小程序(订阅消息)

小程序模板消息即将被废弃掉订阅消息文档步骤:1、获取用户openid 、access_token(前面文章提到过)2、获取模板 ID3、获取下发权限(api)4、发送订阅消息 (api)模板id小程序代码:获取下发权限:// login.jsrequestMsg(){ return new Promise((resolve, reject) => { ...

2019-10-23 00:00:19 27464 7

原创 微信小程序(模板消息)

formid用过一次,立即失效,如果formid不使用,7天内天可以用

2019-09-06 11:50:07 1958

原创 Flutter 【表单】

文章目录TextField 文本框组件Checkbox、CheckboxListTile 多选框组件在Flutter中通过Navigator组件管理路由导航。并提供了管理堆栈的方法。如:Navigator.push和Navigator.popTextField 文本框组件属性描述maxLines设置此参数可以把文本框改为多行文本框onChanged文本框改变...

2019-08-04 23:13:39 1127

原创 Flutter 【BottomNavigationBar】

文章目录BottomNavigationBar仿咸鱼app底部tabsBottomNavigationBar常见的属性:属性描述itemsList 底部导航 条按钮集合iconSizeiconcurrentIndex默认选中第几个onTap选中变化回调函数fixedColor选中的颜色typeBottomNavigationBa...

2019-08-04 23:12:51 96

原创 Flutter【路由】

文章目录基本路由传参命名路由传参路由单独模块化在Flutter中通过Navigator组件管理路由导航。并提供了管理堆栈的方法。如:Navigator.push和Navigator.pop基本路由RaisedButton( child: Text("跳转到搜索页面"), onPressed: (){ Naviga...

2019-08-04 22:55:59 829

原创 Flutter【JSON解析与复杂模型转换】

JSON解析与复杂模型转换自动转换格式化http://www.bejson.com/转换https://javiercbk.github.io/json_to_dart/{"code":"0","message":"success","data":[{"image":"http://images.baixingliangfan.cn/compressedPic/201901161453...

2019-08-03 15:14:37 1747

原创 nuxt 服务端部署

1、2、nignix配置#user nobody;worker_processes 1;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/error.log info;#pid logs/nginx.pid;events { worker_...

2019-08-01 15:59:28 846

原创 dart语法

重温dart语法文章目录@[toc]入门dddd入门1、入口方法两种定义方式main(){ print('你好dart');}//加void表示方法没有返回值void main(){ print('你好dart');}dddd...

2019-06-29 17:09:44 1135

原创 vue gzip压缩和服务器开启gzip

修改vue.config.js// 安装 npm i -D compression-webpack-plugin// 第三方插件配置const CompressionPlugin = require("compression-webpack-plugin")module.exports = {configureWebpack:config=>{ if(progre...

2019-06-15 17:33:06 1874

原创 flutter遇到的坑

{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "name":...

2019-06-07 09:36:57 892

原创 vue+koa2使用微信ssdk实现分享功能

微信JS-SDK说明文档微信转发、分享功能例子,只画重点记录…微信公众号配置1、ip白名单(百度ip),把地址输入 (开发—>基本配置)2、配置Js接口安全域名(公众号设置—>功能设置)vue1.安装weixin-js-sdknpm i weixin-js-sdk -S2、配置权限验证 wx.config3、处理成功验证 wx.ready(function(){}...

2019-06-01 23:17:10 359

原创 nodejs实现微信支付

1、H5支付和jssdk微信支付的区别H5支付:只能在微信外部的浏览器进行支付jssdk微信支付:可以让我们h5页面在微信里面调用原生的api功能,这就叫jssdk,即在微信里面完成的支付...

2019-06-01 21:15:34 3255

原创 koa2实现微信授权登录

oauth2.0协议工作原理授权登录思路koa2实现微信公众号登录// 安装koa-generatornpm install koa-generator -g // 创建serverkoa2 server cd server && npm installnpm start...

2019-04-27 19:23:31 2017

原创 ReactNative中自定义图标

一般reactnative有个react-native-vector-icons的图标组件库,里面集成各种图标字体,如果想做自定义的图标,也是需要安装这个依赖包react-native-vector-icons的使用// 安装依赖包npm install --save react-native-vector-icons// 链接原生库(这个很重要,链接完,android\app\src...

2019-02-03 16:53:02 471

原创 vue后台系统权限控制的两种思路

思路1、①登录的时候获取用户信息②把获取的信息跟已有路由做比较,判断page里是否有对象,没有的话就把已有路由routerMap 放在空数组routerList里,如果有对象,则遍历判断page是否为true,如果true则为放到空数组routerList里,false的话就return出来③把routerList跟默认的routes拼接在一起(routerList.concat(rou...

2018-12-31 00:55:48 5610

原创 render渲染函数和jsx用法

jsx 用法//render-dom.jsexport default { functional: true, props: { number: Number, renderFunc: Function }, render: (h, ctx) => { return ctx.props.renderFunc(h, ctx.props.number)...

2018-12-22 09:08:28 1914

原创 vue ssr 服务端渲染的理解

简单例子使用一个页面模板插值为每个请求创建一个新的根 Vue 实例router服务器端数据预取混合修改title提取css//安装npm install vue-server-renderer --save// 第 1 步:创建一个 Vue 实例const Vue = require('vue')const app = new Vue({ ...

2018-09-05 22:20:16 5895 1

原创 echart.js 和 chart.js 改变圆点大小

echart改变圆点大小series : [ { name:'零售额', type:'line', showSymbol: true, symbol:'emptyCircle', //设定为实心点 symbolSize: 20, //设定实心点的...

2018-08-13 00:31:48 3394

原创 webpack4例子

webpack.config配置安装wenpack四个核心概念打包演示Demo1:本地服务 (webpack-dev-server)Demo2: css-loader 、less-loaderDemo3:postcss-loader、autoprefixer(自动补充css前缀)Demo4: file-loader (打包html 、字体图标)Demo5: html-we...

2018-07-26 17:15:02 959

原创 vue拖拽

常规自定义指令移动端常规不是很顺畅,而且也是DOM操作,不是符合vue的意义,尽量不要改DOM元素,要用数据驱动,少用 this.$refs<style> #box { position: absolute; left: 0; top: 0; width: 100px; height: 100px; b...

2018-07-18 23:29:44 1669 2

原创 ES6笔记(类class)

1、ES6的类是一种语法糖,本质还是基于原型基本格式:    class 类名{        constructor(){        }        方法1...        方法2...        ...        方法n...    }1,类的 类型 是 function2,类名就是构造函数 类名 === 类名.prototype.constructor3, 实例化 也是用 ...

2018-07-02 23:10:20 169

原创 ES6笔记(对象的is、 assign、keys、valus、entries等方法)

1、Object.is与 === 行为基本一致,除了NaN, +0与-0//===console.log(1===1); //trueconsole.log(1==='1'); //falseconsole.log(1===true); //falseconsole.log(0===false); //falseconsole.log({}==={}); //false ;注意:空对象作...

2018-07-02 23:10:07 731

原创 ES6笔记(set)

1、Set: 新的数据结构:类似于数组,但是成员的值都是唯一的,没有重复,他的键跟值是一样的(1)、set的基本用法: 初始化    //new Array() []    var s = new Set()    var s = new Set( [ 1, 2, 3, 4 ] )    var s = new Set( [...document.querySelectorAll('div')] ...

2018-07-02 23:09:55 1674

原创 ES6笔记(字符串模板、异步、promise)

1、模板字符串es6模板字符简直是开发者的福音啊,解决了ES5在字符串功能上的痛点。第一个用途,基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。第二个用途,在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。//以前的写法var str='javasrcipt\ is\ amazing';console.log(str)...

2018-07-02 23:09:49 178

原创 ES6笔记(解构)

1、解构解构通俗点说,就是通过一种特定格式,快捷的读取对象/数组中的数据的方法基本用法:(如果右边是对象,左边也要用对象的格式,解构出来就是变量了,再也不是属性了)//解构对象var oUser={ 'name':'aaa', 'age':20}//es5读数据的方法console.log(oUser['name'],oUser['age']);//aaa 20//let{name,...

2018-07-02 23:09:07 972

原创 ES6笔记(对象、函数传参、展开运算符、不定参)

1、对象第一:字面量对象的方法,支持缩写形式    方法缩写规则: 在原来的基础上去掉 冒号 和 function关键字第二:对象中的属性与变量名或者参数 同名的时候, 可以省略赋值的操作//对象方法的缩写var obj={ uName:'aaa',// showUserName:function(){// console.log(this.uName)// } sho...

2018-07-02 23:08:48 4384

原创 ES6笔记( let 、const、this、call/apply/bind)

1、let 块级作用域(1)函数内部(2)块中(通常指的是一对花括号之间)特性:①let 定义的变量不会被提升是②在同一个作用域下,let不能重复定义两个同名的标识符在不同的作用域下,可以使用同名的标识符③var在全局作用域下,会把属性绑定到window上,从而可能产生覆盖属性的隐患,而let关键字只是会遮蔽它,并不会覆盖window上的同名属性(let的定义的不会挂载到wi...

2018-07-02 23:08:12 298

原创 配置es6编译环境

111

2018-07-02 13:00:12 599

原创 swiper项目常用总结

1、banner <!--BANNER--><section class="swiper-container bannerBox"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a href="#

2018-04-28 15:22:37 1216

原创 less常用整理

编译:1、在node全局使用npm包管理器,安装less模块    npm install less -g    less  xxx.less  xxx.css  把less编译成css         less  xxx.less  xxx.min.css  -x 不仅编译成css,而且把css压缩    注意:编译时引入进来的样式后缀也要是less @import "reset...

2018-04-20 14:27:19 1060

原创 禁止弹窗后面body滑动

知识点:① return false 实际上做了3件事情:event.preventDefault(); //取消事件的默认行为event.stopPropagation(); //阻止事件冒泡停止回调函数执行并立即返回。②preventDefault()  //取消事件的默认事件(事件捕捉)<a href="http://www.baidu.com">测试</a>$(...

2018-04-11 16:24:24 6252 1

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