前言

哈嘍,大家好,我是明哥上一篇博客我們講完了項(xiàng)目的引導(dǎo)頁(yè)面的開(kāi)發(fā),這篇博文我們來(lái)講講如何從引導(dǎo)頁(yè)頁(yè)面跳轉(zhuǎn)到我們的新聞?lì)A(yù)覽頁(yè)面,這是我們就要引入微信小程序的路由 ，什么是路由相信有前端開(kāi)發(fā)經(jīng)驗(yàn)的小伙伴都知道,這里就不詳細(xì)講解了,如不太了解可以學(xué)習(xí)一下在來(lái)看這篇博客。

---

效果圖

跳轉(zhuǎn)效果圖

---

需求分析

????????我們可以看見(jiàn)上面的效果圖我們來(lái)分析一下，當(dāng)我們點(diǎn)擊開(kāi)啟小程序之旅就會(huì)跳轉(zhuǎn)到第二個(gè)頁(yè)面,那么實(shí)現(xiàn)這個(gè)功能的方式我剛剛有說(shuō)需要路由，那么完成小程序頁(yè)面跳轉(zhuǎn)的方式其實(shí)有很多種,本篇博文種我們講兩種路由的函數(shù) navigateTo和redirectTo我們接下來(lái)看看它們?nèi)绾问褂靡约皡^(qū)別。

實(shí)操步驟

????????1、navigateTo

? ? ? ? ? ? ? ? 1.1、首先我們用navigateTo這個(gè)路由函數(shù)來(lái)完成頁(yè)面的跳轉(zhuǎn),使用這個(gè)函數(shù)之前我們要做一些準(zhǔn)備性工作,首先我們需要在pages目錄下創(chuàng)建news文件加然后在里面創(chuàng)建news.js/news.json/news.wxml/news.wxss文件如下圖,同時(shí)我們需要打開(kāi)app.json文件在pages配置項(xiàng)中添加我們剛剛創(chuàng)建news路徑如下圖，接著我們打開(kāi)news.wxml文件在下面添加一個(gè)<text>組件寫(xiě)上一段文本即可,如下圖。?

1、創(chuàng)建news文件配置圖

???????????????? 1.2、接著我們打開(kāi)guide.wxml文件我們自定義按鈕的外部 <view>組件上使用bind關(guān)鍵字綁定一個(gè)手指觸摸tap事件,然后在定義一個(gè)觸摸事件的函數(shù)即可代碼如下。

<view bind:tap="onTapJump" class="btn-container"> <text class="btn-submit">開(kāi)啟小程序之旅</text></view>

?????????????????? 1.3、接著我們打開(kāi)guide.js文件在這個(gè)文件里我們來(lái)創(chuàng)建我們剛剛為<view>組件綁定的onTapJump()函數(shù)代碼如下。

onTapJump(params) {wx.navigateTo({url: '/pages/news/news',})},

? ? ? ? ? ? ? ? 1.4、到這里我們其實(shí)就完成了,頁(yè)面的跳轉(zhuǎn)功能,但是這里我們需要注意一個(gè)細(xì)節(jié)url后面的路徑一定要加上"/"否者跳轉(zhuǎn)不了。

?2、redirectTo

? ? ? ? ? ? ? ? 2.1、上面我們講解了navigateTo實(shí)現(xiàn)跳轉(zhuǎn)，那么接下來(lái)我們使用redirectTo來(lái)完成我們的頁(yè)面跳轉(zhuǎn),其實(shí)很簡(jiǎn)單我們不需要修改太多代碼,只需要在我們的? onTapJump函數(shù)中把navigateTo，改成redirectTo即可代碼如下。

onTapJump(params) {wx.redirectTo({url: '/pages/news/news',})},

????????到這里能我們就完成了頁(yè)面之前跳轉(zhuǎn)功能這個(gè)兩個(gè)路由函數(shù)的api使用了,那么我們來(lái)簡(jiǎn)單的說(shuō)說(shuō)?navigateTo和redirectTo的區(qū)別,其實(shí)他們最大區(qū)別就是navigateTo在跳轉(zhuǎn)到第二個(gè)頁(yè)面后，是不會(huì)把第一個(gè)頁(yè)面給銷(xiāo)毀的，我們可以通過(guò)導(dǎo)航欄左上角返回箭頭回到第一個(gè)頁(yè)面，redirectTo在跳轉(zhuǎn)到第二個(gè)頁(yè)面后是會(huì)把第一個(gè)頁(yè)面給銷(xiāo)毀的我們是沒(méi)有箭頭可以返回回去的,但是如果你非要返回回去新版的小程序?qū)Ш綑谧笊辖怯袀€(gè)小房子圖標(biāo)點(diǎn)擊一下可以從新創(chuàng)建第一個(gè)頁(yè)面，達(dá)到返回的效果。

內(nèi)容補(bǔ)充

? ? ? ? 事件其實(shí)分為，冒泡事件和非冒泡事件，上面我們用bind:tap來(lái)捕捉我們的事件,那么其實(shí)我們我們還可以用catch:tap來(lái)捕獲我們的事件,常規(guī)情況下我們使用bind:tap來(lái)捕獲我們事件就可以了，但是總有一些特殊時(shí)刻,比如說(shuō)我們自定義組件的時(shí)候。

<view catch:tap="onTapJump" class="btn-container"> <text class="btn-submit">開(kāi)啟小程序之旅</text></view>

后記

? ? ? ? 詳細(xì)代碼如下

? ? ? ?guide.wxml文件?

<!--pages/guide/guide.wxml--><!--1、最外層的flex容器用于flex布局 --> <view class="flex-container"><!-- 2、引入本地文件下的頭像 --><image class="avatar-log" src="/image/avatar/avatar_log.png"></image><!-- 3、英文文本 --><text class="welcome-panel">Be brave. We won't be younger than today</text><!-- 4、歡迎文本 --><text class="welcome-panel">Hello,山月劇</text><!-- 自定義提交按鈕 --><view catch:tap="onTapJump" class="btn-container"> <text class="btn-submit">開(kāi)啟小程序之旅</text></view> </view>

? ? ? ?guide.js文件?

// pages/guide/guide.js Page({/*** 頁(yè)面的初始數(shù)據(jù)*/data: {},onTapJump(params) {// navigateTo ,redirectTowx.navigateTo({url: '/pages/news/news',})},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載*/onLoad: function (options) {},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成*/onReady: function () {},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示*/onShow: function () {},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏*/onHide: function () {},/*** 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載*/onUnload: function () {},/*** 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作*/onPullDownRefresh: function () {},/*** 頁(yè)面上拉觸底事件的處理函數(shù)*/onReachBottom: function () {},/*** 用戶(hù)點(diǎn)擊右上角分享*/onShareAppMessage: function () {} })

總結(jié)

以上是生活随笔為你收集整理的二、零基础入门微信小程序项目开发之页面跳转实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。