• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序之页面传值(路由、页面栈、globalData、缓存)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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}`,
    })
  }
})

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序页面传值 - crazyman_wow发布时间:2022-07-18
下一篇:
微信小程序如何在页面间传值发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap