javascript技巧

使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解

2020-06-09
下面通过实例代码给大家介绍js扫码枪扫描条形码的实现方法,具体代码如下所示: var keycode = ""; var lastTime=null,nextTime; var lastCode=null,nextCode; document.οnkeydοwn=function(e){ if(window.event){ // IE nextCode = e.keyCode } else if(e.which){ // Netscape/Firefox/Opera nextCode

微信小程序 scroll-view的使用案例代码详解

2020-06-08
scroll-view:滚动视图 使用view其实也能实现滚动,跟div用法差不多 而scroll-view跟view最大的区别就在于:scroll-view视图组件封装了滚动事件,监听滚动事件什么的直接写方法就行. scroll-view纵向滚动添加属性scroll-y,然后写一个固定高度就行了,我主要说一下scroll-view的横向滚动scroll-x: 我使用了display: flex;布局,特么的直接写在scroll-view上面,显示出来的结果总是不对头,试了好多次,得到了下面两种

js 获取扫码枪输入数据的方法

2020-06-08
1.扫码枪相当于键盘输入设备,输入一连串数字后加一个enter键.但在实际开发中需要区分是扫描枪输入还是键盘用户输入,区别在于扫码枪输入很快. let code = ''; let lastTime, nextTime; let lastCode, nextCode; window.document.onkeypress = (e) => { if (window.event) { // IE nextCode = e.keyCode; } else if (e.which) { // Nets

详解用js代码触发dom事件的实现方案

2020-06-08
背景 前端编写测试用例时,在测试界面上的一些效果时,通常都希望能够模拟一些用户操作,而模拟用户操作最主要的方式就是用代码触发指定事件.通常一些元素上会自带一些触发事件的方法,例如click.focus等,但是如果是其他的事件,例如mousedown.mouseup.mouseenter,这些事件怎么模拟呢? 思路 其实思路很简单,web标准中定义了一系列API接口,其中dispatchEvent允许我们向一个指定的事件目标派发一个事件,而且使用这个方法触发的事件是可以正常触发我们的标准事件处理规

解决微信授权成功后点击按返回键出现空白页和报错的问题

2020-06-07
微信授权 的操作可以阅读我的另一篇文章 https://www.jb51.net/article/188237.htm 微信授权我是 在index.vue做的授权,是一个空白页,因为授权需要回调所以这个页面会刷新两次,当我们授权成功进入主页面后,点击返回键或者点击手机的物理返回键,因为浏览器history机制,按物理返回或者返回肯定是会进入这个授权页面的,而此时code已经使用过,会报code错误,而且这个是空白页,多次点击也并不能回到微信的消息列表页,体验极差... 我的做法是引入微信的js

基于javascript处理二进制图片流过程详解

2020-06-07
今天学习怎么生成二维码,我习惯所有请求都用ajax完成 但是今天发现jquery的ajax不支持二进制,只能搞纯文本 于是百度之后手动实现这一功能 function getBinary(url, args, success) { var xmlhttp = new XMLHttpRequest(); var data = eval(args); var i = 0; for (var key in data) { if (i++ === 0) { url += '?' + key + "=&qu

微信小程序中的列表切换功能实例代码详解

2020-06-07
感觉这列表切换有点类似于轮播图,而且感觉这代码直接可以拿来用,稍微改一改样式什么的就OK了,列表切换也是用到的地方也很多 wxml中的代码如下: <!-- 标签页面标题 --> <view class="tab"> <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐<

使用 UniApp 实现小程序的微信登录功能

2020-06-06
1.微信登录思路: 在main.js 中封装公共函数,用于判断用户是否登录 在main.js 中分定义全局变量,用于存储接口地址 如果没有登录.则跳转至登录页面 进入登录页面 通过 wx.login 获取用户的 code 通过 code 获取用户的 SessionKey.OpenId 等信息[本应后台接口.但是此处使用js发送请求] 通过 openId 调用后台 Api 获取用户的信息 获取成功,则说明已经授权过了,直接登录成功 获取失败,则说明没有授权过,需要授权之后才能进行登录 用户点击页面

微信h5静默和非静默授权获取用户openId的方法和步骤

2020-06-06
一.openId是什么? openId是用户在当前公众号下的唯一标识('身份证'),就是说通过这个openId,就能区分在这个公众号下具体是哪个用户. 二.openId有什么用? 假如用户A在当前公众号下购买了一件商品,用户的下单信息肯定要存储到后台数据库,那根据什么进行存储呢?openId是用户在当前公众号下的唯一标识,通过openId和用户的下单购买信息进行键值对的数据绑定.那么我要查询该用户购买过什么商品,就能够通过openId去查询,并且数据是唯一的,不会和另外的用户数据有冲突. 拓展:

Electron整合React使用搭建开发环境的步骤详解

2020-06-06
简介 用于构建用户界面的 JavaScript 库 步骤 首先创建React npx create-react-app doc 进入到doc项目 cd doc 安装electron npm install electron --save-dev 安装依赖 判断是否为生产环境 cnpm install electron-is-dev --save-dev 在项目根目录创建main.js const { app ,BrowserWindow } = require('electron') const

vue路由权限校验功能的实现代码

2020-06-06
引言 做后台系统的时候,难免会有用户权限的判断.admin可以查看全部菜单,user只能查看部分菜单. 一开始接触这个需求的时候,完全是纯前端做的.在配置路由的时候,加一个roles的属性,通过判断用户的roles是否与路由的roles属性相匹配来作为显示隐藏的依据 { path: '/router', name: 'router', meta: { title: '标题', roles: ['admin','user'] }, component: index, children: [ { p

ES6 Generator基本使用方法示例

2020-06-05
本文实例讲述了ES6 Generator基本使用方法.分享给大家供大家参考,具体如下: 1.Generator介绍 先来一段Generator的基础代码 function* g(){ yield 100; yield 200; return 300; } let gg = g(); console.log(gg); // Object [Generator] {} console.log(gg.next()); // { value: 100, done: false } console.log

taro 实现购物车逻辑的实例代码

2020-06-05
taro 实现购物车逻辑 效果 taro是什么? Taro 是一套遵循 React 语法规范的 多端开发 解决方案. 现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要. 使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动/QQ/京

JS中的继承操作实例总结

2020-06-05
本文实例讲述了JS中的继承操作.分享给大家供大家参考,具体如下: 1.原型链继承 function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function() { return this.property; } function SubType() { ths.subproperty = false; } SubType.prototype = new SuperType(); // 实

用云开发Cloudbase实现小程序多图片内容安全监测的代码详解

2020-06-04
前言 相比于文本的安全检测,图片的安全检测要稍微略复杂一些,当您读完本篇,将get到 图片安全检测的应用场景 解决图片的安全校验的方式 使用云调用方式对图片进行检测 如何对上传图片大小进行限制 如何解决多图上传覆盖问题 示例效果 当用户上传敏感违规图片时,禁止用户上传发布,并且做出相对应的用户友好提示 应用场景 通常,在校验一张图片是否含有违法违规内容相比于文本安全的校验,同样重要,有如下应用 图片智能鉴黄:涉及拍照的工具类应用(如美拍,识图类应用)用户拍照上传检测:电商类商品上架图片检测:媒体

JS原型对象操作实例分析

2020-06-04
本文实例讲述了JS原型对象操作.分享给大家供大家参考,具体如下: 万物皆对象,函数也同样是对象,是特殊的函数对象 function fn() {} let a = new fn(); let b = new Function() console.log(typeof a); // object console.log(typeof b); // function 打开浏览器,输入fn,会发现fn有一个prototype(原型)属性,这个属性是一个指针,指向原型对象,这个对象包括了特定类型所有共享

ES6 async、await的基本使用方法示例

2020-06-04
本文实例讲述了ES6 async.await的基本使用方法.分享给大家供大家参考,具体如下: async是异步编程的最新标准,我们来看看async如何使用 1.async的简单使用 async function fn () { return 'abc' } console.log(fn()); // Promise { 'abc' } fn().then(res => { console.log(res); // "abc" }) async作为关键字放在函数前面,让同步的函数成

使用Taro实现小程序商城的购物车功能模块的实例代码

2020-06-04
Taro 是一套遵循 React 语法规范的 多端开发 解决方案. 现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高,这时候只编写一套代码就能够适配到多端的能力就显得极为需要. 使用 Taro,我们可以只书写一套代码,再通过 Taro 的编译工具,将源代码分别编译出可以在不同端(微信/百度/支付宝/字节跳动/QQ/京东小程序.快应用.H5.React-Native

ES6 Symbol在对象中的作用实例分析

2020-06-04
本文实例讲述了ES6 Symbol在对象中的作用.分享给大家供大家参考,具体如下: 在ES5中 对象属性名都是字符串,这容易造成属性名的冲突,比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突,于是 ES6 引入了Symbol.Symbol是一种新的原始数据类型,表示独一无二的值.它是继undefined.null.布尔值(Boolean).字符串(String).数值(Number).对象(Object)六种数据类型之后的

JS 数组和对象的深拷贝操作示例

2020-06-03
本文实例讲述了JS 数组和对象的深拷贝操作.分享给大家供大家参考,具体如下: 一.数组的深拷贝 let arr = [ undefined, function(){ console.log(123); }, true, null, { name:"123", age:23 } ]; // arr作为拷贝对象 1. Array.from() Array.from()能将一个类数组转化成一个真正的数组,因此它返回的是一个新数组. let arr1 = Array.from(arr); ar