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


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 相关文章推荐
正则表达式语法
Oct 09 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
Jul 26 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
javascript的函数作用域
Nov 12 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
Javascript中引用类型传递的知识点小结
Mar 06 Javascript
ionic实现底部分享功能
May 11 Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
微信小程序使用swiper组件实现类3D轮播图
Aug 29 Javascript
Vue表单输入绑定的示例代码
Nov 01 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
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP中的函数-- foreach()的用法详解
2013/06/24 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
php生成静态页面的简单示例
2014/04/17 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
基于JQuery的Select选择框的华丽变身
2011/08/23 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
2012/10/11 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
Bootstrap作品展示站点实战项目2
2016/10/14 Javascript
从0开始学Vue
2016/10/27 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
JS实现的找零张数最小问题示例
2017/11/28 Javascript
详解webpack运行Babel教程
2018/06/13 Javascript
vue实现新闻展示页的步骤详解
2019/04/11 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
Python将多个list合并为1个list的方法
2018/06/27 Python
Python threading的使用方法解析
2019/08/28 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
我的中国梦演讲稿300字
2014/08/19 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书