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

news2024/10/12 19:47:43

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

总时长 23:40:00 共116P

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

文章目录

    • 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下拉刷新处理函数
    • 页面和路由API
      • 1. 使用navigator标签跳转
      • 2. 使用js代码块进行跳转
        • tabBar页面无法直接跳转 需要改成 reLaunch
      • 返回上一页 navigateBack
    • 数据缓存API
      • setStorage 缓存数据到本地 setStorageSync 同步缓存数据到本地
      • getStorage 得到缓存数据到本地 getStorageSync 同步得到缓存数据到本地
        • getStorageInfoSync打印全部的storage的key
        • removeStorageSync 删除某个缓存
        • clearStorageSync清除所有缓存

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
在这里插入图片描述

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

页面和路由API

跳转的两种方式，

1. 使用navigator标签跳转

在这里插入图片描述

2. 使用js代码块进行跳转

在这里插入图片描述
可以带参数
在这里插入图片描述
可以看到小程序的参数
在这里插入图片描述
在这里插入图片描述
onLoad里可以看到参数
在这里插入图片描述

tabBar页面无法直接跳转 需要改成 reLaunch

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

返回上一页 navigateBack

在这里插入图片描述

可以看到当前返回了几页

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

这里可以看出我们打开了两个页面
一个压在另一个加粗样式
在这里插入图片描述

数据缓存API

setStorage 缓存数据到本地 setStorageSync 同步缓存数据到本地

在这里插入图片描述
这里的搜索记录就是前端的缓存
在这里插入图片描述
同步缓存 异步缓存

在这里插入图片描述

异步容易回调地狱，这里我们使用同步
在这里插入图片描述
使用同步

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

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

小程序里查看
在这里插入图片描述

getStorage 得到缓存数据到本地 getStorageSync 同步得到缓存数据到本地

在这里插入图片描述

getStorageInfoSync打印全部的storage的key

在这里插入图片描述

在这里插入图片描述

removeStorageSync 删除某个缓存

在这里插入图片描述

clearStorageSync清除所有缓存

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2208640.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux 命令：每日一学，文件查找之find命令实践

Linux 命令：每日一学，文件查找之find命令实践

[ 知识是人生的灯塔，只有不断学习，才能照亮前行的道路 ] 0x00 前言简述 描述：前面我们一些学习了Linux文件内容查看、分隔列、排序、统计等命令，相信认真学习实践过的看友都已经初步掌握了吧，今天我们继续学习下Linux中…
阅读更多...
本地生活服务项目入局方案解析！本地生活服务商系统能实现怎样的作业效果？

本地生活服务项目入局方案解析！本地生活服务商系统能实现怎样的作业效果？

当前，各大平台的本地生活服务业务日渐兴盛，提高创业者入局意向的同时，也让本地生活服务项目有哪些等问题也成为了多个创业者社群中的热议对象。而从目前的讨论情况来看，在创业者们所询问的众多本地生活服务项目中，通过…
阅读更多...
从二维到三维，电商行业有哪些变化？

从二维到三维，电商行业有哪些变化？

从二维到三维，电商行业经历了一系列显著的变化，这些变化不仅体现在商品展示的方式上，还深刻影响了消费者的购物体验、电商平台的运营策略以及整个电商行业的竞争格局。 一、商品展示方式的变革 二维展示阶段： 在电商行业的早期&…
阅读更多...
一键安装与配置Stable Diffusion，轻松实现AI绘画

一键安装与配置Stable Diffusion，轻松实现AI绘画

随着技术的迭代，目前 Stable Diffusion 已经能够生成非常艺术化的图片了，完全有赶超人类的架势，已经有不少工作被这类服务替代，比如制作一个 logo 图片，画一张虚拟老婆照片，画质堪比相机。 最新 Stable Di…
阅读更多...
kubernetes(K8s)学习（一）

kubernetes(K8s)学习（一）

本文主要是搭建一个k8s平台，并部署一个springboot的jar包，后续以此作为学习k8s的环境。 1. 搭建k8s集群 网上有很多指导，大家可以在网上搜索一下，比如这个：K8s搭建集群-CSDN博客，本人通过VMware安装3台虚拟…
阅读更多...
国外电商系统开发-运维系统操作脚本

国外电商系统开发-运维系统操作脚本

查看脚本内容，只需要点击即可： 执行脚本，请点击 点击了下一步后，可以输出脚本参数，当然你可以可以不输入，直接下一步就行： 现在，点击【下一步】执行开始出初始化脚本： …
阅读更多...
【力扣刷题实战】(归并排序)合并两个有序数组

【力扣刷题实战】(归并排序)合并两个有序数组

大家好，我是小卡皮巴拉 文章目录 目录 力扣题目： 合并两个有序数组 题目描述 示例 1： 示例 2： 示例 3： 解题思路 具体思路 题目要点 作图助解 完整代码（C语言） 兄弟们共勉 &#…
阅读更多...
Linux多任务编程（网络编程-数据库篇）

Linux多任务编程（网络编程-数据库篇）

前言 本文记录嵌入式领域用的小型数据库 sqlite数据库，以及c语言中使用sqlite3。 数据库 数据存储方式（3种） （1）直接地址存储：单片机的烧写； （2）文件存储&…
阅读更多...
接口多继承与子类继承多接口时的冲突问题，方法冲突与变量冲突.....

接口多继承与子类继承多接口时的冲突问题，方法冲突与变量冲突.....

🚀 个人简介：某大型国企资深软件开发工程师，信息系统项目管理师、CSDN优质创作者、阿里云专家博主，华为云云享专家，分享前端后端相关技术与工作常见问题~ 💟 作 者：码喽的自我修养&#x1f9…
阅读更多...
IDEA2024最新版本运行Web应用时 Tomcat 日志中的中文乱码问题修复解决

IDEA2024最新版本运行Web应用时 Tomcat 日志中的中文乱码问题修复解决

一、IDEA2024运行Tomcat日志中的中文乱码问题修复 在使用tomcat的时候经常遇到乱码问题，要么是控制台输出乱码或者输出日志乱码，要么页面接收乱码，产生乱码的根本原因就是编码和解码不一致。网上有的文章写得也有问题，今天自己多看…
阅读更多...
计算机毕业设计 | springboot商城售后管理系统 购物平台(附源码)

计算机毕业设计 | springboot商城售后管理系统 购物平台(附源码)

1，绪论 1.1 开发背景 在数字化时代的推动下，产品售后服务管理机构面临着信息化和网络化的挑战。传统的手工管理和纸质档案已经无法满足管理人员和读者的需求。为了提高产品售后服务管理机构的管理效率和服务质量，开发和实现一个基于Java的售…
阅读更多...
轻量服务器和云服务器ecs哪个好用一些？

轻量服务器和云服务器ecs哪个好用一些？

轻量服务器和云服务器ecs哪个好用一些？轻量服务器与云服务器ECS在多方面存在显著差异，对于需要高性能计算和大规模数据处理的用户来说，ECS可能是更好的选择；而对于预算有限且需求较为简单的用户来说，轻量服务器可能更为…
阅读更多...
计算机网络：数据链路层 —— 可靠传输服务

计算机网络：数据链路层 —— 可靠传输服务

文章目录 可靠传输停止-等待 (SW) 协议超时重传机制分组编号机制ACK 丢失问题ACK 延迟问题 注意事项信道利用率 回退 N 帧 (GBN) 协议滑动窗口信道利用率无传输差错超时重传、回退N帧 累计确认 选择重传 (SR) 协议滑动窗口 可靠传输 若数据链路层向其上层提供的服务类型为可靠…
阅读更多...
【Linux】Screen的使用：新建、退出、再登陆

【Linux】Screen的使用：新建、退出、再登陆

Linux screen 命令详解与使用指南 在Linux系统中，screen 是允许用户在单个终端会话中运行多个进程，并能在会话之间切换。 适用情况：screen 特别适用于远程登录（如通过SSH）时，确保即使网络连接断开&#x…
阅读更多...
2017年-2021年 软件工程程序设计题(算法题)实战_c语言程序设计数据结构程序设计分析

2017年-2021年 软件工程程序设计题(算法题)实战_c语言程序设计数据结构程序设计分析

文章目录 2017年1.c语言程序设计部分2.数据结构程序设计部分 2018年1.c语言程序设计部分2.数据结构程序设计部分 2019年1.c语言程序设计部分2.数据结构程序设计部分 2020年1.C语言程序设计部分2.数据结构程序设计部分 2021年1.C语言程序设计部分2.数据结构程序设计部分 2017年 …
阅读更多...
《RabbitMQ篇》消息应答和发布确认

《RabbitMQ篇》消息应答和发布确认

消息应答 消息应答机制：消费者接收信息并处理完之后，告诉rabbitmq该信息已经处理，rabbitmq可以把该信息删除了. 消息自动重新入队：如果处理某个消息的消费者异常关闭了，没有发送ACK确认，rabbitmq会将其重…
阅读更多...
GEE 高阶应用：eeExtra包（Python、R、julia和JavaScript API）

GEE 高阶应用：eeExtra包（Python、R、julia和JavaScript API）

目录 简介 功能 它是如何工作的？ 安装 功能 缩放和偏移 光谱指数 STAC features JavaScript API模型 简介 Google Earth Engine (GEE) 是一个基于云的服务，用于矢量和栅格数据的地理空间处理。Earth Engine 平台具有 JavaScript 和 Python API，提供不同的方法来处…
阅读更多...
STM32学习--5-2 旋转编码器计次

STM32学习--5-2 旋转编码器计次

接线图 按键按下，旋转编码器输出低电平 Encoder.c #include "stm32f10x.h" // Device headerint16_t Encoder_Count; void Encoder_init(void) {RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOB,ENABLE); // 开启APB2Periph外设GPIOB时钟…
阅读更多...
Palo Alto Networks Expedition 未授权SQL注入漏洞复现(CVE-2024-9465)

Palo Alto Networks Expedition 未授权SQL注入漏洞复现(CVE-2024-9465)

0x01 产品简介 Palo Alto Networks Expedition 是一款强大的工具，帮助用户有效地迁移和优化网络安全策略，提升安全管理的效率和效果。它的自动化功能、策略分析和可视化报告使其在网络安全领域中成为一个重要的解决方案。 0x02 漏洞概述 Palo Alto Networks Expedition中存…
阅读更多...
一键生成证件照_HivisionIDPhotosv1.2.8整合包

一键生成证件照_HivisionIDPhotosv1.2.8整合包

HivisionIDPhoto：智能证件照制作 HivisionIDPhoto 专注于开发一套实用且系统化的智能证件照制作算法，旨在为用户提供快速、准确的证件照生成服务。通过完整的 AI 模型流程，HivisionIDPhoto 能够识别多种拍照场景，精准抠图&#x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023