请选择 进入手机版 | 继续访问电脑版

数字之家

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 655|回复: 0

微信小程序开发(四)页面跳转

[复制链接]

514

主题

519

帖子

2424

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2424
admin实名认证 发表于 2019-5-11 17:49:24 | 显示全部楼层 |阅读模式
看了看自己文章那可怜的阅读量和推荐量,内心很崩溃啊,这种委屈就让我自己默默承受吧。废话不多少,上一章中我们已经学会了制作首页界面,如图所示:
3401.jpg
我改了个颜色,粉色的太少女了,哈哈,无伤大雅。今天我要教给大家的是如何进行跳转,准备好了吗?
今天我给大家讲一下如何进行页面跳转,要是连页面跳转都不会,还做什么微信小程序啊,大家想想对不对,因为我们开发微信小程序不可能只开发一个页面,我们得开发好几个页面,要是不能让他们之间互相跳转的话,那玩笑可就开大喽!

大家在pages目录下面自行创建一个目录,名字叫做post,并且在post目录下面分别创建post.wxml、post.wxss、post.js文件。创建完之后如图所示:
3402.jpg
然后我们去app.json文件的去把post目录的路径写在pages数组里面,如图所示:
3403.jpg
注意post目录路径不要放在第一个,因为pages数组里面,哪个路径在第一个,那么就先显示那个路径对应的界面,我们当然是先呈现首页界面,所以我们仍然是让“pages/welcome/welcome”路径放在第一个。写完之后呢,大家自行在post.wxml文件里面写一段话,我写的仍然是”hello world!“,这个时候大家编译一下,很明显,界面上呈现的仍然是首页,那么我们怎么让它跳转呢,这时候就该用到welcome.js文件啦。


在这里我先给大家介绍一个专用名词————事件,就比如说我们这个跳转,其实就是个点击事件,因为我们点击一下矩形框才会进行跳转,这个事件的名称叫做bindtap,和网站开发中的click事件一样,都是点击时触发的事件,我们把它写在矩形框的那个view标签里面,如图所示:
3404.jpg
bindtap=“go”的意思就是我点击时触发一个事件,这个事件名称叫做go,我们需要去welcome.js文件中去编写go事件,Let's Go!

进入welcome.js文件中,大家首先先输入page这个单词,然后按一下回车,就出现如图所示的情况:
3405.jpg
因为我们要实现我们的go事件,那么我们就把代码写一下吧,如图:
3406.jpg
记住了,在js里面写事件就是按照上图的格式写,即事件名:function(){操作},我们来看一下操作,wx.redirectTo({url:"../post/post"}),这句话的意思就是跳转的意思,url就是我要跳转的路径,是不是很简单呢,写完之后大家赶紧测试一下吧,我的已经成功跳转了,如图:
3407.jpg
跳转还有一个方法叫做wx.navigateTo方法,大家自己去试试,可以评论说一下它们两个区别哦。今天就到这里,下次见喽~~

特别希望大家多多关注,多多收藏,多多分享。

本文采集自百度百家号:web开发那些事 原文:https://mbd.baidu.com/newspage/d ... A%22bjhauthor%22%7D



maomivip@mail.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表