1. 程式人生 > >微信小程式頁面傳值的方式

微信小程式頁面傳值的方式

假設把A頁面的值傳給B頁面:

首先是A頁面傳值相關的:

頁面設計:

<view class='content' wx:for='{{menuList}}' wx:for-index="parentIndex">
  <view class='item' data-parentIndex='{{parentIndex}}' data-index='{{index}}' wx:for='{{item}}' bindtap='muenSubClick' data-introduce='{{sub}}' wx:for-item='sub'>{{sub.name}}</view>
</view>

js頁面:

var app = getApp();//這一句在傳下標的時候很重要喲
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    //menuList:""
    menuList: [
      [{
          name: '選單1',
          url: '../navigateTo/navigateTo',
          content: '我是選單一'
        },
        {
          name: '選單2',
          url: '../logs/logs',
          content: '我是選單二'
        },
        {
          name: '選單3',
          url: '../movie/movie',
          content: '我是選單三'
        },
        {
          name: '選單4',
          url: '../userinfo/userinfo',
          content: '我是選單四'
        }
      ],
      [{
          name: '選單5',
          url: '121',
          content: '我是選單五'
        },
        {
          name: '選單6',
          url: '121',
          content: '我是選單六'
        },
        {
          name: '選單7',
          url: '121',
          content: '我是選單七'
        },
        {
          name: '選單8',
          url: '121',
          content: '我是選單八'
        }
      ],
    ]
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function(options) {
    //使用appjson設定值
    this.setData({
      menuList: app.globalData.menuList,
    });
  },
  muenSubClick: function(res) {
    console.log(res.target.dataset);
    var subInfo = res.target.dataset.introduce //獲取選單資訊
    var content = JSON.stringify(subInfo) //轉換為json物件
    var url = subInfo.url; //獲取跳轉路徑
    //跳轉頁面後有返回鍵
    wx.navigateTo({
      url: url+'?subInfo=' + content  //傳物件
    })

    //傳下標1
    // var index=res.target.dataset.introduce.index;//獲取當前點選選單的下標
    // wx.navigateTo({
    //   url: url + '?subInfoIndex=' + index
    // })
    
        //傳下標 2
    // var dataset = res.target.dataset; //情況比較特殊,主要取裡面的兩個下標
    // wx.navigateTo({
    //   url: url + '?parentIndex=' + dataset.parentindex + '&index=' + dataset.index
    // })

    // //本地儲存
    // wx.setStorage({
    //   key: 'subInfo',
    //   data: content,
    // })
    // wx.navigateTo({
    //   url: url
    // })
  }
})

B頁面獲取值:

頁面:

<!--pages/navigateTo/navigateTo.wxml-->
<view>{{introduce.name}}</view>
<view>{{introduce.content}}</view>

js檔案:

// pages/navigateTo/navigateTo.js
var app = getApp();
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    introduce: ""
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {

    //傳物件
    var content = JSON.parse(options.subInfo);

    //傳下標 1   傳下標以這一種方法為主
    // var content = app.globalData.menuList[options.subInfoIndex]
    // console.log(content);

    //傳下標 2
    // var parentIndex = options.parentIndex;
    // var index = options.index;
    // console.log(options)
    //var content = app.globalData.menuList[parentIndex][index]

    this.setData({
      introduce: content
    });

    //使用本地儲存
    //   var that = this;
    //   //獲取本地儲存處物件
    //   wx.getStorage({
    //     key: 'subInfo',
    //     success: function(res) {
    //       console.log(res.data);
    //       that.setData({
    //         introduce: JSON.parse(res.data),
    //       });
    //     },
    //   })
  }
})

ps:注意在使用傳下標方法傳值的時候需要在小程式的app.js檔案裡面配置資料來源,如下圖所示:

更多繫結資料來源的方法見:https://blog.csdn.net/SunshineBlog/article/details/83003577

 
  globalData: {
    userInfo: null,
    menuList: [
      [{
          name: '選單1',
          url: '../navigateTo/navigateTo',
          content: '我是選單一'
        },
        {
          name: '選單2',
          url: '../logs/logs',
          content: '我是選單二'
        },
        {
          name: '選單3',
          url: '../movie/movie',
          content: '我是選單三'
        },
        {
          name: '選單4',
          url: '../userinfo/userinfo',
          content: '我是選單四'
        }
      ],
      [{
          name: '選單5',
          url: '121',
          content: '我是選單五'
        },
        {
          name: '選單6',
          url: '121',
          content: '我是選單六'
        },
        {
          name: '選單7',
          url: '121',
          content: '我是選單七'
        },
        {
          name: '選單8',
          url: '121',
          content: '我是選單八'
        }
      ],
    ]
  }