微信小程序 頁面?zhèn)鲄嵗斀?/h1>

 更新時間：2016年11月16日 11:31:36   作者：dzp_coder  

這篇文章主要介紹了微信小程序 頁面?zhèn)鲄嵗斀獾南嚓P資料,這里對頁面跳轉(zhuǎn)及傳遞參數(shù)的功能做個小示例，幫助大家盡快上手，很簡單，需要的朋友可以參考下

微信小程序 頁面?zhèn)鲄?/strong>

  微信小程序的傳參，頁面跳轉(zhuǎn),頁面之間傳遞參數(shù)在開發(fā)APP應用的時候會經(jīng)常用到這樣的功能，這里就用微信小程序來實現(xiàn)，大家可以看下如何實現(xiàn)，如有錯誤，請指正。

  先上demo圖:

  

為了簡化邏輯,所以index.wxml里面只寫了兩個text.既然是跳轉(zhuǎn),那就還有其他頁面.

目錄如下:

三個頁面,但是代碼很簡單.直接上代碼.

<span style="font-size:24px;"><!--index.wxml-->  
<view class="btn-area">  
 <navigator url="../navigator/navigator?title=我是navigate" >跳轉(zhuǎn)到新頁面</navigator>  
 <navigator url="../redirect/redirect?title=我是redirect" redirect>在當前頁打開</navigator>  
</view></span> 

index.wxml中的URL就是跳轉(zhuǎn)的頁面路徑.上面代碼中就是navigator目錄下的navigator頁面,title是參數(shù).

navigator下redirect屬性是值在當前頁打開.如果不加redirect就是跳轉(zhuǎn)到新頁面.都可以攜帶參數(shù).

navigator下redirect屬性是值在當前頁打開.如果不加redirect就是跳轉(zhuǎn)到新頁面.都可以攜帶參數(shù).

<span style="font-size:24px;"><!--navigatort.wxml-->

 <view style="text-align:center"> {{title}} </view></span>

在navigatort.wxml中通過js代碼可以獲取到title,代碼如下

//navigatort.js

Page({  
 onLoad: function(options) {  
  this.setData({  
   title: options.title  
  })  
 }  
}) 

<span style="font-size:24px;"><!--redirect.wxml-->  
<view style="text-align:center"> {{title}} </view></span> 

<span style="font-size:24px;">//redirect.js  
Page({  
 onLoad: function(options) {  
  this.setData({  
   title: options.title  
  })  
 }  
})</span> 

最后上兩張?zhí)D(zhuǎn)后的圖.

1.跳轉(zhuǎn)到新頁面

2.在原來的頁面打開

有沒有發(fā)現(xiàn)一個細節(jié),在原來的頁面打開是不會出現(xiàn)返回按鈕的,而跳轉(zhuǎn)到新頁面后會出返回按鈕.

這是因為我寫了兩個頁面.如果indexwxml不是一級頁面,這里都會出現(xiàn)返回按鈕.

當然返回的結(jié)果是不一樣的:

1.跳轉(zhuǎn)到新頁面,返回是回到之前的頁面;

2.在原來頁面打開,返回是回到上一級頁面.

微信開發(fā)文檔

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章:

• 微信小程序?qū)崿F(xiàn)頁面導航的方法詳解
• 微信小程序自定義組件與頁面的相互傳參
• 微信小程序頁面間跳轉(zhuǎn)傳參方式總結(jié)
• 微信小程序url傳參寫變量的方法
• 微信小程序?qū)崿F(xiàn)傳參數(shù)的幾種方法示例
• 微信小程序中多個頁面?zhèn)鲄⑼ㄐ诺膶W習與實踐
• 微信小程序 頁面之間傳參實例詳解
• 微信小程序鏈接傳參并跳轉(zhuǎn)新頁面
• 微信小程序?qū)崿F(xiàn)頁面導航與傳參功能詳解

• 微信小程序
• 頁面?zhèn)鲄?/a>

相關文章

• 這篇文章主要介紹了微信公眾號菜單配置微信小程序?qū)嵗斀獾南嚓P資料,需要的朋友可以參考下

  2017-03-03

微信小程序 wx.request(OBJECT)發(fā)起請求詳解

這篇文章主要介紹了微信小程序 wx.request(OBJECT)發(fā)起請求詳解的相關資料,需要的朋友可以參考下

2016-10-10

微信小程序 跳轉(zhuǎn)傳參數(shù)與傳對象詳解及實例代碼

這篇文章主要介紹了微信小程序 跳轉(zhuǎn)傳參數(shù)與傳對象詳解及實例代碼的相關資料,需要的朋友可以參考下

2017-03-03

微信小程序中頁面FOR循環(huán)和嵌套循環(huán)

這篇文章主要介紹了微信小程序中頁面FOR循環(huán)和嵌套循環(huán)的相關資料,需要的朋友可以參考下

2017-06-06

web?worker在項目中的使用學習為項目增加亮點

這篇文章主要為大家介紹了web?worker使用學習來為你的項目增加亮點，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

2022-07-07

微信小程序 富文本轉(zhuǎn)文本實例詳解

這篇文章主要介紹了微信小程序 富文本轉(zhuǎn)文本實例詳解的相關資料,需要的朋友可以參考下

2016-10-10

JS中this的4種綁定規(guī)則詳解

如果你學過面向?qū)ο缶幊?，那你肯定知道干什么用的，如果你沒有學過，那么暫時可以不用看這篇文章,this既不指向函數(shù)自身,也不指函數(shù)的詞法作用域，具體怎么使用JS中的this,JS中的this綁定規(guī)則又是什么？

2020-02-02

自定義range?sliders滑塊實現(xiàn)元素拖動方法

這篇文章主要為大家介紹了自定義range?sliders滑塊實現(xiàn)元素拖動方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

2022-08-08

Java Spring 事務回滾詳解

這篇文章主要介紹了java Spring事務回滾的相關資料,需要的朋友可以參考下

2016-10-10

微信小程序 使用canvas制作K線實例詳解

這篇文章主要介紹了微信小程序 使用canvas制作K線實例詳解的相關資料,需要的朋友可以參考下

2017-01-01