小程序模板网

微信小程序--页面间的通信和页面跳转传参

最近在做微信小程序时,涉及到了把值从一个页面传递到另一个页面的问题,在网上查阅了一些资料,在这里总结一下常用的方法。

1、页面跳转时,在跳转的url中传递,比如:

 

				
  1. wx.navigateTo({
  2. url: '../InfoContent/InfoContent?id=1'
  3. });

在InfoContent页面:

 

				
  1. onLoad: function (options) {
  2. //页面初始化 options为页面跳转所带来的参数
  3. var s = this;
  4. var id=options.id;//获取值
  5. }

2、全局变量的形式  app.js代码:

 

				
  1. globalData:{
  2. id: 1
  3. }

赋值代码:

 

				
  1. var app = getApp();
  2. app.globalData.id=2

取值代码:

 

				
  1. var app = getApp();
  2. var id=app.globalData.id;

1、pagejump.wxml:

 

				
  1. <view class="page">
  2.  
  3. <button type="default" bindtap="onBtnClick">跳转到新页面</button>
  4. </view>

2、pagejump.js

 

				
  1. Page({
  2. data: {
  3. lastval: {},
  4. showBtn: false,
  5. },
  6. onLoad: function (options) {
  7. // 生命周期函数--监听页面加载
  8. var that = this;
  9. console.log('onLoad is invoked');
  10. console.log(options);
  11. that.setData({
  12. lastval: options.val,
  13.  
  14. })
  15. },
  16. onBtnClick: function () {
  17. var that = this;
  18. console.log('onBtnClick');
  19. wx.navigateTo({
  20. url: '../home/home?tp=2&index=hello bright&showBtn=false',
  21. success: function (res) {
  22. // success
  23. console.log('onBtnClick success() res:');
  24. },
  25. fail: function () {
  26. // fail
  27. console.log('onBtnClick fail() !!!');
  28. },
  29. complete: function () {
  30. console.log('onBtnClick complete() !!!');
  31. // complete
  32. }
  33. })
  34. }
  35. })

3、home.wxml:

 

				
  1. <view class="test">新页面新页面tp=={{tp}}</view>
  2. <view class="test">新页面新页面showBtn=={{showBtn}}</view>
  3. <view class="test">新页面新页面index=={{index}}</view>

4、home.js:

 

				
  1. Page({
  2. data: {
  3. tp:'',
  4. showBtn: '',
  5. index:'',
  6. },
  7. onLoad: function (options) {
  8. // 生命周期函数--监听页面加载
  9. var that = this;
  10. console.log('onLoad is invoked');
  11. that.setData({
  12. tp: options.tp,
  13. index: options.index,
  14. showBtn: (options.showBtn == "true" ? true : false),
  15. });
  16. console.log("tp="+tp);
  17. }
  18. })


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23863.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询