「零基础小程序开发之四」复制粘贴就能做自己的小程序--粉丝服务平台-粉丝头条-fensifuwu.com

「零基础小程序开发之四」复制粘贴就能做自己的小程序

科技 06-29 来源：一点清单

近两年来，微信小程序的发展如火如荼，普及率越来越高，越来越多的人开始希望学习微信小程序开发，但是却不知道该如何下手，本教程将通过一个个功能案例来带你一步步熟悉微信小程序开发，并可以在手机上体验小程序的实际效果。

通过上一章的学习，我们已经为小程序的首页加上了轮播图的功能，这一章来说说页面跳转的功能。

课程要点

微信小程序跳转，主要有以下几种方法：

一、利用小程序提供的 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 url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
// redirect 对应 API 中的 wx.redirect 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
// switchTab 对应 API 中的 wx.switchTab 方法
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
 // reLanch 对应 API 中的 wx.reLanch 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">关闭所有页面，打开到应用内的某个页面</navigator>
// navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover">关闭当前页面，返回上一级页面或多级页面</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

<!--index.wxml-->
<view class="container">
 <view class="swiper-container">
 <swiper class="swiper_box" 
 autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange">
 <block wx:for="{{banners}}" wx:key="id">
 <swiper-item>
 <image bindtap="tapBanner" data-id="{{item.id}}" src="{{item.picUrl}}" class="slide-image" width="750rpx" height="562.5rpx"/>
 <view class="swiper-title">{{item.title}}</view>
 </swiper-item>
 </block>
 </swiper>
 <view class="dots"> 
 <block wx:for="{{banners}}" wx:key="id"> 
 <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view> 
 </block> 
 </view> 
 </view>
 <view class="container-body">
 <view class="tab">
 <view class="tab-nav">
 <text wx:for="{{tabnav.tabitem}}" bindtap="setTab" class="{{showtab==index?'active':''}}" data-tabindex="{{index}}" data-type="{{item.type}}" wx:key="{{item.type}}">{{item.text}}</text>
 <view class="tab-line" style="width:{{100/tabnav.tabnum}}%;transform:translateX({{100*showtab}}%);"></view>
 </view>
 <view class="tab-content" style="" bindtouchstart="scrollTouchstart" bindtouchmove="scrollTouchmove" bindtouchend="scrollTouchend" style="width: {{tabnav.tabnum*100}}%;transform:translateX(-{{showtab*100/tabnav.tabnum}}%);margin-left: {{marginleft}}px;">
 <view class="tab-panel">
 <view class="test-list">
 <view class="test-item" wx:for="{{testdata}}" wx:key="{{item.id}}">
 <navigator url='/pages/news/index'>
 <view class="test-item-t">类型：{{item.type}}</view>
 <view class="test-item-b">{{item.text}}</view>
 </navigator>
 </view>
 </view>
 </view>
 <view class="tab-panel">
 <view class="test-list">
 <view class="test-item" wx:for="{{testdata}}" wx:key="{{item.id}}">
 <navigator url='/pages/news/index'>
 <view class="test-item-t">类型：{{item.type}}</view>
 <view class="test-item-b">{{item.text}}</view>
 </navigator>
 </view>
 </view>
 </view>
 <view class="tab-panel">
 <view class="test-list">
 <view class="test-item" wx:for="{{testdata}}" wx:key="{{item.id}}">
 <navigator url='/pages/news/index'>
 <view class="test-item-t">类型：{{item.type}}</view>
 <view class="test-item-b">{{item.text}}</view>
 </navigator>
 </view>
 </view>
 </view>
 <view class="tab-panel">
 <view class="test-list">
 <view class="test-item" wx:for="{{testdata}}" wx:key="{{item.id}}">
 <navigator url='/pages/news/index'>
 <view class="test-item-t">类型：{{item.type}}</view>
 <view class="test-item-b">{{item.text}}</view>
 </navigator>
 </view>
 </view>
 </view>
 <view class="tab-panel">
 <view class="test-list">
 <view class="test-item" wx:for="{{testdata}}" wx:key="{{item.id}}">
 <navigator url='/pages/news/index'>
 <view class="test-item-t">类型：{{item.type}}</view>
 <view class="test-item-b">{{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 class="container">
 <image src="../../images/imgs/section-1.jpg" style="width: 100%;"></image>
 <text style="padding: 20rpx">一点清单</text>
 <text style="padding: 20rpx">为什么精英人生都是清单控</text>
</view>

index.wxss，可暂时为空

好了，经过这些简单的修改，我们小程序的页面跳转功能就实现了，将代码拷入相应的文件，点击开发工具中的编译按钮，或者使用快捷键Ctrl+S看看实际效果吧，看看是不是和下图一样？