3种在微信小程序的不同页面传递数据的方法(url带参传递数据、全局变量传递数据、本地缓存传递数据)

1、url带参传递数据

1.1、index页面向detail页面传递数据

父页面的index.js

3种在微信小程序的不同页面传递数据的方法(url带参传递数据、全局变量传递数据、本地缓存传递数据)_第1张图片

问号?后面是要传递的数据,多个数据用&隔开

1.2、跳转页面(接收数据的页面)的detail.js

3种在微信小程序的不同页面传递数据的方法(url带参传递数据、全局变量传递数据、本地缓存传递数据)_第2张图片

接收传进来的数据并在控制台打印出来

2、本地缓存传递数据

本地数据缓存是微信小程序提供的一个功能,从本地缓存中同步获取指定 key 对应的内容。

wx.setStorageSync(string key, Object|string data)

参数

string key:本地缓存中指定的 key

Object|string data:需要存储的内容

那么如何利用本地缓存在不同的页面中进行传递呢?

例如我们在页面index保存内容title

3种在微信小程序的不同页面传递数据的方法(url带参传递数据、全局变量传递数据、本地缓存传递数据)_第3张图片

通过setStorageSync,title这个数据就保存在本地了,当其他页面要使用这个数据的时候,可以直接通过wx.getStorageSync('title')把数据取出来用。

3种在微信小程序的不同页面传递数据的方法(url带参传递数据、全局变量传递数据、本地缓存传递数据)_第4张图片

 

3、全局变量传递数据

3.1 、首先在app.js的App方法里定义全局变量(实际上是定义全局变量),这个全局变量可以在每个页面中引入

3种在微信小程序的不同页面传递数据的方法(url带参传递数据、全局变量传递数据、本地缓存传递数据)_第5张图片

3.2、在页面中通过App()方法获取到全局应用对象,然后可以对全局变量进行操作(读取、修改...)

3种在微信小程序的不同页面传递数据的方法(url带参传递数据、全局变量传递数据、本地缓存传递数据)_第6张图片

具体程序:https://github.com/ZHOUYANFEN/wx_data-interaction

你可能感兴趣的:(小程序,数据交互)