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

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

news 2025/7/10 15:22:17

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

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

编程新知 2025/7/8 19:20:28

TDengine 快速体验（Docker 镜像方式）

简介 TDengine 可以通过安装包、Docker 镜像 及云服务快速体验 TDengine 的功能&#xff0c;本节首先介绍如何通过 Docker 快速体验 TDengine&#xff0c;然后介绍如何在 Docker 环境下体验 TDengine 的写入和查询功能。如果你不熟悉 Docker&#xff0c;请使用 安装包的方式快…...

编程新知 2025/7/9 3:18:12

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2025/7/10 15:13:26

WEB3全栈开发——面试专业技能点P2智能合约开发（Solidity）

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

编程新知 2025/6/21 12:34:41

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

编程新知 2025/7/7 22:04:10

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/7/10 3:33:32

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/7/5 8:54:59

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的“no matching...“系列算法协商失败问题

【SSH疑难排查】轻松解决新版OpenSSH连接旧服务器的"no matching..."系列算法协商失败问题 摘要&#xff1a; 近期&#xff0c;在使用较新版本的OpenSSH客户端连接老旧SSH服务器时&#xff0c;会遇到 "no matching key exchange method found"​, "n…...

编程新知 2025/6/15 18:10:15

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/7/6 1:26:33

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2025/7/7 20:51:12