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