页面数据传递(微信小程序、uni-app)

骑猪看日落 2022-12-21 06:22 137阅读 0赞

## 页面的数据传递 ##

首先我们必须知道页面如何跳转，在wx小程序上页面的跳转可以通过 wx.navigateTo例如：

wx.navigateTo({ 
                    url: '../integral/integral'
                   })

在uni-app中，页面是通过

uni.navigateTo({ 
    	url: './forger_two' 
    		});

然后对应跳转成功后的页面，在页面加载前获取到该传递的数据，因此在onLoad方法中我们可以接受到传递的数据。  
最后，分析传递的数据的类型，分单个数据，两个数据以及多个数据

## （1）只要单个数据时 ##

let Result=res.result;//定义获取的数据
     wx.navigateTo({ 
              url: '../integral/integral?id='+Result
            })
      //在页面跳转时带上此数据，定义数据名为id

在下一张页面我们就可以获取到这个id的值

onLoad: function (options) { 
        console.log(options)//此时可以输出页面加载前获取到的数据
        this.setData({ 
          id:options.id   
        })
      },

## （2）只要两个数据时 ##

//this.phoneValue和this.passwordValue已定义完毕
    uni.navigateTo({ 
    	url: './forger_two?mobile=' + this.phoneValue + '&vercode=' + this.passwordValue
    		});
    	//两个数据中间用&相连

在下一张页面我们就可以获取到这个id的值

onLoad(options) { 
    	console.log(options)
    		this.vercode = options.vercode
    		this.mobile = options.mobile
    		},

## （3）数组（多个数据） ##

showDetails(e) { 
        let show_Details= JSON.stringify(e.currentTarget.dataset.details)//括号内填数据所在的位置
        wx.navigateTo({ 
          url: './details/details?show_Details=' + show_Details,
        })
      },
    	//此情况多用于点击按钮打开详情

在下一张页面我们就可以获取到这个id的值

onLoad: function (options) { 
       let show_Details =JSON.parse(options.show_Details)
        console.log('option',show_Details);
        this.setData({ 
          show_Details: show_Details
        })
    }