前言

哈嘍,大家好,我是明哥上一篇博客我們講完了項目的引導頁面的開發,這篇博文我們來講講如何從引導頁頁面跳轉到我們的新聞預覽頁面,這是我們就要引入微信小程序的路由 ，什么是路由相信有前端開發經驗的小伙伴都知道,這里就不詳細講解了,如不太了解可以學習一下在來看這篇博客。

---

效果圖

跳轉效果圖

---

需求分析

????????我們可以看見上面的效果圖我們來分析一下，當我們點擊開啟小程序之旅就會跳轉到第二個頁面,那么實現這個功能的方式我剛剛有說需要路由，那么完成小程序頁面跳轉的方式其實有很多種,本篇博文種我們講兩種路由的函數 navigateTo和redirectTo我們接下來看看它們如何使用以及區別。

實操步驟

????????1、navigateTo

? ? ? ? ? ? ? ? 1.1、首先我們用navigateTo這個路由函數來完成頁面的跳轉,使用這個函數之前我們要做一些準備性工作,首先我們需要在pages目錄下創建news文件加然后在里面創建news.js/news.json/news.wxml/news.wxss文件如下圖,同時我們需要打開app.json文件在pages配置項中添加我們剛剛創建news路徑如下圖，接著我們打開news.wxml文件在下面添加一個<text>組件寫上一段文本即可,如下圖。?

1、創建news文件配置圖

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

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

?????????????????? 1.3、接著我們打開guide.js文件在這個文件里我們來創建我們剛剛為<view>組件綁定的onTapJump()函數代碼如下。

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

? ? ? ? ? ? ? ? 1.4、到這里我們其實就完成了,頁面的跳轉功能,但是這里我們需要注意一個細節url后面的路徑一定要加上"/"否者跳轉不了。

?2、redirectTo

? ? ? ? ? ? ? ? 2.1、上面我們講解了navigateTo實現跳轉，那么接下來我們使用redirectTo來完成我們的頁面跳轉,其實很簡單我們不需要修改太多代碼,只需要在我們的? onTapJump函數中把navigateTo，改成redirectTo即可代碼如下。

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

????????到這里能我們就完成了頁面之前跳轉功能這個兩個路由函數的api使用了,那么我們來簡單的說說?navigateTo和redirectTo的區別,其實他們最大區別就是navigateTo在跳轉到第二個頁面后，是不會把第一個頁面給銷毀的，我們可以通過導航欄左上角返回箭頭回到第一個頁面，redirectTo在跳轉到第二個頁面后是會把第一個頁面給銷毀的我們是沒有箭頭可以返回回去的,但是如果你非要返回回去新版的小程序導航欄左上角有個小房子圖標點擊一下可以從新創建第一個頁面，達到返回的效果。

內容補充

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

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

后記

? ? ? ? 詳細代碼如下

? ? ? ?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">開啟小程序之旅</text></view> </view>

? ? ? ?guide.js文件?

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。