ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2022-06-01 15:05:40  阅读:147  来源: 互联网

标签:console log jsonArray 微信 json let data 传值 页面


直接给大家上干货

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);
    });
  },
});

效果如下

image.png

标签:console,log,jsonArray,微信,json,let,data,传值,页面
来源: https://www.cnblogs.com/Jason1995/p/16334226.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有