- 博客(57)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 项目依赖安装node-sass@^4.14.1 run “node scripts/install.js“报错问题解决
快速而简单的解决项目依赖安装node-sass报错问题。
2023-02-08 11:42:08
2355
原创 audio标签的播放、暂停、重播、进度拖拽等操作
对听力题进行手动控制等一系列操作，其中最主要的用到的一些方法就是loadeddata、timeupdate、ended等
2022-11-15 15:18:12
5278
原创 uni-app调用Native.jsAPI实现对Android原生日历的增删查操作
最近的uni-app项目中有一个直播日历的功能，同时也需要把对应的直播时间插入到手机的日历中，翻阅了很多资料，但是都是原生Android，类似于偏向前端的这种文章比较少，于是就记录下来。
2022-09-02 09:20:55
2885
2
原创 兼容Mac和window上不同浏览器的全屏操作
最近同事提了一个兼容性的bug,没问题啊，但是我用的是chrome浏览器，而同事是用的safari浏览器，name问题就来了，mac上没法进行退出全屏操作，于是找了很多资料，最终得到这个亲测的正确方法~toggleFullScreen () { console.log(888) var isFullscreen = document.fullscreenElement || document.msFullscreenElement || document.mozFullScreen
2022-04-11 17:41:30
1031
原创 本地项目配置nginx代理请求接口
nginx安装安装下载地址：http://nginx.org/en/download.htmlnginx配置相关命令(针对小白，本人也是)： 1. start nginx // 启动ng服务器 2. nginx -s reload // 服务杀死后进行重启（每次修改配置需执行此操作） 3. nginx -t //查看配置是否成功（一连串英文字符中出现successful）启动成功的依据是你的进程中会有nginx服务启动成功后就可以开始进行配置了（文件目录：D:\nginx\ng.
2021-08-11 09:27:40
6479
2
原创 clipboardData 复制粘贴操作细则
最近公司在做客户端的项目，是一个客服系统，在开发过程中遇到了使用快捷键复制粘贴的内容有元素的样式问题，查阅了很多前人的博客，发现都是零零散散的，于是有了此文章的产生关键词：【contenteditable】，【paste】可编辑文本的关键属性 【contenteditable】<div id="messageEdit" contenteditable="true" class="message"><br></div>如何解决上述的问题？通过对具.
2021-07-29 15:23:56
1173
原创 electron中莫名其妙的el-table无法渲染？
解决方法：在electron-vue目录下找到webpack.renderer.config.js修改let whiteListedModules = ['vue']为let whiteListedModules = ['vue','element-ui']ps:巨坑，让我多花了1个多小时找问题~
2021-07-20 14:26:02
442
原创 了解这几个API，能让你Electron桌面开发事半功倍（一）
前提是引入对应模块的情况下进行设置底部标签（电脑右下角的小图标啦！需引入Tray模块） // Set `__static` path to static files in production tray = new Tray(`${__static}/icon.ico`); //从静态文件中获取小icon设置右下角的右击事件（需引入Menu、app模块） const contextMenu = Menu.buildFromTemplate([ { label: '退出',
2021-07-09 17:01:54
349
原创 原生JS实现FullCalendar
最近在做项目时，得到了一个需求就是类似于FullCalendar的课程日历，找了很多的相关文档，都是通过FullCalendar插件实现的，但是一系列的方法样式以及展示效果都不太符合开发需求，最开始尝试着去使用这个插件，但是最后得到效果后还是觉得局限性太大了，在FullCalendar源码中，一些方法层层调用，自己被搞的晕头转向，于是果断放弃了这个插件的使用来实现项目的需求。（因为你说服不了产品去该需求，哈哈哈）1.FullCalendar介绍此插件功能颇为丰富，但是对于阅读源码有难度的我来说，显得很
2021-06-11 11:40:18
1567
4
原创 Mock.js在实际项目中的使用
在项目开发中，往往会有一些问题出现，比如前后端项目，后台在没有写写好接口的情况下我们是不是只能写单纯的页面呢？？？答案是否定的，由此引申出了mock.js模拟后台数据，而且还不需要切换url地址，就能进行axios的请求发送。1.安装依赖包cnpm install mock.js --save2.项目中创建模拟的请求地址const Mock = require('mockjs'); //引入mockjsMock.setup({ // 模拟接口响应时长200-600毫秒 timeout:
2021-05-24 16:53:32
342
原创 日历
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document<
2021-05-21 08:32:39
215
原创 饿了吗 Cascader 级联选择器多选的数据回显问题
最近在做后台项目中，有一个联级选择器的回显，找了很多博客都没有说的很明了，自己也花了很多时间去解决这个回显的问题。html代码：<div class="test-container"> <el-divider content-position="left">你可以在这里写demo</el-divider> <div class="block"> <span class="demonstration">折叠展示Tag
2021-03-22 16:46:55
2414
10
转载 开源项目库汇总
来源：http://www.cnblogs.com/opendigg/p/6513510.htmlUI组件element★9305 - 饿了么出品的Vue2的web UI工具套件Vux★6802 - 基于Vue和WeUI的组件库mint-ui★4776 - Vue 2的移动UI元素iview★4458 - 基于 Vuejs 的开源 UI 组件库Keen-UI★2363 - 轻量级的基本UI组件合集vue-material★2207 - 通过Vue Material和Vue 2建立精美的app应用muse-
2020-12-09 14:46:03
229
原创 css3中filter:drop-shadow特效
给图片加阴影，box-shadow是做不到的，但是filter能做到box-shadow实现图片添加背景，并且效果不会叠加box-shadow: 0 0 2px rgba(100, 17, 43, 1);filter能实现图片添加背景，并且能进行颜色叠加.img { filter: drop-shadow(0 0 2px rgba(100, 17, 43, 0.4)) drop-shadow(0 0 10px rgba(17, 124, 95, 0.4)) drop-shadow(0
2020-11-20 12:37:19
1148
原创 H5微信和支付宝支付
通过正则判断浏览器的类型，然后使用不同的调用方法（根据需要）is_weixn() { var ua = navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return true; } else { return false; } }
2020-11-19 16:25:02
671
原创 自定义loadding组件
先写一个动画组件loading.vue：<template> <view class="request-loading-view" v-show="loadingShow"> <view class="loading-view"> <view class="loading"></view> <view>加载中...</view> </view> </view></.
2020-11-05 17:27:25
398
原创 自定义Loading组件
再component中创建loadding 组件<template> <div class="markbox" v-show="loading" style="background-color: rgba(0, 0, 0, 0.8)" > <div class="sun-loading"></div> </div></template> .
2020-10-21 15:44:48
438
原创 vsCode掌握这些快捷键，开发效率提升2倍
1.主界面Ctrl+Shift+P（俗称万能键）打开命令面板。2.常用快捷键1.同时选中多个类名Ctrl+Shift+L或者 Ctrl+F22.代码整理快捷键Shift+Alt+F3.代码行向左或向右缩进:Ctrl+[ 、 Ctrl+]4.下一个匹配的也被选中:Ctrl+D5.撤销上一步操作:Ctrl+Z6.回退上一步Ctrl+Y7查找替换Ctrl+F Ctrl+H...
2020-09-11 11:08:28
367
转载 微信支付WeixinJSBridge.invoke 安卓无反应，ios能正常调起
以前微信支付调用的是JSSDK方式，公司最近的项目支付这一块抽离出去了，但是JSSDK每次调用之前需要config接口注入权限验证配置，先用到appid，之后再调用wx.chooseWXPay({}),具体参数可查看官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#58；所以决定启用 WeixinJSBridge.invoke获取支付调用，只能找官方文档一段配置 https://pay.weixin..
2020-07-30 13:36:13
2928
4
原创 pc端的适配
基于设计图是1920的做的简单的js适配。<script type="text/javascript"> var winWidth = document.documentElement.offsetWidth || document.body.offsetWidth winWidth = winWidth < 1366 ? 1366 : winWidth var oHtml = document.getElementsByTagName('html')[0] oHtm
2020-07-24 18:05:22
498
原创 Vue加入购物车动效
在项目中，很多都有购物车模块，需要添加购物车动效。部分vue代码 <!-- 运动的小球 --> <div id="points"> <div class="pointOuter pointPre"> <div class="point-inner"></div> </div> <div clas
2020-06-28 17:57:42
1359
原创 [vue]_.debounce-函数
之前想做银行卡每输入4位数字加个空格，方案是监听用户输入然后加空格，或者是输入完了，监听失去焦点再去加空格（当然后者体验不太好），当时想的是用setInterval去做，今天看文档，发现用_.debounce比较nice，_.debounce延迟操作，用的场景也比较多，比如：建议搜索词、图片延迟加载、输入监听请求数据…类似这样的~ 做个笔记（官网案例：https://cn.vuejs.org/v2/guide/computed.html）<div id="watch-example">
2020-06-28 16:27:42
1878
原创 屏蔽非微信客户端和支付宝登陆登录操作
最近公司的一个大客户的一个H5项目被同行的竞争对手攻击，因为扫码在浏览器中能被查看到ip地址，针对这个情况，做出了一下应对，判断是否是微信或者是支付宝的终端，来进行跳页操作。var ua = navigator.userAgent.toLowerCase(); //判断浏览器的类型 if ( ua.match(/MicroMessenger/i) != "micromessenger" && ua.match(/AlipayC
2020-06-23 09:18:56
2023
原创 IOS输入框，页面被顶上去不回弹
做项目的时候，手动点击输入框，页面被顶上去不会回弹，该情况出现在ios中很频繁，据我之前的解决办法是这样的：解决办法一在页面中对输入框添加监听事件，失去焦点之后就对其触发一个回弹事件。 Vue.prototype.wInputBlur = function() { let currentPosition = '' let timer = '' let speed = 1 // 页面滚动距离
2020-06-11 14:21:19
1090
原创 解决ios audio 无法自动播放
苹果公司考虑到用户流量访问的情况下，为了用户流量着想，需要用户交互点击、触摸等方式后才能播放。因此，ios中audio不能直接通过audio.play()播放，需要用户在click事件或者touch事件中执行audio.play()才能播放。解决办法引入微信jsdk后 就可以在 wx.ready()里 控制播放了。1.第一步：加载一个微信JS-SDK<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></sc
2020-06-02 16:17:37
2105
原创 eslint警告：** is defined but never used
今天使用脚手架创建项目的的时候一键构建了vue的基本骨架，但是启动服务以后，封装vant一些组件的时候却出现了一个检测问题：在eslint中，存在定义的变量但是却没有 使用，它是不允许的，那么应该如何解决这个问题呢？搞定！！！顺便把vant组件好用的一些方法封装分享出来：import { Toast, Dialog } from 'vant';export default { install: function (Vue) { // 错误提示 Vu
2020-05-31 10:49:15
8819
原创 GIt命令上传项目到GitHub仓库
1.建立GIt可管理的仓库cd到本地项目根目录下，执行 git init 命令：git init2.将项目的所有文件添加到仓库中(注意add后面有一个“ . ”)git add .3.将上一步add的文件commit到仓库git commit -m "提交的说明注释"4.到GitHub官网新建一个仓库（Create repository）,复制仓库地址5.将本地仓库关联到GitHub新建的仓库上git remote add origin 需要上传的git仓储地址6.使用pull命令gi
2020-05-26 15:40:23
251
原创 node爬虫（二）
1.如何安装要通过js写爬虫，需要用到三个模块，request、cheerio和fs，其中fs内置了，只需要安装前两个即可，安装命令：npm install request cheerio2.获取网页内容request会向回调函数传递三个参数，分别是error（错误信息），response（响应信息），body（网页内容）：var request =require('request')...
2020-04-10 21:21:21
201
原创 小程序抽奖
很多应用中都会存在抽奖的需求，而且这种功能也很常见，最近在项目中我也遇到了这样的需求。对其探讨如下：我遇到的是商品需积分抽奖，而且不会存在于不中奖的情况，不过也可以根据自己的需求来在我这个demo上的需求进行修改。1.需求消耗一定的积分，进行一次抽奖，在抽奖完成以后，需扣除对应的积分。开始 转动时速度很慢转动过程中很快结束时，拿到后台的中奖信息，转盘速度变慢2.实现(转盘抽奖)...
2020-04-09 21:12:25
1265
原创 小程序轮播图指示器样式
微信小程序的swiper组件是滑块视图容器，也就是说平常我们看到的轮播图就可以用它来做，不过这个组件有很多样式是固定的，但是，有时候我们的设计稿的面板指示点是需要个性化的，那么如何去修改swiper组件的面板指示点的样式呢？<swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circ...
2020-03-27 14:31:53
835
1
原创 关于git上传代码报错
添加git上传远程仓储的时候出现了以下错误：解决办法如下：1.git remote rm origin2.再次提交你 的仓储地址git remote add origin ‘你的仓储地址’
2020-03-21 13:44:38
289
原创 Vue路由的懒加载
使用Vue进行项目开发已经有一段时间了，当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。方法一：直接引入 （不推荐）import ShopcarContainer from './views/Foo.vue';方法二：resolve此法实现了按需加载，主要...
2020-02-21 11:40:44
182
原创 Vue中的proxy代理
在项目开发过程中，先在本地运行项目以及对接的相关操作，待项目完成以后再修改正式服地址。那么在这个过程中如何能够在本地请求接口数据而不出现跨域警告呢？此时我们需要用到proxy代理，是vue静态服务器做代理。Vue@2.x 版本项目启动：npm run dev//在config文件下的index.js进行代理配置。配置如下： proxyTable: { '/ap...
2020-02-19 13:35:33
7539
1
原创 node爬虫(一)
目录结构如下：var http =require('http');var fs =require('fs');var curentPage=1; //当前图片页数var maxcurentPage=5;//最大页数//获取图片地址function getData(){ let url = 'http://www.nipic.com/photo/xiandai/jia...
2020-02-18 18:07:49
143
原创 数组的递归调用（二）
使用递归能够减少很多的for循环的使用，其数据格式如下：var data = [{ name: "所有物品", children: [ { name: "水果", children: [{name: "苹果", children: [{name: '青苹果'}, {name: '红苹果'}]}] ...
2020-02-18 16:11:49
841
装饰、外观模式实例代码
2018-05-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人