uniapp的通用页面及组件基本封装
1.基本布局页面
适用于自定义Navbar头部
<template><view class="bar" :style="{height : systemInfo.statusBarHeight + 'px', background: param.barBgColor }"></view><view class="headBox" :style="{ height: param.headHight + 'px',background: param.headBgColor,}"><view class="leftBox"><slot name="left"><view class="back" v-if="autoBack" @click="uni.navigateBack({ delta: 1 })"><XIcon name="back" blod></XIcon></view></slot></view><view class="centerBox"><slot name="center"><view class="title">{{param.title}}</view></slot></view><view class="rightBox" :style="{ paddingRight: !slots.right ? 0 + 'px' : (menuButton.width + 12) + 'px' }"><slot name="right"></slot></view></view><slot name="topBox"></slot><scroll-view @scrolltolower="emits('tolower',true)" scroll-y id="calcPoint" :style="`height:${ rollHight }px;overflow-y: auto;`"><slot name="container"></slot></scroll-view>
</template><script setup lang="ts">import { onMounted , ref , useSlots } from "vue";import { getPageResidueDIST } from "@/utils/common";import XIcon from "@/element/XIcon.vue"const param = withDefaults(defineProps<{barBgColor: string;headHight: number;headBgColor: string;autoBack: boolean;title: string;}>(),{headHight: 44,headBgColor: '#ffffff',barBgColor: '#ffffff',autoBack: true,title: '基本页面'})const emits = defineEmits<{( e: 'tolower' , status : boolean ) : void}>();const slots = useSlots();const systemInfo = ref<any>({});const menuButton = ref<any>({ width: 0 });const init = async () => {systemInfo.value = await uni.getSystemInfo();// #ifndef APP || H5menuButton.value = uni.getMenuButtonBoundingClientRect();// #endif};onMounted(() => {init();setRollHight();});let rollHight = ref<number>(0);async function setRollHight() {let calcPoint = await getPageResidueDIST('#calcPoint');rollHight.value = calcPoint - (systemInfo.value?.safeAreaInsets?.bottom == 0 ? 10 : systemInfo.value?.safeAreaInsets?.bottom);}</script><style scoped lang="scss">.headBox {display: flex;align-items: center;justify-content: space-between;padding: 0 12px;width: 100%;box-sizing: border-box;.leftBox {flex: 1;display: flex;justify-content: flex-start;}.centerBox {flex: 2;display: flex;justify-content: center;text-align: center;.title {font-size: 16px;color: #303133;}}.rightBox {flex: 1;display: flex;justify-content: flex-end;}}</style>
2.阿里iocn
注意使用阿里icon需要下载阿里的字体图标,然后把css的文件引入到app.vue,就可以使用iconfont icon-xxx,是你图标名称
<template><view><text :class='`iconfont icon-${param.name}`' :style="{ fontSize: param.size + 'rpx' , color: param.color , fontWeight : param.blod ? '400' : 'bloder' }" ></text></view>
</template><script lang="ts" setup>import { onBeforeMount, ref } from "vue";interface Prop {name: string;size?: number;color? : string;blod?: false;}const param = withDefaults(defineProps<Prop>(),{size: 38});</script><style lang="scss" scoped>
</style>
3.缓存工具
这里扩展了一个记录历史查看我
export function setCache(key : string, value : any ) {uni.setStorageSync(key,value);
}export function getCache(key : string) : any | null {return uni.getStorageSync(key);
}export function removeCache(key : string) {return uni.removeStorageSync(key);
}interface Record {time: number;key: any;
}export function saveHistory(key : string,val : any) {let localHistory : Array<Record> = getCache(key);if(!localHistory) { localHistory = [] }if(localHistory.some(item => item.key == val)) { return }localHistory.unshift({time: new Date().getTime(),key: val});setCache(key,localHistory);
}export function removeHistory(key : string,val : any) : number {let row : number = 0;let localHistory : Array<Record> = getCache(key);if(!localHistory) { localHistory = [] }row = localHistory.length;localHistory = localHistory.filter(item => {if (item.key === val) {row++;return false;}return true;});setCache(key,localHistory);return row - localHistory.length;
}
4.公共工具类
获取位置、计算元素剩余搞定 , 页面跳转
import { getCurrentInstance } from "vue";/*** 根据类型跳转页面并传递数据* * @param type - 跳转类型:* - 0: 使用 `uni.navigateTo` 跳转,保留当前页面,跳转到新页面* - 1: 使用 `uni.switchTab` 跳转,切换到指定 tabBar 页面* @param url - 目标页面的路径* @param key ? - 事件通道中传递数据的键名* @param data ? - 通过事件通道传递的数据*/
export function skipPage(type : number,url : string,key ? : string , data ? : any) {switch (type){case 0:uni.navigateTo({url,success(res) {res.eventChannel.emit(key,data);} })break;case 1:uni.switchTab({url,success(res) {res.eventChannel.emit(key,data);} })break;default:console.log('接入中!');break;}
}export async function getPageResidueDIST(nodeKey: string) : Promise<number> {const query = uni.createSelectorQuery().in(getCurrentInstance());let systemInfo = await uni.getSystemInfo();let nodeToTop : number = await new Promise((ok, _) => {query.select(nodeKey).boundingClientRect((data: any) => {ok(data.top);}).exec();});return systemInfo.windowHeight - nodeToTop;
}export async function getSystemInfo() {return await uni.getSystemInfo();
}export async function getMenuButton() {// #ifndef APP || H5return uni.getMenuButtonBoundingClientRect();// #endifreturn { width: 0 }
}export async function getElementHight(nodeKey: string) : Promise<number> {const query = uni.createSelectorQuery().in(getCurrentInstance());let nodeToTop : number = await new Promise((ok, _) => {query.select(nodeKey).boundingClientRect((data: any) => {ok(data.height);}).exec();});return nodeToTop;
}interface Point {latitude: number;longitude: number;
}export async function initLocation() : Promise<any> {return await uni.getLocation({type: 'wgs84',geocode:true});
}export async function getAddress() : Promise<any> {return new Promise(( ok ) =>{uni.chooseLocation({success: function (res) {ok({code: 200,address: res.address,latitude: res.latitude,longitude: res.longitude,name: res.name})},fail() {ok({code: 201})} });})
}
5.网络请求类
import { env } from "@/env"export default function() {interface AskModel {url: string,data?: anymethod?: 'OPTIONS' | 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'TRACE' | 'CONNECT'}interface ApiRes<T> {code: number;msg: string;data: T;}async function orderMealAsk<T>( option : AskModel ) : Promise<ApiRes<T>> {return new Promise(( resolve, reject ) => {uni.request({url: env.orderMealReq + option.url, data: option.data || {},method: option.method || 'GET',header: {'content-type':'application/json' },success: (res) => {resolve(res.data as ApiRes<T>);},fail(res) {reject(res);}});})}return { orderMealAsk }
}
相关文章:
uniapp的通用页面及组件基本封装
1.基本布局页面 适用于自定义Navbar头部 <template><view class"bar" :style"{height : systemInfo.statusBarHeight px, background: param.barBgColor }"></view><view class"headBox" :style"{ height: param.h…...
Ubuntu和Debian 操作系统的同与异
首先需要说明:Ubuntu 是基于 Debian 操作系统开发的。它们之间的关系如下 起源与发展:Debian 是一个社区驱动的开源 Linux 发行版,始于 1993 年,是最早的 Linux 发行版之一,以其稳定性和自由软件政策著称。Ubuntu 是基…...
【android bluetooth 协议分析 21】【ble 介绍 1】【什么是RPA】
通俗易懂地讲解一下 BLE(低功耗蓝牙)中的 Resolvable Private Address(RPA,可解析私有地址)。 1. 一句话理解 RPA 是一种“临时的、隐私保护的蓝牙设备地址”,别人无法随便追踪你,但“授权的设…...
狂神SQL学习笔记九:MyISAM 和 lnnoDB 区别
show create database school –查看创建数据库的语句 show create table student – 查看student数据表的定义语句 desc student –显示表的结构 MYISAMINNODB事务支持不支持支持数据行锁定不支持支持行锁定外键不支持支持全文索引支持不支持表空间的大小较小较大&#x…...
深度学习--神经网络的构造
在当今数字化时代,深度学习已然成为人工智能领域中最为耀眼的明星。而神经网络作为深度学习的核心架构,其构造方式决定了模型的性能与应用效果。本文将深入探讨深度学习神经网络的构造,带您领略这一前沿技术的奥秘。 一、神经网络基础概念…...
Jenkins 代理自动化-dotnet程序
两种方式 容器部署 本地部署 容器部署 可自动实现,服务器重启,容器自动运行 主要将dockerfile 写好 本地部署 1.服务器重启自动运行代理 参考下面的链接,只是把程序换成 java程序,提前确认好需要的jdk版本 Ubuntu20.04 设置开机…...
【区块链+ 人才服务】“CERX Network”——基于 FISCO BCOS 的研学资源交换网络 | FISCO BCOS 应用案例
CERX Network (Consortium-based Education Resource Exchanging Network) 是定位于面向高校科学研究与教学 的分布式研学资产交换网络, 构建一个用于数据、 算法模型、 论文和课程的研学资源价值流转平台。项目以 FISCO BCOS 联盟链为底层平…...
中间件--ClickHouse-6--SQL基础(类似Mysql,存在差异)
ClickHouse语言类似Mysql,如果熟悉Mysql,那么学习ClickHouse的语言还是比较容易上手的。 1、建表语法(CREATE TABLE) (1)、表引擎(Engine) MySQL: 默认使用 InnoDB 引…...
[MSPM0开发]MSPM0G3507番外一:关于使用外部高速晶振HFXT后程序可能不运行的问题
一、问题描述 如下图所示,MSPM0G3507时钟树配置为使用外部HFXT(外部高速晶振)作为HSCLK时钟源。 配置结果MCLK 40MHz。 另外配置PB22为输出模式,控制外部LED亮灭。 在main.c中主要代码如下: 主要完成延时并翻转LED控…...
2025年计算机领域重大技术突破与行业动态综述
——前沿技术重塑未来,开发者如何把握机遇? 2025年第一季度,全球计算机领域迎来多项里程碑式进展,从量子计算到人工智能,从芯片设计到网络安全,技术革新与产业融合持续加速。本文梳理近三个月内最具影响力…...
我的机器学习之路(初稿)
文章目录 一、机器学习定义二、核心三要素三、算法类型详解1. 监督学习(带标签数据)2. 无监督学习(无标签数据)3. 强化学习(决策优化)(我之后主攻的方向) 四、典型应用场景五、学习路线图六、常见误区警示七…...
交易模式革新:Eagle Trader APP上线,助力自营交易考试效率提升
近年来,金融行业随着投资者需求的日益多样化,衍生出了众多不同的交易方式。例如,为了帮助新手小白建立交易基础,诞生了各类跟单社区;而与此同时,一种备受瞩目的交易方式 —— 自营交易模式,正吸…...
emotn ui桌面tv版官网-emotn ui桌面使用教程
在智能电视和盒子的使用中,出色的桌面系统能大幅提升体验,Emotn UI桌面TV版便是其中的佼佼者。 访问Emotn UI桌面TV版官网,首页简洁清晰,“产品介绍”“下载中心”等板块一目了然。官网对其功能优势详细阐述,在“下载中…...
Django之modelform使用
Django新增修改数据功能优化 目录 1.新增数据功能优化 2.修改数据功能优化 在我们做数据优化处理之前, 我们先回顾下传统的写法, 是如何实现增加修改的。 我们需要在templates里面新建前端的页面, 需要有新增还要删除, 比如说员工数据的新增, 那需要有很多个输入框, 那html…...
Hadoop:大数据时代的基石
在当今数字化浪潮中,数据量呈爆炸式增长,企业和组织面临着前所未有的数据处理挑战。从社交媒体的海量信息到物联网设备的实时数据,如何高效地存储、管理和分析这些数据成为了一个关键问题。Apache Hadoop 作为大数据处理领域的核心框架&#…...
定制开发还是源码搭建?如何快速上线同城外卖跑腿APP?
在“万物皆可同城配送”的时代,同城外卖跑腿APP成为众多创业者和本地服务商的热门选择。无论是打造本地生活服务平台,还是拓展快送业务,拥有一款功能完善、体验流畅的外卖跑腿APP,已经成为进入市场的标配。 然而,对于…...
How AI could empower any business - Andrew Ng
How AI could empower any business - Andrew Ng References 人工智能如何为任何业务提供支持 empower /ɪmˈpaʊə(r)/ vt. 授权;给 (某人) ...的权力;使控制局势;增加 (某人的) 自主权When I think about the rise of AI, I’m reminded …...
SpringBoot-基础特性
1.SpringApplication 1.1.自定义banner 类路径添加banner.txt或设置spring.banner.location就可以定制 banner 1.2.自定义 SpringApplication import org.springframework.boot.Banner; import org.springframework.boot.SpringApplication; import org.springframework.bo…...
系统环境变量有什么实际作用,为什么要配置它
系统环境变量有什么实际作用,为什么要配置它 系统环境变量具有以下重要实际作用: 指定程序路径:操作系统通过环境变量来知晓可执行文件、库文件等的存储位置例如,当你在命令提示符或终端中输入一个命令时,系统会根据环境变量PATH中指定的路径去查找对应的可执行文件。如果…...
C++ | STL之list详解:双向链表的灵活操作与高效实践
引言 std::list 是C STL中基于双向链表实现的顺序容器,擅长高效插入和删除操作,尤其适用于频繁修改中间元素的场景。与std::vector不同,std::list的内存非连续,但提供了稳定的迭代器和灵活的元素管理。本文将全面解析std::list的…...
Spring Cloud 服务间调用深度解析
前言 在构建微服务架构时,服务间的高效通信是至关重要的。Spring Cloud 提供了一套完整的解决方案来实现服务间的调用、负载均衡、服务发现等功能。本文将深入探讨 Spring Cloud 中服务之间的调用机制,并通过源码片段和 Mermaid 图表帮助读者更好地理解…...
什么是时间复杂度和空间复杂度?
什么是时间复杂度和空间复杂度? 时间复杂度:衡量代码运行时间随输入规模增大而增长的速度。简单来说,就是“代码跑多快”。 空间复杂度:衡量代码运行时额外占用的内存空间随输入规模增大而增长的速度。简单来说,就是“代码用多少内存”。 我们通常用 大 O 表示法(Big O N…...
算法思想之分治-快排
欢迎拜访:雾里看山-CSDN博客 本篇主题:算法思想之分治-快排 发布时间:2025.4.15 隶属专栏:算法 目录 算法介绍核心步骤优化策略 例题颜色分类题目链接题目描述算法思路代码实现 排序数组题目链接题目描述算法思路代码实现 数组中的…...
25.4.15学习总结
问题: 邮箱验证码通过公钥加密后发到前端,在前端用私钥解密验证可行吗? 结论: 在前端使用私钥解密通过公钥加密的邮箱验证码在技术上是可行的,但存在严重的安全风险,不建议采用。 问题分析 非对称加密的…...
小程序获取用户总结(全)
获取方式 目前小程序获取用户一共有3中(自己接触到的),但由于这个API一直在改,所以不确定后期是否有变动,还是要多关注官方公告。 方式一 使用wx.getUserInfo 实例: wxml 文件<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo&quo…...
如何成为一名嵌入式软件工程师?
如何成为一名嵌入式软件工程师? 01明确岗位的角色与定位 嵌入式软件工程师主要负责开发运行在特定硬件平台上的软件,这些软件通常与硬件紧密集成,以实现特定的功能。 不仅需要精通编程语言(如C/C、Java等)和软件开发工…...
机器人发展未来两年会有突破吗?
未来两年,机器人技术将在芯片、编码器、材料、加工工艺和AI等核心领域迎来系统性突破,推动行业从专用化向通用化转型。以下从技术路径、产业动态和商业化前景三个维度展开分析,结合权威数据与技术趋势,构建机器人技术演进的全景框架。 一、芯片技术:3nm制程与存算一体架构…...
【grafana原生告警中心配置飞书机器人告警】
在grafana中的connect point中使用webhook的方式推送到飞书,始终无法触发告警,原因是grafana推送的格式飞书不识别,现有两种方式 1.使用中转服务 使用flask搭建一个服务,grafana告警先通过webhook发送到web服务中,格…...
HTTP HTTPS RSA
推荐阅读 小林coding HTTP篇 文章目录 HTTP 80HTTP 响应码1xx:信息性状态码(Informational)2xx:成功状态码(Success)3xx:重定向状态码(Redirection)4xx:客户端…...
【机器学习】如何正确下载sklearn包
TOC 直接pip install sklearn时,报错 sklearn的包,实际上叫scikit-learn pip install scikit-learn发现成功了: 总结 下载sklearn包的语句:pip install scikit-learn 完成。...
【Python进阶】断言(assert)的十大核心应用场景解析
目录 前言:技术背景与价值当前技术痛点解决方案概述目标读者说明 一、技术原理剖析核心概念图解核心作用讲解关键技术模块技术选型对比 二、实战演示环境配置要求核心代码实现(10个案例)案例1:参数合法性检查案例2:不变…...
关于汽车辅助驾驶不同等级、技术对比、传感器差异及未来发展方向的详细分析
以下是关于汽车辅助驾驶不同等级、技术对比、传感器差异及未来发展方向的详细分析: 一、汽车辅助驾驶等级详解 根据SAE(国际自动机工程师学会)的标准,自动驾驶分为 L0到L5 六个等级: 1. L0(无自动化&…...
STM32 HAL库之WDG示例代码
独立看门狗(IWDG) 初始化独立看门狗,在main.c中的 MX_IWDG_Init();,也就是iwdg.c中的初始化代码 void MX_IWDG_Init(void) {/* USER CODE BEGIN IWDG_Init 0 *//* USER CODE END IWDG_Init 0 *//* USER CODE BEGIN IWDG_Init 1 …...
【差分隐私相关概念】瑞丽差分隐私(RDP)命题10
命题10证明中的最后一个不等号成立,关键在于将事件 A A A上的积分与Rnyi散度 D α ( P ∥ Q ) D_\alpha(P \parallel Q) Dα(P∥Q)的定义联系起来,并通过积分放缩得到上界。具体推导如下: Rnyi散度的定义: D α ( P ∥ Q ) 1 …...
Android 开发 如何生成系统签名
在源码中拿到安全文件 文件路径 lagvm/LINUX/android/build/target/product/security如下两个文件 platform.pk8 platform.x509.pem 使用Android studio生成一个jks Android studio 顶部 buildGenerate Signed Bundle or APKapkcrate new记住 记住alias 和password linux下…...
(EtherCAT 转 EtherNet/IP)EtherCAT/Ethernet/IP/Profinet/ModbusTCP协议互转工业串口网关
型号 协议转换通信网关 EtherCAT 转 EtherNet/IP MS-GW12 概述 MS-GW12 是 EtherCAT 和 EtherNet/IP 协议转换网关,为用户提供两种不同通讯协议的 PLC 进行数据交互的解决方案,可以轻松容易将 EtherNet/IP 网络接入 EtherCAT 网络中,方便…...
适合stm32 前端adc使用的放大器芯片
在 STM32 前端 ADC 应用中,合适的放大器芯片需具备低噪声、高精度、低失调电压等特性。以下为你推荐几款常用的放大器芯片: 低功耗、高精度型 OPA2333 特点:这是一款微功耗、零漂移运算放大器,失调电压极低,仅为 2.5…...
《Ethical Implications of ChatGPT in Higher Education: A Scoping Review》全文翻译
《Ethical Implications of ChatGPT in Higher Education: A Scoping Review》 ChatGPT在高等教育中的伦理影响:一项范围界定性综述 摘要 本范围界定性综述探讨了在高等教育中使用ChatGPT所引发的伦理挑战。通过回顾近期发表的英文、中文和日文的学术文章&#x…...
day26 学习笔记
文章目录 前言一、边缘填充1.边界复制2.边界反射3.边界常数4.边界包裹5.代码示例 二、透视变换三、颜色加法 前言 通过今天的学习,我掌握了OpenCV中有关边缘填充,透视变换以及颜色加法的相关概念和操作 一、边缘填充 当我们对图像进行仿射变换后往往会发…...
LVGL Animation Image(Animimg)控件详解
一、Animation Image(Animimg)控件详解 1. 概述 功能:Animimg 是 LVGL 中用于显示动画图像的控件。特点:支持从多个静态图像创建动画效果。 2. 创建和初始化 创建方法:lv_obj_t * lv_animimg_create(lv_obj_t * pa…...
【unity游戏开发入门到精通——UGUI】GraphicRaycaster图形射线投射器组件
注意:考虑到UGUI的内容比较多,我将UGUI的内容分开,并全部整合放在【unity游戏开发——UGUI】专栏里,感兴趣的小伙伴可以前往逐一查看学习。 文章目录 前言Graphic Raycaster参数1、Ignore Reversed Graphics:是否忽略反…...
WPF GDI 画 晶圆Mapping图
效果图 UI代码 <Window x:Class="WpfWaferMapping.Window3"xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d="http://schemas.microsoft.com/expre…...
AI核心概念之“提示(Prompt)” - 来自DeepSeek
1. 表层理解:Prompt 是用户输入的文本指令 直观表现: 对于普通用户,Prompt 是输入到对话框的文本(例如 ChatGPT 中的问题:“写一首关于秋天的诗”),点击发送后,模型返回结果。 常见…...
Golang|Kafka在秒杀场景中的应用
我们的程序在面对 kill -9 这样的指令的时候会直接退出,不能保证数据持久化到mysql完后再退出而且我们现在的并发量仍然不够,只能加机器,多机器并发写mysql可能导致mysql扛不住,mysql写的并发量不能根据我们机器的数量的增长而增长…...
【前端基础】--- HTML
个人主页 : 9ilk 专栏 : 前端基础 文章目录 🏠 初识HTML🏠 HTML结构认识HTML标签HTML文件基本结构标签层次结构快速生成代码框架 🏠 HTML常见标签注释标签标题标签 h1-h6段落标签 p换行标签 br格式化标签图片标签 img超链接标签…...
各证券公司QMT的本地VSCode开发环境配置指南
各证券公司QMT变种的本地开发环境配置指南 各大证券公司的量化交易平台(如兴业证券的SMT-Q)基本都是基于QMT开发的变种系统,它们的底层架构相似,但在接口和功能上可能有所差异。下面介绍如何使用本地Python、Anaconda和VSCode搭建…...
注意力机制的改进
Transformer架构中的注意力机制优化是提升模型效率和扩展处理长序列能力的关键。以下从多个维度详细解析注意力机制的优化方法: arXIv论文链接 1. 稀疏注意力(Sparse Attention) 通过限制每个位置仅关注特定区域,减少计算量&am…...
Golang|select
文章目录 多路监听超时控制 多路监听 如果selcet外面没有for循环,则只会监听一次,要实现一直监听的话要加for循环但是如果要设置退出条件的话,break语句只会退出这个select而不会退出for循环 select也可以有default,用于不用等cha…...
网络安全与信息安全的区别及共通
在数字化时代,网络安全与信息安全已成为保障个人、企业乃至国家正常运转的重要防线。尽管二者紧密相关且常被混为一谈,但实则存在显著差异。当然,它们也有一些相同点,比如都以保障数字环境下的安全为核心目标,均需要通…...
【刷题2025】知识点梳理
1.常用操作 二进制异或 ans = a ^ b 向上取整 math.ceil(a/b) 向下取整 math.floor(a/b) 每次取最低字节:一个字节八位 while a > 0:aSum += a & 0xff # 累加最低字节的大小a >>= 8 # 一个字节八位, a右移八位, 将最低字节移除 正则匹配 # 编译正则表达式…...