javaScript_want的博客

原创 (a==1 && a==2 && a==3)输出ture

(a1 && a2 && a==3)输出ture分析：两个概念：1.隐式转换2.Object的toString/valueOf方法 let a = { num: 0, toString() { console.log('执行了tosting'); return this.num+=1 }, valueOf() { console.log('执行了value'); return this.num+=1 } }对象中同时存

原创 vue中使用provide/inject响应数据隔代传值

父组件：provide返回一个函数调用函数内部返回响应的数据，即可在其他条件下修改响应数据传递给子代组件 provide(){ return { itemDataHandle:()=>this.itemData } },隔代组件：隔代组件通过inject获取传输进来的数据并通过inject: ['itemDataHandle'],此时的itemDataHandle是个函数,可以使用computed返回这个函数的结果computed: { get

原创 vue项目中使用防抖

记录一下项目中上拉滚动触发增加函数防抖：需求是上拉加载时频繁触发只执行最后一次加载数据坑点：vue中写的函数作为参数传给防抖函数时一定要保证闭包函数调用的this指向否则会报错。函数调用：防抖函数：...

原创 H5页面跳转小程序

步骤流程以及思路：1.准备：导入公众号js sdk以及web sdk（ 代码参考wx官方文档链接）2.首先区分运行环境：1）微信环境：微信环境主要是调用的wx.config APi申请wx-open-launch-weapp标签权限。2）pc环境。3）其他环境（如：手机浏览器环境）：手机浏览器等外部环境通过调用云函数wx-server-sdk来创建cloud来获取wx返回小程序Url Scheme来打开小程序。基本上wx官方文档有详细介绍：现在主要讲的是wx没有提供的以及坑点1.首先先在云开发

原创 mpvue使用axios发送请求

重写axios的请求方式/** * 小程序的请求方式 * @param url * @param type * @param data * @returns {Promise} */const Http = (config) => { let local = wx.getStorageSync('at_token') // 开启菊花图 wx.sho...

原创 webpack打包原理了解

首先搭建webpack环境配置：1.在package.json文件中创建可以直接黑窗中使用testWebpack执行bin目录下的这个脚本注： 需要在运行的脚本中声明node环境执行 #!/usr/bin/env node//执行的脚本文件/** 1.获取打包的配置内容 2.使用自己写的testWebpack分析依赖来打包*/ //src下创建js脚本 news.j...

原创 使用vue-cli编写第一个vue小插件

使用vue-cli编写第一个vue小插件1.使用cli创建一个vue项目vue init webpack ”项目名称“2.在build目录下创建一下插件打包配置文件//webpack.dist.conf.jsvar path = require('path')var webpack = require('webpack')module.exports = { entry: ...

原创 react中事件绑定

react绑定事件的时候不像vue直接调用就行，需要修改一下this的指向1.使用箭头函数2.使用bind()修改指向

原创 react父子组件传值

1.父组件传值给子组件1）父组件通过子组件标签传递数据给子组件2）子组件通过调用this.props.属性名来获取传过来的数据2.子组件传值给父组件1）父组件通过子组件标签传递一个方法2）子组件通过点击事件来调用父组件传递过来的方法，将子组件修改后的参数当作该方法的形参传递，父组件接收这个形参通过setState()来修改数据...

原创 react项目打包后部署到服务器报错

使用react脚手架创建的项目直接打包丢服务器后进入index.html会报错无法启动项目1.需要在package.json中添加 "homepage": ".",这样打包后把build文件直接丢服务器下就可以访问了...

原创 react定义组件

1。函数式组件 //函数式组件 function Hello() { return ( <div className="pname">hello word</div> ) }2.类组件 //类组件class Hello extends React.Component{ render(){ ...

原创 使用lrz做图片文件压缩

1.安装lrz:npm install lrz --save-dev2.导入lrz:import lrz from "lrz";3.使用：lrz()参数1:文件(files[0])，参数2:压缩文件的配置 compressImg(that, fileData, callback) { lrz(fileData, { width: this.size, fieldName:...

原创 css超出两行隐藏并使用...替代

.test { word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

原创 vue-element创建一个动态的面包屑导航

1.使用element的Breadcrumb组件2.监听router获取matched 刚好是一个数组3.效果(根据路由变化展示)

原创 vue项目骨架屏的使用

1.使用vue-cli创建一个新项目2.在index.html文件中div添加内容加载时会先显示div里面的内容等渲染完毕时在切换成路径组件内的内容先显示：加载完后显示：运行的流程就到这：接下来就轮到主角出场了1.安装webpack插件npm install vue-skeleton-webpack-plugin2.在src目录下创建Skeleton.vue<templa...

原创 vue中使用特殊字体

1.在src目录下创建一个font文件夹放入下载好的字体文件2.对应位置样式文件写好以下内容@font-face { font-family: 'PangMenZhengDao'; src: url('./FZBWKSJW.ttf'); }3.在对应组件中使用...

原创 文字使用css渐变字体颜色

方法： background-image: linear-gradient( 0deg, rgba(255, 171, 0, 1) 7.5439453125%, rgba(255, 250, 142, 1) 100% ); -webkit-background-cl...

原创 H5唤起手机拍照和相册

1.拍照和相册 <input type="file" multiple="multiple" accept="image/*" multiple id="files">2.视频 <input type="file" accept="video/*" capture="camcorder">3.拍照和视频选取<input type="file" acc...

原创 canvas动画机制

canvas的动画执行使用的 requestAnimationFrame()方法：步骤主要是：绘制-清空画布-重新绘制-清空这样刷新画布达到动画的效果（使用动画在绘制路径开始之前通常需要加上beginPath()方法。否则使用路径的动画无法清空画布。）...

原创 FileReader()构造函数基本使用获取上传文件流

1.语法：实例化一个FileReader函数var fileReader = new FileReader();2.使用readAsDataURL()方法读取文件流 fileReader.readAsDataURL(files.files[0]);3.监听onloadend 读取完成事件 fileReader.onloadend = () => { ...

原创 vue H5页面实现海报功能demo

demo展示地址：(扫描图片二维码即可体验)1.准备插件 qrcanvas和html2canvas（npm装好）2.html代码（布局按个人喜好）<template> <div> <!-- 设置了两个块区域 当点击了生成海报时把canvas转换成base64的图片，然后把最开始当样式隐藏掉 把获取的的base64的地址赋值给src-->...

原创 vue中使用qrcanvas.js

1.先npm装包npm i qrcanvas2.在模块中用import导入import { qrcanvas } from "qrcanvas";3.html <div id="qrcode"></div>4.在mounted生命周期钩子中使用 this.$nextTick(() => { const canvas = qrcanvas...

原创 canvas的基础应用

canvas的一些基本应用 //获取画板元素 let canvas = document.getElementById("canvas") //创建一饿context对象 let ctx = canvas.getContext("2d") //设置canvas和屏幕一样大小 canvas.width...

原创 cocos 切换精灵图片

1.点击按钮实现切换人物图片选中绑定脚本的节点，并添加一个该节点的事件就可以点击按钮触发2.获取需要切换图片的人物节点3.注册一个切换后的人物图片的精灵4.在添加的按钮事件中添加切换图片的方法就可以实现点击按钮切换人物图片了。。。。。...

原创 phaser 3 加载图片时加载不上报错 Local data URIs are not supported解决

1.图片改成png格式2.图片文件大小改成双数（单数一直加载不了）

原创 使用脚本控制cocos序列帧动画

1.选中添加了animation组件的节点 默认开始播放不勾选2.脚本中控制相对应的序列帧动画进行播放获取节点绑定的animation（注意：节点必须要绑定了animation节点否则无法获取）使用anim.play（）播放指定动画（注意：使用 play 接口播放一个动画时，如果还有其他的动画正在播放，则会先停止其他动画）暂停一个正在播放的动画：指定停止正在播放的动画：其他使...

原创 cocos 制作一个序列帧动画

1.选中需要制作的节点2.添加一个animation组建并切换到动画编辑器选择编辑3.在属性列表中添加以下方式并创建节点就添加好了序列帧动画

原创 css开启overflow滚动遇到的问题

css开启overflow滚动遇到的问题：ios手机中上下滑动时出现卡顿以及闪屏（安卓没有这个问题）：添加-webkit-overflow-scrolling: touch;开启属性控制元素在移动设备上是否使用滚动回弹效果.加上这个属性后有了回弹效果，但是上下滑动的时候会出现抖动，最后终于找到问题在哪里了（坑：开启overflow滑动的元素不要使用%去写元素的高度）出现滑动抖动：滑动正...

原创 vscode提高写vue小程序react代码的插件

原创 学习小程序记录

学习小程序记录：小程序全局配置：app.json中配置相关信息：1.pages:配置页面路径表2.window：配置全局的窗口属性3.tabBar：配置底部导航栏页面配置和全局配置基本差不多，页面配置会覆盖全局配置中的属性。页面生命钩子函数：Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数...

原创 vue中v-if 和v-show的妙用

vue中v-if 和v-show的妙用：v-if：未满足某个条件时不会创建dom也不会渲染，场景：适用于不需要频繁切换v-show：不管是否满足条件都会创建dom，相当于暂时隐藏，满足某个条件时才显示场景：适用于频繁切换（例：页面上有许多弹窗图片以及需要频繁显示与隐藏的图片，如果是使用的v-if由于这些dom一开始未生成满足条件后生成可能会导致图片加载闪屏（内容比加载的图片先显示），这样...

原创 H5 img加载gif图片播只能播放一次的问题

点击某个交互显示改gif图播放，再次点击的时候因为浏览器的缓存会直接显示上次播放结束后的状态，不会重新播放，解决方法是给src的路径上加上一个随机数让这个图片一直保持最新的路径就可以重新开始播放： //洒水gif加上随机数可以重新播放 this.sprinklingImg=require('@/assets/images/loveOrchard/watering.gif')+'...

原创 使用vue封装的一个toast组件

使用vue封装的一个toast组件：1.首先创建一个toast.vue页面：<template> <div class="toast" v-if="show"> {{text}} </div></template><script>export default {};</script>&l...

原创 natapp内网穿透代理vue项目出现Invalid Host header

natapp内网穿透代理vue项目出现Invalid Host header解决方法：在build文件中找到webpack.dev.conf.js中加上这句代码：

原创 vue项目使用ip地址打开

vue项目中无法使用ip地址打开：解决方法：将config目录下index.js中：改成：重启项目就可以使用ip地址访问了

原创 three.js的一些基本使用

three.js的一些基本使用记录创建一个旋转的正方体步骤：1.初始化渲染器 let mesh ; //初始化渲染器 let renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth,window.innerHeight) ...

原创 vue中使用phaser 3物理引擎的一些记录

初始化游戏引擎时添加物理引擎：把需要的类设置成物理对象：设置物理对象的弹跳重力：

原创 分享一些使用正则的规则匹配

export const regExp = { figure: /^\+?[1-9][0-9]*$/, //大于0的正整数 phone: /^1[3-9]\d{9}$/, len6: /^[\s\S]{0,6}$/, email: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/, url: /^(http:\/...

原创 H5 打开手机上的app应用

H5页面 如果手机上有该app则打开没有则提示用户下载：安卓：ios：ios中会先提示“打不开网址，网址无效”，需要手动点击一下，才会在App Store中打开链接...

转载 vue 移动端ui框架组件展示

转发：https://www.cnblogs.com/maqingyuan/p/9737236.html#Demo%E7%A4%BA%E4%BE%8B