第9课 微信小程序页面跳转传递数据wx.navigateTo:
先看看效果图:
方法一: 跳转页面不传数据
方法二: 跳转页面传数据
下面我们来看看两个页面的全部实现代码吧:
index1.wxml全部代码如下:
<!--pages/index1/index1.wxml-->
<text>这里是index1.wxml</text>
<!-- bindtap点击事件 -->
<view bindtap='jump1'>跳转页面:方法一</view>
<view bindtap='jump2'>跳转页面:方法二</view>
index1.js全部代码如下:
// pages/index1/index1.js
Page({
/**
* 页面的初始数据
*/
data: {
aaa:['这里是index1页面传过来的数据','a','b','c','d','e','f']
},
//页面跳转方法1
jump1(){
wx.navigateTo({
url: '/pages/index2/index2',
})
},
//页面跳转方法2
jump2(){
//需要传递的数据
let data = this.data.aaa
//encodeURI:对传递的数据编码 (怕传递的数据被解析成代码)
wx.navigateTo({
url: '/pages/index2/index2?data='+encodeURI(JSON.stringify(data)),
})
}
})
index2.wxml全部代码如下:
<!--pages/index2/index2.wxml-->
<text>这里是index2.wxml</text>
<!--遍历输出bbb内的数据-->
<view wx:for="{{bbb}}">{{item}}</view>
index2.js全部代码如下:
Page({
/**
* 页面的初始数据
*/
data: {
bbb: ["index2的初始数据","看到这个说明:","index1页面跳转没有传递数据过来"]
},
//生命周期函数--监听页面加载 options接收传递过来的数据
onLoad: function (options) {
//判断有无传递数据 如果没有传递数据就不执行
if (options.data){
this.setData({
bbb: JSON.parse(decodeURI(options.data))
})
}
}
})
app.json页面挂载全部代码如下:
{
"pages": [
"pages/index1/index1",
"pages/index2/index2"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json"
}