- 博客(78)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 移动端开发常见问题及解决方案
1.移动端左右滑动右侧有留白出现这种问题的话查看一下自己的css中有没有用到position:relative或者position:absolute,我做页面的时候经常遇到这个问题，百分之一百是这个原因。2.ios点击事件无效果为css添加cursor：pointer;3.设置animation动画安卓没有效果为keyframes、animation、trans
2016-09-29 16:41:32
3815
原创 图片作为背景的相关方法
1.图片作为背景：（1）当图片作为背景的时候可以用background-size:100% 100%; 设置百分比使图片自适应大小。（2）background-origin:content-box可以设置背景图片的起始位置得到下面的效果。2.图片hover效果：.divimg{ transition:all 0.5s} .div:hover img{ transform:
2016-09-29 16:16:50
793
原创 web前端开发技巧（HTML+CSS+Jquery）
1.css选择器1）伪元素：之前刚接触css的时候，傻傻的只知道用class和id的修改样式，最近才发现：after和：before同样好用。我么可以在：after这些为元素中添加内容，比如：a:after{ content：“￥”}。2）属性选择器，比如：input [ type=text ]，用法和jquery的属性选择器类似。3）组合选择器，A,B 同时匹配两个元素；A+B匹
2016-09-13 16:54:40
2993
原创 element-UI上传文件后valid提示不消失
解决方法：在标签添加show-message属性，字段为空时才显示提示信息。问题描述：上传文件完成后，必填信息提示不消失。
2024-01-26 11:17:40
453
原创 Eslint自动修复突然不生效了
我的vscode版本号是1.7.0，eslint自动升级到2.4.4出现了问题，回退到2.4.2就可以了。在vscode中找到ESLint扩展应用，安装之前的版本，然后重新加载就可以了。打开vscode底部状态栏，查看eslint的输出，提示版本问题。之前没问题，今天打开项目突然不好用的，一般就是插件版本问题。
2024-01-25 15:11:23
444
原创 实现MP4分片下载 + Promise的使用
业务逻辑：播放mp4大视频，同时分片下载该视频，视频下载完成后转为blob本地链接播放，替换原视频地址，当分片下载失败，N秒后递归下载错误的分片，直至下载成功，如果5次后仍然失败，停止下载，播放原视频地址。场景：主要针对大视频循环播放的场景，为节省流量，将视频下载至本地播放。如果await后面是async函数，返回async的return值。awiat返回的是promise中resolve中的值。注：本文主要解析MP4下载过程。
2023-12-14 18:16:13
157
原创 vue+antv L7实现高德地图自定义样式和自定义marker
vue+antv L7实现高德地图自定义样式和自定义marker+popup
2022-10-24 12:49:03
2918
1
原创 uniapp实现九宫格拖拽排序（movable-view）
功能包括：选择多张图片上传，单击预览图片，长按拖拽排序，本文主要讲解拖拽排序的实现效果图如下：实现思路：1.定义imgList数组，存放图片元素；2.长按图片时记录当前移动元素index，简称moveId；3.移动时，记录结束位置，计算结束位置的index，简称moveToId;4.移动结束，记录原来的元素信息imgList[moveId]，使用splice方法删除moveId元素，添加moveToId元素5.利用归位函数为movable-view的x、y赋值，将元素归位.
2022-04-22 14:38:51
6457
5
原创 理解canvas中的save()和restore()
绘图过程中如果只想对部分图形执行某操作，将该图形的绘制过程使用save()和restore()包裹起来，后续其它元素的绘制将不受影响。
2022-02-28 15:07:00
304
原创 微信小程序实现讯飞语音合成
参考文档：语音合成（流式版）WebAPI 文档微信小程序背景音频播报可参考：uniapp实现微信小程序websocket+背景音频语音播报实现步骤注册讯飞账号，完成实名认证，获取应用appid 连接讯飞websocket，在握手阶段，请求方需要对请求进行签名 发送请求文本，讯飞服务器返回合成后的音频片段，采用base64编码 将返回的音频片段组合，并转成可播放的MP3文件1.注册账号，并获取应用appid打开官网网址：讯飞开放平台-语音合成点击免费试用，按步骤完成实名认证后得.
2022-02-09 10:14:10
5353
9
原创 uniapp实现微信小程序websocket+背景音频语音播报
业务需求：根据后台返回消息播报语音，要求后台运行可继续播报实现步骤：建立socket连接监听消息，并建立心跳检测机制，防止socket意外断连 将接收到的文字信息转化为音频文件 使用uni.getBackgroundAudioManager()，实现后台运行可以持续播报音频 解决并发问题，同时接收多个文件按顺序播报1.建立socket连接onShow() { const SocketTask = getApp().globalData.SocketTask; if (!.
2022-02-08 14:32:18
6697
2
原创 uniapp使用高德地图定位（兼容app）
1.获取Key 查看官方文档需要：应用包名和SHA1（获取方法查看）2.配置manifest.json3.设置安全通讯域名登录微信公众平台，在 "设置"－>"开发设置" 中设置 request 合法域名，将https://restapi.amap.com中添加进去4.下载微信小程序插件amap-wx.js地址在创建的项目中，新建一个名为 libs 目录，将 amap-wx.js 文件拷贝到 libs 的本地目录下，完成安装。5.在项目中使用...
2021-12-13 15:47:11
15449
原创 element-ui日期选择插件，只能选择今天以前的时间
DatePicker 日期选择器 <el-date-picker v-model="value" type="date" placeholder="选择日期" :picker-options="pickerOptions1"></el-date-picker>...pickerOptions: { // 只选择今天之前的，不包含今天 disabledDate(time) { let
2021-12-07 09:52:38
1077
原创 uniapp使用uni-data-picker插件实现省市区弹窗（兼容app）
官方文档：uni-app官网1.使用HBuilder导入插件.uni-data-picker 数据驱动的picker选择器 - DCloud 插件市场2.导入成功后，在src文件夹下多一个uni_modules的文件夹3.引入插件import uniDataPicker from '@/uni_modules/uni-data-picker/components/uni-data-picker/keypress.js';4.在页面中使用<uni-data-pic..
2021-12-06 15:46:59
9149
1
原创 uniapp发布app生成证书
一、定义解释1.uni_appid：uniapp的id，mainfest.json-基础配置2.应用包名：应用名字（自行设置），域名反过来写3.应用签名：微信开放平台中特定需要，用于微信登录和支付的申请，使用签名工具获取签名生成工具： https://open.weixin.qq.com/cgi-bin/readtemplate?t=resource/app_download_android_tmpl&lang=zh_CN4.证书文件（keystore文件）：dcloud..
2021-12-03 15:47:50
2793
1
原创 html+css命名规范（SEO优化）
一、HTML1、采用HTML5结构标签（1）header：某个区块的头部信息/标题；（2）hgroup：头部信息/标题的补充内容；（3）nav：导航条部分信息（4）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；（5）article：特殊独立区块，表示这篇页眉中的核心内容；（6）aside：标签内容之外与标签内容相关的辅助信息；（7）figure：独立的单元，例如某个有图片与内容的新闻块。（8）footer
2021-11-15 10:34:58
268
原创 JS命名规范(常用)
1. 变量命名方法：小驼峰式命名法。命名规范：前缀应当是名词。var maxCount = 10; var tableTitle = 'LoginTable'; 2. 常量命名方法：名称全部大写。命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词。var MAX_COUNT = 10; var URL = 'http://www.baidu.com';3. 函数命名方法：小驼峰式命名法。命名规范：前缀应当为动词。 动词
2021-11-15 10:28:22
3393
原创 mpx跨平台转web遇到的问题
1.class不允许使用标签名2.所有dom放入一个根节点3.onShareAppMessage分享钩子无法使用4.button的open-type无法使用5.自定义顶栏失效，web不显示解决：pageLifetimes不支持，将show改为attached6.setData报错解决：根据环境判断使用=赋值或setData7.wxs文件引用报错8.判断是否是web的方法 if (!navigator) { return fal
2021-11-15 09:54:29
203
原创 微信小程序优惠券列表领取（send-coupon插件）
插件配置和引入请参考官方文档：https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter9_3_1.shtml<send-coupon bind:sendcoupon="getcoupon" bind:userconfirm="redirectuser" send_coupon_params="{{send_coupon_params}}" sign="{{sign}}" send_coupon_mercha
2021-11-11 14:26:03
4847
3
原创 typescript基础入门
基础类型let isTrue: boolean = falselet price: number = 3let name: string = 'zhangsan'let arr: number[] = [1, 2, 3]数组let arr: Array<number> = [1, 2, 3]元组 let x: [string, number, number] = ['zhangsan', 12, 23]x[3] = 'world' //当访问一个越界的元素，会使
2021-08-27 16:55:16
176
原创 javascript数组相关方法
（1）把数组转换为字符串toString()//把数组转换为数组值（逗号分隔）的字符串join('|')//方法也可将所有数组元素结合为一个字符串，还可以规定分隔符（2）数组的弹出与位移（改变原数组）push()//方法（在数组结尾处）向数组添加一个新的元素，返回新数组的长度pop()//方法从数组中删除最后一个元素，返回被删除的值unshift()//方法（在开头）向数组添加新元素，返回新数组的长度shift()//方法会删除首个数组元素，返回被“位移出”的字...
2021-08-27 16:30:48
68
原创 javascript字符串相关方法
（1）检索字符串中的字符串str.search("locate");//可以设置更强大的搜索值（正则表达式）str.indexOf("USA");//可以设置第二个开始位置参数（2）提取字符串slice(start,end)substring(start,end)substr(start,length)（3）字符串替换str.replace("Microsoft", "W3School"); //默认地replace()只替换首个匹配，对大小写敏感（4...
2021-08-27 16:06:18
98
原创 JavaScript判断变量类型
1.var d = new Date(); // 当前日期2.去重localId = [...new Set(localId)]; // ID去重3.JavaScript 关键词4.判断变量类型（1）typeof对于丰富的对象实例(null,array等)，只能返回"Object"字符串。（2）变量a为一个array，使用a instanceof Object，也会返回true，array本身就是对象类型（3）使用原型链区分对象还是数组funct...
2021-08-27 16:04:15
222
原创 vue实现excel上传获取表格数据
使用mixin.js将方法作为公用方法import XLSX from 'xlsx'// mixins.jsexport const xlsxMixin = { methods: { impExcel(e) { //导入信息 const that = this let fileName = e.target.files[0] return new Promise(function (resolve, reject) {
2021-08-13 13:47:04
530
原创 canvas制作九宫格拼图（坐标完整版）
形状和位置如下图所示：drawOne (ctx) { const r = 10 ctx.moveTo(2 * r, 2 * r) ctx.lineTo(12 * r, 2 * r) ctx.lineTo(12 * r, 5 * r) ctx.arcTo(13 * r, 5 * r, 13 * r, 6 * r, r) ctx.lineTo(13 * r, 7 * r) ctx.arcTo(13 * r, 8 .
2021-07-15 17:55:42
767
原创 微信小程序使用canvas制作拼图动画
效果如上图制作思路：1. 制作9个由特殊图形拼成的九宫格，包含模糊和彩色高亮2.生成的拼图进行一系列路径动画（蓄能弹起效果）3.将生成的拼图拼贴在对应的位置上，并产生破碎动画特效技术实现思路：1.将拼图图片利用canvas rgb通道方法制作成模糊灰度图，参考博文https://blog.csdn.net/sunzhibin1/article/details/823879262.制作九宫格拼图<view class="canvas-wrap..
2021-07-15 16:06:35
966
原创 小程序使用scroll-view时无法触发 onPullDownRefresh，自定义下拉刷新
心路历程：小程序底栏采用了fixed定位，导致页面滚动时ios手机出现底栏闪动，为了解决这个问题，将page滚动改为scroll-view，从而引发了下拉刷新失效，因为页面需要监控scroll滚动，不得已需要舍弃onPullDownRefresh，自定义了一个比较简单的下拉刷新，效果图如下：下拉松手0.5s后刷新并回弹。tempalte：将刷新代码放入scroll-view，loading动画我采用了vant组件，这个可以自己随意发挥 <scroll-view scrol
2020-09-16 10:14:20
2755
1
原创 input只保留小数点后两位小数
getPrice(value) { this.addInfo.price = value.match(/\d+(\.\d{0,2})?/) ? value.match(/\d+(\.\d{0,2})?/)[0] : ''; },
2020-08-11 13:48:04
2134
原创 vue+wangEditor的使用与展示（表格+图片自定义上传+带格式粘贴）
之前使用的富文本编辑器是quill，但是项目新需求需要加表格，实在是整不出来，换成了wangEditor，下面展示从编辑到展示的代码历程，支持粘贴表格，图片自定义上传oss等功能，支持 IE10+ 浏览器。官网：www.wangEditor.com1. 编辑器组件wang-edit<template> <div class="text-edit"> ...
2020-02-20 16:15:46
6650
4
原创 修改Vant Weapp中popup的样式
使用custom-style可更改样式，如：上边框更改为圆角 <van-popup show="{{ show }}" position="bottom" custom-style="border-top-left-radius: 5px;border-top-right-radius: 5px;" ...
2019-11-28 16:09:00
13562
原创 小程序使用switchTab跳转带参数
1.当前页定义全局变量，并给变量赋值<script> // 定义全局变量 const app = getApp(); createPage({...selectCounty(county) { app.cityName = county.name; wx.switchTab({ ...
2019-11-28 16:05:27
3633
原创 oss地址转base64编码
async init() { // 获取base64编码 解决移动端跨域问题 try { const [avatarResult] = await Promise.all( [ this._getBase64(this.avat...
2019-11-12 10:29:02
585
1
原创 html2canvas转图片遇到的坑（图片偏移，图片模糊，字体改变）
最近做了一个分享页面，要求长按保存相册，其中用到了html2canvas，使用比较简单，但是遇到的比较常见的几个坑，来做下总结：1. 解决图片模糊和偏移$('.share')是需要转成图片的domfunction share() { var width = $('.share')[0].offsetWidth; //dom宽 var height = $('.share')[...
2019-09-24 15:10:32
50381
16
原创 （element-ui）v-for动态数据循环表单验证的处理方式
1.功能需求：使用element的表单验证方式，动态for循环的场景如何使用？如下图所示：2.dom结构如下（重点）注意：1. userList和其他表单项在同一个form表单中2.prop改为：prop，形式为'userList.'+index+'.name'3.每一个循环中的<el-form-item>都需要加：rules <el-form :m...
2019-06-27 14:23:05
17798
10
原创 关于offsetTop的理解
1. offsetTop：元素到offsetParent顶部的距离2. offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。3. 注意...
2019-05-30 14:39:58
38025
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人