微信小程序实现跳转的几种方式总结(推荐)


Posted in Javascript onApril 24, 2019

今天把实现微信页面的跳转的几种方法总结分享下

1.使用导航组件,标签,页面链接来实现(可以发现点击时有背景)

<!-- sample.wxml -->
<view class="btn-area">
 <navigator url="../my/my">跳转到新页面</navigator>
</view>

参数如下

微信小程序实现跳转的几种方式总结(推荐)

2.给页面布局加监听bindtap事件,然后在方法里面,通过wx.navigatorTo来实现跳转(保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面)

在my.wxml中加监听bindtap事件

<view bindtap='jump'>跳转</view>

在my.js中实现跳转

jump:function(){
  wx.navigateTo({
   url: '../login/login',
   success: function(res) {

   },
   fail: function(res) {

   },
   complete: function(res) {

   },
  })
 }

参数如下

微信小程序实现跳转的几种方式总结(推荐)

3.通过wx.redirectTo实现跳转(关闭当前页面,跳转到应用内某个页面)

navigateto_index: function (event) { 
 wx.redirectTo({ 
 url: '../index/index', 
 success: function (res) { 
 // success 
 }, 
 fail: function () { 
 // fail 
 }, 
 complete: function () { 
 // complete 
 } 
 }) 

 }

参数如下

微信小程序实现跳转的几种方式总结(推荐)

4.通过wx.navigateBack返回上一级(关闭当前页面。返回上一页面或多级页面)。

wx.navigateBack({ 
 delta: 1, // 回退前 delta(默认为1) 页面 
 success: function (res) { 
 // success 
 }, 
 fail: function () { 
 // fail 
 }, 
 complete: function () { 
 // complete 
 } 
 })

微信小程序实现跳转的几种方式总结(推荐)

以上所述是小编给大家介绍的微信小程序跳转方式详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 简单导航实现代码
Sep 11 Javascript
javascript动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
JS写的贪吃蛇游戏(个人练习)
Jul 08 Javascript
jQuery焦点图切换特效代码分享
Sep 15 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
利用node.js本地搭建HTTP服务器
Apr 19 Javascript
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
JS写滑稽笑脸运动效果
May 28 Javascript
vue模仿网易云音乐的单页面应用
Apr 24 #Javascript
微信小程序分享功能onShareAppMessage(options)用法分析
Apr 24 #Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 #Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 #Javascript
vue router 通过路由来实现切换头部标题功能
Apr 24 #Javascript
js实现全选反选不选功能代码详解
Apr 24 #Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 #Javascript
You might like
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
php实现用手机关闭计算机(电脑)的方法
2015/04/22 PHP
php curl抓取网页的介绍和推广及使用CURL抓取淘宝页面集成方法
2015/11/30 PHP
利用PHP访问带有密码的Redis方法示例
2017/02/09 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
tagName的使用,留一笔
2006/06/26 Javascript
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
node.js 一个简单的页面输出实现代码
2012/03/07 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
python实现类似ftp传输文件的网络程序示例
2014/04/08 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
Python中防止sql注入的方法详解
2017/02/25 Python
python实现批量修改文件名代码
2017/09/10 Python
python实现决策树分类算法
2017/12/21 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python设置随机种子实例讲解
2019/09/12 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
Python进程Multiprocessing模块原理解析
2020/02/28 Python
python爬虫分布式获取数据的实例方法
2020/11/26 Python
CSS3 translate导致字体模糊的实例代码
2019/08/30 HTML / CSS
StringBuilder和String的区别
2015/05/18 面试题
歌唱比赛获奖感言
2014/01/21 职场文书
飘柔洗发水广告词
2014/03/14 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
运动会演讲稿200字
2014/08/25 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
2016入党心得体会范文
2016/01/06 职场文书