「零基礎小程序開發之四」複製粘貼就能做自己的小程序

近兩年來，微信小程序的發展如火如荼，普及率越來越高，越來越多的人開始希望學習微信小程序開發，但是卻不知道該如何下手，本教程將通過一個個功能案例來帶你一步步熟悉微信小程序開發，並可以在手機上體驗小程序的實際效果。

通過上一章的學習，我們已經為小程序的首頁加上了輪播圖的功能，這一章來說說頁面跳轉的功能。

課程要點

微信小程序跳轉，主要有以下幾種方法：

一、利用小程序提供的 API 跳轉

1、 wx.navigateTo({}) ，保留當前頁面，跳轉到應用內的某個非tabBar頁面，使用 wx.navigateBack 可以返回;

 wx.navigateTo({
 url: 'page/home/home?user_id=111'　　// 頁面 A
})
wx.navigateTo({
 url: 'page/detail/detail?product_id=222'　　// 頁面 B
})
// 跳轉到頁面 A
wx.navigateBack({
 delta: 2
})

2、wx.redirectTo() , 關閉當前頁面，跳轉到非tabBar的某個頁面

// 關閉當前頁面，跳轉到應用內的某個頁面。
wx.redirectTo({
 url: 'page/home/home?user_id=111' 

})

3、wx.switchTab ，跳轉到tabBar的某個頁面

// 跳轉到tabBar頁面（在app.json中註冊過的tabBar頁面），同時關閉其他非tabBar頁面，注意switchTab只能跳轉到帶有tab的頁面，不能跳轉到不帶tab的頁面。
wx.switchTab({
 url: 'page/index/index'
})

4、wx.reLanch， 關閉所有頁面，打開到應用內的某個頁面

wx.reLanch({
 url: 'page/home/home?user_id=111'
})

二、wxml 頁面組件跳轉（可以通過設置open-type屬性指明頁面跳轉方式）：

// navigator 組件默認的 open-type 為 navigate 
<navigator>跳轉到新頁面/<navigator>
// redirect 對應 API 中的 wx.redirect 方法
<navigator>在當前頁打開/<navigator>
// switchTab 對應 API 中的 wx.switchTab 方法
<navigator>切換 Tab/<navigator>
 // reLanch 對應 API 中的 wx.reLanch 方法
<navigator>關閉所有頁面，打開到應用內的某個頁面/<navigator>
// navigateBack 對應 API 中的 wx.navigateBack 方法
<navigator>關閉當前頁面，返回上一級頁面或多級頁面/<navigator> 

開始開發

首先，為了演示頁面跳轉功能，我們先在pages目錄下面創建一個目錄news，並且在news目錄下面分別創建文件index.js，index.json，index.wxml以及index.wxss文件。

然後我們去app.json文件的去把news目錄的路徑寫在pages數組裡面，注意news目錄路徑不要放在第一個，因為pages數組裡面，哪個路徑在第一個，那麼在小程序啟動時就會先顯示那個路徑對應的界面。

考慮到代碼越來越長了，以後只會附上新增或修改的代碼塊，大家可以將代碼複製到上一期的相應文件中即可。

1、index目錄

index.js

將方法中的跳轉方法每一個都試一下，看看有什麼區別。注意，每次只使用一種跳轉方式，將其他的方式註釋掉。

tapBanner: function (e) {
 //保留當前頁面，跳轉到應用內的某個非tab頁面（最多打開5個頁面，之後按鈕就沒有響應的）
 wx.navigateTo({
 url: "/pages/news/index"
 })  

 //關閉當前頁面，跳轉到應用內的某個非tab頁面
 //wx.redirectTo({
 // url: "/pages/news/index"
 //}) 
 //跳轉至指定頁面並關閉其他打開的所有頁面（這個最好用在返回至首頁的的時候）
 //wx.reLaunch({
 // url: "/pages/news/index"
 //})
 //跳轉到tabBar頁面，並關閉其他所有tabBar頁面
 //wx.switchTab({ 
 // url: "/pages/user/index"
 //})
 //返回上一頁面或多級頁面，
 //wx.navigateBack({ 
 // delta: 1
 //})
 }

index.wxml

<view>
 <view>
 <swiper> autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
 <block>
 <swiper-item>
 <image>
 <view>{{item.title}}/<view>
 /<swiper-item>
 /<block>
 /<swiper>
 <view> 
 <block> 
 <view> 
 /<block> 
 /<view>  

 /<view>
 <view>
 <view>
 <view>
 <text>{{item.text}}/<text>
 <view>
 /<view>
 <view>
 <view>
 <view>
 <view>
 <navigator>
 <view>類型：{{item.type}}/<view>
 <view>{{item.text}}/<view>
 /<navigator>
 /<view>
 /<view>
 /<view>
 <view>
 <view>
 <view>
 <navigator>
 <view>類型：{{item.type}}/<view>
 <view>{{item.text}}/<view>
 /<navigator>
 /<view>
 /<view>
 /<view>
 <view>
 <view>
 <view>
 <navigator>
 <view>類型：{{item.type}}/<view>
 <view>{{item.text}}/<view>
 /<navigator>
 /<view>
 /<view>
 /<view>
 <view>
 <view>
 <view>
 <navigator>
 <view>類型：{{item.type}}/<view>
 <view>{{item.text}}/<view>
 /<navigator>
 /<view>
 /<view>
 /<view>
 <view> 

 <view>
 <view>
 <navigator>
 <view>類型：{{item.type}}/<view>
 <view>{{item.text}}/<view>
 /<navigator>
 /<view>
 /<view>
 /<view>
 /<view>
 /<view>
 /<view>
/<view>

2、news目錄

index.js

//index.js
//獲取應用實例
const app = getApp()
Page({
 
})

index.json

{
 "navigationBarTitleText": "文章"
}

index.wxml

<view>
 <image>
 <text>一點清單/<text>
 <text>為什麼精英人生都是清單控/<text>
/<view>

index.wxss，可暫時為空

好了，經過這些簡單的修改，我們小程序的頁面跳轉功能就實現了，將代碼拷入相應的文件，點擊開發工具中的

編譯按鈕，或者使用快捷鍵Ctrl+S看看實際效果吧，看看是不是和下圖一樣？

今天就先介紹到這裡，不知道是否對大家有幫助。接下來的課程我們會繼續通過一個個功能示例來讓大家儘快熟悉小程序的開發。對於新手來說學起來效率會更高，而且更實用，跟著做下來小程序基本就開發成功了，是不是一舉多得了。