小程序模板網(wǎng)

微信小程序--頁面間的通信和頁面跳轉(zhuǎn)傳參

發(fā)布時間:2018-04-21 10:01 所屬欄目:小程序開發(fā)教程

最近在做微信小程序時,涉及到了把值從一個頁面?zhèn)鬟f到另一個頁面的問題,在網(wǎng)上查閱了一些資料,在這里總結(jié)一下常用的方法。

1、頁面跳轉(zhuǎn)時,在跳轉(zhuǎn)的url中傳遞,比如:

 

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

在InfoContent頁面:

 

				
  1. onLoad: function (options) {
  2. //頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
  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">跳轉(zhuǎn)到新頁面</button>
  4. </view>

2、pagejump.js

 

				
  1. Page({
  2. data: {
  3. lastval: {},
  4. showBtn: false,
  5. },
  6. onLoad: function (options) {
  7. // 生命周期函數(shù)--監(jiān)聽頁面加載
  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. // 生命周期函數(shù)--監(jiān)聽頁面加載
  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. })


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23863.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢