首页 > 编程语言 >小白学习微信小程序的跨页面通信和数据传递

小白学习微信小程序的跨页面通信和数据传递

时间:2024-08-08 20:25:05浏览次数:20  
标签:微信 pageB js 小白 全局变量 data event 页面

跨页面通信和数据传递在微信小程序开发中非常重要,它们可以帮助不同页面之间共享数据并实现页面间的交互。本文将详细介绍微信小程序中的跨页面通信和数据传递的相关知识,并提供代码案例进行说明。

小程序中跨页面通信的方式主要包括:

  1. 使用全局变量
  2. 使用事件总线
  3. 使用页面栈

数据传递的方式主要包括:

  1. 使用URL参数
  2. 使用全局变量
  3. 使用页面栈

下面我们将分别介绍这些方式,并提供相应的代码案例。

一、跨页面通信

  1. 使用全局变量

小程序提供了一个全局变量 getApp(),可以用于获取小程序的实例。我们可以将数据保存在小程序的实例中,以实现在不同页面之间共享数据。

在 app.js 中定义一个全局变量:

// app.js
App({
  data: {
    globalData: 'This is a global variable'
  }
})

在其他页面中可以通过 getApp() 获取该全局变量:

// page.js
const app = getApp()

console.log(app.data.globalData)  // This is a global variable

  1. 使用事件总线

事件总线可以用于在不同页面之间触发和监听事件,从而实现页面间的通信。

定义一个事件总线:

// event-bus.js
const eventBus = {}

eventBus.on = function(event, callback) {
  if (!this.events[event]) {
    this.events[event] = []
  }
  this.events[event].push(callback)
}

eventBus.emit = function(event, data) {
  if (!this.events[event]) {
    return
  }
  this.events[event].forEach(callback => {
    callback(data)
  })
}

export default eventBus

在页面A中监听事件:

// pageA.js
import eventBus from 'event-bus.js'

eventBus.on('eventA', data => {
  console.log(data)  // This is event data from pageB
})

在页面B中触发事件:

// pageB.js
import eventBus from 'event-bus.js'

eventBus.emit('eventA', 'This is event data from pageB')

  1. 使用页面栈

页面栈是小程序内部维护的一个栈结构,用于管理页面的打开和关闭。通过页面栈,我们可以获取打开的其他页面实例,从而实现页面间的通信。

在页面A中获取页面B的实例:

// pageA.js
let pages = getCurrentPages()
let pageB = pages[pages.length - 2]

console.log(pageB.data)  // This is data from pageB

二、数据传递

  1. 使用URL参数

小程序中可以通过URL参数来传递数据。在页面跳转时,可以通过url参数将数据传递给目标页面。

在页面A中跳转到页面B并传递参数:

// pageA.js
wx.navigateTo({
  url: '/pages/pageB/pageB?id=123&name=John'
})

在页面B中获取参数:

// pageB.js
onLoad: function(options) {
  console.log(options.id)    // 123
  console.log(options.name)  // John
}

  1. 使用全局变量

使用全局变量也可以实现数据的传递。我们可以在页面A中设置全局变量,在页面B中获取该全局变量。

在页面A中设置全局变量:

// pageA.js
const app = getApp()

app.globalData.id = 123
app.globalData.name = 'John'

在页面B中获取全局变量:

// pageB.js
const app = getApp()

console.log(app.globalData.id)    // 123
console.log(app.globalData.name)  // John

  1. 使用页面栈

通过页面栈,我们可以获取打开的其他页面实例,并直接访问其数据。

在页面A中获取页面B的数据:

// pageA.js
let pages = getCurrentPages()
let pageB = pages[pages.length - 2]

console.log(pageB.data.id)    // 123
console.log(pageB.data.name)  // John

以上是微信小程序中跨页面通信和数据传递的几种方式以及相应的实现代码。根据实际需求和场景,选择适合的方式进行跨页面通信和数据传递,可以更好地实现页面间的交互和数据共享。

标签:微信,pageB,js,小白,全局变量,data,event,页面
From: https://blog.csdn.net/wx_linying1029/article/details/140963933

相关文章

  • DzzOffice 新闻插件查看页面添加水印
    文件:\dzz\news\template\news_view.htm这里以显示用户名水印为示例<scripttype="text/javascript">//需要用到的地方调用就好watermark({watermark_txt:'$_G[username]'})functionwatermark(settings){//默认设置vardefaultSettings={......
  • 实现qt页面cpp
    在Qt中实现一个具体的界面,首先需要确定你的界面需求,包括需要哪些控件(如按钮、文本框、标签等)、布局方式(如垂直布局、水平布局、网格布局等)以及可能的交互逻辑。下面是一个简单的步骤,用于在Qt中实现一个基本的界面:创建Qt项目:使用QtCreator创建一个新的QtWidgetsApplicat......
  • 微信小程序-如何解决onShareAppMessage转发gif格式图片不展示?【亲测有效】
    1、开发小程序过程中,如果使用gif,在微信开发者工具中是可以正确显示图片的,但是发布之后,在真机上体验就不行了,无法显示分享的图片,对方也无法看到图片。2、查看文档,发现微信小程序分享的时候,自定义的图片类型只支持:PNG,JPG。不能支持,gif。3、如何解决呢?机密也在文档中,亲测有效,完美解......
  • Python爬虫实战:实时微信推送奥运奖牌榜信息
    最近奥运会正在巴黎如火如荼地进行。为了能第一时间获得我国运动健儿的获奖情况,我给大家分享一个python爬虫项目——实时微信推送奥运奖牌榜信息。爬虫每隔5分钟抓取一次奥林匹克官网奖牌榜数据,对比上次抓取的数据,如果奖牌数量或者排名有变化,就将新的获奖信息推送到......
  • 【uniapp】uniapp+vue2微信小程序实现分享功能
    uniapp+vue2做的微信小程序实现分享功能问题描述uniapp+vue2做的微信小程序,发布以后点击右上角三个点,分享小程序的时候,转发和分享按钮都是灰色解决方案转发、分享、复制链接这几个功能需要自己来手动写方法,考虑到每个页面都需要能够实现分享功能,以下我会使用Vue.js的......
  • python使用selenium和PyPDF2保存多个html页面为pdf
    检索资料时看到比较完备的资料,想着要把所有页面保存下来。正好使用下requests和BeautifulSoup库获取和解析所有的静态页,把静态页保存为单个pdf文件,然后再把所有的pdf文件合并起来生成1个PDF文档。本来想使用python子进程调用wkhtmltopdf工具把静态页生成为单个pdf,然而如此一来pdf......
  • C语言新手小白详细教程(6)函数
    希望文章能够给到初学的你一些启发~如果觉得文章对你有帮助的话,点赞+关注+收藏支持一下笔者吧~阅读指南:开篇说明为什么要使用函数?1.定义一个函数2.初步调用函数3.定义函数详解3.形式参数与实际参数4.使用return接收函数的返回值5.函数声明开篇说明截止目前,我......
  • ASP.NET CORE微信支付回调示例代码
    ASP.NETCORE微信支付回调示例代码 ///<summary>///接收微信支付异步通知///</summary>///<returns></returns>publicasyncTask<ActionResult>NotifyUrl(){//读取请求体中的数据/*......
  • windows平台中使用vscode远程连接linux进行c++开发配置教程(内容详细适合小白)-2021-3-3
    文章目录一、简要介绍二、软件安装步骤1.linux系统安装2.vscode安装3.ssh安装4.配置Remote-SSH5.安装远程插件6.简单小测试三、配置vscode开发环境1.默认设置、用户设置、远程设置和工作区设置2.c++开发设置a).c_cpp_properties.jsonb).tasks.jsonc).launc......
  • 微信小程序解决不支持画布的createConicGradient
    微信圆环进度条开发,先看效果 微信小程序中canvas使用createConicGradient,开发者工具中显示正常,真机上报错,表示createConicGradient方法underfed,然后试一下使用图片放进去,发现微信小程序不支持newImage方法,后面查看微信官方文档有createImage方法wxml代码: <canvasca......