微信小程序 页面跳转 传递参数的这个知识点我们在开发过程之中会经常遇到，记录一下，虽然很简单，但是对于刚刚接触的人来说，看文档不如看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.jianshu.com/u/05f416aefbe1
90后前端妹子一枚，爱编程，爱运营，爱折腾。长期坚持总结工作中遇到的技术问题。
网友评论