本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

现在大家所用的各种微信小程序都是看似结构简单、内容精炼，实则内含很多的隐藏页面。其原理和网页的超链接是一样的，利用跳转页面对现有页面的内容进行说明介绍。这样可以让整个小程序的页面不重复繁琐，不容易造成视觉疲劳。

解决方案

利用navigator组件实现小程序页面间的跳转，给将要跳转的关键词加一个navigator组件，然后添加跳转页面的链接，再对其关键词进行修饰点击效果设置。但是在设置navigator组件的时候有两个注意点很容易犯错，在下面的注意事项中会有所介绍。

1.在wxml中使用navigator组件，添加页面链接。

navigator组件实现页面间的跳转；

url中是设置跳转页面的链接；

class="nav-default"设置关键词的修饰颜色；

hover-class="nav-hover"设置指定点击时的样式类。

2.在js中，设置页面中关键词的属性。

点击前的图：

图1 首页面

点击时的图：

图2 点击时页面

点击后的图：

图3 跳转后页面

注意事项

1 一般关键词都是文本，装在里面。而里面用navigator组件是没有用的，只能读取文本，所以使用navigator组件时需要用封装。

2 由于css的优先级规则，当属性赋值发生冲突的时候，谁在后面定义谁的属性取值就会渗出，所以在定义点击样式的时候要定义在后面。

结语

navigator组件可以实现页面间的跳转，让页面不在复杂，结构更加清晰。要注意上述的事项。对于navigator组件的详细内容可以在微信开发文档的导航组件中学习。

END

主 编 | 王文星

责 编 | 江汪霖

where2go 团队