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

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

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

相关文章

Google Play上架:自查封号政策解析(高风险行为之不允许破坏Google Play生态系统中用户信任度的应用或应用内容)

本文章提供给近期被封号的开发者们&#xff0c;希望能带来帮助&#xff0c;有其他的自查方向后续也会发布出来。 ——————————————————————————————————————— 用户数据设备和网络滥用 用户数据 设备和网络滥用

前端学习之HTML(第二天)--多媒体标签和表格标签

注&#xff1a;里面的注释是对各个标签的解释 多媒体标签 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title></title> </head> <body> <!-- audio是音频可以填写绝对路径也可填写相对路径 --> &l…

解决微软活动目录管理工作中常见问题

微软活动目录&#xff08;AD域&#xff09;是一种由微软的用于管理网络中用户、计算机、资源等的目录服务。活动目录被广泛应用于企业内部的网络管理中&#xff0c;尤其是对于使用微软产品的企业来说&#xff0c;活动目录是至关重要的基础设施之一。 因此&#xff0c;以微软为…

索引下推 INDEX CONDITION PUSHDOWN

索引下推 (INDEX CONDITION PUSHDOWN&#xff0c;简称ICP)是在 MySQL5.6 针对扫描索引下推二级索引的一项优化改进。 用来在范围查询时减少回表的次数。ICP适用于 MYISAM和INNODB.

ref和reactive用哪个?

ref和reactive用哪个? 1.&#x1f916;GPT&#x1f916;:ref和reactive用哪个根据数据类型而定 ref 用于将基本类型的数据&#xff08;如字符串、数字&#xff0c;布尔值等&#xff09;转换为响应式数据。使用 ref 定义的数据可以通过 .value 属性访问和修改。 reactive 用于…

JavaScript 学习笔记(7)

一模板字符串 1.用途 允许在字符串中嵌入表达式和变量&#xff0c;是一种方便的字符串语法 2.用法 模板字符串使用反引号 作为字符串的定界符分隔的字面量&#xff1b;模板字面量是用反引号&#xff08;&#xff09;分隔的字面量&#xff0c;允许多行字符串、带嵌入表达式…

ElasticSearch之分布式查询过程分析

写在前面 本文一起看下es分布式查询的过程。 1&#xff1a;分布式搜索过程 分布式搜索分为两个阶段&#xff0c;query和fetch,即query-then-fetch。 假定primary shard3,replica shard1&#xff0c;即3个主分片&#xff0c;1个副本分片。 1.1&#xff1a;query阶段 某data …

二叉树——700. 二叉搜索树中的搜索、98. 验证二叉搜索树

二叉搜索树中的搜索 给定二叉搜索树&#xff08;BST&#xff09;的根节点 root 和一个整数值 val。 你需要在 BST 中找到节点值等于 val 的节点。 返回以该节点为根的子树。 如果节点不存在&#xff0c;则返回 null 。 示例 1: 输入&#xff1a;root [4,2,7,1,3], val 2 …

【论文精读】基于知识图谱关系路径的多跳智能问答模型研究

&#x1f497;&#x1f497;&#x1f497;欢迎来到我的博客&#xff0c;你将找到有关如何使用技术解决问题的文章&#xff0c;也会找到某个技术的学习路线。无论你是何种职业&#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章&#xff0c;也欢…

96道前端面试题,前端开发工作内容

HTML、CSS、JS三大部分都起什么作用&#xff1f; HTML内容层&#xff0c;它的作用是表示一个HTML标签在页面里是个什么角色&#xff1b;CSS样式层&#xff0c;它的作用是表示一块内容以什么样的样式&#xff08;字体、大小、颜色、宽高等&#xff09;显示&#xff1b;JS行为层…

js形参传递特殊字符

在前端我们给其他页面传值或者传数据到后台的时候&#xff0c;字符串经常将一些特殊符号识别成字符集。这种情况下会将数据打断或者打乱&#xff0c;比如字符串里面包含*/&这些符号的时候就会错误。 我们可以通过将字符中的特殊字符替换成十六进制的字符&#xff0c;一些特…

【详识JAVA语言】String类2

常用方法 字符串的不可变性 String是一种不可变对象. 字符串中的内容是不可改变。字符串不可被修改&#xff0c;是因为&#xff1a; 1. String类在设计时就是不可改变的&#xff0c;String类实现描述中已经说明了 以下来自JDK1.8中String类的部分实现&#xff1a; String类…

马士超:符合国际标准的沉浸式音频HOLOSOUND的发展与未来 | 演讲嘉宾公布

一、3D音频 3D 音频分论坛将于3月27日同期举办&#xff01; 3D音频技术不仅能够提供更加真实、沉浸的虚拟世界体验&#xff0c;跨越时空的限制&#xff0c;探索未知的世界。同时&#xff0c;提供更加丰富、立体的情感表达和交流方式&#xff0c;让人类能够更加深入地理解彼此&a…

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

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

2024-3-5 python 序列小知识点

1、for循环的变量作用域不限于for循环内 >>>i 10 >>>for i in range(100): >>> print(i) >>> i 100此处&#xff0c;for循环里的 i 修改了之前的 i 变量的值。 2、列表推导式里的变量作用域仅限于推导式内 推导式犹如一个函数&…

SpringCloud-用nacos做服务注册与调用

步骤1&#xff1a;下载和安装Nacos 首先&#xff0c;你需要从Nacos的官方网站上下载并安装Nacos Server。根据你的操作系统选择合适的版本&#xff0c;并按照官方文档中的说明进行安装和配置。 步骤2&#xff1a;创建Spring Boot项目 在你喜欢的IDE中创建一个新的Spring Boot项…

表格制作一对多,多对多

<!-- <tr><td>第1行第1列</td><td>第1行第2列</td></tr><tr><td rowspan"4">第2行第1列</td><td colspan"2">第2行第2列</td><td colspan"3">第2行第2列</td>…

Nodejs 第四十六章(redis持久化)

redis持久化 Redis提供两种持久化方式&#xff1a; RDB&#xff08;Redis Database&#xff09;持久化&#xff1a;RDB是一种快照的形式&#xff0c;它会将内存中的数据定期保存到磁盘上。可以通过配置Redis服务器&#xff0c;设置自动触发RDB快照的条件&#xff0c;比如在指…

消息队列-kafka-服务端处理架构(架构,Topic文件结构,服务端数据的一致性)

服务端处理架构 资料来源于网络 网络线程池&#xff1a; 接受请求&#xff0c;num.network.threads&#xff0c;默认为 3&#xff0c;专门处理客户的发送的请求。 IO 线程池&#xff1a; num.io.threads&#xff0c;默认为 8&#xff0c;专门处理业务请求。也就是它不负责发…

[网鼎杯 2020 半决赛]AliceWebsite --不会编程的崽

网鼎杯某些题还是很简单嘛&#xff0c;比如这题 有交互界面先去交互看看 斯&#xff0c;actionabout.php?有一种可能是存在任意文件读取,试一下/etc/passwd 看来猜想正确&#xff0c;直接读取根目录的flag