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

微信小程序开发学习笔记《19》uni-app框架-配置小程序分包与轮播图跳转

微信小程序开发学习笔记《19》uni-app框架-配置小程序分包与轮播图跳转

博主正在学习微信小程序开发,希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读uni-app对应官方文档

一、配置小程序分包

分包可以减少小程序首次启动时的加载时间
为此,我们在项目中,把 tabBar相关的4个页面放到主包中,其它页面(例如:商品详情页、商品列表页)置分包的步骤如下:

  1. 在项目根目录中,创建分包的根目录,命名为subpkg
  2. 在 pages.json中,和 pages 节点平级的位置声明subPackages节点,用来定义分包相关的结构:
// page.json配置文件中
"subPackages": [{"root": "subpkg", "pages": []}],
  1. 在 subpkg目录上鼠标右键,点击新建页面选项,并填写页面的相关信息:

在这里插入图片描述

二、点击轮播图跳转到商品详情页面

将节点内的view组件,改造为navigator导航组件,并动态绑定url属性的值。

  1. 改造之前的ui结构:
<template><view><!--轮播图区域.可以通过uswp快捷生成模板!--><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><!--循环渲染轮播图的item项--><swiper-item v-for="(item,i) in swiperList" :key="i"><view class="swiper-item"><!--动态绑定图片的 src属性--><image :src="item.image_src"></image></view></swiper-item></swiper></view>
</template>
  1. 改造之后的ui结构
<template><view><!--轮播图区域.可以通过uswp快捷生成模板!--><swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true"><!--循环渲染轮播图的item项--><swiper-item v-for="(item,i) in swiperList" :key="i"><navigator class= "swiper-item" :url="'/subpkg/goods_detail/goods_detail?goods_id=' + item.goods_id">  <!--传参了--><!--动态绑定图片的 src属性--><image :src="item.image_src"></image></navigator></swiper-item></swiper></view>
</template>

三、封装uni.$showMsg()方法

当数据请求失败之后,经常需要调用uni.showToast({ /配置对象/ })方法来提玩用户。此时,可以在全局封装一个uni.$showNsg()方法,来简化uni.showToast()方法的调用。(就是经常要用的东西,可以在全局封装好,不需要每次都写完整)
具体的改造步骤如下:

  1. 在 main.js 中,为uni对象挂载自定义的$showMsg()方法:
//封装的展示消息提示的方法
uni.$showMsg = function (title = '数据加载失败! ', duration = 1500){uni.showToast( {title,duration,icon : 'none',})
}
  1. 今后,在需要提示消息的时候,直接调用uni.$showMsg()方法即可:
// 3.2 请求失败
// if (res.meta.status !== 200) {
// 	return uni.showToast({ //wx.showToast就是消息提示框
// 		title: '数据请求失败! ',
// 		duration: 1500,
// 		icon: 'none', //不需要图标
// 	})
// }
// 简化写法,将上面的消息弹窗进行一次封装
if (res.meta.status !== 200) return uni.$showMsg()

以上学习笔记都是博主在B站学习黑马程序员课程时的学习笔记,如果有什么问题,烦请联系我删除。

相关文章:

微信小程序开发学习笔记《19》uni-app框架-配置小程序分包与轮播图跳转

微信小程序开发学习笔记《19》uni-app框架-配置小程序分包与轮播图跳转 博主正在学习微信小程序开发&#xff0c;希望记录自己学习过程同时与广大网友共同学习讨论。建议仔细阅读uni-app对应官方文档 一、配置小程序分包 分包可以减少小程序首次启动时的加载时间 为此&#…...

Python内置模块

目录 什么是模块 模块分类 通过模块创建者分类 系统内置模块 第三方模块 在线安装 离线安装 模块导入 math和random模块介绍 math模块 random模块 什么是模块 在我们编写程序时&#xff0c;需要导入包。例如随机数的产生&#xff0c;需要import random。import XXX&…...

WordPress建站入门教程:小皮面板phpstudy如何安装PHP和切换php版本?

小皮面板phpstudy支持的PHP版本有很多&#xff0c;包括5.2.17、5.3.29、5.4.45、5.5.9、5.6.9、7.0.9、7.1.9、7.2.9、7.3.4、7.3.9、7.4.3、8.0.2、8.2.9。那么我们如何安装其他的php版本和切换网站的php版本呢&#xff1f;只需要简单几步即可&#xff0c;具体如下&#xff1a…...

用友 NC saveDoc.ajax 任意文件上传漏洞复现

0x01 产品简介 用友NC是一款企业级ERP软件。作为一种信息化管理工具,用友NC提供了一系列业务管理模块,包括财务会计、采购管理、销售管理、物料管理、生产计划和人力资源管理等,帮助企业实现数字化转型和高效管理。 0x02 漏洞概述 用友 NC saveDoc.ajax接口处存在任意文件…...

如何使用达摩盘

目录 1.定义 2.功能&#xff1a;圈人群、画像洞察、同步到站内渠道投放&#xff1b; 1.定义 是阿里妈妈基于商业化营销场景打造的人群精细化运营定向中台&#xff0c;涵盖消费行为、兴趣偏好、地理位置等海量数据标签&#xff0c;为商家提供个性化人群圈选&#xff0c;识别店…...

网络编程的学习

思维导图 多路复用代码练习 select完成TCP并发服务器 #include<myhead.h> #define SER_IP "192.168.125.73" //服务器IP #define SER_PORT 8888 //服务器端口号int main(int argc, const char *argv[]) {//1、创建用于监听的套接字int sfd -1;s…...

【Mining Data】收集数据(使用 Python 挖掘 Twitter 数据)

@[TOC](【Mining Data】收集数据(使用 Python 挖掘 Twitter 数据)) 具体步骤 第一步是注册您的应用程序。特别是,您需要将浏览器指向 http://apps.twitter.com,登录 Twitter(如果您尚未登录)并注册新应用程序。您现在可以为您的应用程序选择名称和描述(例如“Mining Demo”…...

2024京津冀光伏展

2024年京津冀光伏展是一个专门展示京津冀地区光伏产业发展情况的展览会。光伏产业是指利用太阳能进行发电的产业&#xff0c;它在可再生能源领域具有重要的地位。京津冀地区是中国重要的经济区域&#xff0c;也是光伏产业的发展热点地区之一。 2024年京津冀光伏展将展示京津冀地…...

在C#中使用Linq

在C#中使用Linq 前言一、基本查询操作二、高级查询操作三、数据库查询四、文件和 XML 查询五、总结 前言 LINQ&#xff08;Language Integrated Query&#xff09;是 C# 中一种强大的查询语言集成特性&#xff0c;它使得在编程语言级别对数据进行查询和操作变得更加简单和直观…...

Swing程序设计(11)动作事件监听器,焦点事件监听器

文章目录 前言一、事件监听器是什么&#xff1f;二、详细展开 1.动作事件监听器2.焦点事件监听器总结 前言 如果你是坚持从Swing程序第一篇看到了这里&#xff0c;恭喜你&#xff0c;Swing程序设计简单地落下了帷幕&#xff0c;关于Swing程序更深的了解&#xff0c;可以自行学习…...

Python 开发图形界面程序

用 Python 语言开发图形界面的程序&#xff0c;有2种选择&#xff1a; Tkinter 基于Tk的Python库&#xff0c;这是Python官方采用的标准库&#xff0c;优点是作为Python标准库、稳定、发布程序较小&#xff0c;缺点是控件相对较少。 PySide2/PySide6 基于Qt 的Python库&#x…...

百度搜索引擎SEO优化方法

随着互联网的不断发展&#xff0c;搜索引擎已经成为人们获取信息、产品和服务的主要途径之一。而在中国&#xff0c;百度作为最大的搜索引擎&#xff0c;其影响力不可忽视。了解并掌握百度SEO关键词优化方法&#xff0c;对于提升网站在搜索引擎中的排名至关重要。 关键词选择&a…...

一文了解docker与k8s

随着 k8s 作为容器编排解决方案变得越来越流行&#xff0c;有些人开始拿 Docker 和 k8s 进行对比&#xff0c;不禁问道&#xff1a;Docker 不香吗&#xff1f; k8s 是 kubernetes 的缩写&#xff0c;8 代表中间的八个字符。 其实 Docker 和 k8s 并非直接的竞争对手两者相互依存…...

Linux基础——进程控制

1. 进程创建 在这之前我们曾了解过进程创建&#xff08;详见进程初识&#xff08;二&#xff09;&#xff09;&#xff0c;我们在这里对fork函数做一些补充 其实对于父子进程来说&#xff0c;若是有一方试图修改数据时&#xff0c;会向物理内存中申请一份新空间&#xff0c;并…...

网络工程师笔记8

华为VRP系统 设备管理方式 web管理方式 命令行管理方式 修改命令&#xff1a;undo 基础配置命令...

从零学算法128

128.给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1&#xff1a; 输入&#xff1a;nums [100,4,200,1,3,2] 输出&#xff1a;4…...

2024免费mac苹果电脑的清理和维护软件CleanMyMac X

对于 Mac 用户来说&#xff0c;电脑的清理和维护是一件让人头疼的事情。但是&#xff0c;有了 CleanMyMac X&#xff0c;这一切都将变得轻松愉快。CleanMyMac X 是一款专为 Mac 设计的电脑清理软件&#xff0c;它以其强大的功能和简单的操作&#xff0c;让无数用户为之倾倒。 C…...

Python反射机制在实际场景中的应用

Python 的反射机制是指在运行时动态地访问、检测和修改类和对象的属性和方法。反射为开发者提供了一种灵活的方式来处理对象和类&#xff0c;可以在实际场景中提供一些有用的功能和应用&#xff0c;下面是 Python 反射在实际场景中的一些常见应用&#xff1a; 插件系统&#xf…...

网络原理初识

一、IP地址 概念 IP 地址主要用于标识网络主机、其他网络设备&#xff08;如路由器&#xff09;的网络地址。简单说&#xff0c; IP 地址用于定位主机 的网络地址 。 就像我们发送快递一样&#xff0c;需要知道对方的收货地址&#xff0c;快递员才能将包裹送到目的地。 二、…...

关于uniapp小程序的分包问题

开发uniapp小程序时&#xff0c;在打包上传代码时会出现超出2M的打包限制不能上传&#xff0c;那么我们该怎么做呢&#xff1f; 1.对于图片&#xff0c;将图片从后端服务取&#xff0c;尽量不要放在静态资源&#xff0c;图片体积会影响打包大小。 2.使用分包&#xff0c;tabb…...

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

跨链模式:多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)

上一章用到了V2 的概念&#xff0c;其实 Fiori当中还有 V4&#xff0c;咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)&#xff0c;代理中间件&#xff08;ui5-middleware-simpleproxy&#xff09;-CSDN博客…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...