自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(107)
  • 问答 (3)
  • 收藏
  • 关注

原创 uni-app小程序结合腾讯地图获取定位以及地图选址

表单中的地址用地图的方式进行编辑与选址看效果第一步:登录公众平台==>设置==>第三方设置第二步:登录腾讯地图申请属于自己小程序的key第三步:找到腾讯地图的插件第四步:添加插件与允许授权第五步:通过点击事件进入插件第六步:拿到接口调用的数据看效果第一步:登录公众平台==>设置==>第三方设置第二步:登录腾讯地图申请属于自己小程序的key腾讯地图官网第三步:找到腾讯地图的插件腾讯地图插件在这里我们用到的是,地图选点第四步:添加插件与允许授权第五步:通

2021-12-03 09:46:34 2354 5

原创 js如何给每一个头像的背景颜色都不一样

1.效果2.思路:多种颜色的背景,定义一个数组,里面放置多种颜色的色值,然后通过循环渲染的数据,取出名字的第一个字,放在头像垂直居中显示,再给这个div动态绑定色值进行背景色的修改;而刚才的颜色数组通过取模将色值取出;3.取模4.代码实现首先在return中定义一个颜色数组;colorList: [ "#6D9088", "#D6A3CB", "#A3D6A7", "#E37C7B", "#49B8E6", "#A48

2021-11-18 10:23:23 3112 2

原创 前端常见小公司面试题

js昨天刚一个上海的公司给我打电话面试,问了我一堆基础的东西,例如:position、响应式布局,div盒子让我讲一讲这些怎么理解的…absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距,但仍有补白和边框relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置当时问了我,两个div,怎么让一个小的div位于大div的垂直居中

2020-12-31 14:34:30 6351 12

原创 前端上传大文件使用分片上传

前提:分片上传针对于一些大的文件、普通大小的文件使用element中的上传组件可以实现效果,例如几G的文件就会比较卡,所以这时候就需要用到分片上传~效果:(上传进度展示)效果:(上传成功的效果展示)

2024-01-23 10:33:07 362

原创 如何成功拿下uniapp生命周期?

组件生命周期+页面生命周期pages下面的.vue或者.nvue(app端)文件就是页面一般通常会把项目中的组件放在components。

2023-12-25 16:02:44 480

原创 vue使用pcl.js展示.pcd/.bin文件代码源码

可以对照上面的原文进行理解。以下是全部展示部分的代码。

2023-11-16 08:57:39 331

原创 vue项目使用pcl.js展示.pcd/.bin点云文件

pcl展示点云文件

2023-11-09 14:49:43 898 18

原创 video.cjs.js:440 VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPO在vue中使用vue-video-player动态获取url加载mp4

videojs报错:No compatible source was found for this media.大概就是这样、就是使用一个mp4都报错 一直显示不出来。正确使用方法在下面;看了好多博主的感觉都不行。一直显示不出来,后面换成这样的代码就行了;在初始化时,没有在src中添加视频资源。视频可以播放了,但是错还在;视频资源为空或视频资源无效无法播放。解决,检查资源是否有效,得以解决。首先说说我的问题吧、

2023-04-25 15:19:15 3531 1

原创 vue3+ts+pinia+vite一次性全搞懂

简单来说:是一个vue3版本的vuexpinia官网地址建好一个store文件下面的index.ts文件这一步是官网中的描述,定义一个defineStoreimport {// 相当于datareturn {// 相当于计算属性getters: {//相当于vuex中的mutation+action,可以同时写同步和异步的代码actions: {

2023-04-21 11:20:33 1314

原创 echarts实现动态渲染多柱图

根据用户选择查询,发送给后端,处理成多个柱子的数据 进行展示渲染

2023-02-17 16:25:44 957

原创 git操作回滚到指定版本

bugfix/v2.9.7.3 和 bugfix/v2.9.7.2。我需要把v2.9.7.3的内容复制到v2.9.7.2里面。先通过git log查看提交版本,找到我们需要跳的版本;v2.9.7.2是老版本 v2.9.7.3是新的。在 bugfix/v2.9.7.2里面操作。检查一下文件中有没有回滚到的版本的内容。

2022-10-25 16:53:42 286 1

原创 uniapp使用uview上拉加载LoadMore功能搭配tabs

当他为false就不用再向后端请求接口this.bossList = [ ] } let str = this.areaCode.slice(0 , 4) //请求接口this.bossList.push(el) }) //在这里要进行一个判断,当后端传给我的数据小于每页的数据时就显示没有更多了 if(res.data.list.length < this.pageSize) {//这里设置成false就不可以继续加载,不可以进入请求接口的方法里了。

2022-09-29 19:39:26 2113

原创 使用echarts如何绘制一根柱子展示两种颜色的数据

X轴放日期、Y轴放总数据量(total)各一个数据,还有折现放的是incr(增长量),柱状图有两个颜色 表示两个数据,一个使用过的,一个未使用的 加起来等于总量。我们需要 以下5个数据;bytesSizeG这个方法是我换算单位的,不需要的 可以换掉了。series是一个数组 所以可以多放几个就组成了一根柱子展示两个数据。这里是后端返回的数据,我们需要把需要的数据合并成数组;这里因为我需要加单位,所以我选择了自定义。这里是有柱状图和折线图混合的一个图表。

2022-09-16 14:33:47 3000

原创 echarts多个关系图如何实现

跟其他echarts图表一样,第一步新建一个容器用来展示图;里面有一些配置都是需要在文档中一个个的找到 然后进行设置的。这里用到的时候力引导布局;大概看一下数据结构吧。这里的id名称一定要对上哦~记得写上这个加载方法哦!...

2022-08-26 16:41:36 1976 1

原创 echarts一条折线图展示多个数据

第三个values是y轴的数据;还有一个sizes是我们说的第三个数据;sizes是一个数组,所以我们只要知道tooltip划到哪一个的索引就可以拿到数据;这里是正常的折线图的渲染;只是展示tooltip的时候 自己格式化了一下。这里就是上面3.2说的 知道数组的索引就可以拿到相应的值;这个params是我鼠标滑到哪里的整个对象;这个方法是将数据转化为G的单位的方法;根据时间展示某一数量的时候的数据大小。这里的size就是第三个数据。这个就是params。...

2022-08-09 10:45:03 3035

原创 echarts的词云图

这是我选择的形状图片首先,安装echarts和echarts-wordcloud官网看到的说:echarts5.0.0+搭配wordcloud2.0.0+的版本 才可以;不然会报错;我改了对应的 但是还是不行;最后试了好多版本;下面这个才对应上 不报错3.挑选图片形状选择你想要做的形状;在线转化base64,复制代码5.渲染词云图(要配置图片base64)有一些配置可以自己修改6.给每个元素点击事件我这里是跳转页面...

2022-08-04 16:25:19 1536

原创 input输入框回车搜索会刷新整个项目

当form表单只有一个输入框时,按下回车会去提交表单(触发submit事件)给他多加了一个input然后隐藏;这样就不会提交表单了;我们再来看下一个表单不止一个input的时候;就可以直接回车搜索了;所以就刷新了整个页面。......

2022-07-21 09:39:41 1093

原创 js无法获取headers中Content-Disposition

js无法获取响应header的Content-Disposition字段

2022-07-20 15:15:39 4375 3

原创 后端给你返回文件流,前端实现下载文件

后端返回的文件流,前端如何实现下载导出文件

2022-07-01 15:02:58 9781 3

原创 vue中的过滤器

关于vue的过滤器介绍和传多个参数问题过滤器一定要return出去才可以显示出来在视图上a就是第一个参数,b是方法名a和c都是参数a c d都是参数接收

2022-06-16 11:53:23 143 1

原创 vue2基础面试题

ref的解释<template> <div id="app"> <img ref="logo" src="./assets/logo.png"> <button>111</button> </div></template>在vue的生命周期中,只有在mounted中是最先获得dom的,所以在这里可以打印出来<script> export default { mount

2022-04-28 11:28:26 281

原创 微信小程序授权登录源码

应广大前端程序员要求,源码附上了这里是授权的页面<style lang="scss">@import "../assets/sass/setting";.authorization { position: relative; .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 450rpx; text-ali

2022-04-13 09:51:11 4583 4

原创 uniapp开发小程序背景图片不显示的问题

看代码<view style="height: 580rpx;position:relative;opacity: 0.8;" :style="{background :'url(' + state.itemInfo.picUrl + ')',backgroundSize:'111%',backgroundRepeat:'no-repeat;',backgroundPosition:'27% 100%', filter: 'blur(3px)'}"></view>这里一直没有显

2022-04-01 15:24:24 3915 3

原创 uni开发微信小程序openDocument:fail filetype not supported

官方文档上显示:微信小程序非必填,于是我没填,然后就一直报错。。。一直没找到原因,直到看了wx的是需要加上一个fileType.加上就可以了,一步步的排错;uni.downloadFile({ url: this.documentUrl, success: res => { if (res.statusCode === 200) { console.log('res', res) uni.saveFile({ .

2022-03-28 17:25:12 5319 1

原创 uniapp开发小程序如何实现全局悬浮按钮

看效果这是一个全局的按钮,可以换成图片,自己写样式,每个页面都有;须知:1.uni.getSystemInfoSync()获取手机的信息接口可以拿到手机屏幕的宽高2.uni.createSelectorQuery().in(this)uniapp中式没有window对象,和dom元素的,但是有时我们需要获取页面上节点的一些几何信息;const query = uni.createSelectorQuery().in(this); query.select('#_drag_button'

2022-03-21 15:43:03 7656 13

原创 uniapp兼容各种手机屏幕头部,获取屏幕头部高度

这里是效果:下面两个图是刚开始遇到的情况,不同的手机上面的高度是不一样的,所以我们写死的话,他是无法兼容的自定义的头部组件这里是控制头部的高度;这样写死肯定是不行的;改进动态获取屏幕头部的高度let barHeight = 0 let StatusBar = 0 let barHightTop = '' onMounted(() => { let systemInfo = uni.getSystemInfoSync(); let custom =

2022-03-01 17:09:59 3647 3

原创 vue3中setup、ref、reactive、响应式

vue3语法格式vue3提供的都是按需导入的方法,函数setup函数是vue3中专门为组件提供的新属性。<template> <div> {{name}} </div></template><script>import { reactive } from "vue"export default { props:{ item:String } //setup函数会在beforeCreate之后,crea

2022-01-20 15:14:43 3444

原创 promise入门即巅峰

promise的介绍promise是一个构造函数,可以进行对象的实例化;promise是js中进行异步编程的新解决方案;旧的解决方案是使用回调函数去解决异步;es6推出promise,支持链式调用,解决回调地狱问题回调函数这就是一个典型的回调地狱问题,回调函数嵌套调用;外部回调函数异步执行的结果是嵌套的回调执行的条件;缺点呢,就是不利于阅读,不便于异常处理promise的初体验<body> <h1>promise初体验</h1> &lt

2022-01-18 16:03:13 1510 4

原创 vue3语法

vue3生命周期vue2和vue3的生命周期钩子函数非常相似,我们甚至可以访问相似的钩子函数;随着Composition API的引入,我们访问这些钩子函数的方式已经改变。setup()方法在旧的 beforeCreate 钩子函数之后和 created 的钩子函数之前立即调用 setup 方法。因此,我们不再需要这两个钩子,我们可以简单地将本应有的代码放在 setup() 方法中。如何添加生命周期函数import { onMounted, onUpdated, onUnmounted } fro

2022-01-13 10:05:57 472

原创 项目封装网络请求、请求拦截和相应拦截

封装网络请求这里是写在一个基本的js配置文件中,封装网络请求// 通用的网络请求,安装axiosimport axios from "axios";//设置每个请求的类型,比如post、get、delete,所以要写成活的export function request(config) { const instance = axios.create({ baseURL: 'https://域名.cn/', //这里是默认的域名 timeout: 5000 /

2022-01-13 09:17:05 717

原创 uniapp开发小程序推送微信消息

效果//处理自己的逻辑 freeClick() { this.getPushTempletes(()=> { this.$u.post('/fkmpPay/getExperiencePackage').then(res => { if (res.code == 0) { //成功之后震动效果 uni.vibrateLong({ success: function() { console.log(

2022-01-06 15:30:53 2604

原创 uview如何在form中使用upload上传图片

效果表单代码<u-form-item label="照片" prop="photo"> <u-upload width="160" ref="uUpload" :show-progress="false" height="160" :action="action" :auto-upload="true" @on-remove="onRemove" :file-list="fileList" @on-success="successUpload">

2021-12-15 14:46:34 6410 4

原创 uni-app实现卡片切换效果

切换主题+css样式第一步:先看效果第二步:卡片的切换第三步:切换卡片内部的样式第一步:先看效果第二步:卡片的切换<view class='bgDemo'> <view v-for="item,index in objectMultiArray" :key="index" @click='bindMultiPickerChange2' :data-id="index" style='z-index:50;'> <image :src="ite

2021-12-14 17:27:02 2853 2

原创 TypeError: Cannot read property ‘replace‘ of undefined

微信小程序报错TypeError: Cannot read property ‘replace’ of undefined感觉代码是没有问题的;刚开始:let bg1 = this.myData.backgroundImage.replace("http://fast.hnzhilv.com/mingpian/bg", ""); let url1 = item.url.replace("http://fast.hnzhilv.com/mingpian/%E5%90%8D%E7%89%87

2021-12-10 14:32:04 5321

原创 uniapp上传图片及组件传值

效果这里我还没有做loading,所以会出现闪一下的效果,不影响的哈~首先说明上面一个卡片是一个组件,自己封装好的。点击事件这里是点击上传的事件上传的方法uploadImg() { if (this.uploadLogo) { uni.chooseImage({ count: 1, //默认9,数量 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType

2021-12-08 09:07:44 907

原创 使用原生js实现多选,取消选中,以及动态切换class

效果图多选效果的实现<view class="item" :class="isActiveFn(item)?'active':''" v-for="(item,index) in list" :key="index" @click="getItem(item)"> {{item.name}}</view>点击某个块通过getItem拿到值this.listCustom是下面那个添加的框的listgetItem(item) { //判断已经是否添加过

2021-12-06 14:21:47 4086

原创 微信小程序个人中心跳转页面进行授权登录

微信小程序授权登录操作第一步:进入页面跳到授权登录页面第二步:点击立即授权按钮弹出授权框1.这里会调用微信官方文档中的一个方法2.点击允许授权获取微信头像和昵称3.授权成功之后跳回之前的页面第三步:将数据渲染到个人中心1.在拿到数据的那里进行数据渲染,我这里是将数据存到本地存储,然后在个人中心页面取出2.个人中心页面取出3.定义一个userInfoData进行赋值4.渲染啦最后:效果如下第一步:进入页面跳到授权登录页面在onshow中进行判断是否需要跳转授权页面,第三步有详细解释; onShow()

2021-11-19 10:15:33 10919 7

原创 如何快速绘制一个高德地图

老规矩,先看效果第一步:安装amapnpm install vue-amap --save(如果有淘宝镜像可以cnpm install vue-amap --save)第二步:main.js配置amap // 初始化vue-amapAMap.initAMapApiLoader({ // 高德key key: '你申请的key', // 插件集合 (插件按需引入) plugin: ['AMap.Geolocation','AMap.ToolBar']});第三步:在页面写d

2021-11-12 14:22:44 1481

原创 uniapp开发小程序动态更换状态栏颜色

需求一个小程序不同页面,导航栏颜色更换这是两个页面,一个小程序内~onReady() { //动态修改状态栏的颜色 uni.setNavigationBarColor({ frontColor: '#000000', backgroundColor: '#ff0000' }) },这两个都是必填项哦~有一个没填就没有效果,写在页面上跟生命周期一个层级的...

2021-11-11 14:54:28 4014 1

原创 echarts绘制多条折线图

效果首先引入echarts可以看这篇文章哦~如何在项目中使用echarts1.定义一个div这里的height就是y轴的高度了~ <div style="width: 100%; height: 600px" ref="chart"></div>2.定义一个方法init在mounted引用 mounted() { this.init() },3.定义数据这个一般是后台给的接口的数据,我这里是模拟的哦~let lineData = {

2021-11-11 14:19:42 11425 14

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除