小莉爱编程
一起学习一起进步
展开
-
微信小程序授权登录源码
应广大前端程序员要求,源码附上了这里是授权的页面<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 · 4718 阅读 · 4 评论 -
如何成功拿下uniapp生命周期?
组件生命周期+页面生命周期pages下面的.vue或者.nvue(app端)文件就是页面一般通常会把项目中的组件放在components。原创 2023-12-25 16:02:44 · 498 阅读 · 0 评论 -
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 · 305 阅读 · 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 · 2178 阅读 · 0 评论 -
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 · 3991 阅读 · 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 · 5405 阅读 · 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 · 7878 阅读 · 13 评论 -
uniapp兼容各种手机屏幕头部,获取屏幕头部高度
这里是效果:下面两个图是刚开始遇到的情况,不同的手机上面的高度是不一样的,所以我们写死的话,他是无法兼容的自定义的头部组件这里是控制头部的高度;这样写死肯定是不行的;改进动态获取屏幕头部的高度let barHeight = 0 let StatusBar = 0 let barHightTop = '' onMounted(() => { let systemInfo = uni.getSystemInfoSync(); let custom =原创 2022-03-01 17:09:59 · 3708 阅读 · 3 评论 -
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 · 2850 阅读 · 0 评论 -
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 · 6464 阅读 · 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 · 2888 阅读 · 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 · 5368 阅读 · 0 评论 -
uniapp上传图片及组件传值
效果这里我还没有做loading,所以会出现闪一下的效果,不影响的哈~首先说明上面一个卡片是一个组件,自己封装好的。点击事件这里是点击上传的事件上传的方法uploadImg() { if (this.uploadLogo) { uni.chooseImage({ count: 1, //默认9,数量 sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有 sourceType原创 2021-12-08 09:07:44 · 919 阅读 · 0 评论 -
使用原生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 · 4106 阅读 · 0 评论 -
uni-app小程序结合腾讯地图获取定位以及地图选址
表单中的地址用地图的方式进行编辑与选址看效果第一步:登录公众平台==>设置==>第三方设置第二步:登录腾讯地图申请属于自己小程序的key第三步:找到腾讯地图的插件第四步:添加插件与允许授权第五步:通过点击事件进入插件第六步:拿到接口调用的数据看效果第一步:登录公众平台==>设置==>第三方设置第二步:登录腾讯地图申请属于自己小程序的key腾讯地图官网第三步:找到腾讯地图的插件腾讯地图插件在这里我们用到的是,地图选点第四步:添加插件与允许授权第五步:通原创 2021-12-03 09:46:34 · 2424 阅读 · 5 评论 -
uniapp开发小程序动态更换状态栏颜色
需求一个小程序不同页面,导航栏颜色更换这是两个页面,一个小程序内~onReady() { //动态修改状态栏的颜色 uni.setNavigationBarColor({ frontColor: '#000000', backgroundColor: '#ff0000' }) },这两个都是必填项哦~有一个没填就没有效果,写在页面上跟生命周期一个层级的...原创 2021-11-11 14:54:28 · 4066 阅读 · 1 评论 -
uniapp使用uview配置token及请求拦截
配置token首先我这里是用到了uview中的httpuview官网http这里打印一下config可以看到下面的url就是我们请求的接口路径用到vuex保存token效果是让我们每次请求接口的时候自动带上tokenvuex中通过updateToken在登录的时候拿到后端返回的token,保存到vuex中我这里是在登录的时候拉取的接口,拿到token然后在刚才的配置token的http.interceptor.js页面打印一下,如何拿到token值打印出来了,咱们找到拉~原创 2021-10-28 10:02:45 · 5214 阅读 · 2 评论 -
uniapp展示图片下载分享
效果点击下载之后;流程:从一个页面跳进另一个页面(展示图片的页面)携带好需要的值,在展示图片的页面掉接口拿到图片路径等值;进行展示图片下载流程代码第一步:跳页面跳页面,携带参数;uni.navigateTo({ url: '/pages/knowledge/document/document?id=' + item.tid + '&source=' + item.source + '&docType=' + this.docType ,});在第二个页面拿到原创 2021-10-27 16:56:58 · 515 阅读 · 1 评论 -
uniapp如何使用uview中的loadmore上拉加载
效果引入loadmore首先搜索和tab的样式<view class="tabPage"> <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs> <u-cell-group v-for="(item,index) in answerData" :key="index"> <u-cell-item :title原创 2021-10-27 11:27:44 · 3336 阅读 · 2 评论 -
uniapp授权登陆操作
效果分析:登录流程 1.用户点击登录按钮,弹出授权弹窗 2.用户确认授权,调用uni.login接口,拿到code 3.使用code调用后端接口,接收后端返回的自定义登录态,如token等 4.登录状态在本地保存起来,用的时候在vuex取用 5.用户信息由后端解密,统一返回,再存入本地 此处简化了流程,没有返回自定义登录状态,直接使用openid来判断用户,用户信息也没有做特别处理,获取到之后就进行了存储1.用户点击登录按钮,弹出授权弹窗一个按钮点击事件弹出授权弹窗<view原创 2021-10-27 11:04:56 · 16627 阅读 · 7 评论 -
uniapp通过本地缓存实现历史搜索记录
首先画好样式下面的图标引入的是iconfont里面的,如何引入点我<template> <view> <view class="search_input"> <u-search ref="search" placeholder=" 请输入搜索内容" v-model="keyword" :show-action="false" clearabled @search="keySearch(keyword)" @clear="clearSearch原创 2021-10-19 14:29:57 · 2318 阅读 · 1 评论 -
uniapp引入iconfont小程序渲染层错误
刚开始用着好好地,突然视觉冲击;刚开始用的网上常见的方法,然后报错,就没办法了;正确的引入方式是,先将iconfont库进行转换,转换成base64编码之后再进行引入这里是从iconfont官网下载的从这里转换转换网站然后下载解压后打开css,复制这个就可以了插入到自己的iconfont最后在App.vue文件中根据文件路径引入iconfont.css文件即可使用成功了...原创 2021-10-18 15:56:51 · 1207 阅读 · 1 评论 -
uniapp如何引入iconfont图标库
第一步:你得拥有一个uniapp项目第二步点击iconfont官网在首页选好图标,在项目中新建一个css将上面的1复制在css中,再点开下面这个链接再复制这个,在css中,下面就是css的代码了@font-face { font-family: 'iconfont'; /* Project id 2859888 */ src: url('//at.alicdn.com/t/font_2859888_csff1a0k5tm.woff2?t=1634008673174') fo原创 2021-10-14 10:00:19 · 1948 阅读 · 6 评论 -
uniapp中如何引入uView模板
第一步:打开uView官网uView官方文档在这里找到想要的模板第二步:点进实例项目第三步:下载项目打开或者运行项目,查看源码第四步:找到自己需要的模板第五步:复制进自己的项目第六步:注意引入数据结构这里下面是自己的项目:效果:...原创 2021-10-13 09:16:05 · 2219 阅读 · 2 评论