微信小程序传值(传递数据)的一些方法汇总

网友投稿 628 2023-11-13

−目录1、使用全局变量传递数据2、使用本地存储数据传递3、使用路由传递数据4、父子组件使用selectComponent(#页面id)，triggerEvent(方法名，值)5、子组件通过properties接收：总结

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

微信小程序传值(传递数据)的一些方法汇总

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

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

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

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

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

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

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

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

app.js

?
1
2
3
4
5
App({
globalData:{
data: { name: demo }
}
})

使用组件

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

使用小程序提供缓存

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

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

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

?
1
2
3
4
5
6
// 将数据存储在本地缓存中指定的 key 中
wx.setStorgaeSync(data,hello)
// 从本地缓存中同步获取指定 key 的内容
wx.getStorageSync(data)
// 从本地缓存中移除指定 key
wx.removeStorgae(data)

3、使用路由传递数据

传递组件

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

使用组件

?
1
2
3
4
5
6
7
8
9
Page({
onLoad: function(option){
console.log(option.query)
// 监听 acceptDataFromOpenerPage 事件，获取上一页面通过 eventChannel 传送到当前页面的数据
eventChannel.on(acceptDataFromOpenerPage, (data)=> {
console.log(data)
})
}
})

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<view id=demo bind:returnDate=handleReturnDate><view>
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

?
1
2
3
4
5
6
7
8
9
10
11
parent.wxml
<view>
<child :name=jack></child>
</view>
parent.json
{
"usingComponents": {
"child":"/child/child",
},
"navigationBarTitleText": "父组件的导航标题"
}

子组件 child

child.wxml

?
1
2
3
<view>
父组件传递过来的name:{{name}}
</view>

child.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Component({
// 接受父组件传递过来的属性
properties:{
name:String //简化的定义方式
//name:{
//type:String,
//value:
//}
},
// 私有数据，可用于模板渲染
data:{},
// 组件生命周期声明对象
lifetime:{
},
// 组件所在页面的生命周期声明对象
pageLifetimes:{
},
// 事件响应函数和任意的自定义方法
methods:{}
})

总结

到此这篇关于微信小程序传值(传递数据)的一些方法汇总的文章就介绍到这了,更

您可能感兴趣的文章:微信小程序 传值取值的几种方法总结微信小程序 页面传值详解微信小程序传值以及获取值方法的详解微信小程序 页面跳转如何实现传值微信小程序实现两个页面传值的方法分析微信小程序 页面跳转传值实现代码

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 方法 数据 微信小程序 小程序
上一篇:APP开发制作其实很简单
下一篇:快速进行商城App开发
相关文章

 发表评论

暂时没有评论，来抢沙发吧~