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

微信小程序 页面跳转 传递参数的这个知识点我们在开发过程之中会经常遇到,记录一下,虽然很简单,但是对于刚刚接触的人来说,看文档不如看demo来的快和方便。
先看一下官方给出的文档:

https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html?search-key=wx.navigateTo()

index.wxml

 <view class="btn-area">
 <navigator url="../navigator/navigator?title=我来到了这个神奇的界面并且认识了一个萌妹子&&what=wangting" hover-class="navigator-hover">跳转到新页面</navigator>
 </view>

index.js

Page({
  data: {

  },

  //事件处理函数

  onLoad: function () {
  },

})

要把参数传递给navigator界面

navigator.wxml

<view> {{title}} </view>

<view > {{what}} </view>

navigator.js

Page({
  data: {},
  onLoad: function(options) {
    // 生命周期函数--监听页面加载
    this.setData({
      title: options.title,
      what: options.what
    })
  }
})

效果
传递的两个参数到了这个界面了

5640239-323ff5db48809058.png

分割线:

通过js里面的绑定的函数事件来跳转
index.wxml

<view bindtap="bindViewTap" class="up">
   我要绑定事件带着两个参数跳转界面
</view>

index.js

Page({
  data: {

  },

  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../navigator/navigator?title=我来到了这个神奇的界面并且认识了一个萌妹子&&what=wangting'
      //  url: '../logs/logs'
    })
  },

  //事件处理函数

  onLoad: function() {},

})

navigator.wxml

<view> {{title}} </view>
<view > {{what}} </view>

navigator.js

Page({
  data: {},
  onLoad: function(options) {
    // 生命周期函数--监听页面加载
    this.setData({
      title: options.title,
      what: options.what
    })
  }
})

效果:
http://recordit.co/rDhRuFEpYc

5640239-2389148f8375f76d.gif

再来一个demo:便于理解和实践
index.wxml

<view>
  <text>姓名:{{name}}</text>
</view>

<view>
  <text>年龄:{{age}}</text>
</view>

<button bindtap='buttonListener'>携参数跳转界面</button>

index.js


Page({

  /**
   * 页面的初始数据
   */
  data: {
    name: '王小婷',
    age: '22'

  },

  buttonListener: function () {
    var that = this
    wx.navigateTo({
      url: '/pages/navigator/navigator?nameData=' + that.data.name + '&ageData=' + that.data.age
    })
  }
})

navigator.wxml

<view>
<text>我的姓名是:{{name}}</text>
</view>
<view>
<text>我的年龄是:{{age}}</text>
</view>

navigator.js


Page({

  /**
   * 页面的初始数据
   */
  data: {
    name: null,
    age: null

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    that.setData({
      name: options.nameData,
      age: options.ageData
    })

  }
})
5640239-e77687cc63dc6c89.gif

只带一个参数跳转:

index.wxml

<view>
  <text>姓名:{{name}}</text>
</view>
<button bindtap='buttonListener'>携参数跳转界面</button>

index.js

Page({
  data: {
    name: '王小婷'
  },
  buttonListener: function () {
    var that = this
    wx.navigateTo({
      url: '/pages/navigator/navigator?nameData=' + that.data.name 
    })
  }
})

navigator.wxml

<view>
<text>我的姓名是:{{name}}</text>
</view>

navigator.js

Page({
  data: {
    name: null
  },
  onLoad: function (options) {
    var that = this
    that.setData({
      name: options.nameData,
    })
  }
})

原文作者:祈澈姑娘。 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子一枚,爱编程,爱运营,爱折腾。长期坚持总结工作中遇到的技术问题。

热门推荐:前端,Java,产品经理,微信小程序,Python等200G资源合集大放送

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值