快捷導(dǎo)航

微信小程序使用navigateTo數(shù)據(jù)傳遞的實例

更新時間：2017年09月26日 09:33:54 投稿：lqh

這篇文章主要介紹了微信小程序使用navigateTo數(shù)據(jù)傳遞的實例的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下

微信小程序使用navigateTo數(shù)據(jù)傳遞的實例

1，傳遞基本數(shù)據(jù)類型

index.js 發(fā)送頁JS

Page({ 
 data: { 
  testStr: '字符串str' 
 }, 
 onLoad: function () { 
 }, 
 next: function(e){ 
  wx.navigateTo({ 
   url: '/pages/test/test?str='+this.data.testStr, 
  }) 
 } 
})

test.js 接受頁JS

Page({ 
 data:{ 
 }, 
 onLoad:function(options){ 
  console.log("接收到的參數(shù)是str="+options.str); 
 } 
})

打印的Log如下：

接收到的參數(shù)是str=字符串str

2，傳遞對象{}

index.js 發(fā)送頁JS

Page({ 
 data: { 
  dataObj:{name:'我是name', extra:'我是extra'} 
 }, 
 onLoad: function () { 
 }, 
 toTest: function(e){ 
  wx.navigateTo({ 
   url: '/pages/test/test?dataObj='+JSON.stringify(this.data.dataObj) 
  }) 
 } 
})

test.js 接受頁JS

Page({ 
 data:{ 
  dataObj:null 
 }, 
 onLoad:function(options){   
  this.dat.dataObj= JSON.parse(options.dataObj);//解析得到對象 
 }})

打印的Log如下：

test.js [sm]:16 接收到的參數(shù)是obj={“name”:”我是name”,”dataObj”:”我是dataObj”}

3，傳遞數(shù)組集合[]

index.js 發(fā)送頁JS

Page({ 
 data: { 
  list:['item-A','item-B'] 
 }, 
 onLoad: function () { 
 }, 
 next: function(e){ 
  wx.navigateTo({ 
   url: '/pages/test/test?list='+JSON.stringify(this.data.list), 
  }) 
 } 
})

test.js 接受頁JS

Page({ 
 data:{ 
  list:[] 
 },  
onLoad:function(options){   
  console.log("接收到的參數(shù)是list="+options.list);//此處打印出來的是字符串，解析如下    
  this.data.list = JSON.parse(options.list);//解析得到集合
 }})

打印的Log如下：

test.js [sm]:17 接收到的參數(shù)是list=[“item-A”,”item-B”]

如有疑問請留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

相關(guān)文章

微信小程序生命周期詳解
這篇文章主要介紹了微信小程序生命周期的相關(guān)資料,創(chuàng)建、到開始、暫停、喚起、停止、卸載等過程，需要的朋友可以參考下
2016-10-10
微信小程序中button組件的邊框設(shè)置的實例詳解
這篇文章主要介紹了微信小程序中button組件的邊框設(shè)置的實例詳解的相關(guān)資料,希望通過本文大家能夠掌握這部分內(nèi)容，需要的朋友可以參考下
2017-09-09
JavaScript兩張圖搞懂原型鏈
這篇文章主要分享JavaScript的兩張原型鏈圖，我們上一篇文章介紹了JavaScript中的原型，為什么不將原型鏈一起介紹了呢？因為JavaScript中的原型鏈?zhǔn)且粋€難點(diǎn)，也是一個面試必問的考點(diǎn)，現(xiàn)在就來學(xué)習(xí)一下具體內(nèi)容吧
2021-12-12
Vue.js React與Angular流行前端框架優(yōu)勢對比
這篇文章主要為大家介紹了Vue.js React與Angular流行前端框架優(yōu)勢對比，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
JS實現(xiàn)一個可以當(dāng)鏡子照的?Button
這篇文章主要介紹了JS實現(xiàn)一個可以當(dāng)鏡子照的?Button的方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
微前端之?js隔離?樣式隔離?元素隔離問題詳解
這篇文章主要為大家介紹了微前端之?js隔離?樣式隔離?元素隔離問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
微信小程序詳解頁面跳轉(zhuǎn)與返回并回傳數(shù)據(jù)
這篇文章主要介紹了微信小程序詳解頁面跳轉(zhuǎn)與返回并回傳數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下
2017-02-02
umi插件開發(fā)仿dumi項目加載markdown文件實現(xiàn)詳解
這篇文章主要為大家介紹了umi插件開發(fā)仿dumi項目加載markdown文件實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-01-01
利用javaScript處理常用事件詳解
這篇文章主要介紹了利用javaScript處理常用事件詳解,文章有非常詳細(xì)的代碼實踐,對學(xué)習(xí)js的小伙伴們有一定的參考價值,需要的朋友可以參考下
2021-04-04
前端算法題解?leetcode50-Pow(x,?n)
這篇文章主要為大家介紹了前端算法題解?leetcode50-Pow(x,?n)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09