微信小程序页面传值的方式

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/SunshineBlog/article/details/83013618

假设把A页面的值传给B页面：

首先是A页面传值相关的：

页面设计：

<view class='content' wx:for='{{menuList}}' wx:for-index="parentIndex">
  <view class='item' data-parentIndex='{{parentIndex}}' data-index='{{index}}' wx:for='{{item}}' bindtap='muenSubClick' data-introduce='{{sub}}' wx:for-item='sub'>{{sub.name}}</view>
</view>

js页面：

var app = getApp();//这一句在传下标的时候很重要哟
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //menuList:""
    menuList: [
      [{
          name: '菜单1',
          url: '../navigateTo/navigateTo',
          content: '我是菜单一'
        },
        {
          name: '菜单2',
          url: '../logs/logs',
          content: '我是菜单二'
        },
        {
          name: '菜单3',
          url: '../movie/movie',
          content: '我是菜单三'
        },
        {
          name: '菜单4',
          url: '../userinfo/userinfo',
          content: '我是菜单四'
        }
      ],
      [{
          name: '菜单5',
          url: '121',
          content: '我是菜单五'
        },
        {
          name: '菜单6',
          url: '121',
          content: '我是菜单六'
        },
        {
          name: '菜单7',
          url: '121',
          content: '我是菜单七'
        },
        {
          name: '菜单8',
          url: '121',
          content: '我是菜单八'
        }
      ],
    ]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    //使用appjson设置值
    this.setData({
      menuList: app.globalData.menuList,
    });
  },
  muenSubClick: function(res) {
    console.log(res.target.dataset);
    var subInfo = res.target.dataset.introduce //获取菜单信息
    var content = JSON.stringify(subInfo) //转换为json对象
    var url = subInfo.url; //获取跳转路径
    //跳转页面后有返回键
    wx.navigateTo({
      url: url+'?subInfo=' + content  //传对象
    })

    //传下标1
    // var index=res.target.dataset.introduce.index;//获取当前点击菜单的下标
    // wx.navigateTo({
    //   url: url + '?subInfoIndex=' + index
    // })
    
        //传下标 2
    // var dataset = res.target.dataset; //情况比较特殊，主要取里面的两个下标
    // wx.navigateTo({
    //   url: url + '?parentIndex=' + dataset.parentindex + '&index=' + dataset.index
    // })

    // //本地存储
    // wx.setStorage({
    //   key: 'subInfo',
    //   data: content,
    // })
    // wx.navigateTo({
    //   url: url
    // })
  }
})

B页面获取值：

页面：

<!--pages/navigateTo/navigateTo.wxml-->
<view>{{introduce.name}}</view>
<view>{{introduce.content}}</view>

js文件：

// pages/navigateTo/navigateTo.js
var app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    introduce: ""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

    //传对象
    var content = JSON.parse(options.subInfo);

    //传下标 1   传下标以这一种方法为主
    // var content = app.globalData.menuList[options.subInfoIndex]
    // console.log(content);

    //传下标 2
    // var parentIndex = options.parentIndex;
    // var index = options.index;
    // console.log(options)
    //var content = app.globalData.menuList[parentIndex][index]

    this.setData({
      introduce: content
    });

    //使用本地存储
    //   var that = this;
    //   //获取本地存储处对象
    //   wx.getStorage({
    //     key: 'subInfo',
    //     success: function(res) {
    //       console.log(res.data);
    //       that.setData({
    //         introduce: JSON.parse(res.data),
    //       });
    //     },
    //   })
  }
})

ps:注意在使用传下标方法传值的时候需要在小程序的app.js文件里面配置数据源，如下图所示：

更多绑定数据源的方法见：https://blog.csdn.net/SunshineBlog/article/details/83003577

 
  globalData: {
    userInfo: null,
    menuList: [
      [{
          name: '菜单1',
          url: '../navigateTo/navigateTo',
          content: '我是菜单一'
        },
        {
          name: '菜单2',
          url: '../logs/logs',
          content: '我是菜单二'
        },
        {
          name: '菜单3',
          url: '../movie/movie',
          content: '我是菜单三'
        },
        {
          name: '菜单4',
          url: '../userinfo/userinfo',
          content: '我是菜单四'
        }
      ],
      [{
          name: '菜单5',
          url: '121',
          content: '我是菜单五'
        },
        {
          name: '菜单6',
          url: '121',
          content: '我是菜单六'
        },
        {
          name: '菜单7',
          url: '121',
          content: '我是菜单七'
        },
        {
          name: '菜单8',
          url: '121',
          content: '我是菜单八'
        }
      ],
    ]
  }