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

news2024/11/19 13:55:19

微信小程序开发学习笔记《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站学习黑马程序员课程时的学习笔记,如果有什么问题,烦请联系我删除。

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

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

相关文章

S/4 HANA CLOUD Workaround 销售含税价

业务场景&#xff1a; 在中国及其他亚洲或者东南亚国家&#xff0c;采购合同和发票都是以含税价的方式计价&#xff0c;这与美国及欧洲国家通过净价加税的计价方式不同。而目前S/4 HANA CLOUD交付的标准定价方式采取的是后者&#xff0c;大部分的中国客户对含税价的功能都有需求…

图书推荐|Word文稿之美

让你的文档从平凡到出众&#xff01; 本书内容 《Word文稿之美》是一本全面介绍Word排版技巧和应用的实用指南。从初步认识数字排版到高效利用模板、图文配置和表格与图表的排版技巧&#xff0c;再到快速修正错误和保护文件&#xff0c;全面系统地讲解数字排版的技术和能力&…

Git 撤销修改

如果我们在我们的工作区写了很长时间代码&#xff0c;发现出现错误&#xff0c;想回退到之前的版本&#xff0c;这时改怎么做呢&#xff1f; 情况一&#xff1a;对于工作区的代码&#xff0c;还没有 add 我们当然也可以使用git diff 查看与上次提交的差异&#xff0c;进行手动删…

【数据结构】用栈实现队列

前言&#xff1a;本节博客分享了用栈实现队列效果的思路以及代码&#xff0c;有需要借鉴即可。 1.题目及链接 LINK 2.思路分析 如果要用栈实现队列&#xff0c;我们直到栈是先入后出的一个效果&#xff0c;所以我们可以用两个栈&#xff0c;这样逆转两次数不就是入栈之前数组…

代码随想录算法训练营第十四天| 144. 二叉树的前序遍历 ,145. 二叉树的后序遍历,94. 二叉树的中序遍历

两种写法&#xff0c;递归和非递归写法 递归&#xff1a; /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(nullptr) {}* TreeNode(int x) : va…

如何使用宝塔面板部署MySQL数据库,并结合内网穿透实现固定公网地址远程连接

文章目录 前言1.Mysql服务安装2.创建数据库3.安装cpolar3.1 开放局域网端口3.2 创建HTTP隧道 4.远程连接5.固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 宝塔面板的简易操作性,使得运维难度降低,简化了Linux命令行进行繁琐的配置,下面简单几…

VMvare17安装centos8安装宝塔面板 教程

阿里镜像站&#xff1a;https://mirrors.aliyun.com/centos centos-8-isos-x86_64安装包下载_开源镜像站-阿里云 https://mirrors.aliyun.com/centos/8/isos/x86_64/CentOS-8.5.2111-x86_64-dvd1.iso 将上面的链接复制到迅雷进行高速下载 vmvare安装配置教程安装教程 CentOS…

激光炸弹 刷题笔记

前置知识 二维前缀和 子矩阵的和 刷题笔记 {二维前缀和}-CSDN博客 思路 参考二维前缀和 将子矩阵的和 做成动态矩阵 一个个矩阵搜索 符合要求边长 矩阵中的元素和最大值 将x1,y1用i-k,j-k表示即可 x2,y2用i&#xff0c;j表示 代码 #include<iostream> #include<…

16:00面试,16:06就出来了,问的问题过于变态了。。。

从小厂出来&#xff0c;没想到在另一家公司又寄了。 到这家公司开始上班&#xff0c;加班是每天必不可少的&#xff0c;看在钱给的比较多的份上&#xff0c;就不太计较了。没想到2月一纸通知&#xff0c;所有人不准加班&#xff0c;加班费不仅没有了&#xff0c;薪资还要降40%…

10.WEB渗透测试-Linux基础知识-Linux用户权限管理(下)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;9.WEB渗透测试-Linux基础知识-Linux用户权限管理&#xff08;上&#xff09;-CSDN博客 ch…

CSS元素分类,轻松拿下offer

戳这里领取完整开源项目&#xff1a;【一线大厂前端面试题解析核心总结学习笔记Web真实项目实战最新讲解视频】 面试题 HTML 1&#xff0c;html5有哪些新特性&#xff1f; 2&#xff0c;html5移除了那些元素&#xff1f; 3&#xff0c;如何处理HTML5新标签的浏览器兼容问题…

go 程序被意外kill后出现僵尸进程解决方案

go 管理自身子进程(防止僵尸进程出现) 写这篇文章是因为最近有同事竟然会知道异步启动子进程&#xff0c;不会关闭&#xff0c;最后导致导致僵尸进程出现&#xff0c;而且由于子进程会随着业务的使用越开越多&#xff0c;主进程一旦被kill掉就会不得不手动一个一个kill。 大概…

Java消息服务(JMS):在异步通信世界的引领者

文章目录 前言需求演进异步通信的需求增长面向消息的中间件兴起标准化的迫切需求 与相似框架的对比JMS vs AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;JMS vs MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;JMS vs Apache Kafka 完整的…

毫秒生成的时间戳如何转化成东八区具体时间

假设现在有一个时间是1709101071419L 后端代码实现 Java代码&#xff08;东八区时间&#xff09; 在Java代码中&#xff0c;我们将时区从UTC调整为东八区&#xff08;UTC8&#xff09;&#xff1a; import java.time.Instant; import java.time.ZoneId; import java.time.Z…

onnx runtime文档学习2-torch TF简单示例

网上充斥着ONNX Runtime的简单科普&#xff0c;却没有一个系统介绍ONNX Runtime的博客&#xff0c;因此本博客旨在基于官方文档进行翻译与进一步的解释。ONNX runtime的官方文档&#xff1a;https://onnxruntime.ai/docs/ 如果尚不熟悉ONNX格式&#xff0c;可以参照该博客专栏…

网工内推 | 国企运维,年薪最高30W,RHCE认证优先

01 上海华力微电子有限公司 招聘岗位&#xff1a;系统运维资深/主任工程师 职责描述&#xff1a; 1、负责IT基础设施&#xff08;包括服务器、存储、中间件等系统基础技术平台&#xff09;的设计建设和日常运维管理&#xff1b; 2、负责生产、开发和测试环境的技术支持&#x…

【AI视野·今日CV 计算机视觉论文速览 第301期】Mon, 4 Mar 2024

AI视野今日CS.CV 计算机视觉论文速览 Mon, 4 Mar 2024 Totally 74 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computer Vision Papers Point Could Mamba: Point Cloud Learning via State Space Model Authors Tao Zhang, Xiangtai Li, Haobo Yuan, Shunping …

NVMe管理命令为何不用SGL?-1

上周末在公众号后台收到粉丝留言&#xff0c;主要是关于SGL的交流&#xff1a;“SGL为啥不能用于nvme admin cmd”&#xff1f; 回答这个问题前&#xff0c;首先&#xff0c;我们先回顾下NVME PRP和SGL的基本原理以及应用场景。 在Host与Controller之间有数据交互时&#xff0…

Distilling Knowledge via Knowledge Review

摘要 知识蒸馏从教师网络转移到学生网络&#xff0c;目的是大大提高学生网络的性能。以往的方法主要是通过提出特征变换和同级特征之间的损失函数来提高有效性。对师生网络连接路径交叉层次的影响因素进行了不同程度的研究&#xff0c;揭示了其重要性。在知识蒸馏中首次提出了…

【Python 识别某滑块的距离】今天来换思维搞滑块,不用识别库,几行代码就能搞定,仅供学习

写作日期&#xff1a;2024.03.05 使用工具&#xff1a;Python 温馨提示&#xff1a;此方法仅对有完整图和缺口图的滑块有效&#xff0c;可精准识别出缺口要滑动的距离 文章全程已做去敏处理&#xff01;&#xff01;&#xff01; 【需要做的可联系我】 AES处理&#xff08;直接…