![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
微信小程序、uni-app
文章平均质量分 63
微信小程序,uni-app相关
铁锤妹妹@
日日行,不怕千万里;常常做,不怕千万事。
展开
-
小程序UnionID是什么?以及UnionID获取途径
小程序UnionID是什么?如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的 UnionID 是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,UnionID是相同的。OpenID: 普通用户的标识,对当前开发者帐号唯一。一个openid对应一个公众号UnionID: 用户统一标识。,针对一个微信开放平台帐号下的应用,同一用户的unionid是原创 2020-08-25 11:46:22 · 19995 阅读 · 1 评论 -
微信小程序实现文字渐变
直接上代码 .text{ font-family: STSongti-SC-Black; font-size: 28px; background:linear-gradient(to right, #b56045, #b7745c); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow:0px 2px 2px 0px rgba(78,42,3,1);}原创 2020-09-10 10:55:02 · 2937 阅读 · 0 评论 -
微信小程序 - 基本原理
小程序本质就是一个单页面应用,所有的页面渲染和事件处理,都在一个页面内进行,但又可以通过微信客户端调用原生的各种接口;它的架构,是数据驱动的架构模式,它的UI和数据是分离的,所有的页面更新,都需要通过对数据的更改来实现;它从技术讲和现有的前端开发差不多,采用JavaScript、WXML、WXSS三种技术进行开发;功能可分为webview和appService两个部分;webview用来展现UI,appService有来处理业务逻辑、数据及接口调用;两个部分在两个进程中运行,通过系统层JSBri.原创 2020-08-20 16:53:49 · 6943 阅读 · 2 评论 -
微信小程序 - tab选项卡切换的实现方法
页面效果大体思路首先是把新闻的内容,还有活动的内容都列到wxml上然后把tab写出来。现在的难点是如何把tab和下面的内容联系起来我们定义一个公共变量,变量名是state,当state= ‘news’ 的时候,显示新闻的内容,当state= ‘conference’ 的时候,显示活动内容怎么在点击tab切换的时候,改变对应的state的值呢 ?(1)首先是给新闻和活动加一个date-state属性,属性的值分别代表了新闻和活动(2)其次需要一个点击方法,当点击新闻的时候,就通过setDat原创 2020-08-31 15:56:05 · 4926 阅读 · 17 评论 -
微信小程序 - page生命周期
1. onLoad() 页面加载时触发,只会调用一次,可获取当前页面路径中的参数。2. onShow() 页面显示/切入前台时触发,一般用来发送数据请求;3. onReady() 页面初次渲染完成时触发, 只会调用一次,代表页面已可和视图层进行交互。4. onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。5. onUnload() 页面卸载时触发,如redirectTo或navigateBack到其他页面时。Page() 函数用来注册一个页面。接受一个转载 2020-08-19 11:39:08 · 421 阅读 · 0 评论 -
微信小程序 - app生命周期和运行机制
小程序App生命周期小程序App生命周期是在app.js里面调用的,App(Object)函数用来注册一个小程序,接受一个 Object 参数,指定其小程序的生命周期回调App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。小程序第一次打开时将会下载整个小程序代码包,紧接着通过app.json配置初始化App,页面线程开始渲染首页,初始化完成后应用服务线程执行App中onLauch()函数和onShow()函数,然后才执行页面中的onLoad()函数和onS原创 2020-08-19 16:50:10 · 865 阅读 · 2 评论 -
微信小程序 - 导航tab切换滚动到一定距离,固定在页面顶部
最近模仿了西贝的小程序,其中有一个页面有相关的功能,来总结记录一下。这里我用的是一种方法是已知导航栏前面的元素高度是固定的,以后维护不会改变的情况效果如下:思路:wxml中先在导航栏上写判断条件,如果距离顶部距离>70,显示样式’totop’导航栏置顶。wxss中写上’totop’样式。js中监听页面的滑动,获取滑动距离。(使用onPageScroll)wxml:{{scrollTop > 70? ‘totop’:’’}}是一个三元表达式,意思是如果scrollTop>原创 2020-09-11 17:58:31 · 3633 阅读 · 7 评论 -
微信小程序 - 页面间有哪些传递数据方法?
1. 使用全局变量实现数据传递2. 页面跳转或重定向时,使用url带参数传递数据3. 使用组件模板 template传递参数4. 使用缓存传递参数5. 使用数据库传递数据1. 全局APP app.js和app.wxss中的代码都是全局生效的,所以我们可以利用这一点儿,在不同页面之间进行传值。//往globalData设置值getApp().globalData.data = "12345";//取globaData的值var data = app.globalData.data;Ap原创 2020-08-18 19:27:34 · 7371 阅读 · 4 评论 -
uniapp自定义验证码输入框,隐藏光标
点击输入框唤起键盘,蓝框就相当于input的光标,验证码输入错误或者不符合格式要求会将字体以及边框改成红色提示,持续1s,然后清空数据,恢复原边框样式;原创 2023-02-19 18:31:56 · 3308 阅读 · 6 评论 -
微信小程序运行机制和生命周期
首先了解下小程序的运行机制,小程序从启动到最终被销毁,会经历很多不同的状态,小程序在不同状态下会有不同的表现。大致运行机制如下图。原创 2022-11-21 08:45:00 · 4764 阅读 · 2 评论 -
uniapp和vue组件之间的传值方法(父子传值,兄弟传值,跨级传值,vuex)
在做vue项目或者uniapp开发微信小程序时,经常会用到组件之间传值,因此想总结记录下。原创 2022-10-31 14:47:55 · 11010 阅读 · 0 评论 -
uniapp微信小程序切换到tabber页面没有自动刷新
通过uni.switchTab跳转到tabber页面比如个人中心页面,更新的数据没有刷新。导致页面的数据还是修改之前的。原创 2022-10-28 11:52:49 · 4812 阅读 · 0 评论 -
获取不同机型微信小程序状态栏+导航栏高度
很多时候我们开发微信小程序,都需要先知道状态栏和导航栏的高度,才能去做其他功能。原创 2022-10-09 11:28:34 · 8313 阅读 · 0 评论 -
uniapp 将元素滚动到指定位置的两种方法总结
使用 uni.pageScrollTo 方法,属于页面级别滚动。转载 2022-09-28 16:13:04 · 32430 阅读 · 0 评论 -
uni-app开发微信小程序使用腾讯地图选点和城市选择器插件
因为开发微信小程序,所以我这里用的是腾讯地图选点插件。附上官方文档腾讯地图选择器插件腾讯地图选点插件。原创 2022-09-27 14:51:39 · 7573 阅读 · 24 评论 -
uniapp和vue在页面数据渲染完毕之后再获取高度
在使用vue或者uniapp时,有时候需要在页面数据渲染完成之后调用方法,不然获取不到准确的数据,特别是在获取列表数据高度的时候,由于数据没有加载完,获取不到准确的高度。需要注意的是,当用户一进页面就滑动的时候,我们获取的高度也会发生变化。当下图中上部分的classifyList分类数据渲染完毕之后,获取一遍tab选项卡距离页面顶部的距离,有了这个距离进行其他操作;用于观察Vue实例上的数据变化,对应一个对象,键是需要观察的表达式,值是对应的回调函数。在修改数据之后立即使用这个方法,获取更新后的 DOM。原创 2022-09-27 09:25:20 · 4018 阅读 · 7 评论 -
uniapp下拉加载下一页设置节流阀控制多次数据请求
我们在下拉刷新过程会由于网速慢或各种原因,数据请求慢,此时我们在还没请求回数据又下拉刷新一次,但此时数据还未加载完成(函数还未运行完) ,此时页数+1,后面等到数据再次请求就不是下一页了data() {return {isLoading : false , //节流阀:判断是否已经请求完成,并返回数据。如果已返回则关闭节流阀,可再次请求下次数据 page : 1 , goodsList : [ ] };} ,转载 2022-09-26 23:06:04 · 962 阅读 · 0 评论 -
uni-app 实现搜索关键词高亮效果
根据关键字搜索相关地理位置的需求,并把关键词高亮显示,关键词输入提示用到了腾讯地图的sdk,帮助用户快速输入,详情见[腾讯地图 getSuggestion]原创 2022-09-26 16:16:55 · 2474 阅读 · 4 评论 -
uniapp开发微信小程序使用腾讯地图获取具体位置信息
uniapp可以通过uni.getLocation获取用户定位,但是获取到的定位没有中文地址,所以我们需要通过第三方SDK例如高德地图或者腾讯地图来获取中文定位信息。原创 2022-09-23 17:43:09 · 8755 阅读 · 11 评论 -
uniapp页面跳转的几种方法和区别
保留当前页面,可跳转到非 tabBar 页面,使用uni.navigateBack可以返回到原页面(可传参原创 2022-09-23 11:41:54 · 7215 阅读 · 0 评论 -
uni.getLocation获取定位fail报错问题汇总
fail返回的对象 errMsg 可能返回的值如下:转载 2022-09-22 22:51:04 · 13997 阅读 · 0 评论 -
微信小程序获取地理位置失败原因及解决方案
微信小程序获取用户地理位置失败的原因主要有3种情况:原创 2022-09-22 22:40:53 · 39294 阅读 · 0 评论 -
微信小程序wx.getLocation的接口审核多次被拒经验总结
我们在开发小程序时,有时会用到用户地理位置信息的功能,微信小程序开发者开放平台新规要求如果2022年4月18日后没有申请开通微信小程序地理位置接口( wx.getLocation ),提审时小程序是无法通过审核的。转载 2022-09-20 18:12:58 · 19658 阅读 · 4 评论 -
uniapp监听页面滚动结束的解决方法
防美团外卖滚动时购物车的状态。原创 2022-08-13 21:20:17 · 2244 阅读 · 0 评论 -
uniapp开发小程序根据经纬度获取定位城市名字
1. 前言大家如果接触过微信小程序的都知道,涉及到一些用户敏感信息的操作(比如定位、访问个人信息等)都是需要用户授权的,我们平时使用小程序时可能也见到过进行某个操作之前弹出授权框的场景,需要用户手动授权后才能进行下一步操作。接下来文章简单介绍一下微信小程序中的授权机制,基本上都是参考自官方文档,大家也可以直接阅读官方文档,了解更详细的介绍。2. 大体思路1) 提前向用户发起授权请求uni.authorize,如果用户之前已经同意授权,不会出现弹窗,直接返回成功;如果用户之前拒绝了授权,此接口会直原创 2022-03-03 15:50:43 · 3971 阅读 · 4 评论 -
uniapp 传递参数对象给下个页面的处理方法
先说一下场景 - 微信小程序开发中,一个卡片列表页点击跳转详情页,跳转时候详情页需要列表页的信息,需要我们传一个对象过去,效果如下具体实现 // 列表页点击跳转, 传递的参数对象,js中的参数要求不能是对象,我们转为string类型 gotoDetail(e) { let itemObj = JSON.stringify(e) uni.navigateTo({ url: '/pagesMine/pages/equityCard/billDetail?ite原创 2022-01-17 11:56:24 · 1566 阅读 · 0 评论 -
uniapp点击返回按钮,根据页面栈判断页面路径,确定返回哪个页面
项目中使用uniapp开发微信小程序,很多时候不使用自带的头部导航栏,而是自己编写导航栏。getCurrentPages()函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出pages[pages.length - 2]是上一页,-1是当前页实例展示 <u-navbar title="测试" :custom-back="customBack"></u-navbar> methods: { customBack() { let routes原创 2021-12-31 16:18:55 · 5212 阅读 · 1 评论 -
删除数组(对象)中的某一项
场景项目中有个订单列表,提交订单之后用户可以选择取消订单,既然要取消订单,前端这边就得想办法把这个订单请求后端删除接口,在不刷新订单列表的情况下从前台删除,不刷新列表个人感觉体验更好。 // 确认取消订单 confirmOrder(order_id) { uni.showLoading({ title: '加载中', }) xxxApi['cancelOrder']({ order_sn: order_id }) .then((原创 2021-12-20 21:35:03 · 10772 阅读 · 0 评论 -
微信小程序web-view组件嵌入h5页面导致双导航栏,如何只保留其中一个?
前提已知存在一个微信小程序,该小程序的某个页面通过web-view组件嵌套了我们app的一个h5页面,h5页面本身有自己的导航栏,就导致了双导航栏。由于uniapp的 web-view 组件一定有原生导航栏,pages.js中设置navigationStyle: custom 对 web-view 组件无效;所以只能去掉因为h5里的导航。方案h5里的导航现在有两个地方在使用,一个需要保留导航栏,另一个也就是小程序中需要去掉h5的导航栏,所以需要条件判断,在使用web-view 组件项目中的页面src原创 2021-12-13 21:15:54 · 5824 阅读 · 3 评论 -
如何在uniapp中使用uni.navigateBack()传递参数给上个页面?
从A页面,跳到B页面,从B页面选中地址返回到A页面时,需要将B页面选中的参数地址id,传递给A页面。原创 2021-12-12 16:31:21 · 7422 阅读 · 0 评论 -
uniapp实现顶部导航栏背景图片渐隐渐现效果
由于项目需要一个功能,顶部距离小于50rpx时,导航栏透明显示;当滚动页面时,导航栏不再透明显示。实现思路:如果滑动位置距离顶部<=50的话,隐藏导航栏;50 < 距离顶部距离 <= 200, 透明度依次增加,直到opacity = 1大于200的话,直接设置透明度opacity = 1具体代码案例中用到了uview这个ui框架的u-navbar组件,具体可去官网查看这个组件的可配置API<template> <view class="zeroPur原创 2021-11-14 16:27:14 · 7200 阅读 · 0 评论 -
HBuilderX打开微信开发者工具报错解决方案
最近开始用uni-app开发小程序,想要看页面效果需要用到HBuilderX ,点击工具栏的运行到小程序模拟器,正常情况下会自己启动微信开发者工具,但是这里就出现了报错,无法打开微信开发者工具。报错信息:解决方法:直接通过微信开发者工具打开uni-app项目:unpackage ==> dist ==> build ==> mp-weixin,这里需要注意的是 HBuilderX编辑器一定要运行小程序模拟器 - 微信开发者工具,不然在HBuilderX编辑器修改/添加的东西不能实时原创 2021-11-14 15:11:18 · 1497 阅读 · 0 评论 -
uni-app打包发布H5时页面白屏报错404
配置文件manifest.json文件中H5配置里面,一开始配置的base为 “/h5/” ,就得需要运维那边帮忙配置下,如果改为“/”,就可以解决白屏报错404这个问题,更改后如下图原创 2021-07-02 10:03:00 · 1680 阅读 · 0 评论 -
解决服务器与本地时间戳不一致的问题
问题重现:在做sign加签的时候,需要时间戳,提示签名失效;问题排查得出因为本地时间和服务器时间不一致导致的思路:1. 首先这种时间差,越早知道越好,所以初始化项目(App.vue)时候就去请求接口获取服务器时间戳,uniapp项目2. 然后和本地时间求差值,存起来,比如服务器时间 - 本地时间,如果结果是正的,说明本地时间落后了,封装一个类,每次请求的时候,本地时间 + 差值 = 服务器时间服务器时间 - 本地时间 = x;服务器时间 = 本地时间 + x;解决过程:App.vue原创 2021-06-27 21:01:36 · 7144 阅读 · 2 评论 -
uni-app h5打包发版到测试和生产环境具体步骤
前言:最近需要在uniapp项目上修改需求,完成后需要将页面打包出来,生成h5静态文件,然后部署到测试和生产环境,这里总结下我的具体操作步骤步骤:测试域名打开,因为我项目里测试域名都是test.开头的,所以全局搜 test. , 打包之前要手动切换接口域名;做完需求后提交到git发测试包的时候就把所有文件test. 这个地址放开。发生产的时候把生产地址放开项目需要自己手动打包,打包的时候用hbuilder,点击菜单栏发行,点击选择网站-H5手机版,在自己本地编译完,它会告诉你编译路径。在当下原创 2021-01-25 17:43:54 · 3712 阅读 · 0 评论