微信小程序页面传值、页内传值

[youngjuning]

页面传值

1、用 navigator 标签或 路由API传值：

<navigator url="pages/detail?good_id=16"></navigator>

这里将 good_id=16 参数传入 detail 页面, 然后 detail 页面的 onload 方法内接收：

onLoad: (options) {
  this.setData({
    good_id: options.good_id
  })
}

如果需要传多个参数，用 & 链接即可：

<navigator url="pages/detail?good_id=16&good_price=1.88&good_name=哈哈哈哈"></navigator>

接收方法：

onLoad: (options) {
  this.setData({
    good_id: options.good_id,
    good_name: options.good_name,
    good_price: options.good_price,
  })
}

如果要传 数组, 字典等复杂类型, 要先用 JSON.stringify() 转成字符串传递.

const detail = [
  { title: '内衣', size: '0-0', category: '1', type: '0' },
  { title: '底裤', size: '0-1', category: '2', type: '1' },
  { title: '聚拢', size: '0-2', category: '3', type: '2' },
]
wx.navigateTo({
  url: 'pages/detail?good_detail=' + JSON.stringify(detail)
})

注 : 如果转化的字符串中 有 ?，& 或 = 等这样的符号，则只会传递符号以前的字符串，符号后面数据会被丢失，这个问题我猜想可能是小程序内部的路由处理 对这些符号敏感吧。所以有时候这里可以先用 encodeURIComponent() 进行转码，在目标页面再用 decodeURIComponent() 解码，这样就可以避免数据丢失了。

2、用 getCurrentPages() 获取栈中全部页面的, 然后把数据写入相应页面

先获取全部页面, 取出来是个数组, 然后用下标定位

const curPages = getCurrentPages()

wx.navigateBack({
  delta: 1, // 回退前 delta(默认为1) 页面
  success: () => {
    curPages[curPages - 2].setData({
      address: {
      name: '',
      phone: '',
      province: '',
      city: '',
      district: '',
      town: '',
      addressId: ''
    })
  }
})

注：这个方法适合 往后面传值(即已经存在的页面), 这样才能在栈中找到并主动写入数据

3、用 wx.setStorage 写入本地, 再用 wx.getStorage 读取出来

const detail = [
  { title: '内衣', size: '0-0', category: '1', type: '0' },
  { title: '底裤', size: '0-1', category: '2', type: '1' },
  { title: '聚拢', size: '0-2', category: '3', type: '2' },
]
wx.setStorage({
  key: 'detail',
  data: detail,
  success: (res) => {
    wx.navigateTo({
      url: 'pages/detail?good_detail='+detail
    })
  }
})
wx.getStorage({
  key: 'detail',
  success: (res) => {
    this.setData({
      detail: res.data
    })
  }
})

4、把 数据声明为全局变量, 可在任何页面获取

const detail = getApp().detail

[youngjuning]

用 getCurrentPages() 获取栈中全部页面的, 然后把数据写入相应页面

先获取全部页面, 取出来是个数组, 然后用下标定位

const curPages = getCurrentPages()

wx.navigateBack({
  delta: 1, // 回退前 delta(默认为1) 页面
  success: () => {
    curPages[curPages - 2].setData({
      address: {
      name: '',
      phone: '',
      province: '',
      city: '',
      district: '',
      town: '',
      addressId: ''
    })
  }
})

注：这个方法适合 往后面传值(即已经存在的页面), 这样才能在栈中找到并主动写入数据

[youngjuning]

页内传值

1、设置id的方法标识跳转后传递后的参数

<view bindtap="onTap" id="{{item.id}}">
...
</view>

在 bindtap 定义的点击方法 swiperTap : function(e) 中获取:

const id = e.currentTarget.id

2、设置 data-xxx 的方法来标识要传递的值

<view bindtap="onTap" id="{{item.id}}" data-page_title="{{item.page_title}}" data-banner_id="{{item.banner_id}}">
...
</view>

在bindtap定义的点击方法 swiperTap : function(e) 中获取, 即:

let page_title = e.currentTarget.dataset.page_title
let banner_id = e.currentTarget.dataset.banner_id

3、form表单

wxml:

<form bindsubmit="onSubmit">
  <input name="detail" placeholder="详细地址"/>
  <input name="name" placeholder="收件人姓名">
  <input name="phone" placeholder="手机号码" type="number">
  <input bindconfirm="onConfirm">
</form>

js:

onSubmit: (e) => {
  const { detail, name, phone } = e.detail.value
}
onConfirm: (e) => {
  const value = e.detail.value
}

[youngjuning]

• 微信小程序_页面传值