微信小程式頁面傳值的方式
阿新 • • 發佈:2018-12-13
假設把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: '我是選單八'
}
],
]
}