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

微信小程序 页面跳转 传递参数的这个知识点我们在开发过程之中会经常遇到,记录一下,虽然很简单,但是对于刚刚接触的人来说,看文档不如看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
    })
  }
})

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

分割线:

通过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

再来一个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
    })

  }
})

只带一个参数跳转:

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,
    })
  }
})

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券