草庐IT

uniapp的tabBar角标

全部标签

关于uniapp在小程序中获取用户信息

在微信小程序中,获取用户信息时,需要用到两个api就行uni.login以及uni.getUserProfileletwxAuthInfo={};uni.login({provider:"weixin",success:(res)=>{console.log(res)wxAuthInfo.code=res.code;})uni.getUserProfile({desc:"获取你的昵称、头像、地区及性别",success:async(res)=>{console.log(res);wxAuthInfo.encryptedData=res.encryptedData;wxAuthInfo.iv=r

自学阉割版奶茶点单uniapp小程序

涉及技术vue3+sass+typescript+pinia+uniapp+微信小程序基础编写工具:Vscode、微信小程序开发项目介绍这是一个基于瑞幸咖啡点单小程序创建的一个仅用于自己学习uniapp技术的项目。此项目不涉及服务器、网络等知识,数据内容以及数据类型均由自己编写。此项目共分为三大块(即三个tabbar页面):index页面、order页面、my页面。项目制作项目创建与配置基础项目创建命令行创建uni-app官网(dcloud.net.cn)选择vue3+ts安装node包npmi 创配置Vscode安装uni-app插件:uni-create-view、uni-helper、u

uniapp开发小程序,上传图片和视频功能

1.需求:可以上传图片和视频,并且都可以删除,图片可以预览。2.效果图3.代码:template> viewstyle="display:flex;flex-wrap:wrap;"> viewclass="update-file"> viewv-for="(item,index)inimageList":key="index"> viewclass="upload-box"> imageclass="preview-file":src="hostUrl+item"@tap="previewImage(item)">image> viewclass="remo

uniapp 悬浮窗-任意界面 Ba-FloatWinWeb

简介(下载地址)Ba-FloatWinWeb是一款支持自定义任意界面的悬浮窗插件。采用webview方式,同时支持本地、网络地址;自带几种界面,可直接使用。支持显示、更新、隐藏支持记录显示位置支持拖动支持监听点击事件支持自动申请、判断悬浮窗权限支持手动申请、判断悬浮窗权限支持同时设置多个悬浮窗,并且可以不同样式自带几种界面,可直接使用(见效果图)uniapp常用原生插件大全截图展示使用方法在script中引入组件 constfloatWin=uni.requireNativePlugin('Ba-FloatWinWeb')在script中调用(示例参考,可根据自己业务和调用方法自行修改)met

【uniapp】 video视频层级、遮挡其他弹窗或顶部导航 使用nvue覆盖

uniapp顶部导航和弹窗被video遮挡解决办法第一步:配置subNVues{ "path":"pages/index/index", "style":{ "navigationBarTitleText":"uni-app", "navigationStyle":"custom", "app-plus":{ "titleNView":false,//禁用原生导航栏 "subNVues":[{ "id":"subnvue",//顶部导航配置 "path":"pages/index/subnvue", "type":"

ruoyi-app(uniapp) 解决持久化登录:退出应用后再次打开保持已登录状态以及登录页显示tabBar的问题

在使用ruoyi-app开发移动端调试的时候发现已登录用户退出应用后台后重新打开需要重新登录,于是想做一个持久保存登录状态的功能。首先ruoyi-app自带的登录存储token的流程完全没问题,但是在pages.json文件中第一个页面却是登录页;uniapp官网写道在pages第一项为应用首页 所以我们想在应用退出重进后不用再去登陆,这时就应该把index页面移到第一项; 这是我们登录之后退出应用重进会发现没问题了,不用登录就直接到index页面,但是我们再退出登录的话跳转到登录页面会发现登录页面下面多了一条tabBar 这里其实算是一个bug,当时想得时把它隐藏掉,但是因为登录页不在tab

uniapp 判断微信小程序端、App端、h5端

区分标识写法:以#ifdef或#ifndef加%PLATFORM%开头,以#endif结尾。#ifdef:ifdefined仅在某平台存在#ifndef:ifnotdefined除了某平台均存在%PLATFORM%:平台名称此方法支持文件有.vue(模板里使用).js(使用//注释).css(使用/*注释*/)pages.json(使用//注释)各预编译语言文件,如:.scss、.less、.stylus、.ts、.pug(使用/注释/)js文件示例APP端/*#ifdefAPP-PLUS*/console.log('APP端')/*#endif*/H5端/#ifdefH5/console.l

uniapp+微信小程序获取openId,获取access_token,订阅消息模板,java后台发送消息

目录1.前期准备2.用户订阅消息3.获取openId(uniapp)4.获取access_token5.发送消息6.请求的代码Springboot(自己写有发送请求方法的可以不用看)1.前期准备在微信公众号申请订阅消息在公共模板这里选用模板,模板种类跟小程序设置的类目有关,只有特殊的类目有长期订阅模板类目可以在设置中修改2.用户订阅消息选用模板后点击详情查看模板的id在小程序上编写以下代码(这个是uniapp框架的代码)uni.requestSubscribeMessage({ tmplIds:['1QO7f6SdIiw7loXtIhaIL5IKl4Ze0lS2moDVnjaAlLQ'

v-for循环空数组异常渲染排查解决【uniapp,微信小程序,vue】

v-for空数组异常渲染解决数组为空或元素为空导致的异常显示问题复现异常换行符排查异常渲染情况排查解决方案(异常渲染)v-if判断条件增加检查效果结束语数组为空或元素为空导致的异常显示情况概述:接到客户反馈,我们的一个列表出现了异常的空行情况,要求解决,所以我们便一步一步来排错解决,问题很简单,新手可以看,大神掠过开发框架:uniapp,vue,微信小程序,反正其他的也通用,方法都相同问题复现客户最先反馈的是行距异常通过图片我们可以得知,有几条数据对应的视图出现了异常行,这里我们大致可以猜测一下,要么是这部分有数据,渲染了,但是因为某些原因,看不见,要么是没有数据,上面的标题多了一个换行符导致

【UniApp】-uni-app-pinia存储数据

前言经过上个章节的介绍,大家可以了解到uni-app-数据缓存的基本使用方法那本章节来给大家介绍一下uni-app-pinia存储数据的基本使用方法经过我这么多篇章的介绍,我发现大家环境比较耗时,所以在今后的文章中,我会尽量减少环境的搭建如果某一篇的文章环境确实是不一样的,我会在文章中说明,然后编写对应的搭建过程本文的由来呢,就是因为在Vue2中与Vue3中都可以使用Vuex来进行数据的存储,但是在Vue3出现了Pinia,所以我就想着在uni-app中使用Pinia来进行数据的存储。步入正题首先来给大家看看官方文档吧,在文档中找到,uni-app->教程->vue语法,先来看Vue2:可以从