自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

一只蠢村花的博客

H5开发中遇到的坑,此人很懒,记性很差,蠢而认真

  • 博客(32)
  • 收藏
  • 关注

原创 uniapp/小程序 canvas画布导出图片并下载到本地

如果微信原生的话,此处uni可以换成wxthis.canvas是上一篇文章生成的canvas画布uni.canvasToTempFilePath({// res.tempFilePath临时路径 canvas: this.canvas, success: (res) => { uni.saveImageToPhotosAlbum({ // 保存本地 filePath: res.tempFilePath,

2022-03-02 16:52:18 2436 1

原创 传入图片地址生成canvas分享海报

<template> <div class="content"> <canvas :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}" type="2d" canvas-id="myCanvas1" id="myCanvas1"></canvas> </div></template><script>import { mapS

2022-03-02 16:49:22 481

原创 微信小程序获取用户手机号授权

1、获取微信用户绑定的手机号,需要先在主页面调用wx.login接口2、使用button按钮触发授权弹窗 <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号码</button>3、通过参数【encryptedData】,【iv】,【sessionKey】请求后端接口,传入上面获取到的参数,后端进行解密然后返回用户手机号getPhoneNumber(e){ console

2022-02-21 17:35:31 10725

原创 微信小程序获取unionid

1、调用wx.login获取当前登录用户的code码2、将code码传给后端,通过code2Session方式获取用户unionidgetUserOpenId: async function({ commit }) { return await new Promise((resolve, reject) => { // 调用wx.login(此处由于我引用了uniapp框架所以为uni.login) uni.login({ success: data => {

2022-02-21 14:01:59 9970

原创 禁止移动端弹窗的滚动穿透

亲测好用!不需要计算滚轮高度const count; // 弹窗是否显示if (!count) { // 不显示 document.documentElement.style.overflow = ''; document.body.style.overflow = ''; } else { // 显示 document.documentElement.style.overflow = 'hidden'; document.bo

2021-06-04 11:33:42 111

原创 js算法题

1、传入一个数字,实现阶乘 5 * 4 * 3 * 2 * 1/*param num 值可以为任意数字*思路: 第一次递归 num 乘 num-1 (5 乘 4)* 第二次递归 num-2 乘 num-2-1 (3 乘 2) 以此类推* 当阶乘的当前值小于等于 1 时跳出递归**/bSum(num) { if(num-2 <= 1) return let sum = num * (num-1) this.bSum(num-2) console.

2021-04-21 20:44:38 106

原创 Promise.all()、Promise.allSettled()、Promise.race()三兄弟的区别

Promise.all()Promise.alll() 具有并发执行异步任务的能力。但它的最大问题就是如果参数中的任何一个promise为reject的话,则整个Promise.all() 调用会立即终止,导致数据都无法返回。可以用于接口返回值有依赖的情况下使用Promise.all([ api.getUserInfo(), //接口 api.getMemberInfo(),//接口 api.getFocusedWechat(),//接口]).then(res =>{..

2021-03-25 18:53:12 1454

原创 mac本地部署EasyMock

EasyMock使用参考文章参考文章:https://my729.github.io/blog/article/EasyMock%E4%BD%BF%E7%94%A8.html参考文章:https://blog.csdn.net/qq_38225558/article/details/86483310官网注册地址:https://easy-mock.com/login快捷键查找文件目录 co...

2019-09-23 14:28:47 1237

原创 vue+"web-highlighter"实现高亮笔记/web荧光笔 API

1、highlighter = new Highlighter([opts])创建一个新highlighter实例。{ $root: document.documentElement, exceptSelectors: null, style: { className: 'red' }}(1)$root 将实例挂载到某个dom元素...

2019-08-29 11:15:13 2354 3

原创 vue+"web-highlighter"实现高亮笔记/web荧光笔

web页面高亮效果是一个很有趣,并且外行人第一印象特别厉害的特效,应用的场景比较少,网上没查到几个案例,以下为 web-highlighter插件实现过程web-highlighter 的github地址高亮笔记到底展示了个啥效果?点击下方的蓝色按钮选择“政治术语”,使用鼠标选中左侧文章中的某一段话,文本将以闪亮的背景颜色突出显示,下次访问时,突出显示的区域将被保存并恢复。一、安装,...

2019-08-28 18:01:20 4034 13

原创 vue项目兼容ie(页面空白、报错、不请求接口)

一、ES6和axios兼容Vue 的核心框架 vuejs 本身,以及官方核心插件(VueRouter、Vuex等)均可以在 ie9 上正常使用。但axios和es6是基于promise的,ie不兼容promise,所以需要安装插件将语法转换成ie可以识别的。下载 babel-polyfill,执行npm install babel-polyfill --save然后在main.js中的最前...

2019-03-29 23:43:34 4002

原创 beforeEach路由前置守卫传全局参数

使用全局路由前置守卫(to是跳转后的页面路由,from是跳转前的,next是必须要执行的,加上next路由才会跳转)注意: 不能直接执行next({参数}),会进入死循环正确写法如图所示,加个判断再用next传参router.beforeEach((to, from, next) => { if(to.query.time == undefined){ let toQuery =...

2019-03-25 10:57:29 7082 2

原创 vue+ie兼容 页面缓存不请求接口,重复请求页面不刷新,解决方案: axiox加时间戳

注意:并不是v-router里加时间戳,而是axios请求上加时间戳在axios的封装中写:export default { //get请求 get(url, param) { return new Promise((resolve, reject) => { axios({ method: 'get', url, ...

2019-03-25 10:54:50 2331

原创 颜色随机,去掉灰色,太亮,太暗的颜色,使用hls 写法基于vue

第一步: 获取随机的 hlsdata(){ return{ hslArray: [], }} // 获取HSL数组 getHslArray() { var HSL = []; var hslLength = 34; // 获取数量 for (var i = 0; i &lt; hslLength; i++) { // 获取...

2018-11-28 11:00:33 1453

原创 vue + echart +map 地图实现省下钻到市

第一步:安装依赖和全局注册echart安装步骤请看我另一篇文章vue + echart +map实现中国,省,市地图第二步: methods里定义方法,先初始化地图实例(自己查文档加地图底色)getDownMap(){ let that = this; let chart = that.$echarts.init(document.getElementById(&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;mapChart&amp;am

2018-11-23 14:41:31 5458 5

原创 vue + echart +map中国地图,省市地图,区县地图

第一步:安装依赖包npm install echarts --save在main.js 中全局引入import echarts from 'echarts'Vue.prototype.$echarts = echarts第二步:引入地图文件(此处路径可以参照node_modules 文件夹里的,echarts依赖包中具体路径写)1.中国地图 import &amp;amp;amp;amp;amp;amp;quot;echarts/map...

2018-11-23 14:22:55 35807 6

原创 textarea字数限制并模拟placeholder

&lt;textarea placeholder="您的建议是我们前进的动力!" rows="15" maxlength="300"onchange="this.value=this.value.substring(0, 300)" onkeydown="this.value=this.value.substring(0, 300)" onkeyup="this.value=this.

2018-08-17 17:34:51 271

原创 jquery实现省市区地址三级联动功能

页面结构:&lt;div class="detail-group provinceStyle" id="detailMarketCouponAddress"&gt;&lt;div class="detail-div"&gt; &lt;label class="control-label"&gt;&lt;span class="red-s

2018-08-17 16:23:13 3004

原创 js实现tab切换功能

一、初始化html结构&lt;div class="tab" id="tab"&gt; &lt;span class="active"&gt;工作日&lt;/span&gt; &lt;span&gt;休息日&lt;/span&gt;&lt;/div&gt;&lt;div class="tabdiv"

2018-08-17 15:23:12 17892 3

原创 webUpLoader百度上传插件

官网地址: http://fex-team.github.io/webuploader/doc/index.html 使用教程:参照api中的快速使用一、开发中遇到的坑 1.当从bootstrap-table 表格中点击编辑按钮跳转页面后初始化插件时,需要定义一个全局变量 var uploader; 可以解决重复初始化,按钮无限变大的问题二、初始化实例var uploader;...

2018-08-16 18:37:07 1370

原创 移动端H5识别微信,安卓,ios

一、如果是微信浏览器,提示弹出层&amp;amp;amp;amp;lt;div class=&amp;amp;amp;quot;wxtip&amp;amp;amp;quot; id=&amp;amp;amp;quot;JweixinTip&amp;amp;amp;quot;&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;img class=&amp;amp;amp;quot;wxtip-icon

2018-08-16 18:00:56 949

原创 bootstrap-table分页表格

官网地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 翻译过的中文API:http://blog.csdn.net/rickiyeat/article/details/56483577 Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 如下: http://www.cnblogs.com/landeanfen/p/515...

2018-08-16 14:03:14 238

原创 jquery.i18n.properties中英文切换,配合jquery.cookie使用

jquery.i18n下载地址github: https://github.com/jquery-i18n-properties/jquery-i18n-properties jquery.cookie下载地址:http://plugins.jquery.com/cookie/ jquery.cookie使用教程: http://www.jb51.net/article/44557....

2018-08-16 13:48:11 1563 1

原创 html5Validate表单验证插件

张鑫旭博客: https://www.zhangxinxu.com/wordpress/2012/12/jquery-html5validate-html5-form-validate-plugin/ 使用方法 使用方法: var flag = $.html5Validate.isAllpass($("#addRoleForm"));if(!flag){ return;}...

2018-08-16 13:43:47 1758

原创 bootstrap-select多选下拉框插件

github地址: http://silviomoreto.github.io/bootstrap-select/ 官网地址:http://silviomoreto.github.io/bootstrap-select/ 参考教程:http://www.cnblogs.com/anny0404/p/5329960.html 一、引入bootstrap-select.min.css和boots...

2018-08-16 12:02:10 486

原创 Distpicker 省市区地址三级联动插件

使用和下载地址: http://www.jq22.com/jquery-info8054 一、引入Distpicker.js Distpicker.data.js 二、html结构初始化&lt;div data-toggle="distpicker" id="address"&gt; &lt;select&gt;&lt;/select&gt;&lt;!-- 省 --&gt;...

2018-08-16 11:56:58 4051 1

原创 alert-confirm弹出框插件

某个没用过的但是很简洁的弹出框插件:  http://www.jq22.com/jquery-info2351一、自己创建js文件并粘贴进去;$(function () { window.Modal = function () { var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'igm'); var alr ...

2018-08-16 10:59:40 688

原创 bootstrap-paginator分页插件

github下载地址: https://github.com/markbates/jquery-bootstrap-pagination 参考教程:http://www.zuidaima.com/blog/3113283274804224.htmfunction paging(totalPage){ var options = { bootstrapMajorVers...

2018-08-16 10:41:53 181

原创 My97DatePicker时间插件基础用法

使用方法: http://www.360doc.com/content/14/0606/11/17602217_384229128.shtml开始时间和结束时间:&lt;input type="text" id="addStartMarActivity" readonly onclick="WdatePicker({maxDate:'#F{$dp.$D(\'addEndMarActiv...

2018-08-16 10:38:04 297

原创 viewer图片查看器如何使用 && 初始化失败的解决方法

一、下载Viewer.js文件 github下载地址:https://github.com/fengyuanchen/viewer 注意:JS 版本和 jQuery 版本名字虽然一样,但代码不一样,不能通用。 即使使用jquery插件也可以使用js版本的二、在页面里引入文件&amp;amp;lt;link rel=&amp;quot;stylesheet&amp;quot; href=&amp;quot;css/viewer.min.css&amp;qu

2018-08-15 19:11:33 1721

原创 Vue-swiper实现轮播图功能

Vue-swiper下载地址: https://github.com/zwhGithub/vue-swiperdhjdhjdhjdh dsfsdfsaf

2018-07-31 17:15:01 2028

原创 APP中H5页面实现拨打电话功能

使用a标签 &amp;amp;amp;amp;lt;a href=&amp;amp;amp;quot;tel:400-0000-000&amp;amp;amp;quot;&amp;amp;amp;amp;gt;400-0000-000&amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;gt;此方法支持大多数浏览器,如失效,就在head标签里加上 &amp;amp;amp;amp;lt;meta name=

2018-07-27 11:53:12 17359

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

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