前端技术积累
一键写代码
这个作者很懒,什么都没留下…
展开
-
通过post请求下载接口,接口返回流数据,前端处理下载或展示出错信息
处理二进制流数据下载,前端判断json还是流数据原创 2022-08-15 17:26:32 · 3664 阅读 · 0 评论 -
vue-cli项目中,通过cdn方式引入vchart来解决打包过大问题
1、在index.html中,引入v-charts的cdn地址。因为v-charts 依赖echarts,所有,两者都需要引入。<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content原创 2022-04-11 17:29:53 · 1279 阅读 · 1 评论 -
手动通过css来美化界面中的滚动条样式
默认浏览器的滚动条样式很丑,我们在vue项目中,如果使用了element-ui的话,是可以借用他的滚动条的。方法一:手动设置滚动条样式,只能解决chrome浏览器等上面的样式。还可以。不要要求太多。<div class="wrap"><p>我是很长的内容</p></div>设置样式: .wrap::-webkit-scrollbar { /* 滚动条宽度和高度 */ width: 8px; height: 8px;原创 2022-03-25 14:29:16 · 1482 阅读 · 0 评论 -
记录vue开发h5页面中遇到的形形色色的奇异问题及解决方法
奇异问题1:为什么修改vant-ui的默认样式,设置border-radius在浏览器生效了,但是ios真机没有效果。出现此问题的原因是因为ios手机会在transform的时候导致border-radius失效解决方法:在使用动画效果带transform的元素的上一级div元素的css加上下面语句:transform:rotate(0deg);-webkit-transform:rotate(0deg);...原创 2022-03-22 16:18:34 · 3494 阅读 · 0 评论 -
关于wepy2中开启小程序分享朋友圈的功能。
如何在wepy2开发的小程序中开启朋友圈分享小程序功能1、说明分享朋友圈功能暂时只支持安卓,并且输入beta版本。一句话,并不是很成熟。但是, 有时候,产品就是需要。2、官网文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html看文档: 当前页面,需要先开启发送朋友功能后,才能进一步分享到盆友圈功能。对应的api文档如下:3、实操在我们的页面中,method原创 2022-03-21 13:36:27 · 678 阅读 · 1 评论 -
vue项目中使用百度地图api完成自定义搜索功能(包含搜索详细地理位置)
需求描述:在vue项目中,有时候,我们需要自定义百度地图的一些功能。譬如,现在的需求,就是需要自定义搜索内容和结果展示。类似如下页面的功能:首先在vue项目中,我们可以使用 vue-baidu-map 插件来替代直接引入百度地图js sdk。npm install --save vue-baidu-map vue-baidu-map的具体使用文档参考官方文档:https://dafrok.github.io/vue-baidu-map/#/zh/start/installation解决方案原创 2022-02-23 19:08:20 · 6753 阅读 · 8 评论 -
vue项目中上传文件到阿里云oss方法
vue项目中,如何实现阿里云oss上传,结合element-ui 的上传组件使用原创 2022-02-16 17:39:42 · 17808 阅读 · 5 评论 -
vue项目中使用百度地图功能
1、百度地图api官方文档:https://lbsyun.baidu.com/index.php?title=jspopularGL在百度地区去申请一个百度地图key。这个key属于私密的,部分高级功能需要找百度地图花钱购买。2、在vue项目中,我们使用vue-baidu-map这个封装后的npm包使用方式:npm install vue-baidu-map --save全局注册import Vue from 'vue'import BaiduMap from 'vue-baidu-map'原创 2022-02-14 17:09:40 · 3775 阅读 · 0 评论 -
react-native中使用webview来渲染富文本,修改样式,自适应高度
我们知道,在vue中,我们可以很轻松的去渲染富文本内容。包括在小程序中也有对应的组件可以直接使用。那么,在react-native中如何渲染富文本呢?答案是: Webview废话不多说,直接上代码。export default class ArticleDetailPage extends Component { constructor(props) { super(props); this.state = { title: '', content: ''原创 2022-01-28 16:14:50 · 3492 阅读 · 0 评论 -
vue项目配合nginx部署到子目录、二级域名的解决办法
默认的vue项目是部署到网站根目录的。但是,有些情况下,一个域名内需要放置多个内容。所以,只能分子域名或是子目录来部署。譬如,当前网站的域名是:www.abc.com使用nginx做代理的时候,分配给我们的部署vue项目的域名地址是:www.abc.com/vuedemo先看nginx的配置:location / { root html; index index.html index.htm; gzip_static o原创 2022-01-27 10:04:04 · 11323 阅读 · 0 评论 -
Windows 下Redis的部署 及key 过期事件
windows平台下安装redis。linix是另外的方法。1、安装redis下载地址:https://github.com/microsoftarchive/redis/releases找到最新的版本,下载.msi文件。运行,可以修改安装目录。然后下一步,下一步。最后一步的时候,勾选加入到环境变量。配置过期事件在安装目录下,找到redis.windows.conf文件,打开,修改代码放开红色的,注释掉蓝色的。修改配置后,我们之间运行redis服务,这个修改的配置,并不会生效。测试是否成原创 2022-01-10 14:35:20 · 518 阅读 · 0 评论 -
2022年1月1号前端格式化日期引发的严重问题
惨痛的bug描述元旦了,用户使用网站设置日期2022-1-1。保存后,再查看,居然变成了2020-1-1号。 然后再保存一下,居然变成了2019-1-1。以为见鬼了。查找原因,居然是前端日期格式化导致的问题。很遗憾,前任留下的bug,只能我们来背。问题复现// 时间戳: 1546272000000 真实时间是 2019-01-01 00:00:00var d = new Date(1546272000000);console.log(d.getUTCFullYear() + '/ '+ d.g原创 2022-01-06 19:11:10 · 481 阅读 · 0 评论 -
react-native中使用react-native-vector-icons图标库
react-native-vector-icons 内置了FontAwesome、 antDesign等常用图标库,还可以支持自定义。RN0.6以上如何使用?1、安装:npm i react-native-vector-icons -D 安装命令。2、安装完成后,还是需要执行 react-native link虽然react-native 0.6版本以上有了autolink 。但是还是需要执行一下,否则图标不显示。3、重新安装app后,引入使用。import Icon from 'react-原创 2021-12-28 10:17:13 · 2931 阅读 · 0 评论 -
开发中,常用git操作命令
拉取远程分支:git clone -b 分支名 http://xxx代码远程地址.git例如: git clone -b demo http:baidu.com.git将文件添加到本地仓库git add demo.js将文件提交到本地仓库并添加注释git commit demo.js -m '添加demo.js的注释'推送到远程git push需要输入用户名和密码get fetch 将远程分支的最新内容拉到本地git branch 列出所有本地分支 git branch -r 列出所原创 2021-12-24 14:20:11 · 170 阅读 · 0 评论 -
npm和yarn切换设置官方源与淘宝源。
网上搜了一些文章,还有两种混着写的。实在是误人子弟。自己记录下来,方便查找。npm设置切换源。默认第一次安装后是官方镜像。有时候下载慢,我们切淘宝源。有时候有需要切回去。特此记录。1、查看当前源npm config get registry2、设置淘宝源淘宝镜像npm config set registry https://registry.npm.taobao.org3、设置官方镜像npm config set registry http://registry.npmjs.orgyar原创 2021-12-17 10:40:57 · 4781 阅读 · 0 评论 -
egg-validate进行参数校验如何校验数组array和对象类型?多层嵌套,都需要校验
一、普通一层参数的校验方法是这样的:const rule = { goodsId: { type: 'number', required: true }, name: { type: 'string', required: false }, categoryId: { type: 'number', required: false }, unitName: { type: 'string', required: false }, salePric原创 2021-12-14 18:18:02 · 1755 阅读 · 1 评论 -
element-ui时间日期选择组件限制日期选择范围
1、需求描述:日期选择的时候,限制选择范围,譬如只能选今天之后的日期。最后效果如下:2、实现方式:借助于官方api picker-options实现。三、示例1、设置今天及以后可以选择组件代码<el-date-picker v-model="date1" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker原创 2021-11-24 09:58:34 · 1374 阅读 · 0 评论 -
使用element-ui开发cron表达式公共组件
>需求描述后台需要前端开发一个用户习惯的,简单的选择,前端处理成后台识别的cron表达式,去执行定时任务。关于cron表达式,可以查看https://qqe2.com/cron 这类在线网址查看。我们最后实现的成果如下:用户选择 天、周、月 以及 时间 前端转化出cron表达式。> 组件代码:<template> <div style="display:inline-block;"> <el-popover v-model="visibl原创 2021-11-11 15:24:32 · 2318 阅读 · 0 评论 -
win7安装node版本最高只支持13.14.0
今天用nvm安装node 16 和 14.0.0 都没有安装成功。原因是从14.0.0开始,node不再支持win7系统了。所以,最高只能安装到13.14.0历史node版本下载官方地址:https://nodejs.org/en/download/releases/历史npm版本官方下载地址:https://npm.taobao.org/mirrors/npm/使用nvm去安装高版本的node的时候,npm可能没有安装成功。就需要我们手动下载node对应的npm版本后,解压缩放到node安装目原创 2021-10-29 09:13:42 · 13237 阅读 · 1 评论 -
webUploader文件上传示例demo,配置前后端可以本地调试。
需求描述:使用html5的api完成大文件的上传。调研结论: 可以选择webUploader 和simple-uploader 。 前者是百度出品。start很多。两者都可以。本需求采用WebUploader。1、部署上传的后台服务。有时候受限,需要先跑起来。官方的后台接口是php代码。所有我们需要部署一个php的跑起来。这里,我们为了快速部署,装依赖。直接使用快速工具。参考文章:用XAMPP搭建本地PHP服务器,运行php文件 https://blog.csdn.net/web_xyk原创 2021-10-27 10:07:55 · 1249 阅读 · 0 评论 -
Vue Element-ui表单校验规则,你掌握了哪些?
参考文章:https://www.cnblogs.com/alabo1999/p/14990310.html原创 2021-10-25 16:20:29 · 110 阅读 · 0 评论 -
微前端实现方案
1、京东出品的micro-app (推荐+++)https://cangdu.org/micro-app/docs.html#/2、single-spa(推荐++)和qiankun(推荐+)https://www.jianshu.com/p/54904acb5896 主要介绍了single-spa。是在qiankun发展起来的。需要改单页的打包方式。...原创 2021-10-25 16:07:56 · 239 阅读 · 0 评论 -
纯js实现通过事件总线EventBus来完成插件封装
前言:当我们在插件开发的时候,肯定需要对外暴露函数,使用者调用插件内的方法,如果插件内的某些操作是异步的,就需要等异步完成后,通知使用者处理结果,使用者然后再去执行其他的操作。我们在vue中,可以通过实例化vue来实现事件总线。 或者通过Vuex来完成类似的操作。如果是纯插件的时候,我们最好通过js自己完成封装。示例如下: window.onload = function () { var oproto = Object.prototype var aproto = Ar原创 2021-10-22 18:11:16 · 327 阅读 · 1 评论 -
app中使用企业微信sdk分享小程序报错:小程序路径错误,加载超时 解决办法。
问题描述:在app中,需要调用企业微信skd,分享小程序给客户,客户打开小程序。如果客户直接是企业微信中的,可以在企业微信中打开小程序。但是,如果客户是微信中,用户在微信中打开小程序就报错。ios分享出去可以,安卓分享就不行。app开发甩锅小程序问题。小程序打不开,肯定是小程序的问题。这个锅我们不接。甩锅是官方bug,这个不是解决办法。排查原因。我们查官方文档:小程序类型分享示例WWMediaMiniProgram miniProgram = new WWMediaMiniProgr原创 2021-09-24 10:47:16 · 1788 阅读 · 0 评论 -
wepy2中使用腾讯地图map组件bindregionchange无法绑定的解决办法
小程序官方文档:map组件支持的属性和事件:bindregionchange eventhandle 否 视野发生变化时触发, 2.3.0然而,大坑的是,在wepy2框架中,我们这样使用: <map class="map" id="map" controls="true" :longitude="longitude" :latitude="latitude" scale="15" :sub原创 2021-09-18 17:08:28 · 359 阅读 · 0 评论 -
域名set-cookie报Set-Cookie was blocked because its Domain attribute was invalid with regards to the url
先说坑:api.abc.com这个域名,写cookie重定向到static.abc.com这个域名,发现,cookie没有写成功,前端在代码中获取不到cookie。使用控制台查看,报错this Set-Cookie was blocked because its Domain attribute was invalid with regards to the url 。看字面意思,就是设置cookie非法了,操作不对。查后台代码,后台设置cookie时,是这样玩的:set-cookie: use原创 2021-09-07 11:20:59 · 4717 阅读 · 1 评论 -
关于页面卸载发送请求统计页面浏览时长类似需求的解决办法
需求描述用户离开页面时,发送一个请求,统计用户的浏览时长。衍生譬如上报错误等,类似需要在页面卸载的时候发送请求给后台的。解决办法一样。解决方案页面进入的时候,记录开始时间,页面卸载的时候,记录结束时间,并且请求接口上报数据。最早期方案 if ("onpageshow" in window) { $(window).on("pageshow", loadHandler); $(window).on("pagehide", unloadHandler);原创 2021-09-01 17:55:39 · 335 阅读 · 0 评论 -
九宫格抽奖小程序开发
实现效果:wepy2小程序代码<style lang="less" scoped>.draw_box { // position: relative; // width: 600rpx; // height: 600rpx; width: 600rpx; height: 600rpx; display: flex; justify-items: center; margin: 0 auto; background-repeat: no-repeat;原创 2021-08-10 16:36:55 · 761 阅读 · 0 评论 -
使用webpack打包,vue-cli4配置config.js中assetsDir的妙用
我们看vue-cli4的文档,有两个publicPath 和 assetsDir两个配置路径的选项。这两个结合起来,可以解决我们一些问题。需求一、打包后部署在服务器,不是根目录,而是服务器下面的某个地址目录。譬如,我们的域名是www.abc.com, 我们需要把我们的前端页面部署在www.abc.com/demo/目录下。解决办法:在config.js中设置:module.export= { publicPath: '/demo/'}这个时候,我们就可以把打包后的dist目录的文件全.原创 2021-07-23 16:42:23 · 6409 阅读 · 0 评论 -
vue-cli如何正确设置publicPath保证打包部署后静态资源路径正确的问题
几种设置publicPath后,再对比打包后的index.html文件测试背景:每次打包build完后,都单独生成一个/dist文件夹,且dist中每次都只有相同文件目录部署的时候,前端打包的文件部署在服务器的一个静态资源目录下我们是放在这个目录下的根目录还是在这个目录下的一个文件夹内,都需要前端正确设置publicPath才能正确访问的。打包后的文件目录:├─dist ├─css ├─img └─js index.html一、不设置publicPath时,既设置为'',部署后请求原创 2021-07-23 13:46:51 · 20995 阅读 · 0 评论 -
ios上同时使用transform和border-radius时,border-radius会失效的问题
在ios小程序开发时发现。同时使用transform 和border-radius属性是 border-radius会失效。解决办法:方法1、 不同时使用方法2、在使用动画效果带transform的元素的上一级div元素的css加上下面语句-webkit-transform:rotate(0deg);...原创 2021-07-22 11:51:19 · 581 阅读 · 0 评论 -
微信小程序使用wx.setNavigationBarTitle动态设置页码title在页面跳转时会有bug问题解决
这个问题出现的原因是,我的A页面的title是需要请求后台接口后才能设置的,请求接口是一个异步请求,这个请求发出后,里面跳转到另外一个页面B,已经发出的异步请求,并没有停止,而是等返回后执行wx.setNavigationBarTitle。这样就把B页面的titile给设置了。解决办法:我的是在A页面异步请求返回一个xx名称后,再将页面A的标题设置为xx名称。data:{tName:''},watch: { tName(curVal, oldVal) { var pages原创 2021-07-22 11:21:20 · 1425 阅读 · 0 评论 -
微信小程序使用日历需要禁用某些日期需求的实现
需求描述:日历组件,某些日期被人选了,就不能再选,用一个颜色标记。用户可以选择部分能选的。类似这样的需求图片。最简单的办法是,vant-ui 微信小程序插件 本身的日期组件是可以实现的。具体方法: <van-calendar title="日历" :show="true" :formatter="formatter1" color="#07c160" type="range" :show-confirm="false"/>原创 2021-07-07 14:07:15 · 2538 阅读 · 5 评论 -
微信小程序自定义修改轮播图swiper指示器的样式
默认的小程序轮播图组件样式是圆点点。有时候UI需要改指示器的样式使用: <swiper :autoplay="false" :indicator-dots="true"> <swiper-item class="menu" v-for="(cMenu,index) in menuCList"> <div class="menu-item" v-for="item in cMenu" @tap="linkToLi原创 2021-07-06 15:30:43 · 1172 阅读 · 1 评论 -
js常用正则表达式
一、校验数字的表达式数字:^[0-9]*$n位的数字:^\d{n}$至少n位的数字:^\d{n,}$m-n位的数字:^\d{m,n}$零和非零开头的数字:^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(\.[0-9]{1,2})?$带1-2位小数的正数或负数:^(\-)?\d+(\.\d{1,2})$正数、负数、和小数:^(\-|\+)?\d+(\.\d+)?$有两位小数的正实数:^[0-9]+(\.[0-9]{2})?$有1~3位小数原创 2021-07-01 13:52:23 · 130 阅读 · 0 评论 -
如何在h5和小程序中适配iphone X全面屏底部的安全区
1、第一步: h5需要设置页面属性: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">2、在属性样式上加一段判断覆盖样式:示例代码:.load-more { color: #0080ff; padding-bottom: 32px;}@supports (bottom:原创 2021-07-01 11:23:44 · 1026 阅读 · 0 评论 -
使用wepy2开发小程序生成海报需求
需求描述:在小程序根据已有的dom样式,生成一张图片作为海报图分享出去。方法1、使用官方的canvas api 把想要的dom样式通过画矩形画text一步步画出来。方法2、 简单so easy。 使用Wml2Canvas插件插件地址: github: https://github.com/wg-front/wxml2canvas可以查看官方示例demo, 很简单。第一步:准备好画图的标签和画图的画布canvaswxml: <div class="card share原创 2021-06-30 16:45:28 · 187 阅读 · 0 评论 -
解决微信小程序input textarea输入框内容以及palceholder随页面滚动式跟着滚动,飘起来了。
bug 类型效果:输入框内的文字跑了。解决办法:测试了网上的监听滚动事件,手动调用wx.hideKeyboard等方式,都不好使。大概原因: 在页面出现滚动时,输入框跑了。 如果不是滚动页面,不能滚动,就不会出现。刚开始整个外层标签是<view></view>, 换成<scroll-view></scroll-view> 再加个样式min-height:100vh; 就完美解决了。原因可能和小程序原生对scroll-view内的input等滚动做原创 2021-06-17 17:16:02 · 3007 阅读 · 0 评论 -
前端高效开发必备——常用js框架和第三方插件
轮播图1、swiper.js视频音频播放1、video.js时间日期处理1、moment.js图像浏览1、viewer.js jQuery 图像浏览插件2、cropper.jsjQuery简单且功能强大的图片剪裁插件3、lazy.js 图片懒加载库图表1、echart 百度开发的功能强大的图表库2、highcharts兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库弹窗1、modalbox.js2、Popper.js 轻量级 tooltips原创 2021-05-27 14:02:27 · 1872 阅读 · 0 评论 -
多种隐藏滚动条但是依然可以滚动实现方式
需求描述:经常会遇到,不显示滚动条,但是鼠标滚轮上去可以滚动,或是在移动端,不显示滚动条,手指可以滑动内容。方法一: iscroll插件方法二:通过固定宽度样式将滚动条给隐藏起来。chrom 和ie 正常使用。<div class="outer-container"> <div class="inner-container"> ...... </div></div>// css.outer-container{ .原创 2021-05-27 10:50:56 · 7730 阅读 · 0 评论