微信小程序中按钮绑定点击事件（bindtap）实现页面跳转（redirectTo、navigataTo），并且进行数据传递( url: '../logs/logs?id=1')

您所在的位置：网站首页 › paperpass怎么微信绑定 › 微信小程序中按钮绑定点击事件（bindtap）实现页面跳转（redirectTo、navigataTo），并且进行数据传递( url: '../logs/logs?id=1')

微信小程序中按钮绑定点击事件（bindtap）实现页面跳转（redirectTo、navigataTo），并且进行数据传递( url: '../logs/logs?id=1')

2024-06-28 22:55| 来源: 网络整理| 查看: 265

定义两个页面：

在这里插入图片描述

绑定点击事件后代码：

在这里插入图片描述

实现跳转有两种方法：

1、navigateTo

//实现登录跳转 login:function(){ wx.navigateTo({ url: '../logs/logs', //跳转页面路径 }) }

2、redirectTo

//实现登录跳转 login:function(){ wx.redirectTo({ url: '../logs/logs', //跳转页面路径 }) }

这两种方式有什么区别？？？这先不急着解释。

下面由我一一道来。

1、首先先把index.js和logs.js文件里的内容清空。因为我是在这两个文件中定义这两个页面的，里面的代码是初始化就有的。如果你是新建的文件，就不用管这一步。

2、在这两个文件中分别都添加Page字段，代码会自动补全。

3、在每一个函数中添加输出console.log(），如图：

在这里插入图片描述 4、测试： (1)、navigateTo 测试点击编译：点击“登录”按钮 (2)、redirectTo测试点击编译：点击“登录”按钮 5、对于这一两个的区别： redirectTo是把旧页面直接替换成新的页面相当于把旧页面给卸载了，不能返回到旧页面；而navigataTo是把旧页面给隐藏，再运行新页面，还能返回。（留意：左上角）

页面之间数据传递：

添加输入框：在这里插入图片描述

要进行数据传递，那么就要先获取数据，获取输入框的数据。

1、输入框绑定bindinput 在这里插入图片描述 2、该 index.js 中定义一个函数，把获取到的数据输出看看。

nameinput:function(name){ console.log(name) }

3、在输入框中填写数据，看输出什么在这里插入图片描述 4、点击①中的小三角形 5、这时看到了刚输入的数据，那要怎样才能直接输出呢？参数调用

nameinput:function(name){ console.log(name.detail.value) }

6、再编译：在这里插入图片描述

获取完数据后，怎样进行传递呢？

直接在跳转页面路径上加 **？**后面接上要传递的数据，比如 name = 张三，但是，我还有没有定义过一个变量，这时先要定义一个变量。在这里插入图片描述并把获取到输入框的数据赋值给他

nameinput:function(name){ this.setData({userName:name.detail.value}) }

在跳转路径那添加数据在这里插入图片描述

//实现登录跳转 login:function(){ wx.navigateTo({ url: '../logs/logs?userName='+this.data.userName, //跳转页面路径 }) }

此时，已把数据传到 logs 页面去了

logs页面接收并显示

onLoad: function (options) { this.setData({username:options.userName}) }

onLoad：该生命周期函数是监听页面加载，加载数据的

最后编译：

在这里插入图片描述

全部源码： index目录：

js代码

//index.js //获取应用实例 const app = getApp() Page({ /** * 页面的初始数据 */ data: { userName: null }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log("index---onLoad---监听页面加载---登录页面") }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { console.log("index---onReady---监听页面初次渲染完成---登录页面") }, /** * 生命周期函数--监听页面显示 */ onShow: function () { console.log("index---onShow---监听页面显示---登录页面") }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { console.log("index---onHide---监听页面隐藏---登录页面") }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { console.log("index---onUnload---监听页面卸载---登录页面") }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { console.log("index---onPullDownRefresh---监听用户下拉动作---登录页面") }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { console.log("index---onReachBottom---页面上拉触底事件的处理函数---登录页面") }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { console.log("index---onShareAppMessage---用户点击右上角分享---登录页面") }, //实现登录跳转 login:function(){ wx.navigateTo({ url: '../logs/logs?userName='+this.data.userName, //跳转页面路径 }) }, // //实现登录跳转 // login:function(){ // wx.redirectTo({ // url: '../logs/logs', //跳转页面路径 // }) // } nameinput:function(name){ this.setData({userName:name.detail.value}) } })

wxml代码

姓名登录

wxss代码

page{ height: 100%; } .test1{ height: 100%; width: 100%; background-color: blanchedalmond; display: flex; flex-direction: column; justify-content: center; } .input{ height: 20%; width: 100%; display: flex; flex-direction: column; align-items: center; } .name{ color: #888; font-size: 20px; width: 90%; } .username{ border: solid #888 2px; height: 30px; width: 90%; font-size: 20px; padding-top: 8px; } logs目录:

js代码

Page({ /** * 页面的初始数据 */ data: { username:null }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.setData({username:options.userName}) console.log("logs---onLoad---监听页面加载---信息页面") }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { console.log("logs---onReady---监听页面初次渲染完成---信息页面") }, /** * 生命周期函数--监听页面显示 */ onShow: function () { console.log("logs---onShow---监听页面显示---信息页面") }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { console.log("logs---onHide---监听页面隐藏---信息页面") }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { console.log("logs---onUnload---监听页面卸载---信息页面") }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { console.log("logs---onPullDownRefresh---监听用户下拉动作---信息页面") }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { console.log("logs---onReachBottom---页面上拉触底事件的处理函数---信息页面") }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { console.log("logs---onShareAppMessage---用户点击右上角分享---信息页面") } })

wxml代码

欢迎您

【本文地址】

公司简介

联系我们