微信小程序教程系列之页面跳转和参数传递(6) - 网站

微信小程序教程系列之页面跳转和参数传递(6)

分类:JavaScript进阶教程_JavaScript技术文章 · 发布时间:2021-09-17 18:59 · 阅读:7839

这篇文章主要为大家详细介绍了微信小程序教程系列之页面跳转和参数传递,微信小程序提供了3种页面跳转方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

关于页面的跳转,微信小程序提供了3种方法:

方法一:

使用API  wx.navigateTo()函数


示例:

首先先新建一个test页面

如何新建页面?

请到先阅读下面教程


index.wxml:

在index.wxml新建一个button组件,并使用bindtap事件绑定一个函数


index.js:

在index.js中的Page函数内部,添加changeToTest 函数,函数里面使用wx.navigateTo,写上需要跳转的页面,里面传入的是一个对象,对象内使用url属性,对应的就是需要跳转的页面的路径(注意:这是接收的是一个相对路径,并且页面不需要使用.wxml后缀)


运行:


方法二:

使用API  wx.redirectTo()函数


示例:

首先先新建一个test页面

如何新建页面?

请到先阅读下面教程

微信小程序的新建页面 ―― 微信小程序教程系列(4)

index.wxml:

在index.wxml新建一个button组件,并使用bindtap事件绑定一个函数

index.js:


运行:


备注:

wx.navigateTo()和wx.redirectTo()的区别:

wx.navigateTo()是保留当前页面,跳转到某个页面,跳转页面后可以返回上一页

wx.redirectTo()是关闭当前页面,跳转到某个页面,跳转页面后不能返回上一页

方法三:

使用组件 

示例:

首先先新建一个test页面

如何新建页面?

请到先阅读下面教程

微信小程序的新建页面 ―― 微信小程序教程系列(4)

index.wxml:

在index.wxml页面添加一个元素,在元素里面使用属性url就可以


运行:


跳转的数据传递

以wx.navigateTo为例:

上面讲述,wx.navigateTo传入的url是跳转的页面(使用相对路径)

 wx.navigateTo({ url:"pages/home/home" }); 

那么参数传递至下一页面,则只需要在路径后面,添加?问号,?后面接的是参数,以key-value的方式。

这里传了个value为2的参数

 wx.navigateTo({ url:"pages/home/home?type=2" }); 

然后在home.js中的onLoad()函数中得到值:option.type就可以得到了,如下:

 onLoad: function (option) { this.setData({ type:option.type, }); console.log(option.type); } 

标签:
微信小程序 页面跳转 参数传递

相关文章

一起来学习TypeScript的类型

这篇文章主要为大家详细介绍了TypeScript的类型,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

JavaScript去除字符串两端空格的三种方法

本文主要介绍了JavaScript去除字符串两端空格的三种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

html2canvas图片跨域问题图文详解

我们在进行图片保存的时候经常会发现图片跨域了,下面下面这篇文章主要给大家介绍了关于html2canvas图片跨域问题的相关资料,需要的朋友可以参考下

JavaScript中Set基本使用方法实例

因为Set中存放的数据都是不会重复的数据,我们在编写JS代码的时候,因此我们可以利用Set来帮助我们更便捷地完成许多的事,下面这篇文章主要给大家介绍了关于JavaScript中Set基本使用方法的相关资料,需要的朋友可以参考下

详解vscode中console.log的两种快速写法

这篇文章主要介绍了vscode中console.log的两种快速写法,每种方法通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

返回分类 返回首页