微信小程序页面跳转方式+跳转小程序-Toy模板网

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

一. 跳转页面方法

官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.switchTab({
  url: '/index'
})

跳转到其他页面（非tabBar页）

//redirectTo方法（会关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。）
wx.redirectTo({
  url: '/page'//页面路径
})
 
//navigateTo方法（保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。不会关闭当前页面并且页面栈最多十层）
wx.navigateTo({
  url: '/page'//页面路径
})
 
//reLaunch方法（会关闭所有页面打开到应用内的某个页面）
wx.reLaunch({
  url: '/page'//页面路径
})

//navigateBack方法（用来返回上一页面或多级页面，并关闭当前页面）
wx.navigateBack({
  delta: 2 //返回的页面数，1为返回上一页，如果delta大于现有页面数，则返回到首页。
})

二. 跳转到其他小程序

首先需要在当前小程序app.json中定义：需要跳转的小程序的app-id
app.josn文件：

  "navigateToMiniProgramAppIdList": [
    "*******" //appid
  ],

第一种方法：wx.navigateToMiniProgram（打开另一个小程序）

wx.navigateToMiniProgram({
  appId: '**********',
  path: 'page/index/index?id=123', //路径和携带的参数
  extraData: {
    foo: 'bar'
  },
  envVersion: 'develop',
  success(res) {
    // 打开成功
  },
  fail(res){
    // 打开失败
  },
  complete(res){
    // 调用结束  不管成功还是失败都执行
  }
  /**
   * appId：跳转到的小程序app-id
   * path：打开的页面路径，如果为空则打开首页，path 中 ? 后面的部分会成为 query，在小程序的 App.onLaunch、App.onShow 和 Page.onLoad的回调函数中获取query数据
   * extraData：需要传递给目标小程序的数据，目标小程序可在 App.onLaunch、App.onShow 中获取到这份数据
   * envVersion：要打开的小程序版本，有效值: develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效，如果当前小程序是正式版，则打开的小程序必定是正式版
   */ 
})

第二种方法：navigator（跳转）文章来源地址https://www.toymoban.com/news/detail-521206.html

<navigator class="btn" target="miniProgram" open-type="navigate" app-id="wx213c5ba6740c814d" version="trial">点击跳转另一个小程序</navigator>
/**
   * target：在哪个目标上发生跳转，默认当前小程序，有效值: self（当前小程序），miniProgram（其它小程序）
   * open-type：跳转方式 “avigate    对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能”
   * app-id：跳转到的小程序app-id
   * version：要打开的小程序版本，有效值: develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效，如果当前小程序是正式版，则打开的小程序必定是正式版
   */