小程序页面传参之事件传参(小程序向事件传递参数)
toyiye 2024-09-12 20:48 5 浏览 0 评论
场景:
当我们在开发小程序的时候,经常会遇到此类要求:点击一个内容跳转到一个新的页面,并且新页面的内容是由点击的内容决定的。
比如用户在美团上浏览商品,通常情况下我们去查看详情页面,会发现它的结构都是相同或者类似的,但是内容是由用户点击的内容决定的。
比如点击黄焖鸡,进到详情页就会发现封面是黄焖鸡,这和我们点击的内容是一一对应的。
这种效果在小程序开发过程中十分常见。今天我们拿一个音乐类的小程序举例子,看看页面之间的数据是如何进行关联的。
需求:
用户点击图1中的播放按钮时,跳转到图2,然后播放图1中对应列表的歌曲。
(图1) (图2)
在本例中,如果点击图1“孤勇者”后面的播放按钮,跳转到图2,则播放“孤勇者”,且图2中的歌曲名字显示为“孤勇者”这首音乐。
如果点击图1“太阳”后面的播放按钮,跳转到图2,则播放“太阳”,且图2中的歌曲名字显示为“太阳”这首音乐。
思考几个问题:
1.如何点击后跳转到新页面?
2.如何将图1中的信息传递到图2中?
3.图2中的歌曲名字如何做到和图1中一致?
简单分析下过程:
1.如何跳转?
给图1中的播放按钮绑定一个事件,在事件中使用wx.navigateTo({ url: url }) 跳转到新页面。
2.页面中参数如何传递给js?
微信小程序提供自定义属性,即data-*,若组件上触发的事件,会发送给事件处理函数。
也就是说data-*自定义的内容可以在事件执行的时候获取出来。然后用一个变量接收,并与需要跳转的地址进行拼接,实现明文传参。
3.当前Js中的参数如何传给另一个页面的js?
当前js使用wx.navigateTo({ url: url?Key=value})明文传参,下个页面在页面一加载时就执行onload:function(options){}函数,此函数中的参数options就是用来接收所有信息的,它里面包含了传递过来的参数。
4.得到前一个页面传递的参数后,如何调用后端接口并渲染到前端页面上?
构建一个歌曲详情渲染的方法,方法中包含请求后端数据的过程,请求成功后重置data中的变量。然后在onload中调用此方法。前端页面通过{{}}绑定data中定义的数据内容。
代码过程:
1、歌曲详情页面:
给播放按钮绑定一个点击事件,绑定的事件中需要具备两个作用。一是接收事件传递的参数,二是携带接收到的参数跳转到新的页面。
Songlist.Wxml
<!-- 歌曲列表 -->
<view class="musicContainer" wx:for="{{songlist}}" wx:key="songlist">
<!-- 左边封面 -->
<view class="left">
<image src="{{item.songImg}}"></image>
</view>
<!-- 中间歌曲信息 -->
<view class="center">
<view class="songName">{{item.songName}}</view>
<view class="singerName">{{item.singerName}} · {{item.songName}}</view>
</view>
<!-- 右边播放按钮 -->
<view class="right">
<!-- bindtap绑定点击事件,点击事件的名称为gotoPlay -->
<!-- data-id自定义一个属性,可以跟随事件传递 -->
<image bindtap="gotoPlay" data-id="{{item.id}}" src="/images/playIcon.png"></image>
</view>
</view>
songlist.js中的初始数据
data: {
songlist:[
{
"id":"1901371647",
"songImg":"https://p2.music.126.net/aG5zqxkBRfLiV7A8W0iwgA==/109951166702962263.jpg",
"songName":"孤勇者",
"singerName":"陈奕迅"
}
]
}
songlist.js中定义gotoPlay方法, 用于携带参数跳转
// 监听播放图标的点击
gotoPlay:function(even){
// even代表执行这个点击事件时传递过来的所有信息
var mid=even.currentTarget.dataset.id;
// 用mid来接收data-id传递过来的id值;
wx.navigateTo({
// 跳转到新页面。同时携带参数id=mid
url: '/pages/play/play?id='+mid
})
}
2.播放页面:
Play.wxml
<!-- 歌曲名字 -->
<view class="songName">{{musicName}}</view>
Play.js
Page({
/**
* 页面的初始数据
*/
data: {
id:"",
musicName:"",
musicPic:"",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var mid =options.id
var index1=options.index
// this指的是当前对象,这里指的是play
// console.log(options)
this.setData({
id:mid
})
// 歌曲详情的渲染
this.musicShow()
},
// 歌曲详情渲染的方法
musicShow(){
var id=this.data.id
// console.log(id)
var that=this
// 用that存储当前对象,网络请求时,this指的是当前网络对象,不是当前的play对象
// 通过歌曲id来进行接口的数据拼接
var url="https://music.163.com/api/song/detail/?ids=["+id+"]"
// 网络请求
wx.request({
url: url,
success (res) {
// console.log(res)
var name=res.data.songs[0].name
// console.log(res.data.songs[0].id)
var pic=res.data.songs[0].album.picUrl
that.setData({
"musicPic":pic,
"musicName":name
})
}
})
}
})
最终结果:
点击图1中播放按钮,跳转到图2播放页,且图2中的歌曲名称就是图1中的歌曲名字。
(图1) (图2)
- End -
相关推荐
- 如何用 coco 数据集训练 Detectron2 模型?
-
随着最新的Pythorc1.3版本的发布,下一代完全重写了它以前的目标检测框架,新的目标检测框架被称为Detectron2。本教程将通过使用自定义coco数据集训练实例分割模型,帮助你开始使...
- CICD联动阿里云容器服务Kubernetes实践之Bamboo篇
-
本文档以构建一个Java软件项目并部署到阿里云容器服务的Kubernetes集群为例说明如何使用Bamboo在阿里云Kubernetes服务上运行RemoteAgents并在agents上...
- Open3D-ML点云语义分割实验【RandLA-Net】
-
作为点云Open3D-ML实验的一部分,我撰写了文章解释如何使用Tensorflow和PyTorch支持安装此库。为了测试安装,我解释了如何运行一个简单的Python脚本来可视化名为...
- 清理系统不用第三方工具(系统自带清理软件效果好不?)
-
清理优化系统一定要借助于优化工具吗?其实,手动优化系统也没有那么神秘,掌握了方法和技巧,系统清理也是一件简单和随心的事。一方面要为每一个可能产生累赘的文件找到清理的方法,另一方面要寻找能够提高工作效率...
- 【信创】联想开先终端开机不显示grub界面的修改方法
-
原文链接:【信创】联想开先终端开机不显示grub界面的修改方法...
- 如意玲珑成熟度再提升,三大发行版支持教程来啦!
-
前期,我们已分别发布如意玲珑在deepinV23与UOSV20、openEuler24.03发行版的操作指南,本文,我们将为大家详细介绍Ubuntu24.04、Debian12、op...
- 118种常见的多媒体文件格式(英文简写)
-
MP4[?mpi?f??]-MPEG-4Part14(MPEG-4第14部分)AVI[e?vi??a?]-AudioVideoInterleave(音视频交错)MOV[m...
- 密码丢了急上火?码住7种console密码紧急恢复方式!
-
身为攻城狮的你,...
- 使用open SSL生成局域网IP地址证书
-
某些特殊情况下,用户内网访问多可文档管理系统时需要启用SSL传输加密功能,但只有IP,没有域名和证书。这种情况下多可提供了一种免费可行的方式,通过openSSL生成免费证书。此方法生成证书浏览器会提示...
- Python中加载配置文件(python怎么加载程序包)
-
我们在做开发的时候经常要使用配置文件,那么配置文件的加载就需要我们提前考虑,再不使用任何框架的情况下,我们通常会有两种解决办法:完整加载将所有配置信息一次性写入单一配置文件.部分加载将常用配置信息写...
- python开发项目,不得不了解的.cfg配置文件
-
安装软件时,经常会见到后缀为.cfg、.ini的文件,一般我们不用管,只要不删就行。因为这些是程序安装、运行时需要用到的配置文件。但对开发者来说,这种文件是怎么回事就必须搞清了。本文从.cfg文件的创...
- 瑞芯微RK3568鸿蒙开发板OpenHarmony系统修改cfg文件权限方法
-
本文适用OpenHarmony开源鸿蒙系统,本次使用的是开源鸿蒙主板,搭载瑞芯微RK3568芯片。深圳触觉智能专注研发生产OpenHarmony开源鸿蒙硬件,包括核心板、开发板、嵌入式主板,工控整机等...
- Python9:图像风格迁移-使用阿里的接口
-
先不多说,直接上结果图。#!/usr/bin/envpython#coding=utf-8importosfromaliyunsdkcore.clientimportAcsClient...
- Python带你打造个性化的图片文字识别
-
我们的目标:从CSV文件读取用户的文件信息,并将文件名称修改为姓名格式的中文名称,进行规范资料整理,从而实现快速对多个文件进行重命名。最终效果:将原来无规律的文件名重命名为以姓名为名称的文件。技术点:...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)