1404994268
54376659@qq.com

「精品」微信小程序开发(五)

看了看自己文章那可怜的阅读量和推荐量,内心很崩溃啊,这种委屈就让我自己默默承受吧。废话不多少,上一章中我们已经学会了制作首页界面,如图所示:

我改了个颜色,粉色的太少女了,哈哈,无伤大雅。今天我要教给大家的是如何进行跳转,准备好了吗?

今天我给大家讲一下如何进行页面跳转,要是连页面跳转都不会,还做什么微信小程序啊,大家想想对不对,因为我们开发微信小程序不可能只开发一个页面,我们得开发好几个页面,要是不能让他们之间互相跳转的话,那玩笑可就开大喽!

大家在pages目录下面自行创建一个目录,名字叫做post,并且在post目录下面分别创建post.wxml、post.wxss、post.js文件。创建完之后如图所示:

注意post目录路径不要放在第一个,因为pages数组里面,哪个路径在第一个,那么就先显示那个路径对应的界面,我们当然是先呈现首页界面,所以我们仍然是让“pages/welcome/welcome”路径放在第一个。写完之后呢,大家自行在post.wxml文件里面写一段话,我写的仍然是”hello world!“,这个时候大家编译一下,很明显,界面上呈现的仍然是首页,那么我们怎么让它跳转呢,这时候就该用到welcome.js文件啦。

在这里我先给大家介绍一个专用名词————事件,就比如说我们这个跳转,其实就是个点击事件,因为我们点击一下矩形框才会进行跳转,这个事件的名称叫做bindtap,和网站开发中的click事件一样,都是点击时触发的事件,我们把它写在矩形框的那个view标签里面,如图所示:

bindtap=“go”的意思就是我点击时触发一个事件,这个事件名称叫做go,我们需要去welcome.js文件中去编写go事件,Let's Go!

进入welcome.js文件中,大家首先先输入page这个单词,然后按一下回车,就出现如图所示的情况:

记住了,在js里面写事件就是按照上图的格式写,即事件名:function(){操作},我们来看一下操作,wx.redirectTo({url:../post/post}),这句话的意思就是跳转的意思,url就是我要跳转的路径,是不是很简单呢,写完之后大家赶紧测试一下吧,我的已经成功跳转了,如图:

跳转还有一个方法叫做wx.navigateTo方法,大家自己去试试,可以评论说一下它们两个区别哦。今天就到这里,下次见喽~~

Copyright © 2008-2020 南京米琪网络科技有限公司 版权所有
苏ICP备0148736