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

研究过页面样式设计后，就是多页面的呈现了，这就需要研究下页面切换的相关内容。

创建多个页面

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

页面间跳转

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

<navigator url="../demo1/demo1">go demo1 pagenavigator>

写入了这条命令后，其实并不能进行跳转。从控制台中看到， 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 后面加 ? 带参数来传递，例：

<navigator url="../demo1/demo1?name=Jack&sex=male">Jacknavigator>
<navigator url="../demo1/demo1?name=Tom&sex=female">Annienavigator>

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

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

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

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

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

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

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

点击跳转元素时的样式

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

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

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

导航API

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

导航API可以使用 wx:wx.navigateTo() 和 wx:wx.redirectTo() 来进行跳转，效果和 标签及增加 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主不知道叫啥……