微信小程序之頁面跳轉(zhuǎn)和參數(shù)傳遞的實現(xiàn)
微信小程序之頁面跳轉(zhuǎn)和參數(shù)傳遞的實現(xiàn)
前言:
在微信小程序里面的跳轉(zhuǎn)其實和html里的超鏈接a差不多,我們實現(xiàn)跳轉(zhuǎn)可以通過標簽實現(xiàn),也可以通過js實現(xiàn),下面一一演示給大家看一下。
在展示demo前,我們需要先簡單的建好項目文件夾做好準備。如下:
標簽實現(xiàn)
小程序里面有一個類似于a標簽的navigator標簽,用來做跳轉(zhuǎn)處理。
index頁面:
<navigator url="../navigator/navigator?title=我是navi">跳轉(zhuǎn)到新的頁面</navigator> <navigator url="../redirect/redirect?title=我是red" redirect>跳轉(zhuǎn)到當前頁面</navigator>
navigator頁面和redirect頁面:
<view> {{title}} </view>
navigator.js頁面和redirect.js頁面:
Page({ data:{ title:'' }, onLoad:function(options){ // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù) this.setData({ title:options.title }) }, })
而跳轉(zhuǎn)也分為兩種,一是跳轉(zhuǎn)到新頁面url后面的路徑并可以攜帶參數(shù),一種是在后面加上redirect,在當前頁面打開,并攜帶參數(shù)。
注意:為了不讓用戶在使用小程序時造成困擾,我們規(guī)定頁面路徑只能是五層,請盡量避免多層級的交互方式。
tips:所跳轉(zhuǎn)的頁面一定不要忘了在app.json里配置喲,否則會報錯。
2. js實現(xiàn)
用js實現(xiàn)只需要寫上跳轉(zhuǎn)代碼即可,其它如上。
wx.navigateTo({ url: '../navigator/navigator?title=我是navi' })
wx.redirectTo({ url: '../redirect/redirect?title=我是red' })
tips:仔細觀察下面圖片會發(fā)現(xiàn),跳轉(zhuǎn)到其他頁面會帶有返回按鈕,在當前頁面打開則不會有。
圖片展示:
如有疑問請留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
- 微信小程序 動態(tài)修改頁面數(shù)據(jù)及參數(shù)傳遞過程詳解
- 微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳遞參數(shù)(實體,對象)
- 微信小程序?qū)崿F(xiàn)傳遞多個參數(shù)與事件處理
- 微信小程序?qū)W習筆記之跳轉(zhuǎn)頁面、傳遞參數(shù)獲得數(shù)據(jù)操作圖文詳解
- 微信小程序教程系列之頁面跳轉(zhuǎn)和參數(shù)傳遞(6)
- 微信小程序開發(fā)之數(shù)據(jù)存儲 參數(shù)傳遞 數(shù)據(jù)緩存
- 微信小程序 navigator 跳轉(zhuǎn)url傳遞參數(shù)
- 微信小程序之間的參數(shù)傳遞、獲取的操作方法
相關(guān)文章
微信小程序上滑加載下拉刷新(onscrollLower)分批加載數(shù)據(jù)(二)
這篇文章主要介紹了微信小程序上滑加載下拉刷新(onscrollLower)分批加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2017-05-05微信小程序網(wǎng)絡請求wx.request詳解及實例
這篇文章主要介紹了微信小程序網(wǎng)絡請求wx.request詳解及實例的相關(guān)資料,需要的朋友可以參考下2017-05-05一文詳解webpack中l(wèi)oader與plugin的區(qū)別
這篇文章主要為大家介紹了一文詳解webpack中l(wèi)oader與plugin的區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-02-02微信小程序 兩種滑動方式(橫向滑動,豎向滑動)詳細及實例代碼
這篇文章主要介紹了微信小程序 兩種滑動方式詳細及實例代碼的相關(guān)資料,這里對橫向滑動和豎向滑動都做介紹,需要的朋友可以參考下2017-01-01