盘点微信小程序跨页面传值的若干方式

本文主要是介绍盘点微信小程序跨页面传值的若干方式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

直接给大家上干货

1、跳转页面传递参数

pageA.wxml

<button type="primary" bindtap="jumpTo">点击跳转</button>

pageA.js

jumpTo:function(){
    //传数字
    let number=0
    //传字符串
    let str="字符串"
    //传json对象
    let json={
        name:'小王',
        age:18
    }
    //传json数组
    let jsonArray=[{
            name:'小赵',
            age:20
        },{
            name:'小李',
            age:18
     }]
     
    /**
     * url传值只能传字符串或数字，不能直接传json对象
     * 所以要把json,jsonArray转化为字符串传值
     * 当然到另一个界面要把字符串还原成json，jsonArray对象
     */
    let jsonstr=JSON.stringify(json)
    let jsonArraystr=JSON.stringify(jsonArray)
    
    //skipurl换成你要跳转的url
    //ex: ../page2/page2
	wx.navigateTo({
          url: 'skipurl?number='+number+'&str='+str+'&json='+jsonstr+'&jsonArray='+jsonArraystr,
    })
},

pageB.js

onLoad: function (options) {
        //接收number
        let number = options.number
        //接收str
        let str = options.str
        //接收json字符串，并将json字符串还原json
        let json=JSON.parse(options.json)
        //接收jsonArray字符串，并将jsonArray字符串还原jsonArray
        let jsonArray=JSON.parse(options.jsonArray)
        //打印接收到的数据
        console.warn("传输数据成功！！")
        console.log(number)
        console.log(str)
        console.log(json)
        console.log(jsonArray)
},

2、缓存

pageA.js 写入

let obj={ name:'小明', age:3 } 
wx.setStorage({ data: obj, key: 'test', })

pageB.js 读取

wx.getStorage({
         key: 'test',
 }).then(res=>{
     console.log('获取缓存成功')
     console.log(res.data)
 })

3、全局的globalData对象

// 全局app.js 
globalData: { id: 1 } 

// xxxa页面
var app = getApp();
app.globalData.id = 18

// xxxb页面 
var app = getApp(); 
console.log(app.globalData.id) // 18

4、eventChannel发布订阅

index.wxml

 <button bindtap="jump">jump to next page</button>

index.js

Page({
  jump: function () {
    wx.navigateTo({
      url: "./test",
      events: {
        // 监听methodsFromTest事件，并获取传递来的数据
        methodsFromTest: function (data) {
          console.log("index页面接收数据：", data);
        },
      },
      success: function (res) {
        // 通过res.eventChannel触发methodsFromIndex事件并传递出去数据
        res.eventChannel.emit("methodsFromIndex", {
          data: "send from opener page to test",
        });
      },
    });
  },
});

test.js

Page({
  onl oad: function (option) {
    console.log("test page onl oad");
    // 通过this.getOpenerEventChannel()实例对象可以主动触发或监听事件
    const eventChannel = this.getOpenerEventChannel();
    eventChannel.emit("methodsFromTest", {
      data: "send from opened page to index",
    });
    eventChannel.on("methodsFromIndex", function (data) {
      console.log("test页面接收数据：", data);
    });
  },
});

效果如下

这篇关于盘点微信小程序跨页面传值的若干方式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！