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

数字之家

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

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

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

[复制链接]
  • TA的每日心情
    开心
    2019-5-7 14:15
  • 签到天数: 9 天

    [LV.3]偶尔看看II

    396

    主题

    399

    帖子

    1860

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    1860
    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
    回复

    使用道具 举报

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

    本版积分规则

    QQ|Archiver|手机版|小黑屋|寿光赢创志诚信息技术有限公司 ( 鲁ICP备19000917号 )

    GMT+8, 2019-5-22 23:46 , Processed in 0.064293 second(s), 24 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

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