第9课 微信小程序页面跳转传递数据wx.navigateTo：

第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"
}

复制粘贴就可以了 不懂的评论一下我第一时间解答！