- 博客(107)
- 问答 (3)
- 收藏
- 关注
RSS订阅
原创 uni-app小程序结合腾讯地图获取定位以及地图选址
表单中的地址用地图的方式进行编辑与选址看效果第一步：登录公众平台==>设置==>第三方设置第二步：登录腾讯地图申请属于自己小程序的key第三步：找到腾讯地图的插件第四步：添加插件与允许授权第五步：通过点击事件进入插件第六步：拿到接口调用的数据看效果第一步：登录公众平台==>设置==>第三方设置第二步：登录腾讯地图申请属于自己小程序的key腾讯地图官网第三步：找到腾讯地图的插件腾讯地图插件在这里我们用到的是，地图选点第四步：添加插件与允许授权第五步：通
2021-12-03 09:46:34
2329
5
原创 js如何给每一个头像的背景颜色都不一样
1.效果2.思路：多种颜色的背景，定义一个数组，里面放置多种颜色的色值，然后通过循环渲染的数据，取出名字的第一个字，放在头像垂直居中显示，再给这个div动态绑定色值进行背景色的修改；而刚才的颜色数组通过取模将色值取出；3.取模4.代码实现首先在return中定义一个颜色数组；colorList: [ "#6D9088", "#D6A3CB", "#A3D6A7", "#E37C7B", "#49B8E6", "#A48
2021-11-18 10:23:23
3105
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
6341
12
原创 前端上传大文件使用分片上传
前提：分片上传针对于一些大的文件、普通大小的文件使用element中的上传组件可以实现效果，例如几G的文件就会比较卡，所以这时候就需要用到分片上传~效果：（上传进度展示）效果：（上传成功的效果展示）
2024-01-23 10:33:07
333
原创 如何成功拿下uniapp生命周期？
组件生命周期+页面生命周期pages下面的.vue或者.nvue（app端）文件就是页面一般通常会把项目中的组件放在components。
2023-12-25 16:02:44
476
原创 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
3467
1
原创 vue3+ts+pinia+vite一次性全搞懂
简单来说：是一个vue3版本的vuexpinia官网地址建好一个store文件下面的index.ts文件这一步是官网中的描述，定义一个defineStoreimport {// 相当于datareturn {// 相当于计算属性getters: {//相当于vuex中的mutation+action，可以同时写同步和异步的代码actions: {
2023-04-21 11:20:33
1300
原创 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
283
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
2093
原创 使用echarts如何绘制一根柱子展示两种颜色的数据
X轴放日期、Y轴放总数据量（total）各一个数据，还有折现放的是incr（增长量），柱状图有两个颜色 表示两个数据，一个使用过的，一个未使用的 加起来等于总量。我们需要 以下5个数据；bytesSizeG这个方法是我换算单位的，不需要的 可以换掉了。series是一个数组 所以可以多放几个就组成了一根柱子展示两个数据。这里是后端返回的数据，我们需要把需要的数据合并成数组；这里因为我需要加单位，所以我选择了自定义。这里是有柱状图和折线图混合的一个图表。
2022-09-16 14:33:47
2939
原创 echarts多个关系图如何实现
跟其他echarts图表一样，第一步新建一个容器用来展示图；里面有一些配置都是需要在文档中一个个的找到 然后进行设置的。这里用到的时候力引导布局；大概看一下数据结构吧。这里的id名称一定要对上哦~记得写上这个加载方法哦！...
2022-08-26 16:41:36
1960
1
原创 echarts一条折线图展示多个数据
第三个values是y轴的数据；还有一个sizes是我们说的第三个数据；sizes是一个数组，所以我们只要知道tooltip划到哪一个的索引就可以拿到数据；这里是正常的折线图的渲染；只是展示tooltip的时候 自己格式化了一下。这里就是上面3.2说的 知道数组的索引就可以拿到相应的值；这个params是我鼠标滑到哪里的整个对象；这个方法是将数据转化为G的单位的方法；根据时间展示某一数量的时候的数据大小。这里的size就是第三个数据。这个就是params。...
2022-08-09 10:45:03
3011
原创 echarts的词云图
这是我选择的形状图片首先，安装echarts和echarts-wordcloud官网看到的说：echarts5.0.0+搭配wordcloud2.0.0+的版本 才可以；不然会报错；我改了对应的 但是还是不行；最后试了好多版本；下面这个才对应上 不报错3.挑选图片形状选择你想要做的形状；在线转化base64，复制代码5.渲染词云图（要配置图片base64）有一些配置可以自己修改6.给每个元素点击事件我这里是跳转页面...
2022-08-04 16:25:19
1502
原创 input输入框回车搜索会刷新整个项目
当form表单只有一个输入框时，按下回车会去提交表单（触发submit事件）给他多加了一个input然后隐藏；这样就不会提交表单了；我们再来看下一个表单不止一个input的时候；就可以直接回车搜索了；所以就刷新了整个页面。......
2022-07-21 09:39:41
1078
原创 js无法获取headers中Content-Disposition
js无法获取响应header的Content-Disposition字段
2022-07-20 15:15:39
4340
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
4542
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
3868
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
5292
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
7568
13
原创 uniapp兼容各种手机屏幕头部，获取屏幕头部高度
这里是效果：下面两个图是刚开始遇到的情况，不同的手机上面的高度是不一样的，所以我们写死的话，他是无法兼容的自定义的头部组件这里是控制头部的高度；这样写死肯定是不行的；改进动态获取屏幕头部的高度let barHeight = 0 let StatusBar = 0 let barHightTop = '' onMounted(() => { let systemInfo = uni.getSystemInfoSync(); let custom =
2022-03-01 17:09:59
3626
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
3439
原创 promise入门即巅峰
promise的介绍promise是一个构造函数，可以进行对象的实例化；promise是js中进行异步编程的新解决方案；旧的解决方案是使用回调函数去解决异步；es6推出promise，支持链式调用，解决回调地狱问题回调函数这就是一个典型的回调地狱问题，回调函数嵌套调用；外部回调函数异步执行的结果是嵌套的回调执行的条件；缺点呢，就是不利于阅读，不便于异常处理promise的初体验<body> <h1>promise初体验</h1> <
2022-01-18 16:03:13
1508
4
原创 vue3语法
vue3生命周期vue2和vue3的生命周期钩子函数非常相似，我们甚至可以访问相似的钩子函数；随着Composition API的引入，我们访问这些钩子函数的方式已经改变。setup（）方法在旧的 beforeCreate 钩子函数之后和 created 的钩子函数之前立即调用 setup 方法。因此，我们不再需要这两个钩子，我们可以简单地将本应有的代码放在 setup() 方法中。如何添加生命周期函数import { onMounted, onUpdated, onUnmounted } fro
2022-01-13 10:05:57
466
原创 项目封装网络请求、请求拦截和相应拦截
封装网络请求这里是写在一个基本的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
714
原创 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
2532
原创 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
6390
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
2839
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
5299
原创 uniapp上传图片及组件传值
效果这里我还没有做loading，所以会出现闪一下的效果，不影响的哈~首先说明上面一个卡片是一个组件，自己封装好的。点击事件这里是点击上传的事件上传的方法uploadImg() { if (this.uploadLogo) { uni.chooseImage({ count: 1, //默认9，数量 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有 sourceType
2021-12-08 09:07:44
905
原创 使用原生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
4082
原创 微信小程序个人中心跳转页面进行授权登录
微信小程序授权登录操作第一步：进入页面跳到授权登录页面第二步：点击立即授权按钮弹出授权框1.这里会调用微信官方文档中的一个方法2.点击允许授权获取微信头像和昵称3.授权成功之后跳回之前的页面第三步：将数据渲染到个人中心1.在拿到数据的那里进行数据渲染，我这里是将数据存到本地存储，然后在个人中心页面取出2.个人中心页面取出3.定义一个userInfoData进行赋值4.渲染啦最后：效果如下第一步：进入页面跳到授权登录页面在onshow中进行判断是否需要跳转授权页面，第三步有详细解释； onShow()
2021-11-19 10:15:33
10797
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
1463
原创 uniapp开发小程序动态更换状态栏颜色
需求一个小程序不同页面，导航栏颜色更换这是两个页面，一个小程序内~onReady() { //动态修改状态栏的颜色 uni.setNavigationBarColor({ frontColor: '#000000', backgroundColor: '#ff0000' }) },这两个都是必填项哦~有一个没填就没有效果，写在页面上跟生命周期一个层级的...
2021-11-11 14:54:28
4000
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
10784
14
空空如也
前端vue2分片上传
2024-01-03
vue-video-player插件播放mp4视频
2023-04-25
uniapp用的uview中的input，但是我不想让他弹出手机的键盘
2021-12-02
一个关于v-if v-else的问题，很奇怪
2021-11-29
定义一个颜色（10个值）数组，如何给每一个头像的背景颜色都不一样
2021-11-17
TA创建的收藏夹 TA关注的收藏夹
TA关注的人