小程序中页面传参的方式
url传参
方式和web中的方式一致。
index1 页面
<navigator url=/pages/index2/index2?name=海贼王>页面2</navigator>
或者
wx.navigateto({ url: /pages/index2/index2?name=海贼王 })
index2 页面
onLoad: function (options) { console.log(options);// { name : 海贼王} },
需要注意的是,如果
index2
是tabbar页面,那么无法在onLoad中获取页面参数。【相关学习推荐:小程序开发教程】
事件通道 EventChannel
如果一个页面由另一个页面通过 wx.navigateTo
打开,这两个页面间将建立一条数据通道:
- 被打开的页面可以通过
this.getopenerEventChannel()
方法来获得一个EventChannel
对象; wx.navigateto
的success
回调中也包含一个EventChannel
对象。
这两个 EventChannel
对象间可以使用 emit
和 on
方法相互发送、监听事件。
index1.wxml
<view> 来自于页面2 传递的数据: {{msg}} </view>
index1.js
Page({ data: { msg: }, onLoad: function () { // 1 跳转到页面2 wx.navigateto({ url: /pages/index2/index2, // 2 在成功的回调函数中获取事件通道对象 success: ({ eventChannel }) => { // 3 监听自定义事件 eventChannel.on(data, (e) => { // 4 获取页面2传递过来的数据 设置到 data中 this.setData({ msg: e.name }) }) } }); }, })
index2.js
Page({ onLoad: function () { // 被使用 wx.navigatorTo打开的页面获取获取到一个事件通道对象 const EventChannel = this.getopenerEventChannel(); // 触发事件和传递参数到 页面1中 EventChannel.emit(data, { name: '海贼王' }); } })
本地存储
小程序中的本地存储用法类似web中,可以实现在整个应用中获取数据和存储数据
index1.js
wx.setStorageSync('data', {name:'海贼王'});// 可以直接存任意类型的数据
index2.js
wx.getStorageSync('data');// 获取
应用全局变量
不同的页面都是处于一个共同的应用当中的,这个应用可以理解为 app.js
app.js
在这里可以定义公共数据
App({ myData: { name: 悟空 } })
index1.js
let app = getApp(); console.log(app.myData);
当然也可以直接修改
let app = getApp(); app.myData.name=八戒;
公共变量
common.js
const data = { name: 海贼王 }; module.exports = data;
index1.js
const data = require(../../common); Page({ onLoad: function () { console.log(data); }, })
更多编程相关知识,请访问:编程视频!!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。