- 博客(55)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 vue项目使用AlloyFinger实现图片放大缩小旋转单击双击长按事件
1、vue使用AlloyFinger,可以使用npm进行下载也可以直接下载AlloyFinger.js文件使用npm下载如下npm installAlloyFinger --save在main.js中引入importAlloyFingerfrom'alloyfinger'importAlloyFingerPluginfrom'alloyfinger/vue/alloy_finger_vue'Vue.use(AlloyFingerPlugin,{AlloyFin...
2020-07-27 15:37:56
2095
原创 vue使用vue-awesome-swiper插件结合animate.css
在前端使用swiper很多人都能想到使用swpier(网址： https://www.swiper.com.cn/)， swiper能兼容很多不同的项目，如vue、react、原声html等。当你使用swipe时会发现每次使用都需要创建一个swiper对象，因此vue的生态系统中封装了vue-awesome-swiper插件，具体使用如下：1、下载vue-awesome-swiper插件n...
2019-09-20 11:35:58
3185
55
原创 vue项目scss定义全局变量--颜色变量
1、建立一个vue项目，并且该项目使用scss语法2、定义一个scss文件，里面定义一个全局的变量3、在build下的utils.js中配置scss: generateLoaders('sass')，把css: generateLoaders('sass'),修改为scss: generateLoaders('sass').concat({ loader: 'sass...
2019-02-14 11:28:14
20076
5
原创 uniapp小程序src引用服务器图片时全局变量与图片路径拼接
很明显这种方式小程序是不认的，这就头疼了，还想过另外一个方法就是想vue一样定义全局的store参数进行设置，在页面的js中打印也是一切正常的，但是就是引入到如图上的图片的src就是不行。除了定义js的全局变量，还有定义css的全局变量，uniapp使用的是scss这个css的预处理语法，可以直接在nui.scss文件中定义。理论上，应该在main.js中定义一个全局变量，然后在页面的<image>标签上的是src直接使用即可。看上去挺靠谱的，实际上小程序后台会报一个错。
2024-05-30 16:06:22
1122
原创 uniapp定义全局的filters
1、新建一个filters.js2、里面编写你的filter方法，这里以格式化时间为例子，把时间转变成还剩xx填yy小时zz分的形式function getTime(times) { let timehtml = ""; let leftTime = new Date(times).getTime() - new Date().getTime() + 172800000; let days = parseInt(leftTim
2022-05-09 17:01:05
2280
原创 uniapp控制app.vue先执行onLaunch再执行其他函数
问题：小程序希望一进来就调用uni.login接口进行登录（在app.vue上onLaunch函数进行联调，原因是这个接口是页面进来先执行的），然后把获取回来的code进行联调接口把用户身份提交给后台。由于接口联调是异步的，很难控制页面接口的顺序。假设首页有获取首页的接口，由于请求是异步的，如果想让app.vue先执行onLaunch再执行其他函数的话需要把onLaunch函数跟要执行的函数由异步变成同步，操作如下：1、main.js// 让app的onLaunch先执行，主要是用来进行登录Vue
2022-01-11 17:44:39
6070
7
原创 关于使用html2canvas生成海报出现iphone12音乐重叠的解决办法
1、Html2canvas工作原理；Html2canvas加载后将会浏览页面上的所有元素，集合所有页面元素的信息，然后用户就可以通过Html2canvas把整个页面（整屏）截图下来。换句话来说，Html2canvas不会实际上的截图，而是通过从DOM读取的足够信息去建立一个页面的展示镜像，生成base64的图片流程。这就会导致Html2canvas只会渲染它认识的正确的DOM元素属性，还有很多CSS属性是不会生效的，也就渲染不出来了。IOS11系统下背景音乐在调用Html2canvas()会.
2021-11-30 11:18:52
1006
原创 使用秀米编排点击展示H5
前期准备1、打开秀米官网，点击右上角登录（建议微信登录）https://xiumi.us/#/2、如果想在秀米排版的能同步到公众号，请授权一下公众号，具体参考以下两篇文章http://www.coozhi.com/youxishuma/hulianwang/80847.htmlhttps://jingyan.baidu.com/article/cb5d6105de98b4005d2fe05d.html接下来进行排版公众号1、进入首页，选择新建一个图文2、找到svg，点击3、在svg图中
2021-10-27 11:19:33
8252
原创 使用qrcode生成的二维码安卓手机长按不识别问题
1、下载依赖npm installqrcodejs2 --save2页面引用importQRCodefrom"qrcodejs2";3、生成二维码3.1节点 <div id="qrcode"></div>3.2 生成code mounted(){ this.$nextTick(() => { var qrcode = new QRCode(document.getElementById("qrcode...
2021-09-03 16:19:24
2296
原创 vue项目使用qrcodejs2遇到Cannot read property ‘appendChild‘ of null“
这个问题是节点还没创建渲染完就读取节点，这个时候应该先让节点渲染完成在生成，解决方法有以下两种1、使用$nextTick（）方法进行，这个方法是用来在节点创建渲染完成后进行的操作 that.$nextTick(() => { let qrcode = new QRCode("qrcode", { width: 132, height: 132, text: "https://www.baidu.com...
2021-09-02 11:32:48
3302
5
原创 微信H5适配：解决微信调整字号大小导致Html5页面混乱
1、微信H5使用rem进行适配，如果调整了微信的字体大小出现了页面混乱的问题，则需要禁止微信字体放大，修改如下OS系统禁止微信客户端修改字体大小：/* iOS禁止微信调整字体大小 */body {-webkit-text-size-adjust: 100% !important;text-size-adjust: 100% !important;-moz-text-size-adjust: 100% !important;}Android 则通过js 调整（在Html上修.
2021-08-20 16:32:45
2591
原创 秀米编辑器如何排版svg推文，以展开为模板讲解
1、打开秀米官网，点击右上角登录（建议微信登录）https://xiumi.us/#/2、如果想在秀米排版的能同步到公众号，请授权一下公众号，具体参考以下两篇文章http://www.coozhi.com/youxishuma/hulianwang/80847.htmlhttps://jingyan.baidu.com/article/cb5d6105de98b4005d2fe05d.html加下来进行排版公众号1、进入首页，选择新建一个图文2、找到svg在svg图中找到你想要的切换动效
2021-06-23 10:42:23
25075
原创 pc端js根据图片url进行下载单张图片以及批量下载到本地
1、单张下载单张下载到本地主要实现方式是1.使用cavans把图片转化未base64格式2.创建a标签然后创建一个点击事件进行下载到本地主要代码如下loadCode(imgsrc， name ) { let image = new Image(); // 解决跨域 Canvas 污染问题 image.setAttribute("crossOrigin", "anonymous"); image.onload = function () {
2021-04-01 11:51:04
2301
原创 vue项目实现老虎机水果滚动效果
<template><divclass="game-box"><divclass="game-box"><divclass="frulit-box"><divclass="slot"v-for="(slot,index)inslots"ref="slots":key="index"...
2020-10-21 11:47:29
3452
原创 关于微信小程序VM22:2 (in promise) MiniProgramError {“errMsg“:“hideLoading:fail:toast can‘t be found“
出现错误的原因如下1、是微信小程序2、把请求接口统一封装，开始请求接口时showLoading，请求接口后hideLoading3、一个页面同时请求多个接口，由于请求是异步的，很有可能上一个开启了showLoading还没请求完成下一个有开始请求了，这个时候的showLoading与hideLoading就没有对应了+++++++++++++++++++++++++解决办法：在结束loading时调用失败回调函数wx.hideLoading({fail(){...
2020-09-08 11:24:15
10276
4
原创 vue项目使用cavans为图片实现复古、黑白、底片、浮雕、反向、模糊
实现效果如下图使用cavans进行对图片添加滤镜是根据图片每个像素点进行转变的，图主要是有三色素构成，红、绿、蓝，并结合清晰度来结合当我们拿到一张照片的时候，画布可以使用drawImage方法把一张图绘制在画布上，然后使用getImageData方法幅度每个像素中的rgb值。通过getImageData方法得出每个像素点的rgb值，他是已4 个位一个像素点，%4=1的是r值,%4=2是g值,%4=3是b值，%4=像素模糊值(0-255）老照片 f...
2020-07-27 18:11:32
1136
原创 vue-实现本地上传图片（不需要服务器）转base64并实现图片拖拽
主要实现功能：在本地选择照片上传，然后把图片添加滤镜功能1、实现图片上传，想要上传的图片在本地网页展示，这个时候可以把图片的src使用base64赋值进去图片上传HTML部分
2020-07-27 14:55:35
1531
原创 前端小公举（小工具）
1、把img转iconhttp://www.bitbug.net/2、在线压缩图片https://tinypng.com/https://zh.recompressor.com/3、图标矢量库https://www.iconfont.cn/search/index4、查看css兼容https://www.caniuse.com/5、取色器https://colorcop.en.softonic.com/（需下载安装）6、在线文档https://www.kd
2020-07-07 11:26:02
385
原创 vue项目使用less定义全部变量
vue项目要使用less首先要下载less插件npm install less less-loader --save然后在vue页面的style使用<style lang="less" scoped></style>那么这个使用你的项目就支持less css预处理然后如果你想使用css的全局变量，这个时候需要定义一个less文件，然后在项目引入，一开始想直接在main.js中引用，发现是不起效果的，这个时候你需要这样操作1、下载sass-resources
2020-07-07 11:15:03
2784
原创 微信H5苹果机和安卓机兼容性问题
1、音乐播放<audioid="audio":src="music"loop="loop"autoplay="autoplay"ref="myMusic"></audio>使用autoplay来设置音乐自动播放，安卓机是可以的，但是苹果机并不能自动播放，这个时候需要借助微信jsdk，如下：importVuefrom"vue";importwxfrom"weixin-js-sdk";Vue.use(wx); import V...
2020-07-01 18:32:10
1113
原创 git日常操作命令
1.git init初始化仓库2.git clone http://xxxx克隆项目3.git add ./暂存本地修改的文件4.git commit-m提交注释把修改的内容提交到本地仓库5.git pull origin master拉去远程master分支到本地6.git branch --set-upstream-to=origin/beta beta把本地分支关联到远程7.git push origin master把本地仓库推到远程仓库8.g
2020-06-22 17:33:41
147
原创 使用html2canvas生成海报并解决生成模糊以及iphone7生成不了的问题以及不支持object-fit:cover问题
1、安装插件npminstallhtml2canvas--save2、在使用的页面进行引入import html2canvas from "html2canvas";3、把需要生成的内容放在一个父盒子中<template> <div class="index-content"> <div v-show="!isShow"> <div class="cavans-poster" ref="imagesPoster...
2020-06-16 16:52:42
2775
2
原创 vue项目使用vant下拉框van-dropdown-item 绑定title值不变的解决办法
1、创建vue项目2、使用vant组件 npm install vant --S 全局引用时在main.js引入import Vant from 'vant';import 'vant/lib/index.css';Vue.use(Vant);假如你引入之后发现页面的样式和组件都挂载了，但是console控制台会报错，说xxxx组件没有regis...
2020-04-13 21:08:15
16652
7
原创 微信H5vue-router使用不同的mode模式对微信分享接口的影响
微信h5使用vue来做的话，加入mode使用history模式的话注意每进去一个新页面，针对安卓机都要重新初始化一遍sdk去算签名，重新刷新那些sharedata。但是苹果机是不会的。初始化时用的link参数要和当前页面uri一致，加入你使用的是默认的hash模式，name吧#号后面的都不要带上。苹果机可能不用重复刷新sdk，单页面history模式下，每个页面的uri都是指向到进来的那个uri的...
2020-03-23 21:27:14
389
原创 关于vue私用history模式打包到服务器出现白屏的原因以及解决办法
1、vue-router在切换路由的时候有两种模式，第一种是hash（默认的），第二种是history，这两种的区别有：第一，url的不同，使用hash模式url会带有#而history模式就像普通的路径一样第二，...
2020-03-23 21:20:00
2311
原创 使用原生cavans把图片和文字生成一张新的图片并解决失真问题
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>正式邀请函</title> <meta name=”description” content=""> ...
2019-12-27 14:47:24
595
原创 关于vue项目不能在ie浏览器打开的原因和解决办法以及ie无法监听路由的变化进行加载
1、vue项目对于ie的版本支持最低是ie8,目前ie的使用已经很少了，很多的ie版本是自带的ie11，当你创建了一个vue项目之后，在谷歌，火狐浏览器打开都非常正常，但是在ie打开发现页面空白了。打不开的原因是因为少了babel-polyfill处理器。babel-polyfill处理器可以将ES6代码转为ES5代码，从而可以在现有环境执行，这就是为什么ie浏览器不支持的原因解决办法：...
2019-12-27 10:17:10
4720
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人