当前位置： 首页 > news >正文

uniapp学习（005-2 详解Part.2）

news 2026/3/31 12:13:56

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等

总时长 23:40:00 共116P

此文章包含第41p-第p47的内容

文章目录

    • mainifest.json文件配置
      • 获取微信小程序appid
      • 注册微信小程序
      • 微信小程序控制台
      • 图形界面和源码界面可以相互影响
    • vue.config.js和vite.config.js
      • 实现vue模块的自动导入
    • 弹窗API
      • showToast 消息提示框
        • 字多的时候 小程序需要把icon设置成none才可以自动换行，否则最多7个字
        • 可以自定义图标
        • mask为true的时候 会阻止其他操作 等提示框消失后才可以操作
        • 可以设置成功、失败、无论成败后都会调用的方法
        • 可以快速隐藏
        • 跳转tabBar页面
      • showLoading 加载框
      • showModal m模态提示框
        • 颜色样式文字
        • 可以打开输入框 可以用于输入验证码等信息
      • showActionSheet底部弹出菜单
      • setNavigationBarTitle 动态设置当前页面标题
      • hideHomeButton 隐藏返回首页按钮
      • setTabBarBadge 设置tabBar角标
      • removeTabBarBadge 删除tabBar的角标
      • showTabBarRedDot 设置tabBar红点
      • hideTabBarRedDot 隐藏tabBar红点
      • onPullDownRefresh下拉刷新处理函数

mainifest.json文件配置

在这里插入图片描述

在这里插入图片描述

获取微信小程序appid

在微信小程序里需要设置appid才可以使用预览和真机调试等功能
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

这个appid需要去微信公众平台进行获取
在这里插入图片描述
在这里插入图片描述

注册微信小程序

个人和企业都可以进行注册
在这里插入图片描述
ps:邮箱如果注册过公众号是无法注册小程序的 需要换一个（同一个邮箱取别名可以再次注册）
在这里插入图片描述

微信小程序控制台

注册完成后

在这里插入图片描述

在这里插入图片描述
可以添加成员 添加后 这个人可以使用这个appid
在这里插入图片描述

这里勾选 使用代码压缩，因为小程序最多不能超过2MB

在这里插入图片描述

在这里插入图片描述

图形界面和源码界面可以相互影响

在这里插入图片描述

在这里插入图片描述

vue.config.js和vite.config.js

在这里插入图片描述
这里我们使用vue3 所以我们使用vite.config.js
(vite编译速度比webpack要快。webpack让项目完整编译后才运行。vite运行那个页面，就编译那个页面。vite类似路由里面的懒加载)
在这里插入图片描述
在这里插入图片描述

使用vite.config.js 可以同一管理 vue的组件和uniapp的组件，每个页面引入的这个删掉进行同一管理
在这里插入图片描述

实现vue模块的自动导入

引用链接:
开发uniapp使用Vue3组合式API版本，如何实现从vue模块中自动导入
在这里插入图片描述
在这里插入图片描述

如果没安装过nodejs 需要下载并安装nodejs才可以使用npm命令
在这里插入图片描述
安装完以后运行命令
使用命令行窗口打开目录
在这里插入图片描述

在这里插入图片描述
多出一个文件夹
在这里插入图片描述

创建一个新文件vite.config.js
在这里插入图片描述

在这里插入图片描述

自动导入模块AutoImport（个人不建议使用这个插件。还是在页面里引用import比较好）
在这里插入图片描述

命令npm i 可以自动导入需要的一些包

弹窗API

在这里插入图片描述

showToast 消息提示框

加粗样式
在这里插入图片描述
效果
在这里插入图片描述

加粗样式

在这里插入图片描述

在这里插入图片描述

字多的时候 小程序需要把icon设置成none才可以自动换行，否则最多7个字

在这里插入图片描述

可以自定义图标

在这里插入图片描述

在这里插入图片描述

mask为true的时候 会阻止其他操作 等提示框消失后才可以操作

在这里插入图片描述

可以设置成功、失败、无论成败后都会调用的方法

在这里插入图片描述

在这里插入图片描述

可以快速隐藏

在这里插入图片描述

跳转tabBar页面

不可以直接使用navigateTo
在这里插入图片描述

可以使用reLaunch跳转
在这里插入图片描述
在这里插入图片描述

showLoading 加载框

在这里插入图片描述
加载中的时候 不可以操作后面的东西 所以mask为true
在这里插入图片描述

在这里插入图片描述

隐藏loading
在这里插入图片描述
失败的时候 在请求那里也可以设置隐藏
在这里插入图片描述

showModal m模态提示框

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

颜色样式文字

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

可以打开输入框 可以用于输入验证码等信息

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

showActionSheet底部弹出菜单

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

点击效果 返回的是索引值
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

setNavigationBarTitle 动态设置当前页面标题

在这里插入图片描述
页面切换的时候 标题也是变化的
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
可以在标题旁边添加loading 和隐藏loading
在这里插入图片描述

hideHomeButton 隐藏返回首页按钮

仅微信小程序和京东小程序支持
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

setTabBarBadge 设置tabBar角标

在这里插入图片描述
在App.vue的onLaunch里设置，这样是全局都可以看到
在这里插入图片描述

在这里插入图片描述

removeTabBarBadge 删除tabBar的角标

在这里插入图片描述

showTabBarRedDot 设置tabBar红点

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

hideTabBarRedDot 隐藏tabBar红点

在这里插入图片描述

onPullDownRefresh下拉刷新处理函数

在这里插入图片描述

在这里插入图片描述
startPullDownTefresh
在这里插入图片描述

关闭下拉刷新
在这里插入图片描述

相关文章：

uniapp学习（005-2 详解Part.2）

零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第41p-第p47的内容 文章目录 mainifest.json文件配置获取微信小程序appid注册微信小程序微信小程序控制台图形界…...

编程日记 2024/10/16 5:32:07

深度学习的关键概念和术语

特征 特征是图像上可进行视觉辨识的区域。特征通常代表对应用相关的内容（缺陷、对象、对象的特定部分）。 特征尺寸 仅用于聚焦模式下的绿色分类、红色、蓝色定位和蓝色读取工具。 您认为对分析图像内容最重要的图像特征的主观大小。该特征尺寸确定用于…...

编程日记 2024/10/16 5:31:04

navicate可视化数据库操作-cnblog

1 连接数据库 点击链接，自定义名称，输入root密码 2 准备按照图例创建数据库demo 3 新建数据库...

编程日记 2024/10/16 5:28:01

kubernetes中的微服务

目录 一 什么是微服务 二 微服务的类型 三 ipvs模式 3.1 ipvs模式配置方式 四 微服务类型详解 4.1 clusterip 4.2 ClusterIP中的特殊模式headless 4.3 nodeport 4.4 loadbalancer 4.5 metalLB 4.6 externalname 五 Ingress-nginx 5.1 ingress-nginx功能 5.2 部署…...

编程日记 2024/10/16 5:27:00

Python 量子机器学习及其应用

Python 量子机器学习及其应用 目录 🌀 量子机器学习的基础概念💡 量子计算的原理与经典计算的区别🔑 量子算法在机器学习中的应用潜力⚛️ 量子计算与经典机器学习算法的结合🚀 案例展示：量子算法提升机器学习效率&a…...

编程日记 2024/10/16 5:25:58

echarts显示隐藏柱状图柱子的背景色

showBackground: true, //控制是否显示背景色backgroundStyle: {// color: rgba(180, 180, 180, 0.4) //背景色的颜色color: red} 关键代码是 showBackground: true, //控制是否显示背景色 设置为false或者直接而不写就是不显示背景色，默认是不显示背景色 true的时…...

编程日记 2024/10/16 5:23:55

QT文件操作【记事本】

mainwindow.h核心函数 QFileDialog::getOpenFileName()QFileDialog::getSaveFileName() #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include<QFileDialog> #include<QMessageBox> #include<QDebug> #include<QFile> #…...

编程日记 2024/10/16 5:22:54

Linux 定时备份系统日志

Linux 定时备份系统日志 SSH跨机免密登录复制备份到另一台虚机上开启定时任务 SSH跨机免密登录 定时备份首先要实现免登入 一、scp 一个文件从其他服务器到本机&#xff0c;怎么跳过ssh登录验证呢&#xff1f; 要在使用SCP时跳过密码登录&#xff0c;你可以设置SSH密钥认证。首…...

编程日记 2024/10/16 5:21:53

音视频入门基础：FLV专题（15）——Video Tag简介

一、引言 根据《video_file_format_spec_v10_1.pdf》第75页&#xff0c;如果某个Tag的Tag header中的TagType值为9&#xff0c;表示该Tag为Video Tag&#xff1a; 这时StreamID之后紧接着的就是VideoTagHeader&#xff0c;也就是说这时Tag header之后的就是VideoTagHeader&…...

编程日记 2024/10/16 5:19:51

尚硅谷rabbitmq2024 第15-18节 springboot整合与可靠性答疑

在spring boot项目中&#xff0c;只引入了一个amqp的starter&#xff0c;为什么在写listener的时候能看到rabbitmq相关的类&#xff0c;比如RabbitListener( public void processMessage(String dataString, Message message, channel channel){ 这里的Message就是rabbitmq下面…...

编程日记 2024/10/16 5:18:50

ctfshow-web 萌新题

给她 pyload: 1.dirsearch扫描&#xff0c;发现git 2. GitHack工具得到.git文件 <?php $passsprintf("and pass%s",addslashes($_GET[pass])); $sqlsprintf("select * from user where name%s $pass",addslashes($_GET[name])); ?>addslashes函…...

编程日记 2024/10/16 5:17:49

基于RPA+AI的网页自动填写机器人 | OPENAIGC开发者大赛高校组优秀作品

在第二届拯救者杯OPENAIGC开发者大赛中&#xff0c;涌现出一批技术突出、创意卓越的作品。为了让这些优秀项目被更多人看到&#xff0c;我们特意开设了优秀作品报道专栏&#xff0c;旨在展示其独特之处和开发者的精彩故事。 无论您是技术专家还是爱好者&#xff0c;希望能带给…...

编程日记 2024/10/16 5:14:46

Tmux常用操作--云GPU版

Tmux是什么&#xff0c;作用&#xff1f; Tmux是一个终端复用器&#xff08;terminal multiplexer&#xff09;&#xff0c;属于常用的开发工具。 作用 使用Tmux创建守护进程&#xff0c;可以使得关闭PyCharm或者其他终端的情况下&#xff0c;远程服务器&#xff08;云GPU&a…...

编程日记 2024/10/16 5:13:45

股市入门常见术语介绍

鉴于最近行情讨论火热&#xff0c;我也想借此平台&#xff0c;结合我大学时期身边同学老师的投资经历&#xff0c;写一篇交易入门术语简介。内容不多但是足以达到科普之用。 ​ 希望大家能谨慎对待投资&#xff0c;始终保持谦虚学习的态度。不要迷失在瞬息万变的金融市场&…...

编程日记 2024/10/16 5:11:43

专栏十九：单细胞大数据时代使用scvi和scanpy整合数据

慢更ing，主要是记录自己在分析中的一些困惑 一、基础知识和解惑 放在最前面，是因为scvi整合不像harmony，傻瓜式操作，很多地方还是要注意一下的。 1.如何正确的寻找HVGs 一般我们使用的函数就是scanpy.pp.highly_variable_genes，里面的参数较为复杂。 Q：输入数据的格…...

编程日记 2024/10/16 5:10:42

C语言编程必备知识

C语言是编程领域中基础且广泛使用的语言之一&#xff0c;掌握C语言编程需要一些核心知识&#xff0c;涵盖基本语法、内存管理、数据结构等方面。以下是C语言编程中的一些必备知识点&#xff1a; 1. **基础语法** - **变量声明**&#xff1a;所有变量都需要在使用前声明&…...

编程日记 2024/10/16 5:09:41

k8s 1.28 集群部署

文章目录 环境配置安装docker安装cri-dockerd(Docker与Kubernetes通信的中间程序)&#xff1a; 部署kubernetes 环境配置 关闭Selinux #永久 sed -i s/enforcing/disabled/ /etc/selinux/config #临时 setenforce 0 关闭Swap #临时 swapoff-a #永久 sed -ri s/.*swap.*/#&a…...

编程日记 2024/10/16 5:06:38

python入门教程

Python 是一种非常流行的编程语言&#xff0c;因其简单易学的语法和广泛的应用领域&#xff08;如数据分析、人工智能、Web 开发等&#xff09;而备受欢迎。以下是一个入门级 Python 教程&#xff0c;适合初学者快速掌握 Python 的基础知识。 1. 安装 Python 你可以从 Python…...

编程日记 2024/10/16 5:05:36

bat(批处理脚本学习)

输出banner echo off echo () echo JL echo ^|^| echo LJ echo _,--"""""""---. echo , …...

编程日记 2024/10/16 5:04:35

【JAVA毕业设计】基于Vue和SpringBoot的渔具租赁系统

本文项目编号 T 005 &#xff0c;文末自助获取源码 \color{red}{T005&#xff0c;文末自助获取源码} T005&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析 六、核心代码6.1 渔…...

编程日记 2024/10/16 5:03:34

5个核心功能让网盘用户彻底解决下载速度慢的问题

5个核心功能让网盘用户彻底解决下载速度慢的问题 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / 天翼云盘 / 迅雷云盘 …...

编程新知 2026/3/31 12:13:38

OneMore插件终极指南：160+功能免费解锁OneNote完整生产力

OneMore插件终极指南&#xff1a;160功能免费解锁OneNote完整生产力 【免费下载链接】OneMore A OneNote add-in with simple, yet powerful and useful features 项目地址: https://gitcode.com/gh_mirrors/on/OneMore OneMore是一款功能强大的OneNote免费开源插件&…...

编程新知 2026/3/31 11:45:20

bilibili-downloader完全指南：从入门到精通的4个关键步骤

bilibili-downloader完全指南&#xff1a;从入门到精通的4个关键步骤 【免费下载链接】bilibili-downloader B站视频下载&#xff0c;支持下载大会员清晰度4K&#xff0c;持续更新中 项目地址: https://gitcode.com/gh_mirrors/bil/bilibili-downloader 一、痛点分析&am…...

编程新知 2026/3/31 11:43:18

从NDVI到地表温度：用ENVI Band Math一次性搞定植被与热环境分析

ENVI波段运算实战&#xff1a;NDVI与地表温度的高效批量处理技巧 遥感影像分析中&#xff0c;植被指数和地表温度是最基础却又最关键的指标。传统操作流程往往需要反复切换不同工具模块&#xff0c;既耗时又容易出错。而ENVI的Band Math功能就像一把瑞士军刀&#xff0c;能将这…...

编程新知 2026/3/31 11:13:09

HelixDB部署与运维：从本地开发到生产环境的完整流程

HelixDB部署与运维&#xff1a;从本地开发到生产环境的完整流程 【免费下载链接】helix-db HelixDB is a powerful, graph-vector database built entirely in Rust for millisecond query latency and ease of use. 项目地址: https://gitcode.com/gh_mirrors/he/helix-db …...

编程新知 2026/3/31 10:55:03

Venera漫画阅读器：跨平台智能阅读的终极指南

Venera漫画阅读器&#xff1a;跨平台智能阅读的终极指南 【免费下载链接】venera A comic app 项目地址: https://gitcode.com/gh_mirrors/ve/venera 想要在Android、iOS、Windows、macOS和Linux上享受无缝的漫画阅读体验吗&#xff1f;Venera漫画阅读器正是您需要的终极…...

编程新知 2026/3/31 10:16:25

开源字体实用指南：Poppins字体家族的全方位应用策略

开源字体实用指南&#xff1a;Poppins字体家族的全方位应用策略 【免费下载链接】Poppins Poppins, a Devanagari Latin family for Google Fonts. 项目地址: https://gitcode.com/gh_mirrors/po/Poppins 价值定位&#xff1a;如何让开源字体成为项目的视觉资产&#x…...

编程新知 2026/3/31 9:16:00

PCIe金手指设计避坑指南：从硬件选型到PCB布局的5个关键细节

PCIe金手指设计避坑指南&#xff1a;从硬件选型到PCB布局的5个关键细节 在高速数字系统设计中&#xff0c;PCIe金手指接口的可靠性直接决定了扩展卡的识别成功率和数据传输稳定性。许多工程师在完成原理图设计和PCB布局后&#xff0c;常会遇到设备频繁识别失败、链路训练不通过…...

编程新知 2026/3/31 8:53:51

从零开始：使用VSCode + CMake + Ninja + GCC构建高效MCU开发环境

1. 为什么需要这套开发环境&#xff1f; 作为一名在嵌入式领域摸爬滚打多年的开发者&#xff0c;我深知传统IDE的痛点。记得刚入行时&#xff0c;公司清一色使用某商业IDE&#xff0c;直到某天收到法务部的紧急通知——需要立即处理软件版权问题。这让我意识到&#xff0c;基于…...

编程新知 2026/3/31 5:36:20

PyTorch内存优化实战：深入解析torch.utils.checkpoint的机制与应用

1. 为什么我们需要torch.utils.checkpoint&#xff1f; 第一次用PyTorch训练ResNet50时&#xff0c;我的16GB显存直接被撑爆了。当时怎么都想不明白——明明batch_size只设了32&#xff0c;怎么连这种经典模型都跑不动&#xff1f;后来才发现&#xff0c;问题出在前向传播时PyT…...

编程新知 2026/3/31 5:22:11