第一种:<navigator></navigator>标签.

这是最常见的一种跳转方式,相当于html里的a标签.但需要注意的是该方法不能跳转tabbar页面.

格式为:

 <navigator url="........"></navigator>

第二种:wx.navigateTo.

通过构造js函数,在函数中调用该接口可实现页面跳转的效果.但该接口同样不能跳转tabbar页面.跳转后左上角有返回小箭头,点击可返回原本页面.

格式为:

  <view class="select_calculator" bindtap="next_calculator">

next_calculator:function () {wx.navigateTo({url: '/pages/calculator/calculator',})},

第三种:wx.redirectTo.

关闭当前页面，跳转到应用内的某个页面(不能跳转tabbar页面)。类似于html中的 window.open('.....');

跳转后左上角出现返回小箭头,点击后可返回原本页面.

第四种:wx.switchTab.

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面；该方法只能跳转tabbar页面.

例如:

js:

  post_calculator:function () {wx.switchTab({url: '/pages/calculator/calculator',})},})

第五种:wx.reLaunch.

关闭所有页面，打开到应用内的某个页面。

跟 wx.redirectTo 一样左上角不会出现返回箭头，但两者却不完全相同；

题外话：

Gitee地址:Simple calculator: 微信小程序,简易计算器.

自己写了个练手的小程序，有需要的同鞋可以看看.

更多内容请关注：

微信小程序学习之五种页面跳转方法.相关推荐

微信小程序学习7：路由跳转 - wx.navigateTo() wx.redirectTo()...
微信小程序学习7:路由跳转 - wx.navigateTo() wx.redirectTo()- 文章目录微信小程序学习7:路由跳转 - wx.navigateTo() wx.redirectTo( ...
微信小程序学习6：页面生命周期回调函数
微信小程序学习6:页面生命周期回调函数文章目录微信小程序学习6:页面生命周期回调函数 1 生命周期图像 2 生命周期回调函数触发条件 onLoad(Object query) onShow() o ...
微信小程序动态更改标题栏_微信小程序实现动态设置页面标题的方法【附源码下载】...
本文实例讲述了微信小程序实现动态设置页面标题的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① WXML文件标题1 标题2 标题3 还原 ② JS文件 Page({ // 设置 ...
微信小程序携带参数的页面跳转
日常我们在手机app购物的时候,点击app主页琳琅满目的商品,就会跳转到商品的具体页面. 无论我们点击哪个商品,跳转到商品具体页面的布局都是一样的,但页面内的数据不一样,比如说商品名称,图片等等不一样 ...
二、零基础入门微信小程序项目开发之页面跳转实现
前言哈喽,大家好,我是明哥上一篇博客我们讲完了项目的引导页面的开发,这篇博文我们来讲讲如何从引导页页面跳转到我们的新闻预览页面,这是我们就要引入微信小程序的路由 ,什么是路由相信有前端开发经验的小伙 ...
微信小程序页面栈_浅谈下微信小程序中的路由(页面跳转、返回、刷新、页面栈)...
什么是小程序里的"路由"?路由器吗?蒙蔽?好吧,在WEB应用中它其实就是分组数据包从源到目的地时,决定端到端路径的网络范围的进程:在小程序里就是设置页面的跳转,返回,自动刷新等一些 ...
【微信】微信小程序应用内的页面跳转在添加了tab以后就跳转不成功的问题解决...
在微信小程序中,本来应用页面内绑定在按钮上跳转页面可以成功,但是将页面添加在tab以后就不能实现跳转了原本代码如下: //事件处理函数bindViewTap: function() {wx.navi ...
微信小程序学习(四)路由页面配置
创建路由,也就是把我们之前几个示例的页面连起来,可以相互跳转在app.json添配置是给主页面添加tab页代码 {"pages": ["pages/todo/to ...
微信小程序学习笔记(4) -- 页面间的跳转和传值
文章目录页面间跳转页面间跳转 --- 导航页面间传值页面导航模式--redirect 改进:使用redirect方式跳转导航元素点击高亮如果设置不高亮? 如何自定义高亮效果普通元素如何设 ...

微信小程序学习之五种页面跳转方法.