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

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

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

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