PHP前端开发

带大家聊聊小程序中的几种页面传参方式

百变鹏仔 2周前 (03-12) #前端问答
文章标签 几种

本篇文章给大家介绍一下小程序中的几种页面传参方式,希望对大家有所帮助!

小程序中页面传参的方式

url传参

方式和web中的方式一致。

index1 页面

<navigator>页面2</navigator>

或者

    wx.navigateTo({      url: "/pages/index2/index2?name=海贼王"    })

index2 页面

  onLoad: function (options) {    console.log(options);// { name : 海贼王}  },
需要注意的是,如果 index2 是tabbar页面,那么无法在onLoad中获取页面参数。【相关学习推荐:小程序开发教程】

事件通道 EventChannel

如果一个页面由另一个页面通过 wx.navigateTo 打开,这两个页面间将建立一条数据通道:

这两个 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 }) =&gt; {        // 3 监听自定义事件        eventChannel.on("data", (e) =&gt; {          // 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

页面中可以通过 getApp 来获取

    let app = getApp();    console.log(app.myData);

当然也可以直接修改

    let app = getApp();    app.myData.name="八戒";

公共变量

单独定义一个独立的js文件,把数据存储进去,即可

common.js

const data = {  name: "海贼王"};module.exports = data;

index1.js

const data = require("../../common");Page({  onLoad: function () {    console.log(data);  },})

更多编程相关知识,请访问:编程视频!!