微信小程序 頁(yè)面跳轉(zhuǎn) 傳遞參數(shù)的這個(gè)知識(shí)點(diǎn)我們?cè)陂_發(fā)過(guò)程之中會(huì)經(jīng)常遇到，記錄一下寓辱，雖然很簡(jiǎn)單爷肝，但是對(duì)于剛剛接觸的人來(lái)說(shuō)，看文檔不如看demo來(lái)的快和方便炼邀。
先看一下官方給出的文檔：
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=我來(lái)到了這個(gè)神奇的界面并且認(rèn)識(shí)了一個(gè)萌妹子&&what=wangting" hover-class="navigator-hover">跳轉(zhuǎn)到新頁(yè)面</navigator>
</view>
index.js
Page({
data: {
},
//事件處理函數(shù)
onLoad: function () {
},
})
要把參數(shù)傳遞給navigator界面
navigator.wxml
<view> {{title}} </view>
<view > {{what}} </view>
navigator.js
Page({
data: {},
onLoad: function(options) {
// 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
this.setData({
title: options.title,
what: options.what
})
}
})
效果
傳遞的兩個(gè)參數(shù)到了這個(gè)界面了
分割線：
通過(guò)js里面的綁定的函數(shù)事件來(lái)跳轉(zhuǎn)
index.wxml
<view bindtap="bindViewTap" class="up">
我要綁定事件帶著兩個(gè)參數(shù)跳轉(zhuǎn)界面
</view>
index.js
Page({
data: {
},
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: '../navigator/navigator?title=我來(lái)到了這個(gè)神奇的界面并且認(rèn)識(shí)了一個(gè)萌妹子&&what=wangting'
// url: '../logs/logs'
})
},
//事件處理函數(shù)
onLoad: function() {},
})
navigator.wxml
<view> {{title}} </view>
<view > {{what}} </view>
navigator.js
Page({
data: {},
onLoad: function(options) {
// 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
this.setData({
title: options.title,
what: options.what
})
}
})
效果：
http://recordit.co/rDhRuFEpYc
再來(lái)一個(gè)demo：便于理解和實(shí)踐
index.wxml
<view>
<text>姓名：{{name}}</text>
</view>
<view>
<text>年齡：{{age}}</text>
</view>
<button bindtap='buttonListener'>攜參數(shù)跳轉(zhuǎn)界面</button>
index.js
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
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({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
name: null,
age: null
},
/**
* 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
*/
onLoad: function (options) {
var that = this
that.setData({
name: options.nameData,
age: options.ageData
})
}
})
只帶一個(gè)參數(shù)跳轉(zhuǎn)：
index.wxml
<view>
<text>姓名：{{name}}</text>
</view>
<button bindtap='buttonListener'>攜參數(shù)跳轉(zhuǎn)界面</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,
})
}
})
原文作者：祈澈姑娘魄揉。 技術(shù)博客：http://www.reibang.com/u/05f416aefbe1
90后前端妹子一枚，愛編程拭宁，愛運(yùn)營(yíng)洛退，愛折騰。長(zhǎng)期堅(jiān)持總結(jié)工作中遇到的技術(shù)問(wèn)題杰标。
