1. 通过url带参数传递

1.1 固定参数传递

例如，从 list 页面到 detail 页面, 传递一个或多个固定值

list页面传值：

<!--pages/list/list.js-->
<navigator url="../detail/detail?id=1&name=名称">点此进入 detail</navigator>

detail页面取值：

<!--pages/detail/detail.js-->
onLoad: function (options) { 
    this.setData({
        detail_id: options.id,
        detail_name: options.name
    }) 
}

1.2 从列表取值

从列表页进入详情页时，需要传递列表被点击项目的 id 至详情页，方法：

在列表页通过data-id=\'{{item.id}}\'给各个项目绑定一个 id ；
在详情页通过 onload 拿到 id;

列表页：

<!--pages/list/list.js-->
<view class="list" >
    <view class=\'box\'  wx:for=\'{{list}}\' wx:key=\'{{index}}\' data-id=\'{{item.id}}\' bindtap=\'goDetail\'>
        <image src=\'{{item.img}}\'></image>
        <view class=\'tip\'>
            <text>{{item.title}}</text>
            <text class=\'price\'>￥{{item.price}}</text>
        </view> 
    </view> 
</view>
// 进入详情页时 传递 id
goDetail (e) {
    console.log(e.currentTarget.dataset.id),
    wx.navigateTo({
        url: `/pages/detail/detail?id=${e.currentTarget.dataset.id}`,
    })
}

详情页:

// pages/detail/detail.js
Page({
 
    data: {
        detail: {},
        loading: true
    }, 
    
    onLoad: function (options) {
        this.loadDetail(options.id); // 拿到列表页传过来的 id
        console.log(options.id)
    },

    loadDetail (id) {
        wx.showLoading({
            title: \'详情加载中...\',
        })

        wx.request({
            url: \'http://10.0.1.109:3000/list\',
            success: (res) => {
                console.log(res.data.cityList);
                let thisPlace = res.data.cityList.filter((val) => val.id == id)
                console.log(thisPlace)
                this.setData({ 
                    detail: thisPlace[0],
                    loading: false
                });
                console.log(this.data.detail)
                wx.hideLoading();
            }
        })
    },
})

2. 通过页面栈传值

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

注意：

• 不要尝试修改页面栈，会导致路由以及页面状态错误。
• 不要在 App.onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。

页面栈应用

例如，在首页 index 进入列表页 list，再进入详情页 detail 后，如果需要能从detail页一键返回到index页，并且传值给index页，这里就可以用页面栈来实现。

首页：

<!--index.wxml-->
<view>{{tag}}</view>

//index.js 
Page({
  data: {
    tag: \'\'
  }
})

详情页：

返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

<!-- pages/detail/detail.wxml-->
<view bindtap=\'backToIndex\'> 点此返回首页 </view>

// pages/detail/detail.js
Page({
  data: {
    tag: \'土豆\'
  },
  
  backToIndex () {
    let pages = getCurrentPages() // 获取页面栈，pages为一个数组，里面存储了从首页到当前页的所有页面，如下图所示
    console.log(pages)
    let tag = this.data.tag // 拿到当前页的tag
    wx.navigateBack({
      delta: 2,
      success () {
        pages[0].setData({
          tag: tag    // 将当前detail页的tag赋值给首页index中的tag
        })
      }
    })
  },
})

console.log(pages) 打印值：

3. 通过globalData

在 app.js 中定义全局变量

 globalData：{
     name: \'姓名\'
 }

在其他页面可以取到全局变量

let app = getApp();    

console.log(app.globalData.userInfo) // 姓名

4. 通过 缓存 setStorage

参考：微信小程序之缓存——不同页面传递数据

5. input 搜索传值

• bindinput: 键盘输入时触发，event.detail = {value, cursor, keyCode}，keyCode 为键值
• bindconfirm: 点击完成按钮时触发，event.detail = {value: value}

<!--/pages/search/search.wxml-->
<view class=\'search\'>
    <image src=\'/images/search.png\'></image>
    <input placeholder=\'Find your favourite food\' auto-focus bindinput="bindKeyInput" bindconfirm=\'goSearch\' ></input>
    <text bindtap=\'goSearch\'>搜索</text>
</view>

// pages/search/search.js 
Page({ 
  data: {
    inputValue: \'\'
  }, 

  bindKeyInput(e) {
    this.setData({
      inputValue: e.detail.value
    })
    console.log(this.data.inputValue)
  },

  // 进入搜索结果页 -> list
  goSearch() {
    let content = this.data.inputValue
    if (!content) {
      console.log(\'内容为空\')
      return
    } 

    wx.navigateTo({
      url: `/pages/list/list?content=${content}`,
    })
  }
})