小程序开发-第三章第一节页面跳转及参数传递,跳转到更多页面-全栈工程师之路-中级篇

简介: 小程序开发-第三章第一节页面跳转及参数传递,跳转到更多页面-全栈工程师之路-中级篇

继上次教程结束之后,我们的小程序已经完成到如下程度了。
如果你是一个零基础的开发,只要跟着这个教程一步一步完成的,你就能完成这样的界面优美是不是很容易啊。

image.png


但是,完成前两章,我们只涉及到页面的编写,很少涉及到页面的功能,那么这一章,我们的主要任务就是编写一些简单的页面逻辑。

image.png


我们要实现的是点击上图中的更多,跳转到查看更多页面。
首先我们还是先创建查看更多页面,在json文件中,直接添加pages/moviemore/moviemore保存,自动创建相关文件。


然后为什么这个绑定事件要特意拿出来讲呢。
因为我们的首页,是使用了movielist模板,导入界面的,但是模板并没有自己的js文件,所以这个逻辑事件要写在调用模板的那个页面的逻辑文件中,即js文件。简单的说就是,小程序里面的模板的概念,只是简单的帮你复制了一下而已,你在哪里调用模板,就相当于在这个地方粘贴了一份样式文件而已。


理解了这一点,那我们做相关逻辑操作就简单了很多了。
不管你的界面绑定了多少个模板文件,所有的逻辑都是在那个页面里面编写的。
我们先修改一下,movielist模板

image.png

这里我们给包含“更多”的一整个条绑定了点击事件,并且绑定了数据movielist.url
然后,我们需要构造这个url数据,就跟我们构造movielist.title数据一样。
所以我们修改util.js(获取数据的方法移动到了这个文件了)

image.png


最后我们在index.js中编写goToMoreMovie方法,
goToMoreMovie:function(event){
console.log(event);
}

我们先编写这个数据,然后在日志中打印,这个事件。

image.png


查看这个event对象,我们就能找到我们刚才绑定的data-movie-url,使用-连接的对象名,最终会使用驼峰重命名。即图中的movieUrl。
这里有另一个问题,我们在个人中心页面,也是用了movielist模板,那我们在那个页面的点击更多,跳转到查看更多页面,是不是也要编写一模一样的代码呢?答案是:是的,小程序里面的模板,只支持页面的封装,不支持逻辑封装。
最后,我们修改index中的goToMoreMovie方法。

image.png


保存运行,点击更多。页面跳转到了查看更多页面。

image.png


点击“返回”又回到了,首页。
然后我们在moviemore.js的onload函数中,增加console.log(options)

image.png


在调制的console中查看。

image.png 

所以我们只要在onload函数中取到options.url就可以取到我们从movielist传递过来的参数了。
然后调用我们封装好的方法,获取更多的数据。
由于篇幅原因,这节课到这里结束了,下一节课,我们讲解查看更多页面,和拖动加载更多的方法。


这节课的内容就到这里结束了。
感谢您的阅读。
我是莽夫,希望你开心。

目录
相关文章
|
5月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
1190 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
552 12
|
6月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
6月前
|
人工智能 开发框架 小程序
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。
|
6月前
|
人工智能 小程序 NoSQL
【一步步开发AI运动小程序】二十一、如何将AI运动项目配置持久化到后端?
本文介绍基于云智「Ai运动识别引擎」的运动配置持久化方案,旨在优化小程序或Uni APP中AI运动识别能力。通过将运动检测参数(如`Key`、`Name`、`TickMode`、`rules`或`samples`)持久化到后端,可避免因频繁调整运动参数而重新发布应用,提升用户体验。持久化数据结构支持规则和姿态样本存储,适用于关系数据库、文件或文档数据库(如MongoDB)。此外,云智还提供运动自动适配工具及「AI乐运动」产品,助力快速实现AI体育、全民健身等场景。
|
6月前
|
小程序 关系型数据库 Java
weixin168“返家乡”高校暑期社会实践微信小程序设计与开发ssm(文档+源码)_kaic
本文探讨高校暑期社会实践微信小程序的开发与应用,旨在通过信息化手段提升活动管理效率。借助微信小程序技术、SSM框架及MySQL数据库,实现信息共享、流程规范和操作便捷。系统涵盖需求分析、可行性研究、设计实现等环节,确保技术可行、操作简便且经济合理。最终,该小程序可优化活动发布、学生信息管理和心得交流等功能,降低管理成本并提高工作效率。
|
7月前
|
人工智能 编解码 小程序
【一步步开发AI运动小程序】二十、AI运动小程序如何适配相机全屏模式?
本文探讨了小程序`camera`组件在全屏模式下的适配问题及其解决方案。由于`camera`组件存在预览图像裁切特性,可能导致入镜检测与预览不一致、骨骼图与人体不重合等问题。通过分析其裁剪逻辑(长边按比缩放,短边居中裁切),我们提供了计算裁剪比例和留白的适配方法,并优化了插件特性以支持全屏应用。同时,文章还讨论了全屏模式可能带来的副作用,如人体可视区域变小、检测范围变化及抽帧帧率下降等,并给出了改进建议。该方案适用于云上赛事、健身锻炼、AI体测、AR互动等场景,助力提升用户体验和UI布局合理性。
|
9月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
360 0
|
11月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
228 0
在线课堂+工具组件小程序uniapp移动端源码
|
12月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
1962 3

热门文章

最新文章