- 博客(157)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 js单行代码
Clipboard API 它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它可以将任意内容（比如图片）放入剪贴板。我们自己写日历组件时经常会用到，判断某个日期是否为工作日；这两个函数则能帮助大家将华氏温度转换为摄氏温度，以及将摄氏温度转换为华氏温度。反转字符串可以使用split结合reverse和join方法轻松实现。uniqueArr方法将数据转为Set，然后再解构为数组返回。activeElement 属性返回文档中当前获得焦点的元素。使用第三方的qs包实现。
2022-10-14 11:42:44
499
1
原创 微信小程序触发longtap事件时同时触发tap事件，如何解决？
longtap是基于tap实现的，在同一个view上，longtap既能触发 ，tap也能触发。
2022-10-13 16:54:39
1123
转载 Vue——axios的二次封装
对 axios 的二次封装，在企业级项目中是 必须 要配置的。因为经过封装的 axios，更容易使用和管理，并且可以 减少代码量，让 逻辑更清晰。
2022-10-09 17:41:12
565
1
转载 在微信小程序中如何使用wx.onLocationChange（）,解决wx.getLocation高频率调用导致耗电问题
思路主要是这样的：首先事件触发authorization函数，等待getWxLocation函数里面的结果处理，看文档知道在调用onLocationChange前先调用startLocationUpdate。获取之后要记得关闭实时监听wx.offLocationChange(_locationChangeFn)，不然就会一直去获取坐标，可能会导致手机耗电严重。可是很无奈，产品的需求是要从首页点进去的时候获取一次用户坐标，可是如果用户频繁点击在真机上就会出现获取不到的情况，会报以下的错误，如下图所示。
2022-09-23 11:14:22
1589
转载 小程序扫描普通链接二维码跳转小程序指定界面方法
看了官方文档之后，还是存在很多困惑，微信小程序是托管到微信服务器上的，要想扫描普通链接跳转指定界面，首先要知道微信把小程序放的服务器的访问路径，这些最初想法，可是看微信官方文档，感觉不是我想的这样的。2.测试链接，这里的url就是扫码之后，跳转到你指定界面里，可以获取到你此处配置这个完整的url包括参数，当然，这个参数是一个动态参数，配置的时候是写死了一个，你的应用中，自己动态生成这个参数，微信会扫描所有自己配置的url，如果匹配上了，就跳转至指定界面，还有个前提，小程序必须先发布代码，才可以。
2022-09-21 14:15:14
1835
转载 js 字符串截取方法汇总
该方法返回一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。start（必需）：一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。stop（可选）：一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。slice() 方法可通过指定的开始和结束位置，提取字符串的某个部分，并以新的字符串返回被提取的部分。
2022-09-16 11:06:59
74217
转载 微信小程序常用正则表达式
数字：1*$n位的数字：^\d{n}$至少n位的数字：^\d{n,}$m-n位的数字：^\d{m,n}$零和非零开头的数字：^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$带1-2位小数的正数或负数：^(-)?\d+(.\d{1,2})?$正数、负数、和小数：^(-|+)?\d+(.\d+)?$有两位小数的正实数：2+(.[0-9]{2})?$有1~3位小数的正实数：3+(.[0-9]{1,3})?$非零的正整数：4\d*$ 或
2022-07-01 20:49:21
5911
2
原创 js 遍历数组赋值成对象并push到新数组中
初始数据遍历数组，生成对象，push到新数组打印结果：[ { orderId: ‘7’ }, { orderId: ‘10’ }, { orderId: ‘11’ }, { orderId: ‘12’ }, { orderId: ‘42’ } ]
2022-06-10 10:52:36
2828
转载 20个不容错过的ES6技巧
1. 打乱数组顺序2. 去除数字之外的所有字符3. 反转字符串或者单词4. 将十进制转换为二进制或十六进制5. 合并多个对象6. === 和 == 的区别7. 解构赋值8. 交换变量的值9-1. 判断回文字符串回文字符串: 正着写和反着写都一样的字符串9-2 判断两个字符串是否为互相排列== 判断两个字符串是否为互相排列: 给定两个字符串,一个是否是另一个的排列 ==10. 可选链操作符== MDN: 可选链操作符( ?. )允许读取位于连接对象链深处的属性的
2022-05-05 16:38:40
271
转载 mockjs在vue中的使用
关于mock.js，官网描述1.前后端分离2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据3.数据类型丰富4.通过随机数据，模拟各种场景1、安装mockjsnpm install mockjs//或 在开发环境中引入npm install mockjs --save-dev2、创建mock.js文件在src路径下创建mock.js文件在main.js引入mock.js文件3、mock.js使用1.在刚刚创建的mock.js文件中写入测试代码//引入
2022-05-05 14:27:33
1776
1
原创 vue项目中如何实现将后台接口返回的数据进行映射
效果图后端返回的接口数据template代码<div class=" GovContent-personneldist GovContent-personneldist-matter animated slideInLeft "> <div class="peopleLine-matter"> <h3>{{ thisYear }}</h3> <div class="accept-line"&
2022-04-21 17:48:14
3237
转载 vue项目中如何实现将后台接口返回的数据映射成echarts饼形图
data的代码假如从后台拿到的原始数据是list这种格式，我将原始的数据进行一系列的处理，拿到我想要的数据类型的数组title和result。methods的代码1、从list数组中分离处理后，拿到我想要的title数组和result数组；2、将title和result赋值给画布中的option里边对应的data。mounted中的代码有时在使用echarts实现将相关数据生成想要的图形表时1、会出现浏览器中看到dom结构已经有了，但是画布里边的图形没有渲染出来，可能的原因就是，你
2022-04-21 17:23:56
2384
1
原创 js中实现截取数组的前几个元素以及后几个元素作为一个新数组的方法
数组中的slice()和splice()方法都可以实现对数组截取const arr=[1,2,3,4,5,6,7,8]//截取数组前三个元素const sliceA=arr.slice(0,3)console.log('sliceA',sliceA)//得到[1,2,3]//截取数组后三个元素 slice方法const sliceArr=arr.slice(-3)console.log('sliceArr',sliceArr)//得到[6,7,8]//slice(start,end)
2022-04-21 16:53:22
48317
转载 js中循环对象
ES6之前，循环对象常见做法是使用：for…in。但是for…in循环的问题在于它会遍历原型链中的属性，所以需要使用hasOwnProperty执行检查属性是否属于该对象。ES6之后，我们对于对象的循环有了更好的办法：Object.keys,Object.values,Object.entriesObject.keys :创建一个包含对象所有属性的数组const fruits ={ appple:22, pear:34, orange:88}var keys = Objec
2022-04-21 09:19:01
32759
转载 小程序注意事项
1、小程序圆角失效问题 wxss.banner_image image{ border-radius: 20rpx; overflow: hidden; backface-visibility: hidden; transform: translate3d(0, 0, 0);}2、判断语句需要在{{ }} 中去判断 wx:if=”ture && false || ture&&true”wx:if="{{ (item.tips==1 &
2022-04-19 15:48:38
461
转载 ECharts – dataZoom-slider概述及其主要属性
dataZoom-slider概述及其主要属性滑动条型数据区域缩放组件（dataZoomSlider）（参考数据区域缩放组件（dataZoom）的介绍）所有属性dataZoom-slider. type = ‘slider’设置dataZoom的类型。dataZoom-slider. id组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。dataZoom-slider. show = true是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能
2022-04-15 16:28:43
3775
转载 微信小程序 - vant popup弹出层阻止底层页面滑动
前言在小程序编写过程当中使用使用vant weapp的popup组件作小程序的弹出层，触屏致使底层页面跟着滑动。web解决方法使用touch事件阻止属性，@touchmove.stop.prevent指向空事件van-popup( :show="popupShow" :z-index="999" position="bottom" @close="popupClose" @touchmove.stop.prevent="moveHandle") methods: { mov
2021-12-05 17:47:54
3482
4
转载 微信小程序中input和picker之间切换导致input无法失去焦点
picker组件与input组件在一起使用时，若input组件获取焦点，点击picker组件时input组件不会失去焦点， 导致的input组件弹出的键盘把picker组件遮挡了。导致这个问题的原因可能是因为pick组件中嵌套了一个disable的input组件。<input placeholder="测试"></input><picker mode='region' bindchange="onRegionChange"> <input disab
2021-12-05 16:55:56
2090
原创 微信小程序canvas绘制环形图（含动画）
页面版效果图思路1、使用一个canvas绘制（带动画）；2、通过画弧线，设置线宽，来实现圆环效果；3、计算每段圆弧的起始角度和终止角度，用递归做动画；绘制完第一段圆弧块–>再绘制下一块，下一块的起始角度是上一块结束的角度+间隙（中间的白色分割线）；4、当最后一段圆弧块绘制完成时，绘制延伸线+文字；5、如下图，通过三角函数确定延伸点A点位置，判断延伸点位于中心点的左或右，绘制延伸线；6、确定A点坐标：7、已知A点到圆心的长度edge = 半径r + 伸出去点的长度；let edg
2021-11-11 09:27:44
4338
1
转载 微信小程序图片放大预览效果的实现
效果预览效果图有点快，但是可以大致看出来效果了。我再给大家描述下吧一个页面有3张图片，点击其中任意一张都可以放大预览。然后在预览的时候，左右滑动，还可以看另外两张图片。话不多说，直接上代码1，首先定义一个页面image.wxml<!--pages/image/image.wxml--><image src="{{imgList[0]}}" bindtap="preview" data-src="{{imgList[0]}}"></image><ima
2021-11-05 14:14:27
5173
原创 微信小程序自定义select下拉选项框
第一步：创建组件所需的文件第二步：开始配置组件select.json{ "component": true, "usingComponents": { "select": "./select" }}第三步：自定义组件样式及jsselect.wxml<view class='com-selectBox'> <view class='com-sContent' bindtap='selectToggle'> <view
2021-10-26 15:52:45
1676
1
原创 微信小程序验证车牌号（含新能源车牌）
输入符合以上规则的车牌号可以通过验证，如果不是，则不可以通过验证let reg = /^(([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z](([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))|([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-Z][A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳使领]))$/const careg = reg.test(that.data.car
2021-10-26 11:54:37
1481
原创 微信小程序发送验证码60秒倒计时
wxml<view class="li-send" bindtap="onSend" wx:if="{{send}}">发送验证码</view><view class="li-send"wx:else>{{seconds}}s后发送</view>wxss/*** 页面的初始数据*/data: { // 发送按钮显示 send:true, // 当前倒计时秒数 seconds:"", // 总秒数 max_seconds:59,},
2021-10-26 11:42:38
411
原创 微信小程序用wxs实现手机号码用****代替
页面结构创建了verify.wx文件verify.wxs/** * 处理字符串为*格式, 中间显示自定义*号 * str 需要处理的字符串 * startLength 前面显示的字符串长度 * endLength后面显示的字符串长度 */ var verify = function(str, startLength, endLength) { if(str.length == 0 || str == undefined) { return ""; } var len
2021-10-26 11:15:40
498
转载 小程序仿 axios 请求封装
一、新建request.js/* * 功能：小程序仿 axios 的请求封装 */export default class Request { // 配置项 configure = { baseURL: '', // 请求url地址 header: { 'content-type': 'application/json;charset=utf-8' }, // header method: 'GET', // 请求的类型，支持get，post，pu
2021-10-07 10:12:04
425
原创 微信小程序签名（横屏+竖屏）
横屏wxml<view class="container"> <canvas canvas-id="firstCanvas" id="firstCanvas" bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas> <view class="btn"> <button type="warn" bindtap="clear"> 清除
2021-09-10 15:21:19
1043
1
转载 微信小程序textArea组件字数限制
在写小程序的过程之前，我们经常能遇到输入区域的字数限制问题，今天就来看一下如何限制textArea的字数实现效果wxml<view class="xinxi"> <textarea placeholder='请提供详细的设备故障信息' minlength="{{min}}" maxlength="{{max}}" bindinput="inputs"> <text class="currentWordNumber">{{currentWord
2021-08-13 16:37:55
1971
转载 vue组件间的5种传值方式
父组件向子组件传值：比如有一个 Father.vue 的父组件要传值给 Children.vue 的子组件，完成共需四步：父组件 Father.vue 内容，注意里面的操作步骤：<template> <div> <h2>父组件区域</h2> <hr /> <!-- 第二步：在引用的子组件标签里定义 :num="num" , num就是要传递的变量--> <Children :num="n
2021-07-30 09:42:42
954
转载 Vue后台管理系统实现登录功能
登录页面vuexrouter.jsmain.js设置全局退出功能删除token 清空localStorage显示用户名键盘事件** 记住密码操作( 读存取cookie与调后端数据无关 提交按钮中操作 )**点击事件// 登录调接口 handleSubmit(name) { // 判断单选框是否被选中 if (this.single == true) { console.log("checked == true");
2021-07-29 11:29:45
1227
1
转载 vue+element-ui实现表格的增删改查
效果图<template> <div id="app"> <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" > &
2021-07-08 15:00:56
2875
1
原创 Vue中bus的使用
vue总线机制(bus)vue中非父子组件之间通信除了使用vuex，也可以通过bus总线，两者适用场景不同。bus适合小项目、数据被更少组件使用的项目，对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式，利用vue的自定义事件机制，在触发的地方通过$emit向外发布一个事件,在需要监听的页面，通过 $on监听事件。vuex适用中大型项目、数据在多组件之间公用的情况。组件通信bus的使用在utils文件下下创建bus.js// utils - bus.
2021-07-05 17:21:38
1186
原创 ElementUI Pagination 分页器绑定数据
1.el-table绑定数据<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" height="auto" border stripe style="width: 100%" >添加 el-pagination分页<div class="block"> <el-pagination @size-change="han
2021-06-30 11:07:27
2826
3
转载 element-ui 表格table，动态显示每一列的，重置全选
先看效果图html:html： 我是通过v-if=“colData[0].istrue”，通过勾选框的选中和不选中来控制对应列的istrue的true/false，从而控制每一列的显隐<template> <div> <el-dropdown :hide-on-click="false" style="float: right"> <i class="el-icon-s-unfold"></i> &l
2021-06-22 17:25:05
502
原创 解决微信小程序 picker 模式日期，设置默认当前时间
wxml文件<picker mode="date" value="{{currentDate}}" start="2021-01-01" end="2021-12-31" bindchange="bindDateChange"> <view class="picker"> 日期选择: {{currentDate}} </view></picker>js文件const util = require('../../utils/util')
2021-06-18 15:34:26
7398
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人