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

零基础入门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.mfbz.cn/a/890008.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

22. 括号生成【回溯】

22. 括号生成【回溯】

文章目录 22. 括号生成解题思路Go代码 22. 括号生成 22. 括号生成 数字 n 代表生成括号的对数，请你设计一个函数，用于能够生成所有可能的并且 有效的 括号组合。 示例 1： 输入：n 3 输出：["((()))",&quo…
阅读更多...
node.js服务器基础

node.js服务器基础

node.js的事件循环 node.js是基于事件驱动的，通常在代码中注册想要等待的事件，设定好回调函数，当事件触发的时候就会调用回调函数。如果node.js没有要处理的事件了，那整个就结束了;事件里面可以继续插入事件，如果有事…
阅读更多...
手撕数据结构 —— 带头双向循环链表（C语言讲解）

手撕数据结构 —— 带头双向循环链表（C语言讲解）

目录 0.前言 1.什么是带头双向循环链表 理解带头 ​编辑 理解双向 理解循环 2.带头双向循环链表的实现 List.h文件中接口总览 具体实现 结点的定义 申请结点 初始化 打印链表 尾插 尾删 头插 头删 ​编辑​编辑 获取大小 查找 在指定位置前插入 ​编辑…
阅读更多...
数据结构--线性表双向链表的实现

数据结构--线性表双向链表的实现

目录 思路设计 总体思维导图 插入部分 头插法尾插法 任意位置插入 删除部分 头结点 尾节点 中间节点 只有头结点且删除的就是头结点 ​编辑 清空链表部分 遍历清空链表的所有节点 不遍历清空 各部分代码 Main部分 MyListedList部分 IndexOutOfException部分 …
阅读更多...
YOLO11改进 | 注意力机制 | 结合静态和动态上下文信息的注意力机制

YOLO11改进 | 注意力机制 | 结合静态和动态上下文信息的注意力机制

秋招面试专栏推荐 ：深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 💡💡💡本专栏所有程序均经过测试，可成功执行💡💡💡 上下文Transformer（CoT&…
阅读更多...
WPF中的布局

WPF中的布局

布局原则 1、不显式设置元素大小。 2、不使用绝对定位。 元素应该根据容器的内容来进行排列。绝对定位在开发前期会带来一些便捷，但扩展性比较差。一旦显示器尺寸或分辨率发生改变，界面的显示效果可能会达不到预期的效果。 3、布局容器可以嵌套使用 常…
阅读更多...
【Axure原型分享】标签管理列表

【Axure原型分享】标签管理列表

今天和大家分享通过标签管理列表的原型模板，包括增删改查搜索筛选排序分页翻页等效果，这个模板是用中继器制作的，所以使用也很方便，初始数据我们只要在中继器表格里填写即可，具体效果可以观看下方视频或者打开预览地址…
阅读更多...
【经管】上市公司供应链金融数据（1990-2023年）

【经管】上市公司供应链金融数据（1990-2023年）

上市公司供应链金融是指上市公司利用其产业链核心地位，通过整合金融资源，为供应链上下游企业提供包括融资、结算、风险管理等在内的综合金融服务。为了衡量上市公司的供应链金融水平，参考周兰等（2022）的研究方法&#…
阅读更多...
【C++入门篇 - 3】：从C到C++第二篇

【C++入门篇 - 3】：从C到C++第二篇

文章目录 从C到C第二篇new和delete命名空间命名空间的访问 cin和coutstring的基本使用 从C到C第二篇 new和delete 在C中用来向系统申请堆区的内存空间 New的作用相当于C语言中的malloc Delete的作用相当于C语言中的free 注意：在C语言中，如果内存不够…
阅读更多...
IBM Flex System服务器硬件监控指标解读

IBM Flex System服务器硬件监控指标解读

随着企业IT架构的日益复杂，服务器的稳定运行对于保障业务连续性至关重要。IBM Flex System作为一款模块化、可扩展的服务器解决方案，广泛应用于各种企业级环境中。为了确保IBM Flex System服务器的稳定运行，监控易作为一款专业的IT基础设施监…
阅读更多...
git维护【.gitignore文件】

git维护【.gitignore文件】

在工程下添加 .gitignore 文件【git忽略文件】 *.class .idea *.iml *.jar /*/target/更多： # Compiled class file *.class# Log file *.log *.imi *.lst# BlueJ files *.ctxt# Mobile Tools for Java (J2ME) .mtj.tmp/# Package Files # *.jar *.war *.nar *.ea…
阅读更多...
【MySQL 保姆级教学】数据库基础（重点）（2）

【MySQL 保姆级教学】数据库基础（重点）（2）

目录 1. 什么是数据库1.1 数据库的定义1.2 mysql 和 mysqld1.3 文件和数据库 2. 数据库的分类3. 连接数据库3.1 数据库的安装3.2 连接服务器（数据库）3.3 服务器 数据库 表 三者的关系 4. 数据库-表 和目录-文件 的关系5. MySQL 框架6. SQL 分类7. 储存引…
阅读更多...
DDoS攻击快速增长，如何在抗ddos防护中获得主动？

DDoS攻击快速增长，如何在抗ddos防护中获得主动？

当下DDoS攻击规模不断突破上限。前段时间，中国首款3A《黑神话：悟空》也在一夜之内遭受到28万次攻击DDoS攻击，严重影响到全球玩家的游戏体验。Gcore发布的数据也显示了 DDoS攻击令人担忧的趋势，尤其是峰值攻击已增加到了令人震惊的…
阅读更多...
CNN-GRU时序预测 | MATLAB实现CNN-GRU卷积门控循环单元时间序列预测

CNN-GRU时序预测 | MATLAB实现CNN-GRU卷积门控循环单元时间序列预测

时序预测 | MATLAB实CNN-GRU卷积门控循环单元时间序列预测 目录 时序预测 | MATLAB实CNN-GRU卷积门控循环单元时间序列预测预测效果基本介绍模型描述程序设计参考资料预测效果 基本介绍 本次运行测试环境MATLAB2020b 提出了一种基于卷积神经网络（Convolutional Neural Network…
阅读更多...
生成式专题的第一节课---GAN图像生成

生成式专题的第一节课---GAN图像生成

一、GAN的起源与发展 1.GAN的起源 GAN （生成式对抗网络）诞生于 2014 年，由 Ian Goodfellow 提出，是用于生成数据的深度学习模型，创新点是对抗性训练，即生成器与判别器的竞争关系，为图像生成、…
阅读更多...
【网络安全】利用XSS、OAuth配置错误实现token窃取及账户接管 (ATO)

【网络安全】利用XSS、OAuth配置错误实现token窃取及账户接管 (ATO)

未经许可，不得转载。 文章目录 正文正文 目标：target.com 在子域sub1.target.com上，我发现了一个XSS漏洞。由于针对该子域的漏洞悬赏较低，我希望通过此漏洞将攻击升级至app.target.com，因为该子域的悬赏更高。 分析认证机制后，我发现： sub1.target.com：使用基于Cook…
阅读更多...
DBA | 如何将 .mdf 与 .ldf 的数据库文件导入到SQL Server 数据库中?

DBA | 如何将 .mdf 与 .ldf 的数据库文件导入到SQL Server 数据库中?

[ 知识是人生的灯塔，只有不断学习，才能照亮前行的道路 ] 原文链接：DBA | 如何将 .mdf 与 .ldf 的数据库文件导入到SQL Server 数据库中? 如何将 (.mdf) 和 (.ldf) 的SQL Server 数据库文件导入到当前数据库中? Step 1.登录到 Sql Server 服…
阅读更多...
Springboot——使用poi实现excel动态图片导入解析

Springboot——使用poi实现excel动态图片导入解析

文章目录 前言依赖引入导入实现方式一方式二 导出参考 前言 最近要实现一个导入导出的功能点，需要能将带图片的列表数据导出到excel中，且可以导入带图片的excel列表数据。 考虑到低代码平台的表头与数据的不确定性，技术框架上暂定使用Apach…
阅读更多...
线性代数在大一计算机课程中的重要性

线性代数在大一计算机课程中的重要性

线性代数在大一计算机课程中的重要性 线性代数是一门研究向量空间、矩阵运算和线性变换的数学学科，在计算机科学中有着广泛的应用。大一的计算机课程中，线性代数的学习为学生们掌握许多计算机领域的关键概念打下了坚实的基础。本文将介绍线性代数的基本…
阅读更多...
C++一个很好的计时方法

C++一个很好的计时方法

C一个很好的计时方法 //记时LARGE_INTEGER t1;LARGE_INTEGER t2;LARGE_INTEGER f;QueryPerformanceFrequency(&f);QueryPerformanceCounter(&t1);Sleep(100);QueryPerformanceCounter(&t2);double time;time (double)(t2.QuadPart-t1.QuadPart)/(double)f.QuadPar…
阅读更多...
最新文章

Copyright @ 2022~2023