微信小程序页面相互传参链接传参本地缓存全局变量反向传值

it2022-05-05  198

A页面 和 B页面(a传值给b)

基本的页面目录和配置

一、通过缓存传递参数  wx.setStorageSync

a页面(传值的页面)

<!--pages/a/a.wxml--> <view bindtap="tiaozhuan">A页面</view>

js

onLoad: function (options) {}, tiaozhuan: function (e) { var ttt = '/img/common/xybg.png' console.log(ttt) wx.setStorageSync("testtest", ttt) wx.navigateTo({ //跳转b页面 url: '../b/b' }) },

b页面  接收a的值

<!--pages/b/b.wxml--> <view>B页面</view> <view> 从A页面得到的值: {{testtest}} <image src="{{testtest}}"></image> </view>

js

onLoad: function (options) { var testtest = wx.getStorageSync('testtest') console.log(testtest) this.setData({ testtest: testtest }, function () { wx.removeStorageSync('testtest')//清除缓存 }) },

运行结果

 

缓存的反向传值

把B页面的值传给A页面

首先b页面js

onLoad: function (options) { var b_txt='B页面返回的值' wx.setStorageSync('jieshou', b_txt) wx.navigateBack(); },

a页面

onShow: function () { var newdata = wx.getStorageSync('jieshou'); this.setData({ dataB:newdata }) }, <view>{{dataB}}</view>

运行结果

 

二、通过链接传递参数

a页面

<!--pages/a/a.wxml--> <view bindtap="tiaozhuan">A页面</view>

js

tiaozhuan: function (e) { var cc='123456' var bb="参数" wx.navigateTo({ url: '../b/b?num=' + cc + '&ch='+bb }) },

b页面

<!--pages/b/b.wxml--> <view>B页面</view> <view> 链接参数1: {{canshu1}} </view> <view> 链接参数2: {{canshu2}} </view>

js

data: { canshu1:'', canshu2:'' }, onLoad: function (options) { this.setData({ canshu1:options.num, canshu2:options.ch }) console.log(options.num) console.log(options.ch) },

运行

三、全局变量

在app.js里定义全局变量

App({ onShow: function (options) {//测试 场景值 let option = JSON.stringify(options); console.log('app.js option-----' + option) console.log('app.js>>options.scene--------------------' + options.scene); this.globalData.test= options.scene }, globalData: {//定义全局变量 test: null }, })

a页面js里

var app = getApp(); //获取应用实例 必须有这个才能获取到app.js里的东西 Page({ onLoad: function (options) { console.log(app.globalData.test); //a页面 直接就能打印场景值 }, })

运行结果


最新回复(0)