微信小程序中怎么實現頁面跳轉和參數傳遞

這篇文章主要介紹了微信小程序中怎么實現頁面跳轉和參數傳遞的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇微信小程序中怎么實現頁面跳轉和參數傳遞文章都會有所收獲，下面我們一起來看看吧。

微信小程序之頁面跳轉和參數傳遞的實現

前言：

在微信小程序里面的跳轉其實和html里的超鏈接a差不多，我們實現跳轉可以通過標簽實現，也可以通過js實現，下面一一演示給大家看一下。

在展示demo前，我們需要先簡單的建好項目文件夾做好準備。如下：

標簽實現

 小程序里面有一個類似于a標簽的navigator標簽，用來做跳轉處理。

index頁面：

  <navigator url="../navigator/navigator?title=我是navi">跳轉到新的頁面</navigator>
  <navigator url="../redirect/redirect?title=我是red" redirect>跳轉到當前頁面</navigator>

navigator頁面和redirect頁面：

<view> {{title}} </view>

navigator.js頁面和redirect.js頁面：

Page({
 data:{
  title:''
 },
 onLoad:function(options){
  // 頁面初始化 options為頁面跳轉所帶來的參數
  this.setData({
    title:options.title
  })
 },
})

 而跳轉也分為兩種，一是跳轉到新頁面url后面的路徑并可以攜帶參數，一種是在后面加上redirect，在當前頁面打開，并攜帶參數。

注意：為了不讓用戶在使用小程序時造成困擾，我們規定頁面路徑只能是五層，請盡量避免多層級的交互方式。

tips：所跳轉的頁面一定不要忘了在app.json里配置喲，否則會報錯。

2. js實現

 用js實現只需要寫上跳轉代碼即可，其它如上。

wx.navigateTo({
 url: '../navigator/navigator?title=我是navi'
})

wx.redirectTo({
 url: '../redirect/redirect?title=我是red'
})

tips：仔細觀察下面圖片會發現，跳轉到其他頁面會帶有返回按鈕，在當前頁面打開則不會有。

圖片展示：

關于“微信小程序中怎么實現頁面跳轉和參數傳遞”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“微信小程序中怎么實現頁面跳轉和參數傳遞”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。