微信小程序跳转页面的不同方法

这篇具有很好参考价值的文章主要介绍了微信小程序跳转页面的不同方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序如何进行页面切换呢?

一,使用声明式导航

1.对于tabbar页面的跳转(若不明白tabbar可自行百度)

使用switchTab进行跳转

在wxml中输入

<navigator url="/pages/message/message" open-type="switchTab">非tabbar页面的跳转</navigator>

其中/pages/message/message是跳转的地址,跳转方式是switchTab

2.对于非tabbar页面的跳转

使用navigator进行跳转

在wxml中输入

<navigator url="/pages/info/info" open-type="navigate">tabbar页面的跳转</navigator>

其中/pages/info/info是跳转的地址,跳转方式是navigate

3.返回到上一个页面

在一个页面的wxml中输入

<navigator open-type="navigateBack" delta="1">返回上一个页面</navigator>

注意:要想返回到之前页面,open-type的类型必须是:navigateBack

而delta后的数字表示的是要返回的层数

二,使用编程式导航

1.在wxml中添加一个button组件(即按钮)

<button bindtap="tiaozhuan" >tiaozhuan2 </button>  //这是使用bindtap进行触摸,就是你点击这个按钮便会执行操作“tiaozhuan”

2.在js文件中添加名字为“tiaozuan”的函数,其中函数中使用wx.navigateTo指令

  tiaozhuan() {

    wx.navigateTo({

      url: '/pages/lunbotu/lunbotu'   //url后面是跳转地址(备注不要复制进去)

    })

}

正如上面使用声明式导航说的,跳转到非tabbar页面的时候用navigateTo,而跳转到tabbar页面的时候用switchTab,这里便不做赘述,懂得都懂。(若不明白tabbar可自行百度)

最后就是“后退”环节了

1.在wxml中添加一个button组件(即按钮)

<button bindtap="goback">后退</button>

2.接着在js文件中定义“goback”函数

 goback() {

    wx.navigateBack({

      delta:1   //这里的delta表示后退的页面数量,如果只退一个的话可以不写delta

    })

  }

以上是我对微信小程序的学习,若各位有发现问题,请多多指教!阿里嘎多!文章来源地址https://www.toymoban.com/news/detail-607380.html

到了这里,关于微信小程序跳转页面的不同方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序学习之五种页面跳转方法.

    这是最常见的一种跳转方式,相当于html里的a标签.但需要注意的是 该方法不能跳转tabbar页面. 格式为: 通过构造js函数,在函数中调用该接口可实现页面跳转的效果.但该接口同样不能跳转tabbar页面.跳转后左上角有返回小箭头,点击可返回原本页面. 格式为:  关闭当前页面,跳转到

    2024年02月09日
    浏览(46)
  • 微信小程序事件点击跳转页面的五种方法

    第一种:标签 这是最常见的一种跳转方式,相当于html里的a标签 第二种:wx.navigateTo({})方法 1.前端wxml 2.js应用 第三种:wx.redirectTo({}) 功能描述: 关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 类似于页面跳转时 重定向页面,类似于html中的 window.open(‘…

    2024年02月16日
    浏览(57)
  • 微信小程序中的页面跳转(通过点击按钮、调用方法的形式)

    页面跳转用的多吧、tabBar的空间有限。通过路由的方式跳转时Vue中常用的方式、小程序采用类似的做法。 – 这里通过给按钮绑定点击事件、调用方法、方法中实现页面跳转。(其它方式暂不考虑) 小程序之页面跳转 注意: this.pageRouter.navigateTo 代替 wx.navigateTo 是更优的 log

    2024年02月11日
    浏览(57)
  • 微信小程序web-view环境下H5跳转小程序页面方法

    一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转。但是web-view页面要想通过手指触碰返回小程序页面,就无法使用超级链接a标记了。那么这个问题应该如何解决呢? 首先需要在H5页面中引入JSSDK,它可以让H5页面的js文件执

    2024年01月17日
    浏览(70)
  • h5页面跳转微信小程序(最简单的方法|URL Scheme)

    H5页面跳转微信小程序的需求是普遍存在的。由于微信小程序是一种只能在微信内部访问的应用程序,而H5页面可以在任何浏览器中访问,因此需要通过跳转来实现两者之间的衔接。 对于用户来说,H5页面跳转微信小程序可以提供更好的用户体验。用户可以在H5页面中浏览和选

    2024年02月02日
    浏览(81)
  • 【微信小程序】通过使用 wx.navigateTo方法进行页面跳转,跳转后的页面中通过一些方式回传值给原页面

    以下是几种常见的回传值的方式: 使用 wx.navigateTo 方法传递参数: 在跳转时,可以在目标页面的 URL 中携带参数,然后在目标页面的 onLoad 方法中获取参数,并在目标页面中进行处理。例如: 在目标页面的 onLoad 方法中获取参数: 使用 wx.navigateBack 方法回传值: 在目标页面中

    2024年02月13日
    浏览(56)
  • 微信小程序内页跳转登录,登录完成后携带参数重新回到之前页面实现方法

    第一步:在app.js或utils.js中添加以下两个方法: 第二步:在跳转到登录页面跳转前调用setCallbackUrl方法(获当前页面的路径和参数存本地),登录页面登录成功后调用getCallBackUrl方法(提取之前存的路径和参数返回),如果没有就在catch中执行登录后的正常逻辑,比如跳转到默

    2024年02月02日
    浏览(64)
  • 基于uniapp开发的微信小程序页面跳转时出现白屏问题的解决方法

    从地区选择跳转到搜索页时会出现20秒白屏才展现搜索页,其它页面就不会出现这个问题,经分析可能是因为地区选择页面中二级联动渲染的数据是本地存储的JSON数据,由于这个数据渲染失误导致了白屏。 因为是二级联动,之前是将cata数组遍历了两遍所以导致了错误,现在

    2024年02月12日
    浏览(141)
  • 微信小程序:跳转页面

    实际调用需要根据自己业务实际情况决定,虽然各种方式一定程度上能减少内存损耗,但是业务上面流转优化才是最终要满足的,一定要从业务流转去优化去考虑,不要为了性能增加了流转复杂度 1、wx.navigateTo 保留当前页面,跳转到应用内的某个页面。可以通过调用  wx.na

    2024年02月03日
    浏览(66)
  • 微信小程序页面跳转方式+跳转小程序

    官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 跳转到其他页面(非tabBar页) 返回上一页面或返回多级页面 首先需要在当前小程序app.json中定义:需要跳转的小程序的app-id app.josn文件: 第一种方法:wx.

    2024年02月12日
    浏览(81)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包