- 博客(84)
- 收藏
- 关注
RSS订阅原创 vue中使用Lottie动画
一. 安装vue-lottie包npm install --save vue-lottie二. 在main.js文件中引入vue-lottie插件全局引入// main.jsimport lottie from 'vue-lottie'Vue.component('lottie',lottie)局部引入import lottie from 'vue-lottie'export default{components: { lottie },}三. 文件中引入lottie资
2021-04-25 15:23:13
2820
3
原创 微信小程序中base64图片显示及保存
canvas的drawImage方法只支持本地图片，不支持网络图片代码示例 //将base64图片转网络图片 sendCode(code) { let qrcode = code.replace(/\. +/g, '').replace(/[\r\n]/g, '') /*code是指图片base64格式数据*/ //声明文件系统 const fs = wx.getFileSystemManager(); //随机定义路径名称
2021-03-19 17:22:48
1182
原创 canvas绘制圆角矩形
效果图代码实现 // (x,y):圆角矩形起始坐标; width: 矩形宽度; height: 矩形高度; r: 矩形圆角; bgcolor: 矩形填充颜色; lineColor: 矩形边框颜色; draw(ctx, x, y, width, height, r, bgcolor, lineColor) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.lineTo(x + width - r, y); c
2021-03-18 18:25:42
1294
原创 微信小程序引入其他框架样式覆盖
Vant Weapp 的所有组件都默认开启了addGlobalClass: true以接受外部样式的影响但是在实际操作中发现样式却没有改变，以为插件只要找到对应的命名class覆盖掉来个!important才有效果，结果还是没有任何反应，后来发现Vant Weapp 文档中有提到自定义组件中使用 Vant Weapp 组件时，需开启styleIsolation: 'shared'选项解决方法Component({ options: { styleIsolation: 'shared'
2021-02-04 17:16:31
404
转载 解决：用户拒绝授权小程序使用通讯地址API的问题
通讯地址等这些开发接口，都是由微信自身提供的能力。小程序中要使用这些开发接口， 必须经过用户授权后，才能使用。小程序中正确使用通讯地址这个开发接口的流程：图解/** * 思路： * 1 调用 wx.getSetting() 获取用户的授权状态 * 状态有三种：res.authSetting['scope.address'] * 1.1 undefined 第一次点击按钮，获取权限，直接调用 wx.chooseAddress() 即可 * 1.2 true 第二次点击按钮，说明用
2021-01-29 16:26:30
321
转载 wx.reLaunch和wx.navigateTo，wx.navigateTo的区别
wx.navigateTo用于保留当前页面、跳转到应用内的某个页面，使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序，通常推荐使用 wx.navigateTo进行跳转， 以便返回原页面，以提高加载速度。当页面特别多时，则不推荐使用。wx.redirectTo当页面过多时，被保留页面会挤占微信分配给小程序的内存，或是达到微信所限制的 5 层页面栈。这时，我们应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面，跳转到应用内的某个..
2021-01-29 10:55:39
228
1
原创 js实现前端下载文件
在前端下载文本格式的文件时，可采用下面的方式：创建基于文件内容的Blob对象；通过URL上的createObjectURL方法，将blob对象转换成一个能被浏览器解析的文件地址;将上述的文件地址指向a标签的href，并设置a标签的download属性为要保存成的文件名;点击a标签，即可下载对应的文件;//文件下载方法downloadFile(data, filename, suffix, fileType) { if (typeof window.navigator.msSaveBlob
2021-01-14 15:06:42
440
4
原创 微信小程序 —— canvas生成海报图与分享
整体思路获取手机屏幕大小去依据设计尺寸比例调整赋值图片路径canvas生产图片（要注意顺序）获取用户相册权限保存相册效果图代码示例wxml<view style="position: absolute;bottom: 0;left: 0;color:#000;z-index:99999"> 坐标: ({{x*2}}, {{y*2}})</view><block wx:if="{{canvasType}}"> <!-- style
2020-12-24 18:25:13
1325
2
原创 微信小程序 获取用户昵称、头像、手机号
官方提供的最新方法Open-data标签，使用这个标签可以不用用户授权直接显示头像和昵称例子：<!-- 获取用户头像直接显示在小程序中 --><open-data type="userAvatarUrl"></open-data><!-- 获取用户昵称直接显示在小程序中 --><open-data type="userNickName" lang="zh_CN"></open-data>可以在button标签中将open-
2020-12-22 14:06:10
6489
原创 微信小程序实现下拉刷新
代码实现js //刷新 onRefresh(){ //在当前页面显示导航条加载动画 wx.showNavigationBarLoading(); //显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 wx.showLoading({ title: '刷新中...', }) this.getData(); }, //网络请求
2020-12-21 16:43:18
119
原创 组件传值-小程序和vue
模板父传子 - 通过属性传值父页wxml //byVal传参 <module id="module" byVal="{{byVal}}"></module>json{ "component": true, "usingComponents": { "module": "../../component/module/module" //你的组件路径 }}js/*** 生命周期函数--监听页面初次渲染完成*/onReady:
2020-12-18 18:23:10
137
原创 小程序scroll-view组件高度适配不同手机屏幕
问题scroll-view要求必须要定高度，但是手机尺寸不同需要自适应思路：scroll-view组件高度 = 手机屏幕可用高度 －当前页面其他元素高度手机屏幕可用高度通过小程序封装的 APIwx.getSystemInfoSync()去获取 api传送带注意screenHeight是手机的屏幕高度，包含了手机的状态栏和小程序标题栏，windowHeight才是需要的可用高度基础代码实现let query = wx.createSelectorQuery().in(this)query.
2020-12-03 17:03:09
828
原创 echarts样式总结
效果代码实现 <!--为echarts准备一个具备大小的容器dom--> <div :id="idCanvas" style="width:460px;height:350px;margin:auto;"></div>//调用this.drawLine(this.idCanvas);//方法drawLine(id) { let that = this; let type = this.type; let dataX =
2020-12-02 18:29:30
687
原创 前端性能优化-开启gzip
Gzip压缩检测网址http://tool.chinaz.com/Gzips/http://pagespeed.webkaka.com/youhua/gzip/控制台查看如果开启了gzip则显示gzip，没有则是空Vue打包配置1、安装compression-webpack-plugin插件，此插件就是用于打包压缩的。// 这一步如果失败是插件版本过高，建议安装1.1.12版本// npm install --save-dev compression-webpack-plu
2020-10-19 10:55:12
1996
原创 webpack-bundle-analyzer打包文件分析工具
一、安装npm install webpack-bundle-analyzer –save-dev二、配置//在build/webpack.prod.config.js中的module.exports = webpackConfig这句话的上面增加if (config.build.bundleAnalyzerReport) { const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
2020-09-28 15:21:46
371
原创 前端性能优化-按需引入Echarts组件
一.安装echarts官网//npm安装最新稳定版npm install echarts --save二.自动按需引入安装插件babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式npm i babel-plugin-import -D配置.babelrc 中添加该插件{ "plugins": [ // other plugins ... "equire" ]
2020-09-25 16:00:47
1076
2
原创 前端性能优化-按需引入Vant组件
一.安装// 通过 npm 安装npm i vant -S// 通过 yarn 安装yarn add vant二.自动按需引入安装插件babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式npm i babel-plugin-import -D配置.babelrc 中添加配置，其中还有其他内容"plugins": ["transform-vue-jsx", "transform-runtime"]
2020-09-25 15:38:51
608
原创 混合app开发(安卓与H5)-可自定义播放器
本文使用的是字节跳动西瓜视频开源项目地址xgplayer文档1.安装$ npm install xgplayer2.使用Step 1:<div id="vs"></div>Step 2:import Player from 'xgplayer'let player = new Player({ id: 'vs', url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.
2020-09-23 11:33:40
1068
原创 vue引用警告 “export ‘default‘ (imported as ‘vant‘) was not found in ‘./utils/vant‘
想按需引入vantUI库时，main.js文件引入错误问题原因：ES6 编译器识别问题解决方法：import vant from './utils/vant'改为import * as vant from './utils/vant'
2020-09-22 16:43:02
3779
2
原创 git上传本地分支到github项目分支操作流程
操作流程1、Git init （在本地工程目录下），生成.git 文件夹git init注意:提示 “请输入github用户名和密码“ 1. git add . 2. git commit -m "文件描述" 3. git push origin test （推送）又任何修改都要先git add name或 .(代表全部文件)git命令查看远程分支$ git branch -a 查看当前分支：$ git branch新建分支：$ git branc
2020-09-02 15:59:47
1006
原创 css3伪类与伪元素
概念CSS 伪类用于向某些选择器添加特殊的效果CSS 伪元素用于将特殊的效果添加到某些选择器个人理解：伪类大多使用的是状态相关的，例如这个标签点击前后的效果，这个标签的第几个样式等伪元素相当于是在某个元素后加个新的元素，js是无法获取的伪类伪元素总结css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。但因为兼容性的问题，所以现在大部分还是统一的单冒号原文：https://www.imooc.com/article/254506
2020-08-28 15:06:17
177
原创 Vue中使用国际化-vue-i18n
一、安装vue-i18n目前版本是8.21.0三种方式1、script引入<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>2、npm安装 npm install vue-i18n3、yarn安装 yarn add vue-i18n二、配
2020-08-18 17:58:53
748
原创 vue中展示3D模型 -- vue-3d-model
一、搜集到的网址3D模型库three.jsWebGLbabylonJSThingJSEverAPI3D数据可视化库echarts — 基于CanvasHighcharts —基于SVGd3.js — 基于SVG/Canvas+SVGg2.js — 基于Canvas二、需求尝试使用three.js后发现上手不是特别快，后来发现了vue-3d-model组件，能够很简单的展示出3D模型效果图如下使用原因可看这篇文章https://www.jianshu.com/p/
2020-08-14 16:03:53
18024
11
原创 在vue中使用wangEditor上传视频
一、实现效果原本效果二、修改wangEditor源码添加插入视频panel只修改Video.prototype._createPanel方法// 原型Video.prototype = { _createPanel: function _createPanel() { var _this = this; var editor = this.editor; var uploadImg = editor.uploadImg; var config
2020-07-29 11:16:28
2703
8
原创 如何发布自己的npm包 —— npm包版本发布、删除教程
一、注册npm用户npm注册官网注册完到邮箱激活后才可用二、登录打开终端$ npm login输入账号名、密码、邮箱，登录成功后将添加至npm的本地配置中Username: your namePassword: your passwordEmail:[email protected]成功之后，npm会把认证信息存储在~/.npmrc中，可查看npm当前使用的用户：$ npm whoami三、发布$ npm publish如果没什么意外到这就发布成功了，可以到npm官
2020-07-28 15:09:12
1702
原创 vue结合后端本地上传文件
//按钮 <a-upload :beforeUpload="beforeUpload" :showUploadList="false"> <a-button type="primary" icon="upload">导入</a-button> </a-upload> <a-button @click="downExcel" type="primary" icon="download">导出</a-bu
2020-07-01 18:10:48
675
原创 vue实现前端导出excel
一、安装依赖$ `npm install -S xlsx`$ `npm install -S file-saver`以上两种合并简写成：$ `npm install -S file-saver xlsx`$ `npm install -D script-loader`二、添加js文件src下创建excel（自定义）文件夹放入Blob.js 和 export2Excel.js链接：https://pan.baidu.com/s/1Hp66lcrl8nYJUTSUyXY5hA提取码：w1fz
2020-07-01 16:44:04
993
2
原创 vue 自定义分片上传到七牛云带进度条
前言场景：vue环境，UI框架为Ant DesignAnt Design中的Upload自带上传功能，但是当我上传超过1G的视频文件时，导致文件过大而超时于是设置customRequest属性，通过覆盖默认的上传行为，可以自定义自己的上传实现引入七牛SDK直接使用静态文件地址：https://unpkg.com/qiniu-js@<version>/dist/qiniu.min.js使用 NPM 安装 npm install qiniu-js， import * as qiniu
2020-06-28 17:54:14
1140
原创 前端实现语音合成
前言语音合成的实现方式有多种：第一种：HTML5语音Web Speech API第二种：百度文字转语音开放API第三种：微软TTS引擎（没有实际使用，此文章就不多赘述）实现方式（vue环境）一、HTML5语音Web Speech APIWeb Speech有两类API：1.语音合成（Speech Synthesis） -----------> 文字变语音 2.语音识别（Speech Recognition）-----------> 语音转文字兼容性传送带语音合成Spe
2020-06-28 17:17:14
1645
2
原创 Vue项目使用websocket
websocket 是长连接，受网络限制比较大ajax轮询的原理是：让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。用websocket主要原因是不需要用定时器几秒去请求一次接口查看进度附代码:<template> <div> <a-card :bordered="false"> <!-- 操作按钮区域 --> <div style="margin-top:20px;width: 340px;">
2020-05-18 17:35:00
561
原创 自定义Tabs标签页组件（vue）
不知道有没有和我一样项目中用的到Ant Design of Vue的Tabs组件在测试环境上打包时是无效的，于是手写个组件我会写在src的componets下我所用到的传值都是用类型1或2来判断或者中英文父组件<template> <div> <!-- 操作tab区域 --> <div class="tab-box"> <div class="tab-item" v-for="(it
2020-05-18 17:14:24
1850
原创 条件筛选删除数组对象
有时候后台返回的对象数据不是自己所需的例如：let arr = [{a:1,b:2},{a:2,b:4},{a:3,b:2},{a:1,b:4},{a:4,b:4}]希望是： arr = [{a:2,b:4},{a:3,b:2},{a:4,b:4}]方法1.数组的splice方法for (var i = 0; i < arr.length; i++) { if (arr[i]["a"] == 1) { arr.splice(i, 1);
2020-05-18 16:54:57
647
原创 工作自我总结
总体问题：适配（尤其是iPhoneX）图片过大iPhone下动画闪屏js高耦合js代码优化分析：适配在处理适配的过程里主要需要做处理的，在要求位置特别精确的图片时，不同尺寸的屏幕用vw、vh做单位仍然会有多多少少位置上的差距所以采用的切图是截取的是整个屏幕的大小，和背景同时发生改变，属性都设为cover图片过大图片过大导致预加载时加载缓慢，直接导致进入开始按钮...
2018-10-18 18:50:35
233
原创 css3动画那些事
css3动画那些事ease,ease-in,ease-in-out,ease-out区别值描述linear规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)） (匀速)ease规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）ease-i...
2018-10-18 18:49:34
181
原创 css-overflow:hidden那点事儿
最近遇到一个问题，现象是给元素设置了overflow:hidden，但超出容器的部分并没有被隐藏，难道是设置的hidden失效了吗？首先了解一下overflow属性值有这几种：visible：声明内容不会被剪裁。比如内容可能被渲染到容器外面。hidden：声明内容将被剪裁，并且也甭想使用滚动条来查看剪裁掉的内容。scroll：声明内容将被剪裁，但有可能出现滚动条来查看被剪裁掉的内容。滚...
2018-08-27 10:40:03
645
转载 javascript中childNodes与children的区别
1、childNodes：获取节点，不同浏览器表现不同； IE：只获取元素节点； 非IE：获取元素节点与文本节点； 解决方案：if(childNode.nodeName=="#text") continue 或者 if(childNode.nodeType != '3') continue 2、children：获取元素节点，浏览器表现相同。 因此建议使用children。3、firstC...
2018-06-23 20:34:33
504
转载 es6 数组实例的 entries() ， keys() 和 values()
ES6 提供三个新的方法 —— entries()，keys()和values() —— 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历[javascript] view plain copyfor (let index of ['a', 'b'].keys())...
2018-06-23 20:17:44
251
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人