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

本文介绍如何在微信小程序中进行页面间的值传递,包括A页面向B页面传递值的步骤,详细讲解了js文件中的操作以及在B页面接收值的方法。特别指出,当使用下标传递值时,需要在app.js配置数据源。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

假设把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.youkuaiyun.com/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: '我是菜单八'
        }
      ],
    ]
  }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值