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


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 相关文章推荐
JavaScript函数、方法、对象代码
Oct 29 Javascript
终于解决了IE8不支持数组的indexOf方法
Apr 03 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
jQuery提示插件alertify使用指南
Apr 21 Javascript
JavaScript实现点击按钮切换网页背景色的方法
Oct 17 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 Javascript
Vue.js组件通信之自定义事件详解
Oct 19 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
Postman内建变量常用方法实例解析
Jul 28 Javascript
如何在Vue.JS中使用图标组件
Aug 04 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
CPU步进是什么意思?i3-9100F B0步进和U0步进区别知识科普
2020/03/17 数码科技
php中的登陆login
2007/01/18 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
PHP中source #N问题的解决方法
2014/01/27 PHP
Zend Guard使用指南及问题处理
2015/01/07 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
详谈php ip2long 出现负数的原因及解决方法
2017/04/05 PHP
Thinkphp5.0框架视图view的模板布局用法分析
2019/10/12 PHP
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
mockjs+vue页面直接展示数据的方法
2018/12/19 Javascript
实例详解带参数的 npm script
2019/05/28 Javascript
利用vue-i18n实现多语言切换效果的方法
2019/06/19 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
jQuery实现轮播图效果demo
2020/01/11 jQuery
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Python 正则表达式入门(中级篇)
2016/12/07 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
Python基于当前时间批量创建文件
2020/05/07 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
Python安装并操作redis实现流程详解
2020/10/13 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
毕业生简单求职信
2013/11/19 职场文书
岗位职责说明书
2014/05/07 职场文书
开会通知
2015/04/20 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
ubuntu如何搭建vsftpd服务器
2022/12/24 Servers