自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

不靠谱的作曲家

一杯茶,一包烟,一行代码写一天

  • 博客(79)

原创 小程序中生成二维码

1.引入js文件,js文件地址 weapp.qrcode.esm.jsimport drawQrcode from '../../utils/weapp.qrcode.esm.js'2.使用drawQrcode({ width: 200, //图片的宽高 height: 200, canvasId: 'myQrcode', text: '这是二维码的内容', image: { //这是图片中的logo imageResource: '/images/logo.

2020-09-30 17:13:25 18

原创 小程序—60s短信验证码倒计时

wxml<button style="color:{{color}}" disabled="{{disabled}}" bindtap="sendCode">{{text}}</button>datadata:{ disabled: false, text: "获取验证码", color: "#06AE56", time: 60}jssendCode(){ var timer = setInterval(() => { this.setData(

2020-09-28 17:42:57 15

原创 tab切换

css.tabcont { display: none}.tabcont.active { display: block;}html<ul> <li class="tab"> 无偿献血达人 </li> <li class="tab"> 优秀红十字志愿者 </li></ul><div class="tabcont active"> tab1 </div><div cl

2020-09-28 17:31:48 14

原创 css3动画—旋转

css3动画旋转,内圆顺时针旋转,外圆逆时针旋转1、html<img src="img/about-img07.png" class="circle01 circle-pst"><img src="img/about-img06.png" class="circle02 circle-pst">2、css.circle01 { animation: rotate1 5s infinite ease-in-out;}@keyframes rotate1 { fro.

2020-09-28 17:11:11 14

原创 关于小程序动态渲染模板

项目中遇到动态表单提交,表单中有input、radio、图片上传、日期选择等类型,导致前台页面表单类型不能固定,由此用到了template使用方法:每个类型做个对应的模板,例如//输入框<template name="ipt"> <input class="weui-input" /></template>//radio<template name="radio"> <radio-group bindchange="radioChang

2020-09-02 18:05:30 62

原创 小程序改变数组某个对象的值

data: { couponData:[],},比如我们要改变第一项btnBg和disabled的值this.setData修改值的时候要使用 [ ] 包裹let disabled = `couponData[${index}].disabled`;let btnBg = `couponData[${index}].btnBg`;this.setData({ [disabled]: !this.data.couponData[index].disabled, [btnBg]:

2020-08-24 10:01:28 29

原创 微信小程序上拉加载,下拉刷新

首先在对应的json文件中开启"enablePullDownRefresh": true首先介绍上拉加载的方法1.data中定义data: { page: 1, hasMoreData: true, //是否还有更多数据 hasFail: false, //获取列表数据是否出错},2.请求数据方法getcompanylist() { wx.request({ method: "GET", url: app.globalData.apiUrl,

2020-07-07 17:03:03 64

原创 小程序中判断用户是否授权

1.判断授权状态if (res.authSetting['scope.userInfo'] == undefined || res.authSetting['scope.userInfo'] == false) { 这里是没授权} else { 已授权授权}2.授权登录按钮bindGetUserInfo(res) { let user = res.detail.userInfo if (user) { console.log('用户点击了允许按钮') } else

2020-06-30 15:23:49 343

原创 小程序中防抖

小程序中如果对某个事件按钮连续点击就会造成多次请求,导致性能消耗解决办法:data:{ lastTime: 0}点击事件中let date = new Date();let nowtime = date.getTime();if (nowtime - this.data.lastTime > 1000) {这里执行方法this.data.lasttime = nowtime}...

2020-06-15 09:51:22 59

原创 关于小程序index.js比app.js先执行

一般在app.js中获取的都是些code、openid、token,比如在首页的时候需要拿到用户的token去请求数据,但是index.js会比app.js先执行,这时候就拿不到token,导致请求出错。解决办法:在app.js获取token的回调中设置if (this.userInfoReadyCallback) { this.userInfoReadyCallback(res)}index.js中if (!app.globalData.token) { app.userInfoRea

2020-06-15 09:36:58 505

原创 通用模态框

很多场景需要用到模态框进行一下数据展示、提醒,索性就借鉴小程序的风格写个通用的模态框HTML<div class="mask"></div><div class="model"> <div class="model-box"> <p class="model-title">标题</p> <p class="model-content">这是一个模态框</p> </div> <

2020-05-20 14:55:13 90

原创 小程序预览图片

1.预览单个图片 <image src="{{item.imgUrl}}" data-src="{{item.imgUrl}}" mode="widthFix" bindtap="preview"></image>点击图片拿到当前图片的地址preview(e){ var currentSrc = e.currentTarget.dataset.src wx.previewImage({ currentSrc: currentSrc, //图片的当前

2020-05-20 10:50:29 95

原创 小程序阻止事件冒泡(bindtap和catchtap)

方法一:例如我们在某个模块上同时增加链接和操作事件,当我们点击备注的时候并不想进入详情就需要阻止事件冒泡,catchtap方法二:我们也可以通过css布局来解决

2020-05-19 17:57:45 324

原创 小程序场景二维码扫码

近期遇到需求是通过微信的扫一扫,扫描小程序特定的场景二维码进入核销页面,大概就是下面三个步骤(1.扫一扫 ;2.扫描对应的二维码;3.进入核销页面)这种方式在真机上测试一般需要小程序发布到正式版才可以,在开发工具中实现步骤1.添加编译模式,启动参数就是对应的场景二维码里的参数2.在首页的onload中的options参数中获取对应的场景参数,拿到之后就可以进行自己的逻辑了...

2020-05-19 15:33:02 110

原创 关于mint-ui的messageBox

项目中用到mint-ui框架,是直接引用的cdn,用到messagesBox 的 “打开prompt”,官方中这样写:MessageBox.prompt('请输入姓名').then(({ value, action }) => { ...});按照这种方式引入报错应该用下方这种形式this.$messagebox({ $type:'prompt', title:'请输入秘钥', message:'信息提示', inputPlaceholder:'请输入秘钥', showCa

2020-05-12 10:39:04 90

原创 antV使用教程入门

在移动端使用antV F2图表入门介绍1.通过npm安装npm install @antv/f2 --save成功安装完成之后,即可使用 import 或 require 进行引用。const F2 = require('@antv/f2');2.通过引用在线js<script src="https://gw.alipayobjects.com/os/antv/assets/...

2020-05-07 17:33:52 568

原创 flex弹性盒布局,最后一行左对齐

使用flex布局,如果是九宫格的话正好可以平分,如图如果是我们只需要八块,如图但是我们想让最后一块左对齐,依次排列在这里插入代码片

2020-05-07 09:34:31 475

原创 小程序canvas生成海报并保存本地

项目中遇到需要把用户的分数生成一张海报并点击保存本地,通过学习以下是绘制思路1.canvas-id一定是要有的<view class="box"> <canvas canvas-id='canvas-demo' class='demo' style="width:100%;height:100%" bindtap="saveimg"></canva...

2020-04-13 15:43:11 173

原创 生成安卓打包证书

在hbuilder打包已停止使用官方证书,原因:由于老版DCloud证书包含了DCloud公司名称信息,最近发现开发者使用此证书发布违规违法APP,牵连了DCloud。应政府要求,HBuilderX将不再推荐使用老版DCloud公用证书,请开发者使用自己的证书打包发布应用1.安装JRE环境 下载链接,并配置相关环境2.命令行keytool -genkey -alias (这里别名...

2020-04-01 17:37:54 271

原创 小程序中的增删改查

近日有款小程序需求:添加个人信息,删除个人信息,修改个人信息,查看个人信息(增、删、改、查)1.首先我们在data中声明一个数组用于渲染信息列表data:{ list: [], name: "", tel: "", id_number: "",}2.一开始我们就在页面for循环数组(list),循环我们就不多做解释了3.在添加的信息的时候我们要首先获取逐条的个人信...

2020-04-01 10:58:57 95

原创 eacharts地图tooltips轮播显示

地图的tooltips自动轮播var Index = -1;var timer = window.setInterval(function(){ var dataLen = setOption.series[0].data.length; //获取个数 // 取消之前高亮的图形 chart.dispatchAction({ type: 'downplay',...

2020-03-06 15:42:11 68

原创 js 根据链接生成二维码

1.引入插件qrcode.min.js 插件线上地址2.$(".leftqrcode").qrcode({ render: 'canvas' || 'table', //方式 width: '160', //二维码宽 height: '160', ...

2020-02-28 11:58:57 215

原创 解决ios系统使用模糊实时搜索无效问题

在使用下拉模糊搜索的时候安卓和电脑是没有任何问题的,而在使用苹果系统并且是苹果系统默认输入法的时候不会触发搜索事件,导致输入关键字不能检索出来,经过反复测试得出两种解决方案1.在苹果手机上安装第三方输入法(不推荐,但也是一种解决方法)2.我们在程序上解决使用compositionend事件,当文本段落的组成完成或取消时, compositionend 事件将被触发当我们考虑到兼容性并且想解...

2020-02-21 15:59:33 196

原创 vue 实时往数组里追加数据

使用Vue.set()以下来解读一下 Vue.set(this.tableDatas, this.selected, obj)1.this.tableDatas是我们声明好的数组,以下是自定义数据tableDatas: [{ id: 1, caseName: '方案一', longMinute: 10, longSecond: 0, remindMinute: 2, remind...

2020-02-20 10:08:46 4598

原创 vue 下拉框默认选中自定义的那一项

在自定义下拉框数据的时候想默认选中特定的一项该怎么办?1.用使用双向绑定<select @change="selectColr($event)" v-model="selectOpt" class="selectColor"> <option v-for="(item,index) in colorArr" :value="item.value">{{item.co...

2020-02-20 10:02:16 357

原创 如何使用百度人脸识别

1.注册百度账号2.创建应用3.获取Access Token获取Access Token有三个必要的参数grant_type: 必须参数,固定为client_credentials;client_id: 必须参数,应用的API Key;client_secret: 必须参数,应用的Secret Key;其中grant_type是固定的,client_id和client_secre...

2020-01-08 18:11:18 118

原创 根据失败的状态码提示用户

在success中我们可以根据成功的状态码进行提示或事件的判断,但是失败的状态码是在error中返回的,根据常规的形式拿不到状态码,后来初始化一个 XMLHttpRequest 对象,如下:所有的错误提示集合在了一个状态码中 error: (XMLHttpRequest, textStatus, errorThrown) => { var errorText = JSON.strin...

2020-01-07 11:04:05 308

原创 立体按钮点击手机震动

1.HTML<button class="lu-btn-3d" onclick="btn()"> 点击<br />抢答</button>2.CSSbutton { outline: none;} .btn { width: 148px; height: 148px; font-size: 32px; border-radius: ...

2019-12-31 09:32:42 43

原创 自定义数字软键盘

1.html<div id="pic"> <divclass="inputBtnList"> <button>1</button> <button>2</button> <button>3</button> <button>关闭</button> <...

2019-12-30 16:31:41 94

原创 vue 中使用mock数据

如果是前后端分离模式,在项目起始,后端接口没有写好的情况下,不耽误项目的进度,我们可以使用mock.js进行开发,以下就简单说下使用方法:1.下载mock.jsnpm install -D mockjs2.在项目中新建mock.js文件3.在mock.js中引入mock.jsconst Mock = require('mockjs') // 引入mockjsconst R...

2019-12-30 15:49:08 58

原创 vue class的绑定

1.对象的绑定基本用法:class="{ 'active': isActive }"判断是否绑定:class="{'active':isActive==-1}"或者:class="{'active':isActive==index}"2.绑定并判断多个第一种(用逗号隔开):class="{ 'active': isActive, 'sort': isSort }"第二种(放...

2019-12-30 14:31:12 23

原创 vue websocket公共信道

之前我们用到websocket是在首页中用到即时通讯 传送门:vue.js中引入websocket,后来随着项目的完善,我们在全局需要增加锁屏功能。用到的也是websocket,功能就是有操作员操作之后,我们的终端就会出现锁屏界面的一个功能,后来在main.js中进行程序的书写,websocket的具体使用方法请参考上面的链接当我们就收到websocket传来的信息只需要在数据接受中进行操作...

2019-12-30 09:45:56 75 1

原创 vue图标旋转

需求是当我们点击图标进行请求数据的时候,图标进行旋转,成功之后停止旋转,请求超时也会自动停止旋转1.HTML<div class="refresh" icon="el-icon-refresh" @click="refresh()"> <img src="../assets/img/refresh.png" :class="[isRotate?'rotate':'rotat...

2019-12-30 09:27:46 555

原创 vue-pdf解决浏览位置的缓存

前面我们介绍了使用vue-pdf的方法:vue-pdf使用方法在项目中使用vue-pdf时,在更换链接时,导致PDF还是停留在原先浏览的位置,造成体验不佳,我们的结局方案是在更换链接时让滚动条滚动到顶部,1.错误代码this.$refs.topicScroll.scrollTop = 0开始的时候使用上面的代码怎么都起不了作用,后台发现pdf是canvas画的,如果开始就使用此方法导致无...

2019-12-27 18:24:35 190

原创 vue tab切换

1.tab标签<ul class="tab"> <li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)" v-cloak>{{item}}</li></ul>2.内容<div v-show="num == 0" class=...

2019-12-27 18:03:46 26

原创 PDA中引入音频

之前写过我们在pda中调用扫描头得到返回值:文章连接现在我们需要在扫描成功之后引入音频,也就是加入提示音(类似于:“扫码成功”,“扫码失败”)我们在拿到返回值之后调接口,在success中引入音频文件,注意文件路径主要代码var mp3 = “audio/success.mp3”;var mp3 = new Audio(mp3);mp3.play(); success: (res) ...

2019-12-27 14:03:41 44

原创 vue使用vue-pdf

安装npm install --save vue-pdf2.引入import pdf from 'vue-pdf'export default { components: { pdf }}3.创建html<div> <pdf v-for="i in numPages" :key="i" :src="src" :page="...

2019-12-25 11:19:02 123

原创 让element-ui错误提示只出现一次

1.在使用elementUI提示的时候当用户点击按钮某项条件没满足导致出现错误提示,一直点击一直出现,用户体验不友好,可以加上以下代码if (document.getElementsByClassName('el-message').length === 0) { 这里是elementUI的提示语}...

2019-11-28 18:21:04 457

原创 mui 上拉加载

1.初始化var lastPage; //总共页数var currPage = 1; //当前页码var counter = 1; //计数器2.渲染页面数据function getallData() { mui.ajax({   type: 'get', url: “接口地址” headers: { "Authorization": "Bearer " + TOK...

2019-11-28 18:06:23 27

原创 vue输入框禁用空格

1.输入框@keydown.native="keydown($event)"2.methodskeydown(event){ if(event.keyCode == 32){ event.returnValue = false }}

2019-11-26 16:47:33 1247

空空如也

空空如也

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