微信小程序開發(五)————頁面跳轉

今天我給大家講一下如何進行頁面跳轉.

大家在pages目錄下面自行創建一個目錄,名字叫做post,並且在post目錄下面分別創建post.wxml、post.wxss、post.js文件。創建完之後如圖所示:

post目錄

然後我們去app.json文件的去把post目錄的路徑寫在pages數組裏面,如圖所示:

注意post目錄路徑不要放在第一個,因爲pages數組裏面,哪個路徑在第一個,那麼就先顯示那個路徑對應的界面,我們當然是先呈現首頁界面,所以我們仍然是讓“pages/welcome/welcome”路徑放在第一個。然後在post.wxml文件裏面寫一段話如:”hello world!“,這個時候大家編譯一下,很明顯,界面上呈現的仍然是首頁,那麼我們怎麼讓它跳轉呢,這時候就該用到welcome.js文件。

在這裏我先給大家介紹一個專用名詞————事件,就比如說我們這個跳轉,其實就是個點擊事件,因爲我們點擊一下矩形框纔會進行跳轉,這個事件的名稱叫做bindtap,和網站開發中的click事件一樣,都是點擊時觸發的事件,我們把它寫在矩形框的那個view標籤裏面,如圖所示:

bindtap=“go”的意思就是我點擊時觸發一個事件,這個事件名稱叫做go,我們需要去welcome.js文件中去編寫go事件.

進入welcome.js文件中,首先先輸入page這個單詞,然後按一下回車,就出現如圖所示的情況:

 

go事件代碼,如圖:

go事件

記住了,在js裏面寫事件就是按照上圖的格式寫,即事件名:function(){操作},我們來看一下操作,wx.redirectTo({url:"../post/post"}),這句話的意思就是跳轉的意思,url就是我要跳轉的路徑,跳轉效果,如圖:

跳轉還有一個方法叫做wx.navigateTo方法。

wx.navigateTo方法會自動爲跳轉到的頁面添加返回按鈕.

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章