本篇文章给大家介绍一下小程序中的几种页面传参方式，希望对大家有所帮助！
小程序中页面传参的方式
url传参
方式和web中的方式一致。
index1 页面
<navigatorurl="/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跳转到页面2wx.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打开的页面获取获取到一个事件通道对象constEventChannel=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
页面中可以通过getApp来获取
letapp=getApp();console.log(app.myData);
当然也可以直接修改
letapp=getApp();app.myData.name="八戒";
公共变量
单独定义一个独立的js文件，把数据存储进去，即可
common.js
constdata={name:"海贼王"};module.exports=data;
index1.js
constdata=require("../../common");Page({onLoad:function(){console.log(data);},})
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/43029.html；