首页 > 编程语言 >微信小程序如何实现页面传参

微信小程序如何实现页面传参

时间:2024-08-12 15:52:06浏览次数:17  
标签:传参 url 微信 userInfo 页面 data options wx

目录

前言

路径传递

在onLoad里接收参数

 其他位置获取参数

全局变量

数据缓存

事件通信

使用wx自定义小程序全局方法和全局变量 

总结


前言

只要你的小程序超过一个页面那么可能会需要涉及到页面参数的传递,下面我总结了 n 种页面方法。

路径传递

通过在url后面拼接参数,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 ‘path?key=value&key2=value2’。

在onLoad里接收参数

案例:A页面带参数跳转到B页面
A页面跳转代码

goB(){
    wx.navigateTo({
      url: '/pages/B/index?id=value',
    })
  },

B页面接收代码

onLoad: function (options) {
	console.log('id', options.id)
}

上面的案例是字符串参数,但是很多情况下需要传递对象,如下方代码

Page({
  data: {
    userInfo:{
      name:'cym',
      age:16
    }
  },
  goB(){
    wx.navigateTo({
      url: '/pages/B/index?id='+this.data.userInfo,
    })
  },
})

如果使用上面同样的方式结构,输出的结果是:[object Object]

这个时候需要先把对象通过JSON.stringify(obj)将 object 对象转换为 JSON 字符串进行参数传递,再到接收页面通过JSON.parse解析使用。

A页面跳转代码

 goB(){
    let userStr = JSON.stringify(this.data.userInfo)
    wx.navigateTo({
      url: '/pages/B/index?id='+userStr,
    })
  }

B页面接收代码

onLoad: function (options) {
    console.log('id', JSON.parse(options.id))
  }

 其他位置获取参数

其他位置获取参数及url可以写成工具函数放到utils中:

/*获取当前页url*/
const getCurrentPageUrl=()=>{
  let pages = getCurrentPages()    //获取加载的页面
  let currentPage = pages[pages.length-1]    //获取当前页面的对象
  let url = currentPage.route    //当前页面url
  return url
}
/*获取当前页参数*/
const getCurrentPageParam=()=>{
  let pages = getCurrentPages()    //获取加载的页面
  let currentPage = pages[pages.length-1]    //获取当前页面的对象
  let options = currentPage.options    //如果要获取url中所带的参数可以查看options
  return options
}
module.exports = {
  getCurrentPageUrl,
  getCurrentPageParam
}

 使用

import utils from '../../../utils/util'
 
let url=utils.getCurrentPageUrl()
let options=utils.getCurrentPageParam()

如果options传递的字符串对象过长可能会被截断,可用encodeURIComponent处理一下。

全局变量

通过App全局对象存放全局变量。

app.js代码

App({
 // 存放对象的全局变量
  globalData:{},
})

A页面跳转代码

// 获取App对象
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    userInfo: {
      name: 'cym',
      age: 16
    }
  },

  goB() {
    app.globalData.userInfo = this.data.userInfo
    wx.navigateTo({
      url: '/pages/B/index',
    })
  },
})

B页面接收代码

// 获取全局对象
 const app = getApp()
Page({

  onl oad: function (options) {
    console.log(app.globalData.userInfo)
  }
})

存放在 App 全局变量里面,可以被多个页面使用,直接从 App 对象获取即可。这个数据是保持在内存中,每次小程序销毁就没有了。

数据缓存

通过存储到数据缓存中。

A页面跳转代码

 goB() {
    wx.setStorageSync('userInfo', this.data.userInfo)
    wx.navigateTo({
      url: '/pages/B/index',
    })
  }

B页面接收代码

 onl oad: function (options) {
    let userInfo = wx.getStorageSync('userInfo', this.data.userInfo)
    console.log(userInfo)
  }

存放在数据缓存里面,可以被多个页面使用,直接用 getStorageSync 获取即可。这个数据是保持在数据缓存中,除非清楚数据缓存或者删除小程序否则一直存在。

事件通信

通过事件通信通道。

A页面跳转代码

goB() {
    wx.navigateTo({
      url: '/pages/B/index',
      success:(res)=>{
				// 发送一个事件
				res.eventChannel.emit('toB',{ userInfo: this.data.userInfo })
			}
    })
  }

B页面接收代码

onLoad: function (options) {
     //	获取所有打开的EventChannel事件
     const eventChannel = this.getOpenerEventChannel();
     // 监听 index页面定义的 toB 事件
     eventChannel.on('toB', (res) => {
       console.log(res.userInfo) 
     })
   }

使用wx自定义小程序全局方法和全局变量 

我们发现小程序API的方法都是挂载到wx这个变量上,全局可以访问到,我们是不是可以将自己自定义的方法或者变量也挂载wx这个变量上呢?

比如我们在app.js上挂载一个变量,然后在index.js上访问

  • app.js
App({
  onLaunch() {
    wx.$data = 'test data'
  }
})
  • index.js
Page({
  onl oad() {
    console.log(wx.$data)
  }
})

  • 控制台打印结果
test data

为了避免与小程序官方定义方法和变量冲突,我们自定义的都加上 $ 标识

比如 wx.$data

再比如 wx.$ajax

wx.$xx可以定义在任何地方,也可以在任何地方使用

总结

大家可以针对具体业务场景来进行选择合适自己的传参方式。

标签:传参,url,微信,userInfo,页面,data,options,wx
From: https://blog.csdn.net/qq_63358859/article/details/141120893

相关文章

  • 动态添加页面
    方式一:<div><spanclass="smartText2"style="margin-top:60px;"@click="handleTips('近期俄乌事件的态势分析')">近期俄乌事件的态势分析</span></div><div><spanclass="smartText2......
  • 推荐一款微信视频号下载工具:微信视频号下载助手
    在这个短视频大行其道的时代,如何下载喜欢的视频成为了很多用户的需求。然而,各大平台的下载难度不一,让不少人望而却步。今天,我们将为大家推荐一款新晋的视频下载神器——视频号下载助手这款软件在GitHub上开源免费,不仅功能强大,还非常容易上手。WechatVideoSniffer与传统的万......
  • 微信小程序版矩阵系统源码搭建,一部手机就可以矩阵运营
    流量平均化的时代已经到来,这是普通老板最好的逆袭机会。不要再问怎么做流量了,粉丝数量越多,变现可能越难,因为你的粉丝人群并不精准,也不够垂直。其实实体店方法很简单,不用老板出镜当网红,也不用绞尽脑汁写文案,内容呢,就围绕产品去拍,工厂或门店环境、客户评价去拍,固定一个爆款框......
  • ios端通过微信小程序客服助手进行支付
    文章目录前言一、如何开通微信小程序客户助手?二、如何配置小程序消息回复的接口校验?三、小程序客服消息如何处理?在这里插入图片描述四、小程序客服消息已经回复了,如何使用公众号授权让用户进行微信付款了?总结前言小程序的ios端在众所周知的原因无法支付虚拟商品信......
  • Vs+Qt添加ui子页面
    在Qt项目中,如果要实现一个弹出子界面并包含返回按钮的功能,最合适的选择是使用QtDialogFormFile来创建子界面。QtDialogFormFile与QtWidgetFormFile的区别QtDialogFormFile(ButtonBottom)和QtDialogFormFile(ButtonRight):这两种文件类型用于创建对话......
  • 使用微信小程序开发制作一个简单的在线学习应用
    微信小程序是一种可以在微信客户端中运行的应用程序,可以通过微信进行分享和使用。在制作一个简单的在线学习应用之前,我们首先需要了解微信小程序的开发环境和基础知识。微信小程序开发环境为了进行微信小程序的开发和调试,我们需要安装以下工具:Node.js:用于安装和管理小程序......
  • 如何为微信小程序添加位置定位和周边服务功能
    要为微信小程序添加位置定位和周边服务功能,可以通过调用微信小程序提供的API来实现。下面是一个示例代码,展示了如何使用微信小程序API来获取用户位置信息,并根据用户位置获取周边服务。首先,在小程序的json配置文件中,需要设置权限,允许使用地理位置信息。在app.json文件中添加如......
  • react-navigation使用redux-saga等处理各种跳转、清除堆栈、返回不同页面的问题
    react-navigation使用redux-saga等处理各种跳转、清除堆栈、返回不同页面的问题名字还是土一点好关注IP属地:上海0.272018.01.2114:26:36字数154阅读4,027一直没有找到有关于 react-navigation 处理app各种不同状态需要默认不同首页的例子,于是只能自己写了。整个......
  • 使用 Nuxt 3 的 defineRouteRules 进行页面级别的混合渲染
    title:使用Nuxt3的defineRouteRules进行页面级别的混合渲染date:2024/8/12updated:2024/8/12author:cmdragonexcerpt:摘要:本文介绍了Nuxt3中的defineRouteRules功能,用于实现页面级别的混合渲染配置。通过启用实验性选项inlineRouteRules,开发者能够在nuxt.config......
  • 基于微信小程序的心理测评平台设计与实现
    基于微信小程序的心理测评平台设计与实现DesignandImplementationofaPsychologicalAssessmentPlatformbasedonWeChatMiniProgram完整下载链接:基于微信小程序的心理测评平台设计与实现文章目录基于微信小程序的心理测评平台设计与实现摘要第一章引言1.1......