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

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

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

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传递过来的参数了。
然后调用我们封装好的方法,获取更多的数据。
由于篇幅原因,这节课到这里结束了,下一节课,我们讲解查看更多页面,和拖动加载更多的方法。


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

目录
相关文章
|
9月前
|
人工智能 小程序 前端开发
一个小程序轻量AR体感游戏,开发实现解决方案
针对青少年运动兴趣不足问题,AR体感游戏凭借沉浸式互动体验脱颖而出。结合小程序“AI运动识别”插件与WebGL渲染技术,可实现无需外设的轻量化AR健身游戏,如跳糕、切水果等,兼具趣味性与锻炼效果,适用于儿童健身及职工团建,即开即玩,低门槛高参与。
|
9月前
|
运维 小程序 数据可视化
小程序开发平台有哪些?SaaS小程序制作平台哪个好
小程序开发模式详解:自主开发、SaaS小程序制作平台与外包全对比 选择合适的小程序开发模式,是项目成功的基石。这三种模式在成本、周期、控制力和灵活性上各有千秋,适用于不同阶段和不同类型的企业。下面我们将逐一深入剖析。
791 9
|
9月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?哪个好
小程序的开发方式丰富多元,开发团队可根据自身的技术背景、项目具体需求以及资源状况,灵活挑选最为适宜的开发路径。以下将详细介绍几种主流的小程序开发方式。
730 1
|
9月前
|
移动开发 小程序 前端开发
小程序快速开发平台有哪些?
小程序开发并非“一刀切”,需结合技术储备、资金预算、时间规划及功能需求等多维度因素综合考量。以下为您详细拆解五种主流开发方案及其适用场景,助您精准匹配开发路径。
514 3
|
9月前
|
移动开发 小程序 前端开发
小程序开发平台有哪些?小程序开发制作软件推荐
小程序开发方案全解析:5种主流方式与选择指南 小程序开发需根据技术能力、预算、时间及功能需求综合决策。以下为5种主流开发方案及适用场景分析:
26461 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
452 0
在线课堂+工具组件小程序uniapp移动端源码
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
881 0
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
506 1
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目