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

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

news 2025/7/10 12:59:21

零基础入门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

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/7/6 20:47:25

新能源汽车智慧充电桩管理方案：新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

编程新知 2025/7/8 8:35:19

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/7/9 10:50:46

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2025/7/7 20:06:50

Linux --进程控制

本文从以下五个方面来初步认识进程控制&#xff1a; 目录 进程创建 进程终止 进程等待 进程替换 模拟实现一个微型shell 进程创建 在Linux系统中我们可以在一个进程使用系统调用fork()来创建子进程&#xff0c;创建出来的进程就是子进程&#xff0c;原来的进程为父进程。…...

编程新知 2025/7/7 7:10:35

rknn toolkit2搭建和推理

安装Miniconda Miniconda - Anaconda Miniconda 选择一个 新的 版本 &#xff0c;不用和RKNN的python版本保持一致 使用 ./xxx.sh进行安装 下面配置一下载源 # 清华大学源&#xff08;最常用&#xff09; conda config --add channels https://mirrors.tuna.tsinghua.edu.cn…...

编程新知 2025/7/9 10:56:38

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...

编程新知 2025/7/7 14:36:50

ubuntu中安装conda的后遗症

缘由: 在编译rk3588的sdk时&#xff0c;遇到编译buildroot失败&#xff0c;提示如下&#xff1a; 提示缺失expect&#xff0c;但是实测相关工具是在的&#xff0c;如下显示&#xff1a; 然后查找借助各个ai工具&#xff0c;重新安装相关的工具&#xff0c;依然无解。 解决&am…...

编程新知 2025/7/9 5:05:42

未授权访问事件频发，我们应当如何应对？

在当下&#xff0c;数据已成为企业和组织的核心资产&#xff0c;是推动业务发展、决策制定以及创新的关键驱动力。然而&#xff0c;未授权访问这一隐匿的安全威胁&#xff0c;正如同高悬的达摩克利斯之剑&#xff0c;时刻威胁着数据的安全&#xff0c;一旦触发&#xff0c;便可…...

编程新知 2025/7/9 2:50:26

【大厂机试题解法笔记】矩阵匹配

题目 从一个 N * M&#xff08;N ≤ M&#xff09;的矩阵中选出 N 个数&#xff0c;任意两个数字不能在同一行或同一列&#xff0c;求选出来的 N 个数中第 K 大的数字的最小值是多少。 输入描述 输入矩阵要求&#xff1a;1 ≤ K ≤ N ≤ M ≤ 150 输入格式 N M K N*M矩阵 输…...

编程新知 2025/7/6 3:29:37