E企盈营销工具技术服务商 热线:4006-838-530

【微信小程序】小程序之间跳转(路由)参数传递及跳转方式详解和封装

E企盈直播平台营销卖货系统

今天我们来说道说道微信小程序里面当中的几种跳转方式!微信小程序跳转的方式总共有5种,可以对应各种的应用场景。1.wx.navigateTo()保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。可封装函数为://跳转新页面页面,保留当前页面。function navigateTo(url) {    wx.navigateTo({        url: url    })}2.wx.redirectTo()关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。可封装函数为://跳转新页面页面,关闭当前页面。function redirectTo(url) {    wx.redirectTo({        url: url    })}3.wx.switchTab()跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面可封装函数为://关闭其他所有非 tabBar 页面,跳转到 tabBar 页面function reLaunch(url) {  //url必须为tabbar页面的路径,否则没有效果  wx.switchTab({    url: url  })}4.wx.navigateBack()关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。可封装函数为://返回页面function navigateBack(delta) {  //注意:此处的delta为number(数字)    wx.navigateBack({        delta: delta    })} 另接getCurrentPages的函数封装方法//获取当前页urlfunction getCurrentPageUrl() {  var pages = getCurrentPages()                //获取加载的页面  var currentPage = pages[pages.length – 1]    //获取当前页面的对象  var url = currentPage.route                  //当前页面url  return url}5.wx.reLaunch()关闭所有页面,打开到应用内的某个页面可封装函数为://关闭所有页面,打开到应用某个页面function reLaunch(url) {    wx.reLaunch({        url: url    })}另加两个不常用的跳转到其他小程序和返回到之前的小程序的方法6-1.wx.navigateToMiniProgram()打开另一个小程序可封装函数为://appId 要打开的小程序appId, path 打开的页面路径,如果为空则打开首页(path 中 ? 后面的数据可以再小程序的 App.onLaunch、App.onShow 和 Page.onLoad 的回调函数当中获取到), extraData(object) 需要传递给目标小程序的数据(目标小程序可在 App.onLaunch,App.onShow 中获取到传过来的数据), envVersion 要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版,则打开的小程序必定是正式版。function navigateToMiniProgram(appId, path, extraData, envVersion){  wx.navigateToMiniProgram({    appId: appId,    path: path,    extraData: extraData,    envVersion: envVersion  })}6-2.wx.navigateBackMiniProgram(Object object)返回到上一个小程序。只有在当前小程序是被其他小程序打开时可以调用成功注意:微信客户端 iOS 6.5.9,Android 6.5.10 及以上版本支持可封装函数为://extraData(object) 需要返回给上一个小程序的数据,上一个小程序可在 App.onShow 中获取到这份数据。function navigateBackMiniProgram(extraData){  wx.navigateBackMiniProgram({    extraData: extraData,  })}以上可整合为一下redirect.js里,具体如下://跳转新页面页面,保留当前页面。function navigateTo(url) {    wx.navigateTo({        url: url    })}//返回页面function navigateBack(delta) {    wx.navigateBack({        delta: delta    })}//跳转新页面页面,关闭当前页面。function redirectTo(url) {    wx.redirectTo({        url: url    })}//关闭所有页面,打开到应用某个页面function reLaunch(url) {    wx.reLaunch({        url: url    })}//获取当前页urlfunction getCurrentPageUrl() {  var pages = getCurrentPages()                //获取加载的页面  var currentPage = pages[pages.length – 1]    //获取当前页面的对象  var url = currentPage.route                  //当前页面url  return url}//appId 要打开的小程序appId, path 打开的页面路径,如果为空则打开首页(path 中 ? 后面的数据可以再小程序的 App.onLaunch、App.onShow 和 Page.onLoad 的回调函数当中获取到), extraData(object) 需要传递给目标小程序的数据(目标小程序可在 App.onLaunch,App.onShow 中获取到传过来的数据), envVersion 要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。如果当前小程序是正式版,则打开的小程序必定是正式版。function navigateToMiniProgram(appId, path, extraData, envVersion){  wx.navigateToMiniProgram({    appId: appId,    path: path,    extraData: extraData,    envVersion: envVersion  })}//extraData(object) 需要返回给上一个小程序的数据,上一个小程序可在 App.onShow 中获取到这份数据。function navigateBackMiniProgram(extraData){  wx.navigateBackMiniProgram({    extraData: extraData,  })}module.exports = {             //抛出封装好的函数方法,以便在其他需要的页面进行引入调用。    navigateTo: navigateTo,    navigateBack: navigateBack,    redirectTo: redirectTo,    reLaunch: reLaunch,    getCurrentPageUrl: getCurrentPageUrl,}具体用法如下:index.jsvar redirect = require(‘路径找到redirect.js即可’)  //引入封装好的JS;然后再需要跳转的地方调用方法,例如保留当前页面并进行跳转传递参数(以下仅供参考,以自己的实际情况为准):var url = options.id + ‘&type=’ + options.type + ‘&article_type=’ + options.article_type + ‘&pic=’ + options.fenPic;redirect.navigateTo(‘../detail/detail?id=’ + url)谨记(这个地方拼接的时候不要写错哦!):以上就是微信小程序的几种跳转方式及封装方法,希望能够对你有帮助!如果没有找到你想要的封装方法可以去我置顶的那一篇博客看一下,希望有你需要的,点击效果棒棒哒,哦! ——– 嘿嘿嘿临时补足一下,之前给忘了还有一个可以跳转的方式就是navigator组件7.navigator页面链接。参数可传为:target   在哪个目标上发生跳转,默认当前小程序 url   当前小程序内的跳转链接 open-type   跳转方式 delta   当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数 app-id   当target=”miniProgram”时有效,要打开的小程序 appId path   当target=”miniProgram”时有效,打开的页面路径,如果为空则打开首页 extra-data   当target=”miniProgram”时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch(),App.onShow() 中获取到这份数据。详情 version   当target=”miniProgram”时有效,要打开的小程序版本 hover-class   指定点击时的样式类,当hover-class=”none”时,没有点击态效果 hover-stop-propagation   指定是否阻止本节点的祖先节点出现点击态 hover-start-time   按住后多久出现点击态,单位毫秒 hover-stay-time   手指松开后点击态保留时间,单位毫秒 bindsuccess   当target=”miniProgram”时有效,跳转小程序成功 bindfail   当target=”miniProgram”时有效,跳转小程序失败 bindcomplete   当target=”miniProgram”时有效,跳转小程序完成 target self当前小程序 miniProgram其它小程序 open-type navigate对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 redirect对应 wx.redirectTo 的功能 switchTab对应 wx.switchTab 的功能 reLaunch对应 wx.reLaunch 的功能 navigateBack对应 wx.navigateBack 的功能 exit退出小程序,target=”miniProgram”时生效 例如:navigator url=”/page/navigate/navigate?title=navigate” hover-class=”navigator-hover”    跳转到新页面/navigator

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 【微信小程序】小程序之间跳转(路由)参数传递及跳转方式详解和封装
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏