微信小程序开发页面跳转教程
在以往的APP或网页产品中,用户使用时可以浏览多个页面,这些产品的服务器可以承载足够多的数据。而小程序的特点就是规模小,为了不让用户在使用小程序时造成困扰,微信小程序规定页面路径只能是五层,请尽量避免多层级的交互方式。
页面跳转的话就涉及到了多个页面层级
第一种:wx.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。
OBJECT参数说明:
url String 需要跳转的应用内页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
onLoad:function(options) {
wx.navigateTo({
url:\'../index/index\' })}
第二种:wx.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
OBJECT参数说明:
url String 需要跳转的应用内页面的路径
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)
onLoad:function(options) {
wx.redirectTo({
url:\'../index/index\' }) }
第三种:wx.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。
OBJECT参数说明:
delta Number 返回的页面数,如果 delta 大于现有页面数,则返回到首页。
onLoad:function(options) {
var pages =getCurrentPages()
var num =pages.length
navigateBack:function(){
wx.navigateBack({
delta: num
})}}
微信小程序页面跳转教程由 微信小程序开发教程提供,更多视频教程关注 小程序培训学院
微信小程序开发页面跳转教程相关推荐
- 微信小程序开发-页面跳转传递参数
微信小程序开发-页面跳转传递参数 页面跳转有四种方式,分别为wx.navigateTo.wx.redirectTo.wx.reLaunch.wx.switchTab,前面三种可通过url路径携带参数实 ...
- 微信小程序开发-页面跳转的几种方式
最近在做微信小程序,碰到页面跳转的问题,总结一下页面之间跳转的方式 一.wx.navigateTo(OBJECT) 这是最普遍的一种跳转方式,其官方解释为:"保留当前页面,跳转到应用内的某个 ...
- 微信小程序开发系列 (四) :微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...
- uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动 本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
- 小程序开发页面跳转传参问题
小程序开发页面跳转传参问题 1.简单值 let id=1; wx.navigateTo({ url:'/pages/mypage/mypage?id='+id }) 取值 另一个页面 onload:f ...
- 微信小程序--简单页面跳转
微信小程序--简单页面跳转 例如:点击一个text ,跳转入一个新的页面blueberry.wxml 首先对text 设置监听事件 <view bindtap="toast" ...
- 微信小程序开发系列七:微信小程序的页面跳转
微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...
- 微信小程序开发导航:精品教程+网友观点+demo源码(5月9日更新)
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 微信小程序开发页面总结-文档(ing)
公共样式定义 /* 公共样式 */ page{height: 100%;background: #f7f7f7; } view,image,input,text,button,textarea {bo ...
- 微信小程序开发---页面生命周期
微信小程序开发---生命周期 何为生命周期 小程序全局[app.js]---生命周期 小程序页面[pages/pagename.js]---生命周期 何为生命周期 生命周期是指一个事物从创建到销毁的一 ...
最新文章
- 透过计算机视觉,看看苏伊士运河堵船
- 在Windows2016中回到DOS时代用tt练习打字
- 【BZOJ4004】装备购买(线性基)
- 无法启动程序,因为计算机中丢失msvcr.dll
- 如何在Eclipse和Android Studio中导入library project
- K8S集群的搭建:环境准备及相关命令
- Node — 第三天
- html使用element ui_Kendo UI for jQuery使用教程:自定义小部件(二)
- python 生意_本周互联网关注(2015515):劳动人民的生意经、python好还是go好
- python怎样编写定时程序_Python如何实现定时器功能
- 【今日CV 视觉论文速览】 Part2 25 Jan 2019
- 11: Nginx安装lua支持
- thread和threadLocal之间的关系
- VS2017编译OpenJDK,编译通过的工程包下载链接
- 网安学习日志(5)流量分析基础
- Redis的持久化方式
- ARDUINO 入门学习第三课
- Apple Pencil平替哪个好?Apple Pencil平替笔推荐
- Git系列——删除文件的找回
- Google搜索技巧语法
热门文章
- 云网融合个人学习--云网融合典型场景分析【摘抄】
- 利用手机基站获取位置
- 天线远场定义_天线近场与远场的划分(转)
- RADIUS协议解析
- 东北大学c语言作业答案,{东北大学}2018年秋学期《画法几何及土木建筑制图》在线作业2课后参考答案...
- 电工电子技术基础----multisim7使用及实验过程
- java-导入 导出 下载模板 等功能
- 山科大离散数学期末考试_西安电子科技大学网络与继续教育学院 2020 学年上学期 《离散数学》期末考试试题...
- 安卓psp模拟器哪个好_更完美!安卓PSP模拟器PPSSPP 0.9.9发布
- ffmpeg转码视频