⼩程序页⾯间传值的实现⽅法⽰例
⼩程序页⾯间传值
⼤家晚上好，说晚上好是因为是在晚上写的，说这句话是因为这句话开篇不那么突然。那么⼩程序的页⾯间传值，在我使⽤这段时间⾥，我就⾮常的主观的把它们分为wx.navigateTo和⾮wx.navigateTo的，因为wx.navigateTo有⼀个事件参数event，我从当前页跳转到下⼀页，如果需要能返回，我都⽤的wx.navigateTo，那这个event作⽤嘛就是可以接收，下⼀页返回回来的参数的。像 ⾯这样：
index.js
wx.navigateTo({
url: url,
events: {
// 为指定事件添加⼀个，获取被打开页⾯传送到当前页⾯的数据
acceptDataFromOpenedPage: (data) => { // 这个⽅法是随便命名的，没有多少要求，不过被打开的页⾯emit的时候第⼀个参数要写这个⽅法名
console.log（'从隔壁扔来的酸⾖⾓馅⼉的包⼦'，data）
},
},
success: function (res) {
// 通过eventChannel向被打开页⾯传送数据
// it('acceptDataFromOpenerPage', { data: 'test' })
}
})
gebi.js
// 确认选择
confirm() {
const eventChannel = OpenerEventChannel() // 这⾥应该是⾃带的⽅法，直接⽤，妥妥的
wx.navigateBack() // 返回上⼀个页⾯
}
这两个操作就完成了类似于vue2.x的⽗⼦组件传值，这个emit简直⼀摸⼀样。
那怎么向下⼀个页⾯传值呢？在不使⽤store，storage的时候，可以通过Url后⾯带参的⽅式还有就是上⾯wx.navigateTo的success回调。虽然success回调我没有⽤过，但是看了⼀下感觉⾮常像我⽤webworker的时候向⼦线程⾥⾯传值和⼦线程向主线程传值时，主线程和⼦线程对数据的接收⽅式。说⽩了我觉得就是'监听'(addeventlistener) (0o-_^o)
这⾥要提⼀嘴，URL路径的前⾯就是pages的前⾯在跳转的时候带/，就是这样
wx.navigateTo({
url: '/pages/index/index'
})
⼩程序的URL传值
⼩程序的URL传值，跟我们普通的路由带参时⼀样的，都是后⾯带问号（？）和且符号（&），但是要分为基本类型的数据传值和引⽤类型的数据传值。普通的就下⾯这样⼉：
wx.navigateTo({
url: '/pages/index/index?page=/pages/home/home&id=0077FF'
})
是的你没有看错，就是可以这么传这么个值'/pages/home/home'，别的特殊字符应该是要转⼀下吧，没试过。
⼩程序的URL传对象
那传个对象或者数组的话要：
字符串转数组方法js传：先转字符串，在编码。
收：先解码，在转对象。
data = {
name: '包⼦'，
type: '⽜⾁粉丝'
}
wx.navigateTo({
url: `/pages/index/index?page=/pages/home/home¶ms=${encodeURIComponent(JSON.stringify(data))}`
})
onLoad (options) {
const {page} = options;
const params = JSON.parse(decodeURIComponent(options.params))
}
嗯～就这样传，没得错。
提⼀嘴store
我这个项⽬⽤的mobx，在mobx⾥⾯的拿到的数组的数据就变得很奇怪，不明原因解决⽅法是。mobx⾥⾯有toJS（）的⽅法，⽤⼀下就好了。
import { toJS } from 'mobx-miniprogram';
let value = toJS(xxxx)
旋转跳跃
关于跳转，⼩程序的官⽹说的很清楚了，我在这⾥就做个表格吧。
wx.navigateTo跳转到某页⾯，可以返回，页⾯栈最多10层，event内部⽅法可以获取下⼀页⾯返回的数据wx.navigateBack返回上⼀页或者多个页⾯，getCurrentPages（没⽤过，都是直接wx.navigateBack()⽤的）可获取当前页⾯栈
wx.switchTab. -0-0----> 跳转到 tabBar 页⾯，并关闭其他所有⾮ tabBar 页⾯（官⽹原话）
关于EventChannel，就是上⾯说的页⾯间传值，我也就⽤了emit，剩下的off，on，once这些我没⽤过，不好讲因为没得场景带⼊不好理解，我估摸着也许可能猜测哈能做发布订阅模式来写⼀些东西。
两个表格是不是觉得分的很清，嘿嘿嘿。其实是我markdown的表格没⽤好，分开感觉居然更合适。
总结
到此这篇关于⼩程序页⾯间传值的⽂章就介绍到这了，更多相关⼩程序页⾯间传值内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论