首頁 > 微信小程式 > 小程式開發 > 微信小程式 頁面跳轉傳遞值幾種方法詳解

微信小程式 頁面跳轉傳遞值幾種方法詳解

高洛峰
發布: 2017-02-18 11:33:50
原創
2037 人瀏覽過

這篇文章主要介紹了微信小程式頁面跳轉傳遞值幾種方法詳解的相關資料,需要的朋友可以參考下

微信小程式頁面跳轉傳遞值

微信小程式導航有兩種形式:一種是在寫在js中進行跳轉,另一種是寫在wxml頁面中進行跳轉。

1、js導航

 (1)、wx.navigateTo(OBJECT) :保留目前頁面,跳到應用程式內的某個頁面,使用wx.navigateBack可以回到原始頁面。

微信小程序 页面跳转传递值几种方法详解


wx.navigateTo({ 
 url: 'test?id=1' 
})
登入後複製

獲取傳遞的值:

//test.js 
Page({ 
 onLoad: function(option){ 
  console.log(option.id) 
 } 
})
登入後複製

獲取傳遞的值:

微信小程序 页面跳转传递值几种方法详解

wx.redirectTo({ 
 url: 'test?id=1' 
})
登入後複製


/** wxss **/ 
/** 修改默认的navigator点击态 **/ 
.navigator-hover { 
  color:blue; 
} 
/** 自定义其他点击态样式类 **/ 
.other-navigator-hover { 
  color:red; 
}
登入後複製

 (3)、wx.navigateBack(OBJECT):關閉目前頁面,返回上一頁或多級頁面。可透過 getCurrentPages()) 取得目前的頁面棧,決定需要傳回幾層。

2、wxml導覽

微信小程序 页面跳转传递值几种方法详解navigator:頁面連結。

註:navigator-hover預設為{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, 的子節點背景色應為透明色

範例程式碼:

<view class="btn-area"> 
 <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator> 
 <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator> 
</view>
登入後複製

// redirect.js navigator.js 
Page({ 
 onLoad: function(options) { 
  this.setData({ 
   title: options.title 
  }) 
 } 
})
登入後複製

取得頁面傳遞的值:

rrreee

獲取頁面傳遞的值:


rrreee🎜🎜🎜🎜 🎜🎜更多微信小程式 頁面跳轉傳遞值幾種方法詳解相關文章請關注PHP中文網! 🎜🎜🎜🎜
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板