微信小程序——页面传值

微信小程序——页面传值

1.页面正向传值
主要用于从页面A直接跳转到页面B时的传值。

• 通过url参数传值：

//pageA
wx.navigateTo({
            url: '/pages/pageB?pageType=0&locationCode=' + code + '&locationName=""',
})

/pages/pageB为页面路径，参数用“？”分割，多个参数之间用“&”分割。
参数格式为：key = value

//pageB 获取A页面传递的参数
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      let pageType = options.pageType,
      let locationCode = options.locationCode    
  },

2.逆向传值-全局对象app

主要用于页面B返回页面A时的传值.
.在app.js的gloablData中添加全局变量X

//pageB 向A页面传值
  /**
   * 生命周期函数--监听页面加载
   */
   const app = getApp()
   page({
  onLoad: function (options) {//将数据传给全局对象app
      let x = “data”
      app.setData({
		X:  x
	})   
  },
})

//pageA 取B页面传的值
  /**
   * 生命周期函数--监听页面加载
   */
   const app = getApp()
   page({
  onShow: function () {//从全局对象app取值
      let x = app.gloableData.X
  },
})

3.逆向传值-storage

通过本地存储来逆向传值

//pageB 向A页面传值
  /**
   * 生命周期函数--监听页面加载
   */
   const app = getApp()
   page({
  onLoad: function (options) {//将数据存储到本地
      let x = “data”
     try {
  wx.setStorageSync('data', x)
} catch (e) { }
  },
})

//pageA 取B页面传的值
  /**
   * 生命周期函数--监听页面加载
   */
   page({
  onShow: function () {//从本地存储获取数据
      try {
  const x = wx.getStorageSync('data')
  if (x) {
    // Do something with return value
  }
} catch (e) {
  // Do something when catch error
}
  },
})

4.逆向传值-pages栈传值

//pageB 向A页面传值
  /**
   * 生命周期函数--监听页面加载
   */
   var pages = getCurrentPages()
   var currentPage = pages[pages.length - 1]//当前页面B
   var beforePage = pages[pages.length - 2]//前一个页面A
   page({
  onLoad: function (options) {//将数据存储到页面A中
		let x = "data"
	beforePage.setData({
		
		X: x
	})
})

5.同页面传值-点击方法传值

有些时候需要将某个控件对应的数据传到对应的点击方法中，那么怎么做呢？？？
有两种方式：“id” 和 “data-”；可以将需要传递的信息赋给控件的以上两个属性。

//pageA.wxml

<image 
id='{{obj}}' 
 data-b='{{obj1}}'  
 data-c='{{obj2}}' 
 src=''
 bindtap='tapImg'/>

//pageA.js

//图片的点击方法获取wxml中传的信息
tapImg:function(e){

let obj = e.currentTarget.id
let obj1 = e.currentTarget.dataset.b
let obj2 = e.currentTarget.dataset.c
}

总结一下希望能帮到大家，祝大家搬砖愉快 ?