微信小程序之组件的四种传值方式

这篇具有很好参考价值的文章主要介绍了微信小程序之组件的四种传值方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.使用本地存储传递数据

         我们可以利用微信小程序提供的本地存储 wx.setStorageSync 与 wx.getStorageSync 进行传值。

 传递组件

// 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
wx.setStorageSync('data', {id:1})

接收组件

// 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
wx.getStorageSync('data')

2. 使用路由传递数据

传递组件 

// 跳转的同时携带数据拼接在URL后面,跳转到的页面利用onLoad()方法的参数options即可获取到传递的参数
wx.navigateTo({
     url: `跳转路由?data=${data}`,
})

接收组件

onLoad(option){
    const {data} = option;
    console.log(data)
}

这时因为传递的是对象类型的数据,到另一个页面获取时会发现是"[object,object]",解决方法是利用JSON.stringify()和JSON.parse()

传递数据的组件

const data = JSON.stringify(this.data);
wx.redirectTo({
   url: `跳转url?=${data}`
})

接收数据的组件

onLoad(options){
    const data = JSON.parse(JSON.stringify(options.data));
}

若是数据中有特殊字符在内,微信中提供的api encodeURIComponent() 和 decodeURIComponent() 会进行截取的操作

传递数据的组件

const data = encodeURIComponent(this.data);
wx.redirectTo({
   url: `跳转url?data=${data}`
})

接收数据的组件

onLoad(options){
    const data = decodeURIComponent(options.data);
}

3.通过使用wx.navigateBack()返回之前的页面

 我们也可以从页面路由栈中直接获取目标Page对象,将数据设置到目标页面的data中。

let pages = getCurrentPages();
let prevPage = pages[pages.length - 2]; 
prevPage.setData({
     data: this.data
})

4.使用全局变量传递数据:

我们同时也可以利用 app.js 中的 globalData 将数据存储为全局变量,在需要使用的页面通过 getApp().globalData 获取。

app.js

App({
    globalData:{
        data: { id : 1 }
    }
})

使用的组件

const data =  getApp().globalData.data

其他详见:基础 | 微信开放文档文章来源地址https://www.toymoban.com/news/detail-602879.html

到了这里,关于微信小程序之组件的四种传值方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 四种弹窗方式

    显示消息提示框 示例 : 显示模态对话框 示例 : 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 示例: 注意: wx.showLoading 和 wx.showToast 同时只能显示一个 wx.showLoading 应与 wx.hideLoading 配对使用 显示操作菜单 示例: 具体参数可见官网:微信小程序弹窗

    2023年04月08日
    浏览(39)
  • 微信小程序四种弹窗方式实例

    一、wx.showToast(Object object) 显示消息提示框 二 、wx.showModal(Object object) 显示模态对话框 三、wx.showLoading(Object object) 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 |注意: wx.showLoading 和 wx.showToast 同时只能显示一个wx.showLoading 应与 wx.hideLoading 配对使用 四、wx.showA

    2024年02月07日
    浏览(43)
  • vue组件之间的五种传值方法(父子\兄弟\跨组件)

    父传子 (自定义属性 props) 父组件向子组件传参,通过自定义属性的方式进行传参,在子组件中使用prop定义自定义的属性,然后在父组件中通过v-bind指令把需要传递的数据绑定在子组件上,那在子组件中props里面的自定义属性可以直接使用。 子传父 (自定义事件 this.$emit) 子组

    2023年04月08日
    浏览(76)
  • Mybatis分页查询——四种传参方式

    目录 相关导读 一、顺序传参 1. 持久层接口方法 2. UserMapper.xml映射文件新增标签

    2024年02月02日
    浏览(37)
  • 微信小程序手机号快速验证组件调用方式

    目录 一、测试环境 二、问题现象 三、总结 手机号验证组件(包括快速验证组件和实时验证组件)调用后无法对事件进行回调这个问题,先说结论,以下是正确的使用方式: 一、测试环境 windows10 微信开发者工具(1.06.2307260win32-x64) 基础库(3.0.1[1028]) iPhone XR(IOS 15.2.1) 微信(

    2024年02月10日
    浏览(60)
  • 微信小程序父子组件之间通信的 3 种方式

    父子组件之间通信的 3 种方式 ① 属性绑定 ⚫ 用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容的数据 ② 事件绑定 ⚫ 用于子组件向父组件传递数据,可以传递任意数据 ③ 获取组件实例 ⚫ 父组件还可以通过 this.selectComponent() 获取子组件实例对象,这样就可以直

    2024年02月09日
    浏览(44)
  • 小程序父子组件间传值(微信/支付宝/钉钉)

    以传递一个简单的count值为例,实现父子组件的双向绑定,无论是点击父组件按钮还是子组件按钮,count值都自增 父传子 简单的将父组件在data中定义的属性,赋给子组件定义在properties中的属性即可 通过在父组件中设置一个按钮,使count自增,子组件的count属性也会随之自增

    2024年02月10日
    浏览(76)
  • 微信小程序前后页面传值

    从前一个页面跳转到下一个页面,如何传递参数? 从后一个页面返回前一个页面,如何回调参数? 从前一个页面跳转到下一个页面并传值。 前页面:在跳转链接中添加参数并传递 后页面:在onLoad()函数中接收参数 这种方式适合小规模的传参,适合传输“较大”的数据吗?例

    2024年02月14日
    浏览(40)
  • 微信小程序怎样给事件传值的

    通过自定义属性传值: 在触发事件的组件上,可以通过自定义属性将需要传递的值绑定到事件对象上。在事件处理函数中,通过 event.currentTarget.dataset 来获取自定义属性的值。 代码如下: 通过事件对象传值: 在触发事件时,可以使用 event.detail 将值传递给事件处理函数。在

    2024年02月03日
    浏览(38)
  • View 的四种 OnClick 方式

    嗨喽,大家好!今天呢,我跟大家聊一聊Android 的View 的点击事件onClick 。额,有点拗口(^_^) 。 看过我的文章的人可能会好奇,你怎么写Android的文章了啊?说起这啊,就是我的血泪史了,此处省略一万字.................... 废话不多说,让我们代码走起,风里来,雨里去,唯有代

    2023年04月15日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包