小程序页面传参?

小程序页面之间传递参数通常可以通过以下几种方式实现:

  1. 通过 URL 参数传递 :可以在跳转目标页面时,在 URL 中添加参数,目标页面可以通过 options 参数获取传递过来的数据。

    javascript 复制代码
    // 页面 A
    wx.navigateTo({
      url: 'targetPage?param1=value1&param2=value2'
    });
    
    // 页面 B
    Page({
      onLoad: function (options) {
        console.log(options.param1); // 输出 value1
        console.log(options.param2); // 输出 value2
      }
    });

    2、通过全局变量传递:可以在小程序的全局变量中设置参数,在目标页面中直接读取全局变量的值。

    javascript 复制代码
    // 在 app.js 中设置全局变量
    App({
      globalData: {
        param1: 'value1',
        param2: 'value2'
      }
    });
    
    // 页面 B
    Page({
      onLoad: function () {
        console.log(getApp().globalData.param1); // 输出 value1
        console.log(getApp().globalData.param2); // 输出 value2
      }
    });

    3.通过缓存传递:可以使用小程序的缓存 API,在页面 A 中将参数存储到缓存中,在页面 B 中读取缓存中的数据。

    javascript 复制代码
    // 页面 A
    wx.setStorageSync('param1', 'value1');
    wx.setStorageSync('param2', 'value2');
    
    // 页面 B
    Page({
      onLoad: function () {
        console.log(wx.getStorageSync('param1')); // 输出 value1
        console.log(wx.getStorageSync('param2')); // 输出 value2
      }
    });

    这些方法可以根据你的具体需求选择合适的方式来传递参数

相关推荐
anyup_前端梦工厂28 分钟前
深入理解 JavaScript 三大作用域:全局作用域、函数作用域、块级作用域
前端·javascript·html
等你许久_孟然1 小时前
【webpack4系列】设计可维护的webpack4.x+vue构建配置(终极篇)
前端·javascript·vue.js
VVX_kaifa8731 小时前
家政小程序开发/源码/上门维修/上门保洁服务平台
小程序
我的运维人生1 小时前
Nginx:高性能Web服务器与反向代理的深度解析
服务器·前端·nginx·运维开发·技术共享
小白小白从不日白2 小时前
react hooks--useMemo
前端·javascript·react.js
资深前端之路2 小时前
react 创建react项目
前端·javascript·react.js
森叶2 小时前
webpack4 target:“electron-renderer“ 打包加速配置
前端·javascript·electron
三生有幸遇见你°2 小时前
双击热备 Electron网页客户端
前端·javascript·electron
前端开发菜鸟的自我修养2 小时前
HTML5 Video标签的属性、方法和事件汇总,以及常用视频插件推荐
前端·javascript·svn·html·音视频·html5·video-codec
孙俊熙2 小时前
React项目实战(React后台管理系统、TypeScript+React18)
前端·react.js·typescript