是小王啊i-CSDN博客

原创小程序如何换取用户的openid

见下 //获取openId wx.login({ success(res){ // console.log(res); //向服务器发送请求用于换取openid let code = res.code if(code){ wx.request({ url: `https://api.weixin.qq.com/sns/jscode2session?appid=wx6028

2020-12-16 16:31:00 1187

1.下载腾达sdk(腾讯地图官网下载) 2.// 引入SDK核心类 var QQMapWX = require('../../utils/qqmap-wx-jssdk') 3.// 实例化API核心类 var qqmapsdk = new QQMapWX({ key: "77RBZ-PD7KP-S56DU-LVTOG-RCDGE-KPF3K" // 必填 }); 4.经纬度转换 //监听页面加载 onLoad(){ let that = this //获取地理位置(定位

2020-12-14 08:18:11 880

原创小程序request请求封装

见下 const BASE_URL="http://localhost:8082"; //开发时使用本地接口，在上线时只需要修改此处接口为线上地址即可 export const myRequest=(options)=>{ //传入的options是一个json对象 return new Promise((resolve,reject)=>{ uni.request({ url:BASE_URL+options.url, method:options.methods||"GE

2020-12-14 08:17:18 549

原创谈谈react如何解决Ajax跨域问题

1.安装http-proxy-middleware依赖安装: npm install http-proxy-middleware -S 2.在src文件夹中创建setupProxy.js文件 setupProxy.js 文件内容 const proxy = require("http-proxy-middleware"); module.exports = function(app){ /* app.use("自定义url".proxy({ })) */ app.use("/miaov"

2020-12-09 14:29:21 399

原创什么是redux?redux概念及应用

状态存储reduxredux是什么?redux工作流程什么情况下使用redux?redux核心apiredux三个核心概念 redux是什么? 1.redux 是一个独立专门用于做状态管理的 JS 库(不是 react 插件库) 2.它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用 3.作用: 集中式管理 react 应用中多个组件共享的状态 redux工作流程什么情况下使用redux? 1.总体原则: 能不用就不用, 如果不用比较吃力才考虑使用 2.某个

2020-12-09 14:29:03 8001

原创谈谈react生命周期那点事

生命周期生命周期即是组件从实例化到渲染到最终从页面中销毁，整个过程就是生命周期，在这生命周期中，我们有许多可以调用的事件，也俗称为钩子函数生命周期的3个状态： Mounting:将组件插入到DOM中(挂载) Updating:将数据更新到DOM中(更新) Unmounting:将组件移除DOM中(销毁) 生命周期中的钩子函数（方法，事件） CompontWillMount :组件将要渲染，AJAX，添加动画前的类 CompontDidMount:组件渲染完毕,添加动画 compontWillRe

2020-12-08 09:18:50 130

原创 React按需加载,提升性能

react如何实现按需加载 Ant蚂蚁框架安装使用： cnpm install antd-mobile --save 全部导入样式和js： import { Button } from 'antd-mobile'; import 'antd-mobile/dist/antd-mobile.css'; 按需要导入： 1、安装插件 cnpm install babel-plugin-import --save 2、配置 npm run eject 3.Packjson配置 "babel":&nbsp

2020-12-08 09:18:29 272

原创一起来聊聊react事件

react事件特点： 1.react事件，绑定事件的命名，驼峰命名法。 2.{},传入1个函数，而不是字符串 <button onClick={this.sendData}>传递helloworld给父元素</button> 事件对象：React返回的事件对象是代理的原生的事件对象，如果想要查看事件对象的具体值，必须之间输出事件对象的属性。注意：原生，阻止默认行为时，可以直接返回return false； React中，阻止默认必须e.preventDefault();

2020-12-07 09:35:58 215

原创 react路由那点事

React路由根据不同的路径，显示不同的组件（内容）；React使用的库react-router-dom; 安装: Cnpm install react-router-dom --save react三大组件 ReactRouter三大组件： Router：所有路由组件的根组件（底层组件），包裹路由规则的最外层容器。属性：basename->设置跟此路由根路径，router可以在1个组件中写多个。 Route:路由规则匹配组件，显示当前规则对应的组件 Link:路由跳转的组件注意：如果要精

2020-12-07 09:35:21 220

原创谈谈react如何实现父子通信

props实现通信父传递给子组件数据，单向流动，不能子传递给父。 props的传值，可以是任意的类型。注意：props可以传递函数，props可以传递父元素的函数，就可以去修改父元素的state,从而达到传递数据给父元素。父传子 class ParentCom extends React.Component{ constructor(props){ super(props) this.state = { isActive:true

2020-12-06 19:43:11 236

原创 react入门学习

React 是什么？一个用于构建用户界面的 JavaScript 库中文手册：https://react.docschina.org/ 命令式编程和声明式编程告诉计算机怎么做（How） - 过程告诉计算机我们要什么（What） - 结果如何使用 React 基于浏览器的模式 React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件 React.createElement(type,props,children); ReactDOM 提供了与浏览器交互的 DOM

2020-12-06 19:10:34 168

原创什么是前端工程化

前端模块化1.模块化的分类 1.模块化的分类 A.浏览器端的模块化 1).AMD(Asynchronous Module Definition,异步模块定义) 代表产品为：Require.js 2).CMD(Common Module Definition,通用模块定义) 代表产品为：Sea.js B.服务器端的模块化服务器端的模块化规范是使用CommonJS规范： 1).使用require引入其他模块或者包 2).使用exports或者module.exports导出模块成员 3).一个文件就是一个模块

2020-12-06 18:46:49 174

原创 webpack中强大的loader和plugin插件

常见的loader 1.file-loader：把⽂件输出到⼀个⽂件夹中，在代码中通过相对 URL 去引⽤输出的⽂件 2.url-loader：和 file-loader 类似，但是能在⽂件很⼩的情况下以 base64 的⽅式把⽂件内容注⼊到代码中去 3.source-map-loader：加载额外的 Source Map ⽂件，以⽅便断点调试 4.image-loader：加载并且压缩图⽚⽂件 5.babel-loader：把 ES6 转换成 ES5 6.style-loader：把 CSS 代码注⼊到

2020-11-13 09:11:20 319

原创让我们来聊聊webpack,grunt和gulp的三者的区别

webpack学习webpack与grunt、gulp的不同？1.grunt和gulp是基于任务运行的工具:2.webpack是模块打包工具webpack、rollup、parcel优劣？ webpack与grunt、gulp的不同？ 1.grunt和gulp是基于任务运行的工具: 它们会⾃动执⾏指定的任务，就像流⽔线，把资源放上去然后通过不同插件进⾏加⼯，它们包含活跃的社区，丰富的插件，能⽅便的打造各种⼯作流。 2.webpack是模块打包工具⾃动化处理模块,webpack把⼀切当成模块，当 web

2020-11-13 08:40:10 917

原创 css3实现摩天轮特效

css3效果摩天轮效果图html代码css3代码完整代码效果图 html代码 <div class="box"> <div class="wheel"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></

2020-10-07 07:50:31 1781 3

原创 canvas实现圆饼图,柱状图,折线图(满满的干货)

canvas画图圆饼图柱状图折线图圆饼图 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #a1{ border: 1px solid red; } </style> </head> <body> &lt

2020-10-07 07:50:13 989

原创 html5新增的表单控件

表单控件表单新增的控件表单中新增的控件(type属性) email: 提交表单时检测值是否是一个电子邮件格式 url: 提交表单时检测值是否是一个url格式 date: 年-月-日格式的控件 time: 时:分格式的控件 datetime: 年-月-日时:分格式的控件（UTC时间） datetime-local: 年-月-日时:分格式的控件（本地时间） month: 年-月格式的控件 week: 年-周数格式的控件 number: 数字输入框 <input type="

2020-10-06 07:44:14 874

原创兼容IE低版本浏览器的办法(IE低版本把h5新增标签解析成了行元素)

方式一 1手动创建：在js中创建h5新增标签，css中给h5标签添加display：block属性举例： <script type="text/javascript"> var e=("abbr,article,aside,audio,canvas,datalist,details,"+"figure,footer,header,hgroup,mark,menu,meter,nav,output,"+"progress,section,time,video").split(',');

2020-10-06 07:43:43 252

原创 jquery实现tab栏切换案例

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 450px; height: 450px; margin: 0 auto; }

2020-10-06 07:43:10 560

原创 jquery实现拖拽功能

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #box { width: 80px; height: 80px; background-color: red

2020-10-06 07:42:56 1281

原创 jquery实现手风琴效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } li{ list-style: none; width: 200px; height: 500px; flo

2020-10-06 07:42:27 261

原创 jquery模拟手机聊天操作

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 300px; height: 500px; border: 3px solid ligh

2020-10-06 07:42:02 443

原创 jquery实现随机点名(点名器)

复制以下代码查看效果 (注:记得导入jquery.js代码) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 500px; /* height:

2020-10-06 07:41:34 1753 1

原创 jquery实现放大镜效果

复制下面代码查看效果html代码css代码jquery代码完整代码 html代码 <ul> <li id="one"> <img src="./a3.jpg" alt="" width="100%" id="img"> <div id="small"></div> </li> <li id="two"> <img src="./a3.jpg" alt="" id="img1

2020-10-06 07:41:15 179

原创 jquery实现无限循环滚动

复制下面代码查看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } div#outer{ width: 1000px; height: 200px; overf

2020-10-06 07:40:59 1716 1

原创 jquery淡入淡出

复制以下代码查看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div:first-of-type{background:red; width:66px; height:66px;} div:nth-of-type(2){ width:6

2020-10-06 07:40:42 134

原创 html5新增标签总结

新增的结构标签页面头部标签 header 页脚底部标签 footer 导航 nav 划分区域 section (有点代替div的意思) 主题内容块 article 侧边栏 aside 新增的功能标签标题组合 hgrounp <hgrounp> <h1></h1> <h2></h2>

2020-10-05 08:04:55 191

原创 canvas实现太极图

效果图代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #a1{ border: 1px solid red; background-color: light

2020-10-05 08:04:18 220

原创 canvas画布讲解(二)

canvas画布图形的阴影图形的处理图形的阴影阴影属性： shadowColor：设置阴影颜色 shadowBlur：设置阴影模糊级别（值越大越模糊） shadowOffsetX：设置阴影在x轴上距离图形的距离 shadowOffsetY：设置阴影在y轴上距离图形的距离图形的处理绘制图像 drawImage(img,x,y) img：图片 x：图片横坐标的起始值 y：图片纵坐标的起始值 drawImage(img,x,y) drawImage(img,

2020-10-05 08:03:57 310

原创 canvas画布讲解(一)

canvas画布canvas基础知识绘制绘制一个矩形贝塞尔曲线绘制文字图形的组合方式 canvas基础知识 <canvas id="myCanvas" width="200" height="200">< /canvas> canvas元素自身有两个属性：width和height，除此之外，canvas还拥有所有主要的HTML5属性，比如说class、id 和 name等。id属性被用在上面所示的代码中，JavaScript使用这里创建的canvas的id来表示要在上面绘画的画布

2020-10-05 08:03:32 1222

原创纯原生js实现百度搜索框案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto; } #txt { width: 350px; } /* #pop {

2020-10-05 08:03:12 851

原创 vue过滤器讲解

过滤器 Vue.js允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示支持级联操作过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本全局注册时是filter，没有s的。而局部过滤器是filters，是有s的 <div id="app"> <input type="text" v-model='msg'>

2020-10-05 08:02:39 263

原创 vue组件讲解

vue组件组件组件注册全局注册组件基础用组件注意事项局部注册组件组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素，封装可重用的代组件注册全局注册 Vue.component(‘组件名称’, { }) 第1个参数是标签名称，第2个参数是一个选项对象全局组件注册后，任何vue实例都可以用组件基础用 <div id="example">

2020-10-05 08:02:23 183

原创 vue组件通信讲解(满满的干货)

组件通信Vue组件之间传值父组件向子组件传值子组件向父组件传值兄弟之间的传递 Vue组件之间传值父组件向子组件传值父组件发送的形式是以属性的形式绑定值到子组件身上。然后子组件用属性props接收在props中使用驼峰形式，模板中需要使用短横线的形式字符串形式的模板中没有这个限制 <div id="app"> <div>{{pmsg}}</div> <!--1、menu-item 在 APP中嵌套着故 menu-item 为

2020-10-05 08:02:07 268

原创 vue中slot插槽总结(干货)

vue之slot插槽讲解组件插槽匿名插槽具名插槽作用域插槽组件插槽组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力匿名插槽 <div id="app">  <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box>

2020-10-05 08:01:44 804 1

原创 axios用法讲解

axios用法axiosaxios基础用法axios 全局配置axios 拦截器 axios 基于promise用于浏览器和node.js的http客户端支持浏览器和node.js 支持promise 能拦截请求和响应自动转换JSON数据能转换请求和响应数据 axios基础用法 get和 delete请求传递参数通过传统的url 以 ? 的形式传递参数 restful 形式传递参数通过params 形式传递参数 post 和 put 请求传递参数通过选项传递参数通过 UR

2020-10-05 08:01:19 178

原创 cookie函数封装总结

cookie函数封装设置cookie读取cookie删除cookie创建并存储cookie获取cookie测试cookie是否被客户端禁用了：设置cookie function setCookie (name,value) { var days = 30;//30天过期 var exp = new Date(); exp.setTime(exp.getTime() +days*24*60*60*1000); document.cookie = name +"="+ escape(value

2020-10-04 18:30:34 249

原创 localStorage和sessionStorage讲解

本地存储html5本地存储localStoragelocalStorage API总结sessionStoragecookie和stotage的区别 html5本地存储 1.localStorage 2.sessionStorage localStorage 1.localStorage为永久性保存数据，不会随着浏览器的关闭而消失，可以在同域名跨页访问。 2.按域名进行存储，不会和其他域名冲突 3.键值对存储：key/value localStorage API总结 setItem(key , valu

2020-10-04 18:30:12 473

原创 cookie的用法总结(客户端存储cookie)

cookie总结什么是cookie?cookie的优缺点cookie的设置cookie读取cookie删除什么是cookie? cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。 cookie是一些数据, 存储于你电脑上的文本文件中 cookie是浏览器提供的一种机制可以由JavaScript对其进行控制(设置、读取、删除) cookie的特性 cookie可以实现跨页面全局变量 cookie可以跨越同域名下的多个网页，但不能跨越多个

2020-10-04 18:29:55 1314

原创 let,var,const三者的区别

es6新特性1.let命令块级作用域const命令const总结 1.let命令基本用法 ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。 let不允许在相同作用域内，重复声明同一个变量。 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果

2020-10-04 18:26:43 292

空空如也

空空如也