微信小程序 頁(yè)面?zhèn)鲄?shí)例詳解
微信小程序 頁(yè)面?zhèn)鲄?/strong>
微信小程序的傳參,頁(yè)面跳轉(zhuǎn),頁(yè)面之間傳遞參數(shù)在開(kāi)發(fā)APP應(yīng)用的時(shí)候會(huì)經(jīng)常用到這樣的功能,這里就用微信小程序來(lái)實(shí)現(xiàn),大家可以看下如何實(shí)現(xiàn),如有錯(cuò)誤,請(qǐng)指正。
先上demo圖:
為了簡(jiǎn)化邏輯,所以index.wxml里面只寫(xiě)了兩個(gè)text.既然是跳轉(zhuǎn),那就還有其他頁(yè)面.
目錄如下:
三個(gè)頁(yè)面,但是代碼很簡(jiǎn)單.直接上代碼.
<span style="font-size:24px;"><!--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></span>
index.wxml中的URL就是跳轉(zhuǎn)的頁(yè)面路徑.上面代碼中就是navigator目錄下的navigator頁(yè)面,title是參數(shù).
navigator下redirect屬性是值在當(dāng)前頁(yè)打開(kāi).如果不加redirect就是跳轉(zhuǎn)到新頁(yè)面.都可以攜帶參數(shù).
navigator下redirect屬性是值在當(dāng)前頁(yè)打開(kāi).如果不加redirect就是跳轉(zhuǎn)到新頁(yè)面.都可以攜帶參數(shù).
<span style="font-size:24px;"><!--navigatort.wxml--> <view style="text-align:center"> {{title}} </view></span>
在navigatort.wxml中通過(guò)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)到新頁(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è)面.
微信開(kāi)發(fā)文檔
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
微信小程序?qū)崿F(xiàn)緩存根據(jù)不同的id來(lái)進(jìn)行設(shè)置和讀取緩存
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)緩存根據(jù)不同的id來(lái)進(jìn)行設(shè)置和讀取緩存的相關(guān)資料,需要的朋友可以參考下2017-06-06JavaScript?sort方法實(shí)現(xiàn)數(shù)組升序降序
這篇文章主要為大家介紹了JavaScript?sort方法實(shí)現(xiàn)數(shù)組升序降序示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07前端canvas中物體邊框和控制點(diǎn)的實(shí)現(xiàn)示例
這篇文章主要為大家介紹了前端canvas中物體邊框和控制點(diǎn)的實(shí)現(xiàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08微信小程序通過(guò)api接口將json數(shù)據(jù)展現(xiàn)到小程序示例
這篇文章主要介紹了微信小程序通過(guò)api接口將json數(shù)據(jù)展現(xiàn)到小程序示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01Flutter刷新組件RefreshIndicator自定義樣式demo
這篇文章主要介紹了Flutter刷新組件RefreshIndicator自定義樣式demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02TypeScript?學(xué)習(xí)筆記之?typeScript類(lèi)定義,類(lèi)的繼承,類(lèi)成員修飾符
這篇文章主要介紹了TypeScript?學(xué)習(xí)筆記之?typeScript類(lèi)定義,類(lèi)的繼承,類(lèi)成員修飾符,typeScript?支持面向?qū)ο蟮乃刑匦裕热珙?lèi)、接口等,下文詳細(xì)內(nèi)容,需要的小伙伴可以參考一下2022-02-02