日常积累
只爱吃菜不吃饭
谢谢你这么厉害还关注我~
展开
-
TODOTREE的用法
vscode插件TODOTREE配置原创 2022-05-11 10:40:16 · 1396 阅读 · 0 评论 -
项目内调用手机地图应用
//地图路径规划经纬度城市名称exportdefaultfunctionopenMapRoute(lat,lon,cityName){varurl='';if(plus.os.name=='Android'){varhasBaiduMap=plus.runtime.isApplicationExist({pname:'com.baidu.BaiduMap',act...原创 2021-05-17 15:04:51 · 362 阅读 · 1 评论 -
pc端调用电脑摄像头及麦克风完成录像或录音并实现回放和上传服务器
首先定义获取媒体设备的方法var MediaUtils = { /** * 获取用户媒体设备(处理兼容的问题) * @param videoEnable {boolean} - 是否启用摄像头 * @param audioEnable {boolean} - 是否启用麦克风 * @param callback {Function} - 处理回调 */ getUserMedia: function (videoEnable, audioEnable, callbac原创 2021-05-08 16:43:48 · 1672 阅读 · 3 评论 -
websock的使用
let websock;function websocketonopen (userId) { //连接建立之后执行send方法发送数据 let actions = { "userId": userId }; if (websock.readyState==1){ websocketsend(JSON.stringify(actions)) }}function websocketonerror(){//连接建立失败重连 initWebSocket().原创 2021-05-08 15:39:05 · 543 阅读 · 0 评论 -
在vue项目中单独引入某一elementui组件
1.安装element-ui库npm i element-ui -S2.在启动文件中配置import{DatePicker}from'element-ui';import'element-ui/lib/theme-chalk/index.css';Vue.use(DatePicker);3.在页面中使用<el-date-pickerv-model="value1"type="daterange"...原创 2021-04-25 10:12:42 · 5445 阅读 · 0 评论 -
隐藏electron窗体菜单栏的几种方式
方法1:const electron = require('electron')const Menu = electron.Menufunction createWindow (){Menu.setApplicationMenu(null)}方法2:newBrowserWindow({autoHideMenuBar: true})方法3:newBrowserWindow({frame:false})...原创 2021-04-22 15:51:51 · 4619 阅读 · 0 评论 -
使用swiper实现视频和图片混合轮播
完成需求:轮播页面自动滚动循环播放素材,在视频页面自动播放视频至视频结束后继续轮播下一个素材,手动切换时视频页暂停播放,切换回来后恢复播放。1.安装swiper相关插件2.在轮播页面引入import{Swiper,SwiperSlide}from"vue-awesome-swiper";import"swiper/swiper-bundle.css";importSwiper2,{ Autoplay}from"swiper";Swiper2.use([Na...原创 2021-04-22 11:38:58 · 7218 阅读 · 6 评论 -
vue中监听用户操作,无响应状态返回首页
在根页面的最外层节点上添加点击事件: <div id="app" @click="clickApp" > <router-view /> </div>设置未响应时长data() { return { clickTime: new Date(),// 最新点击时间 responseTime: 300000, // 5分钟不响应自动跳转首页 timeout: null,// 点击后的定原创 2021-04-22 11:23:01 · 673 阅读 · 1 评论 -
uni-app项目配置UrlSchemes在外部打开APP
已经安装跳转应用的情况1.对于IOS配置打包配置路径manifest->app-plus->distribute->ios注意不要使用大写及中文以及特殊字符等,示例代码如下"urltypes" : [ { "urlidentifier" : "com.runtest.test", "urlschemes" : [ "runtest" ]原创 2021-03-30 15:14:30 · 11040 阅读 · 3 评论 -
uniapp中地图使用注意事项
1. 地图中添加cover-view时,一定要设置高度,否则map在苹果手机端会无法移动和缩放2.cover-view中添加scroll-view需要用一个父元素包起来,否则在添加数据后,在ios端可能会出现高度不生效的问题3. 绘制markers时务必要先勇一个中间变量存起来后再一次性赋值给markers,不能直接操作markers,路线绘制同理...原创 2021-03-25 13:05:39 · 2408 阅读 · 0 评论 -
uniapp资源在线升级/热更新,整包热更新
先介绍整包更新:一般iOS Appstore的安装包,无法直接更新。App启动后检查有新版本,只能调整到Appstore,然后用户在Appstore的详情页点击更新按钮。而Android App,可以直接下载新的apk,只要包名和证书不变,就可以覆盖安装。首先在app启动入口检测是否需要更新:uni.request({ url: 'you url', //仅为示例,并非真实接口地址。 method: 'GET', success: res => { cons原创 2021-03-11 17:44:50 · 1505 阅读 · 0 评论 -
计算当天、本周、本月、本季、今年的起止日期
// 日期格式化Date.prototype.format = function(format) { var o = { 'M+': this.getMonth() + 1, // month 'd+': this.getDate(), // day 'h+': this.getHours(), // hour 'm+': this.getMinutes(), // minute 's+': this.getSeconds(), // second 'q+': Math.flo.原创 2021-03-01 17:47:31 · 310 阅读 · 0 评论 -
获取距离指定日期的指定间隔的日期
// asi指定的间隔,defaultD指定的日期,type往前还是往后getAppointDate(asi, defaultD, type) { let n = asi; let d = new Date(defaultD); let year = d.getFullYear(); let mon = d.getMonth() + 1; let day = d.getDate(); if (day <= n) { if (mon >.原创 2021-03-01 17:46:00 · 214 阅读 · 0 评论 -
echarts创建立体柱状图(堆叠或单独),面积折线图渐变配置项参考
参考效果如图配置项中需要注意的几个要点:1. 颜色取值需要有范围,以突出立体感2. 对于需要堆叠的数据,设置相同stack3. 对于pictorialBar类型的图,数据大小和图形显示位置通过data和symbolPosition: 'end',symbolOffset: [0, '50%'],symbolSize: [barWidth, 10]进行调整4.symbol: 'diamond'展示的是菱形图形,其他类型的可以参考官网配置项示例代码如下:const color.原创 2021-03-01 17:27:33 · 3307 阅读 · 0 评论 -
echarts使用过程中遇到的小问题汇总
1. 饼图位置确定不能由grid来设置,需要使用center和radius要设置;2. legend过长超出范围时设置显示方式:方式1:官网给出的方案:label{overflow:"none"}文字超出宽度是否截断或者换行。配置width时有效'truncate'截断,并在末尾显示ellipsis配置的文本,默认为... 'break'换行 'breakAll'换行,跟'break'不同的是,在英语等拉丁文中,'breakAll'还会强制单词内换行 (但是我的玫瑰图配置后无...原创 2021-02-24 09:53:05 · 7350 阅读 · 2 评论 -
判断数组的方法差异(web,安卓,ios)
测试数据var arr = ["http://mddoss.dev.gzqylc.com//oss/file/2020/11/18/9C39C6889B559FC756A92EE240A53B9D.mp4", "http://mddoss.dev.gzqylc.com//oss/file/2020/11/18/EFB7A11FD842DAFBE2277FFE558EB107.jpeg"]; console.log(Object.prototype.toString.call(arr) =原创 2020-11-18 16:59:25 · 220 阅读 · 0 评论 -
uniapp中在线预览(打开)文件
基于官方openDocument方法。同保存图片至本地相同,该方法路径参数不支持网络路径,因此需要使用downloadFile后获取一个临时路径loadFile(url) { uni.downloadFile({ url: url, success: (res) => { if (res.statusCode === 200) { uni.openDocument({ filePath: res.tempFilePath,原创 2020-11-17 14:59:10 · 17167 阅读 · 0 评论 -
uniapp中图片下载到相册的功能
基于方法saveImageToPhotosAlbum官方文档中介绍到,参数filePath可以是临时文件路径也可以是永久文件路径,不支持网络图片路径。那么如何将app中后台返回的图片(服务器地址)下载到手机相册中呢?可以先使用downloadFile方法,下载成功后成功的回调函数中会返回一个临时路径,再将此路径给上一个SDK即可;完整代码参考:loadImage(url) { uni.showLoading({ mask: true, title: "图片保存中原创 2020-11-17 14:26:37 · 1690 阅读 · 0 评论 -
uniapp中强制横屏、竖屏
plus.screen.lockOrientation('portrait-primary');竖屏plus.screen.lockOrientation('landscape-primary');横屏原创 2020-11-13 15:45:19 · 4995 阅读 · 0 评论 -
uniapp中使用echart,单个或者多个,封装组件后echart图表不刷新
此文以饼图数据为例:对于单个图标渲染,只需要在结构和js中插入以下代码即可<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts-pie"></view>设置变量:option: { graphic: [{ //环形图中间添加文字 ...原创 2020-11-05 22:22:48 · 1944 阅读 · 3 评论 -
uniapp中弹起软键盘的相关设置,ios中软键盘弹起不兼容的混合写法
1.首先需要在page.json中设置软键盘弹起的相关属性{"path": "your page link", "style": { "app-plus": { "softinputMode": "adjustResize", // 自适应软键盘弹起页面高度 "softinputNavBar": "none" // 取消ios中软键盘上方完成按钮等 } }}2.页面中动态设置需要滚动的元素高度// 键盘获取焦点事件:inputFocus(e) { let sys原创 2020-11-02 19:23:04 · 5395 阅读 · 4 评论 -
vue 优化小技巧 之 require.context()
1、require.context()回忆一下当我们引入组件时第一步 创建一个子组件第二步 import ... form ... 第三步components:{..} 第四步页面使用 <...></...>代码实现: 目录结构:components / context / subset页面效果以上一共五个子组件大量重复的代码<template> <div> ...转载 2020-07-28 15:44:59 · 628 阅读 · 0 评论 -
条件注释判断浏览器版本
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![endif]--><!--[if IE 6]> 仅IE6可识别 <![endif]--><!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--><!--[if gte IE 6]> IE6以及IE6以上版原创 2020-06-02 17:23:03 · 137 阅读 · 0 评论 -
重写input输入框样式
outline-style:none; // 取消点击时外边框border:none; // 取消边框,可自己重写border属性text-indent:1em; // 设置内部缩进重写input提示词样式input::-webkit-input-placeholder{color:#999;}...原创 2020-05-12 09:35:09 · 852 阅读 · 0 评论 -
去除inline-block元素间间距的几种办法
真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子:<input /> <input type="submit" />我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题:.space a { display: inline-block; p...转载 2020-04-30 17:06:04 · 334 阅读 · 0 评论 -
css设置文字渐变色
font-weight: bold; background-image:-webkit-linear-gradient(bottom,#5592ad,#59a0a0,#60b68b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; bottom表示为从下至上的颜色...原创 2020-04-30 16:56:45 · 484 阅读 · 0 评论 -
js或jq中返回上一页
history.back(-1):直接返回当前页的上一页道,数据全专部消息,是个新页面history.go(-1):也是返回当前页的上一页,不过表单里的数据全部还在原创 2020-04-27 14:22:54 · 778 阅读 · 0 评论 -
重写浏览器默认滚动条样式
/*滚动条样式 innerbox为需要滚动的区域盒子*/ .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .innerbox::-webkit-scrollbar-t...原创 2020-04-09 10:36:18 · 792 阅读 · 0 评论 -
项目中vscode使用less自动编译为css
1.首先要在全局安装lessnpm install less -g2.然后下载easy less插件3.在项目根目录下创建.vscode文件夹,并在其中创建settings.json文件4.在新创建的配置文件中输入以下信息:{ "less.compile": { "out": "${workspaceRoot}\\css\\" }}...原创 2020-02-24 15:34:32 · 2178 阅读 · 7 评论 -
ant design vue中日期选择框混合时间选择器的用法
首先时间格式化用到moment方法,需要在页面中引入moment组件importmomentfrom'moment'结构代码:<a-date-picker style="width:100%" :getCalendarContainer="(triggerNode) => triggerNode...原创 2019-12-05 10:27:00 · 12559 阅读 · 8 评论 -
vue中绘制水球图(水波纹增长图,波纹型百分比)
先上效果图1.在项目中安装依赖npm iecharts-liquidfill -s2.在组件中引入需要的echarts水球图插件import echartsLiquidfill from 'echarts-liquidfill'3.创建一个容器安置图形(设置好宽高)<div class="wave-echart" id='waveEchart' ref='wav...原创 2019-05-10 14:04:22 · 11338 阅读 · 2 评论 -
git命令-远程仓库拉取、本地仓库更新、工作空间提交等等
一,新建代码库1,在当前目录下新建一个git代码库$ git init2,新建一个目录将其初始化为git代码库$ git init [project-name]3,git clone 远程代码库$ git clone [url]二,配置1,Git的设置文件为.gitconfig,它可以在用户主目录下(全局配置),也可以在项目目,录(项目配置)。2, 显示当前的Git配...原创 2019-05-20 13:47:21 · 2986 阅读 · 0 评论 -
localStorage和sessionStorage的区别
localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。 sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。localStorage的方法: localStorage.clear(); localStorage.g...原创 2019-05-07 15:32:51 · 214 阅读 · 0 评论 -
vue+elementui+echarts多个标签表格屏幕自适应宽度
原创 2019-04-25 17:59:09 · 2233 阅读 · 0 评论 -
vue中使用echarts标签页下后面的表宽度不能设置百分比的问题
原因:echartjs执行太快,css的100%还没来得及反应,js就已经执行完了,所以把100%转成100px。解决办法:将初始化代码放在setTimeout中setTimeout(() => { this.chart = echarts.init(this.$refs[ref]) // 把配置和数据放这里 this.chart...原创 2019-04-25 17:29:57 · 1922 阅读 · 1 评论 -
cnpm安装过程中提示optional install error: Package require os(darwin) not compatible with your platform
cnpm安装过程中提示optional install error: Package require os(darwin) not compatible with your platform(win32)解决方法运行cnpm install后,出现虽然提示不适合Windows,但是问题好像是sass loader出问题的。所以只要执行下面命令即可;方案一:cnpm rebuild...转载 2019-04-28 13:51:14 · 5211 阅读 · 0 评论 -
关于eslint校验的配置
配置文件在项目根目录里,文件名以.eslintrc.*为名。其中rules就是配置规则的rules: { "规则名": [规则值, 规则配置]}规则值"off"或者0 //关闭规则关闭"warn"或者1 //在打开的规则作为警告(不影响退出代码)"error"或者2 //把规则作为一个错误(退出代码触发时为1)常见规则列表"no-...原创 2019-04-18 16:52:42 · 1733 阅读 · 0 评论 -
关于ECharts仪表盘的全部相关配置
<html> <head> <meta charset="UTF-8"> <title>单仪表盘案例</title> <!-- 引入 ECharts 文件 --> <script src="js/echarts4.0.js" type="text/...原创 2019-04-26 14:51:12 · 866 阅读 · 1 评论 -
安装nodejs时:The error code is 2503.
在windows下安装nodejs时老是报错:The installer has encountered an unexpected error installing this package. This may indicate a problem with this package. The error code is 2503.原因是当前登录用户没有权限操作读写目录有以下几种方...原创 2019-04-16 16:17:15 · 2145 阅读 · 0 评论 -
vue项目开启Gzip压缩和性能优化
vue项目开启gzip自拍压缩和部署 nginx开启gzip优化性能第一步,在vue项目中安装依赖并将productionGzip改为true,开启Gzip压缩:npm install --save-dev compression-webpack-plugin第二步,运行 npm run build打包项目,这时可能会报错,提示ValidationError: Compression ...原创 2019-05-20 16:49:32 · 3122 阅读 · 4 评论