创建多个页面

首先我们创建若干个页面。微信小程序的页面创建在 pages 目录下，与目录同名创建 .js/.json/.wxml/.wxss 四个文件，这就是一个新的页面了。然后在 app.json 里的 pages 数组写入创建的页面路径，就可以使用了。但是这样创建有点慢，其实只要在 app.json 里的 pages 数组写入要创建的页面路径，然后保存，则4个基本文件和目录开发工具会自动帮我们创建。

页面间跳转

在HTML里，使用 <a> 标签创建超链接，进行页面间跳转。而小程序也提供了跳转标签 <navigator> 。

<!--index.wxml-->
<navigator url="../demo1/demo1">go demo1 page</navigator>

写入了这条命令后，其实并不能进行跳转。从控制台中看到， demo1.json 文件不能是空的。所以要么把 demo1.json 文件删除，或者在内部写一个空的代码，比如 {} 。这样，点击 go demo1 page 的文本就能够跳转页面了。

光文本不好看，也可以在标签内添加图片，达到点击图片跳转的目的。

<navigator url="../demo2/demo2"><image style="height:40px;width:40px;" src="../../images/play.png"></image>
</navigator>

还可以点击按钮跳转

<navigator url="../demo3/demo3"><button type="primary">点我跳转</button>
</navigator>

页面间传值

可以进行跳转后，也需要在跳转的时候，将数据传递给下一个页面，即页面间传值。

小程序的值传递也可以使用 url 后面加 ? 带参数来传递，例：

<!--index.wxml-->
<navigator url="../demo1/demo1?name=Jack&sex=male">Jack</navigator>
<navigator url="../demo1/demo1?name=Tom&sex=female">Annie</navigator>

而获取参数则要麻烦些，在 .js 里，使用页面加载函数的参数能够获取值。

// pages/demo1/demo1.js
Page({/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log(options)}
})

这样我们在控制台就能看到， options 有2个键值，就是我们传递的2个参数。

另一个页面跳转的方式（重定向）

之前的页面跳转过后，都会有个返回按钮，可以返回上一页面上。在实际使用中，可能会有些页面我们只访问一次就好，比如说明、引导页、登录页等，并不需要或禁止再次访问，则需要使用另一种页面跳转方式来访问。

<navigator url="../demo1/demo1?name=Timmy&sex=female" redirect>redirect</navigator>

这样跳转的页面就没有返回按钮了。

点击跳转元素时的样式

点击跳转元素会发现样式有改变，是因为小程序自动设置了一个点击样式。可以使用 hover-class=“className” 进行更改。如果 hover-class=“none” 则没有点击效果。

引申一下，如果想让其他元素也有点击效果，可以给元素添加 <navigator> 标签包裹，不写 url 属性，在 hover-class 属性上增加点击效果。

另外，在元素样式中，添加 cursor: pointer; 则可以让元素变得有个点击效果。

导航API

除了 <navigator> ，也可以使用代码的方式进行页面跳转，使用的就是导航API。

导航API可以使用 wx:wx.navigateTo() 和 wx:wx.redirectTo() 来进行跳转，效果和 <navigator> 标签及增加 redirect 属性效果是一样的。也可以使用 url 增加 ? 的方法传递值。

wx:wx.navigateTo({url: '../demo3/demo3?name=123&text=456',
})
wx:wx.redirectTo({url: '../demo3/demo3?name=123&text=456',
})

如果不是用 redirect 方式跳转的，则可以使用 navigateBack() 函数返回。此函数有个参数 delta ，指的是返回页面栈里的多少层。如参数大于页面栈里的页面总数，则跳转到首页。小程序的页面栈最多保存10层。

重要参考：

B站上找到的开发教程视频，Up主不知道叫啥……

自学微信小程序开发第五天- 页面切换相关相关推荐

自学微信小程序开发第四天-研究弹性盒子(FlexBox)的伸缩布局，微信小程序的CSS使用实例
@TOC 组件都了解的差不多了,下面就是页面整体布局设计了.在HTML中,使用的是DIV + CSS的布局方式,也可以用在小程序里.不过因为移动端的分辨率不统一,使得布局的自适应十分重要.所以研究一下 ...
自学微信小程序开发第二天-事件处理、数据流
自学微信小程序开发第二天-事件处理.数据流事件处理绑定冒泡事件阻止冒泡事件互斥事件事件传参事件对象的属性数据流实例:登录页面案例之前学习了微信小程序开发的相关环境,测试了小程序开发工 ...
微信小程序开发系列五：微信小程序中如何响应用户输入事件
微信小程序开发系列教程微信小程序开发系列一:微信小程序的申请和开发环境的搭建微信小程序开发系列二:微信小程序的视图设计微信小程序开发系列三:微信小程序的调试方法微信小程序开发系列四:微信小程序 ...
微信小程序开发之城市选择器城市切换
移动开发中城市选择器必不可少. 空白造了个. gif: 这里只上部分js代码: var city = require('../../utils/city.js');//欢迎关注:http://w ...
Python+微信小程序开发（四）页面跳转和获取用户信息
上一篇已经介绍了如何搭建一个自己的静态页面,接下来则涉及到一些用户信息获取与跳转的操作. 一.页面跳转首先新建一个跳转页面,按上篇的操作生成pages/redirect/redirect. 1.对标 ...
微信小程序开发（五）：小程序中的事件
在往常的web开发中,"事件"是常用的知识,但是在微信小程序中使用"事件"有很大不同. 一个点击事件的例子使用bind在WXML组件中绑定事件,使用data- ...
微信小程序开发（五）小程序条件渲染和列表渲染
说到条件,相比大家都是很熟悉的了,要么符合什么什么条件,要么不符合什么什么条件,在我们的编程里就是if else,从if开始到else结束.比如我们说小明的考试成绩出来了,如果分数大于60分及格,不然 ...
【零基础】学会微信小程序开发-实现第一个页面
上一篇我们了解了微信小程序代码结构组成,本篇文章,我们将要开始进行小程序的真正开发工作,Let's go! ##第一个页面让我们来创建第一个页面右键单击 pages 目录,在弹出来的菜单里,选择 ...
微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...

自学微信小程序开发第五天- 页面切换相关