微信小程序有哪些传值(传递数据)方法

URL参数传递：可以通过URL参数的方式将数据传递给小程序页面。

Storage存储：可以通过Storage API将数据存储在本地，然后在小程序页面中读取。

全局变量：可以将数据存储在小程序的全局变量中，然后在小程序页面中读取。

数据绑定：可以通过数据绑定的方式将数据传递给小程序页面。

自定义事件：可以通过自定义事件的方式将数据传递给小程序页面。

WebSocket：可以通过WebSocket协议将数据传递给小程序页面。

数据库：可以通过小程序提供的数据库API将数据存储在数据库中，然后在小程序页面中读取。

1、使用全局变量传递数据

利用app.js 中的 globalData 将数据存储为全局变量，在需要使用的页面通过getApp().globalData获取数据

app.js

App({globalData:{data: { name: 'demo' }}})

使用组件

let app = getApp()app.globalData.data

2、使用本地存储数据传递

使用小程序提供缓存

同步缓存：wx.setStorageSync 与 wx.getStorageSync

异步缓存：wx.setStorage 与 wx.getStorage

移除本地缓存：wx.removeStorageSync（同步）、wx.removeStorage（异步）

// 将数据存储在本地缓存中指定的 key 中wx.setStorgaeSync('data','hello')// 从本地缓存中同步获取指定 key 的内容wx.getStorageSync('data')// 从本地缓存中移除指定 keywx.removeStorgae('data')

3、使用路由传递数据

传递组件

wx.navigateTo({url: 'test?id=1',success: (res)=> {// 通过 eventChannel 向被打开页面传送数据res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })}})

使用组件

Page({onLoad: function(option){console.log(option.query)// 监听 acceptDataFromOpenerPage 事件，获取上一页面通过 eventChannel 传送到当前页面的数据eventChannel.on('acceptDataFromOpenerPage', (data)=> {console.log(data)})}})

4、父子组件使用selectComponent('#页面id')，triggerEvent('方法名'，'值')

Page({handleData(data){this.selectComponent("#demo").showModal(data);}// 子组件传递过来的值handleReturnDate(data){console.log(data)}})Component({methods:{// 父组件传递过来的数据showModal(data){console.log(data)},submit(){// 子组件传递数据给父组件this.triggerEvent("returnDate", sportsGuidance);}}})

5、子组件通过properties接收：

父组件parent

parent.wxmlparent.json{"usingComponents": {"child":"/child/child",},"navigationBarTitleText": "父组件的导航标题"}

子组件 child

child.wxml

父组件传递过来的name:{{name}}

child.js

 Component({// 接受父组件传递过来的属性properties:{name:String //简化的定义方式//name:{//type:String,//value:''//}},// 私有数据，可用于模板渲染data:{},// 组件生命周期声明对象lifetime:{},// 组件所在页面的生命周期声明对象pageLifetimes:{},// 事件响应函数和任意的自定义方法methods:{}})

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！