詳解微信小程序頁(yè)面跳轉(zhuǎn) 傳遞參數(shù)

更新時(shí)間：2016年12月08日 15:12:36 作者：dzp_coder

這篇文章主要介紹了詳解微信小程序頁(yè)面跳轉(zhuǎn) 傳遞參數(shù)，現(xiàn)在分享給大家，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

微信小程序的頁(yè)面跳轉(zhuǎn),頁(yè)面之間傳遞參數(shù)筆記，具體如下：
先上demo圖:

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

目錄如下:

三個(gè)頁(yè)面,但是代碼很簡(jiǎn)單.直接上代碼.

<!--index.wxml--> 
<view class="btn-area"> 
 <navigator url="../navigator/navigator?title=我是navigate" >跳轉(zhuǎn)到新頁(yè)面</navigator> 
 <navigator url="../redirect/redirect?title=我是redirect" redirect>在當(dāng)前頁(yè)打開(kāi)</navigator> 
</view>

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

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

<!--navigatort.wxml--> 
<view style="text-align:center"> {{title}} </view>

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

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

<!--redirect.wxml--> 
<view style="text-align:center"> {{title}} </view>

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

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

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

2.在原來(lái)的頁(yè)面打開(kāi)

有沒(méi)有發(fā)現(xiàn)一個(gè)細(xì)節(jié),在原來(lái)的頁(yè)面打開(kāi)是不會(huì)出現(xiàn)返回按鈕的,而跳轉(zhuǎn)到新頁(yè)面后會(huì)出返回按鈕.

這是因?yàn)槲覍?xiě)了兩個(gè)頁(yè)面.如果indexwxml不是一級(jí)頁(yè)面,這里都會(huì)出現(xiàn)返回按鈕.

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

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

2.在原來(lái)頁(yè)面打開(kāi),返回是回到上一級(jí)頁(yè)面.

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

微信小程序uniapp添加懸浮菜單的方法
這篇文章主要為大家詳細(xì)介紹了微信小程序uniapp添加懸浮菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果
這篇文章主要介紹了Bootstrap實(shí)現(xiàn)響應(yīng)式導(dǎo)航欄效果，導(dǎo)航欄是一個(gè)很好的功能，是Bootstrap網(wǎng)站的一個(gè)突出特點(diǎn)，本文帶領(lǐng)大家學(xué)習(xí)實(shí)現(xiàn)Bootstrap導(dǎo)航欄,需要的朋友可以參考下
2015-12-12
JS實(shí)現(xiàn)為動(dòng)態(tài)創(chuàng)建的元素添加事件操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)為動(dòng)態(tài)創(chuàng)建的元素添加事件操作,涉及javascript頁(yè)面元素動(dòng)態(tài)添加及事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下
2018-03-03
js實(shí)現(xiàn)在文本框光標(biāo)處添加字符的方法介紹
在開(kāi)發(fā)應(yīng)用中，經(jīng)常會(huì)遇到一些技術(shù)上的問(wèn)題，比如：怎樣讓js在文本框光標(biāo)處添加字符，本文將以此問(wèn)題進(jìn)行詳細(xì)介紹，需要了解的朋友可以參考下
2012-11-11
JavaScript 函數(shù)用法詳解【函數(shù)定義、參數(shù)、綁定、作用域、閉包等】
這篇文章主要介紹了JavaScript 函數(shù)用法,結(jié)合實(shí)例形式分析了JavaScript函數(shù)定義、參數(shù)、綁定、作用域、閉包、回調(diào)函數(shù)、柯理化函數(shù)等相關(guān)概念、原理與操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
Bootstrap分頁(yè)插件之Bootstrap Paginator實(shí)例詳解
Bootstrap Paginator是一款基于Bootstrap的js分頁(yè)插件，功能很豐富，個(gè)人覺(jué)得這款插件已經(jīng)無(wú)可挑剔了，感興趣的朋友跟著腳本之家小編一起學(xué)習(xí)吧
2016-10-10
javascript中break，continue和return語(yǔ)句用法小結(jié)
break，continue和return這三個(gè)語(yǔ)句的用法新手們經(jīng)常弄混淆，至少在我學(xué)習(xí)c語(yǔ)言的時(shí)候經(jīng)常把它們的用法給搞錯(cuò)。不過(guò)現(xiàn)在好了，我已徹底搞清楚它們之間的用法
2012-05-05
js報(bào)錯(cuò):Maximum?call?stack?size?exceeded的解決方法
這篇文章主要給大家介紹了關(guān)于js報(bào)錯(cuò)Maximum?call?stack?size?exceeded的解決方法,文中通過(guò)實(shí)例代碼將解決的方法介紹的非常詳細(xì),需要的朋友可以參考下
2023-02-02
$JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )$
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_
今天在網(wǎng)上看到一篇很有意思的文章（需翻墻），解釋了幾段非常有趣的 JavaScript 代碼。你猜下面這段 JavaScript 代碼是什么意思？
2011-02-02
移動(dòng)端a標(biāo)簽下載文件重命名(download)不生效解決辦法
在移動(dòng)端使用a標(biāo)簽下載文件時(shí),文件重命名可能不生效,尤其是在APP內(nèi)嵌頁(yè)面中,這通常是因?yàn)榭缬騿?wèn)題導(dǎo)致的,文中將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下
2024-10-10