一文读懂微信小程序页面导航

 更新时间:2022年11月14日 08:52:09   作者:前端小刘不怕牛牛  
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用,下面这篇文章主要给大家介绍了关于如何通过一文读懂微信小程序页面导航的相关资料,需要的朋友可以参考下

一,页面导航

首先,我们先来了解一下什么叫页面导航,其实就是通过识别用户点击来进行页面的跳转。

这一点有点类似于vue中的vue-router路由,我们可以通过<router-link>标签实现单页面内分页面的渲染,只不过小程序的页面导航相对来说,比较简单。

小程序的页面导航分为两种,声明式导航编程式导航,话不多说,我们现在正式开始。

1.1 声明式导航

声明式导航就是利用小程序的<navigator>实现的,其中有url属性,在效果上就类似浏览器的a超链接标签。

1.1.1 导航到tarBar页面

还记得我们之前学到的tarBar是啥不,底部的导航栏,点击后可以跳转到相对应的页面,而用<navigator>也可以实现。

我们需要设置两个属性在navigator组件中,urlopen-type

url:设置需要跳转的页面所处的位置(页面地址),并且前面必须由/开头,比如——url = '/pages/content/conten'
最后一个content不需要加文件后缀。

open-type:设置navigator的跳转方式,这里选择值为switchTab,表示跳转的页面是被配置到tarBar中的。
tarBar页面配置:

app.json文件中

这样我们就实现了点击跳转到tarBar设置的页面中啦。

<navigator url="/pages/list/list">点击跳转</navigator>

你还可以在里面嵌套其他组件,比如嵌套一个button

1.1.2 导航到非tarBar页面

tarBar页面就是你在page文件夹已经定义的页面,但是没有在app.json中的tarBar配置。

在实际开发中,这种场景也是非常多见了,一个比较复杂的小程序都会有比较多的页面,而这么多页面又不会都在tarBar中配置,所有这么页面的跳转就得靠这个方法来实现啦。

与上文一样,也是需要urlopen-type两个属性,url的写法不变,有变化的是open-type的值需要该为navigate

<navigator url="/pages/list/list" open-type='navigate'>
</navigator>

1.1.3 后退导航

<navigator>还可以实现页面后退功能。

这时候我们就不用设置url属性了,需要更改的是,设置open-type的值为navigateBack

我们可以通过设置delta设置回退的层级,如果不设置,那么默认值将会为1。

<navigator open-type="navigateBack" delta='1'></navigator>

1.2 编程式导航

编程式导航是利用微信小程序顶级对象wx下面的几个方法来实现,接下来我们来一一讲解。

1.2.1 导航到tarBar页面

我们将使用wx下的switchTab(obj)方法,其中obj为对象。

对象中有四个属性,urlsuccessfailcomplete

其中`

  • url是需要跳转的页面地址
  • success 是接口调用成功执行的回调函数
  • fail是接口调用失败执行的回调函数
  • complete是完成调用执行的回调函数,无论成功与否,都会执行。
wx.swithTab({
	url : '/pages/list/list',
	...
	)}

1.2.2 导航到非tarBar页面

实现该功能我们需要调用wx下的navigateTo(obj)方法。

对象中的参数类型与1.2.1一致。

wx.navigateTo({
	url : '/page/list/list',
	success : function(){console.log('success');}
	})

1.2.3 后退导航

这里的后退导航功能,同样的我们需要用到wx顶级对象下的navigateBack(obj)方法。

不过不同的是,obj对象中的参数,url改为delta,表示会退的 层级,默认值为1,也就是后退一页。

1.3 导航传参

如果我们实现页面跳转之后,下一个页面想要调用前一个页面的参数时,我们该怎么办?

这时候就可以用到导航传参了,导航传参其实和在浏览器中使用GET请求很像,可以把参数设置在url中,传递到下一个页面。

在格式上也是通过键值对的方法,路径跟参数之间用?隔开,键与值之间用=隔开,每个参数之间着用&隔开。

如下所示:

url= "/pages/list/list?name=myname&pass=yes"

今天的小程序文章到这里就结束啦,如果觉得对您有帮助的话,可以关注牛牛接下来的文章,感谢您对支持,您的支持是我创作的最大动力!!!

总结

到此这篇关于微信小程序页面导航的文章就介绍到这了,更多相关微信小程序页面导航内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js控制web打印(局部打印)方法整理

    js控制web打印(局部打印)方法整理

    本文整理了一些常用的web打印及局部打印的方法以备不时之需,感兴趣的朋友可以学习下
    2013-05-05
  • 微信小程序实现短信验证码倒计时

    微信小程序实现短信验证码倒计时

    这篇文章主要为大家详细介绍了微信小程序实现短信验证码倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • javascript substr和substring用法比较

    javascript substr和substring用法比较

    在js中substring和substr都是用来截取字符串的,那么substring和substr之间的具体区别在哪里,有没有区别呢,下面我来给各位详细引用一些实例来介绍这些问题
    2009-06-06
  • 纯javaScript、jQuery实现个性化图片轮播【推荐】

    纯javaScript、jQuery实现个性化图片轮播【推荐】

    本文主要介绍了纯javaScript、jQuery实现个性化图片轮播的方法,并在文章结尾附上源码下载。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • 为javascript添加String.Format方法

    为javascript添加String.Format方法

    每次在javascript中用加号合成字符串,真的没法忍受了,今天终于找到一高手写的方法,与大家分享。
    2009-11-11
  • 实现在 Chrome 中执行 JavaScript 代码

    实现在 Chrome 中执行 JavaScript 代码

    这篇文章主要介绍了实现在 Chrome 中执行 JavaScript 代码,下面来介绍如何在 Chrome 中打开开发者工具,以及如何在开发者工具中运行调试 JavaScript 代码,具有一的的参考价值,需要的朋友可以参考一下
    2022-03-03
  • JavaScript惰性载入函数实例分析

    JavaScript惰性载入函数实例分析

    这篇文章主要介绍了JavaScript惰性载入函数,结合实例形式分析了JavaScript惰性载入函数的概念、原理、实现方法及相关操作注意事项,需要的朋友可以参考下
    2019-03-03
  • JavaScript最少知识原则介绍与体现

    JavaScript最少知识原则介绍与体现

    最少知识原则(LKP)说的是一个软件实体应当尽可能少地与其他实体发生相互作用。这里的软件实体是一个广义的概念,不仅包括对象,还包括系统、类、模块、函数、变量等
    2022-08-08
  • JavaScript实现日期格式化的操作详解

    JavaScript实现日期格式化的操作详解

    在我们做业务开发的漫长岁月里,会多次跟时间打交道,相信大多数小伙伴对日期格式化也并不陌生,本文简单记录了JavaScript实现日期格式化的过程,以及一些拓展,希望对大家有所帮助
    2023-05-05
  • 微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法

    微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法

    这篇文章主要给大家介绍了关于微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法,文中通过示例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-08-08

最新评论