广西网站建设公司招聘,做网站的流程分析-图灵吧,南京网站建设的公司,北京网站设计网站设计公司前言
只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递#xff0c;下面我总结了 4 种页面方法。
路径传递
通过在url后面拼接参数#xff0c;参数与路径之间使用 ? 分隔#xff0c;参数键与参数值用 相连#xff0c;不同参数用 分隔#xff1b;如…前言
只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递下面我总结了 4 种页面方法。
路径传递
通过在url后面拼接参数参数与路径之间使用 ? 分隔参数键与参数值用 相连不同参数用 分隔如 ‘path?keyvaluekey2value2’。
案例A页面带参数跳转到B页面 A页面跳转代码
goB(){wx.navigateTo({url: /pages/B/index?idvalue,})},B页面接收代码
onLoad: function (options) {console.log(id, options.id)
}上面的案例是字符串参数但是很多情况下需要传递对象如下方代码。
Page({data: {userInfo:{name:cym,age:16}},goB(){wx.navigateTo({url: /pages/B/index?idthis.data.userInfo,})},
})如果使用上面同样的方式结构输出的结果是[object Object]
这个时候需要先把对象通过JSON.stringify(obj)将 object 对象转换为 JSON 字符串进行参数传递再到接收页面通过JSON.parse解析使用。
A页面跳转代码 goB(){let userStr JSON.stringify(this.data.userInfo)wx.navigateTo({url: /pages/B/index?iduserStr,})}B页面接收代码
onLoad: function (options) {console.log(id, JSON.parse(options.id))}全局变量
通过App全局对象存放全局变量。
app.js代码
App({// 存放对象的全局变量globalData:{},
})A页面跳转代码
// 获取App对象
const app getApp()
Page({/*** 页面的初始数据*/data: {userInfo: {name: cym,age: 16}},goB() {app.globalData.userInfo this.data.userInfowx.navigateTo({url: /pages/B/index,})},
})B页面接收代码
// 获取全局对象const app getApp()
Page({onLoad: function (options) {console.log(app.globalData.userInfo)}
})存放在 App 全局变量里面可以被多个页面使用直接从 App 对象获取即可。这个数据是保持在内测中每次小程序销毁就没有了。
数据缓存
通过存储到数据缓存中。
A页面跳转代码 goB() {wx.setStorageSync(userInfo, this.data.userInfo)wx.navigateTo({url: /pages/B/index,})}B页面接收代码 onLoad: function (options) {let userInfo wx.getStorageSync(userInfo, this.data.userInfo)console.log(userInfo)}存放在数据缓存里面可以被多个页面使用直接用 getStorageSync 获取即可。这个数据是保持在数据缓存中除非清楚数据缓存或者删除小程序否则一直存在。
事件通信
通过事件通信通道。
A页面跳转代码
goB() {wx.navigateTo({url: /pages/B/index,success:(res){// 发送一个事件res.eventChannel.emit(toB,{ userInfo: this.data.userInfo })}})}B页面接收代码
onLoad: function (options) {// 获取所有打开的EventChannel事件const eventChannel this.getOpenerEventChannel();// 监听 index页面定义的 toB 事件eventChannel.on(toB, (res) {console.log(res.userInfo) })}总结
大家可以针对具体业务场景来进行选择合适自己的传参方式。
