微信小程序如何设置小程序导航菜单

上一次写了艾码汇 WordPress 小程序插件使用教程（三），插件的主要设置功能基本上就讲完了，但是，还有一个重要的功能没有说，因为这个功能的设置不是在插件设置里，而是在外观-菜单设置里。今天就介绍小程序导航菜单如何设置。

最开始设计的导航是采用手动添加代码形式，通过 add_fliter 的方式增加导航链接，这种方法的好处是写法简单，不好的地方是插件升级不方便，每次升级插件都需要手动改动插件源代码。这种方法其实也是可以手动把导航做一个插件形式，这样无论插件怎么升级，都不受影响。后来我就想，如果不另外增加一个导航插件，那么升级会很不方便，每次都要改动插件源代码的导航设置。假如再增加一个导航插件的话，那么为什么不直接用 WordPress 的菜单功能？于是就把导航功能加入到了菜单设置选项。好处是每次插件升级，都不需要再手动更改插件导航设置，而且手动设置导航项目位置也极方便，只是，还是有一个不便利的地方，那就是初次设置还有一点点麻烦。下面就讲讲如何设置小程序的导航。

菜单设置方法：

1. 创建导航菜单

点击网站后台 - 外观 - 菜单

创建菜单：菜单名称根据个人需要填写，比如 Minapp , 然后保存菜单，如下图：

从上面的图可见，我已经把相关的内容都加入菜单中。但是具体应该怎么设置？接着下面来说。

2. 点击右上角 - 显示选项

在 显示高级菜单属性 中勾选 CSS 类，链接关系，图像描述。

3. 文章/页面/分类目录加入菜单

把文章/页面/分类目录加入菜单只需要设置两个项：导航标签，即出现在小程序的导航标题；CSS 类，如果使用的是图形字体图标库，比如 fa-home ，即出现在小程序导航标题前面，或者自已开发的小程序的导航图标；图像描述，如果不使用图形字体图标库，则 CSS 类留空，在图像描述处填写导航图标地址，比如在小程序 images 目录里对应的 icon 图标，可以使用 ../../images/home.png ，也可以使用网络地址，如：https://www.abc.com/uploads/icon/home.png。链接关系留空即可。

4. 把小程序内链加入菜单

比如，我想要把我的新动态页面地址：/pages/forum/forum 加入到导航菜单，应该如何设置？

小程序内部的页面链接与网站文章/页面/分类的链接不一样，除了设置导航标签，CSS 类或者图像描述之外，还需要填写 URL 和链接关系。其实，小程序内部页面的链接属于是自定义链接，所以需要填写 URL 。URL 的地址就是页面的路径，如上图所示。至于链接关系，则固定填写 page ，表示的是页面链接导航。

5. 把网站域名加入菜单

比如，我想要把一个网站的地址或者文章页加入菜单，这个文章页又不属于小程序网站内部的。如下图：

根据上图可以看到，外部域名链接的设置和小程序内部的页面链接设置其实基本上一样的，需要设置 URL ，CSS 类或者图像描述，导航标签，链接关系。但是，链接关系和上面的小程序内部页面链接是有区别的，采用的链接关系为 site ，表示的是网站导航链接。

6. 在导航菜单中加入在线客服

如果想要在导航链接菜单中加入一个点击按钮即可打开在线客服对话框，又应该怎么做呢？如下图：

根据上图可以看到，在线客服的设置好像和小程序内部页面链接相似，URL 填写了内部页面地址。其实，这里的 URL 是随便填写的，因为在线客服对话框是不需要页面地址的。但是，链接关系必须为 contact ，表示的是客服导航链接。

7. 在导航菜单中加入小程序跳转

如果想要在导航链接菜单中加入点击跳转小程序链接，那又应该如何做？

首先，必须把需要跳转的小程序 appid 加入到 app.json 的配置中，具体的配置内容，可以参考微信官方开发文档，这里不详述。

根据上图可以看到，小程序跳转设置的 URL 变了，变成了 http://appid ，其实 http:// 是 WordPress 自动添加的。添加自定义链接的时候，只是在 URL 上填写 appid 的，然而，保存后，就会自动出现 http:// ，不过，没什么关系，影响不大。需要注意的是链接关系，微信小程序跳转的链接关系为 weapp ，QQ 小程序跳转的链接关系为 qq , 百度智能小程序跳转的链接关系为 baidu ，字节跳动(今日头条)小程序跳转的链接关系为 toutiao。

8. 在导航菜单中加入拔打电话

如果想要在小程序的导航菜单中点击打拔电话，添加自定义链接的时候，在 URL 上填写电话号码，然后链接关系为 tel 。

从上数下来，可以看到，小程序导航菜单支持文章/页面/分类链接，小程序内部页面链接，网站外部链接（需要把域名加入业务域名内），客服咨询，小程序跳转。而每个设置都可以在后台设置，支持排序，随时调整，极大的方便小程序的应用，而不是之前开发的开源版小程序那样，每一个设置都需要在小程序源码里进行配置，一旦提交审核后，每次修改都需要重新提交代码。个人觉得这是非常实用的设计！

封面图：FirmBee 出处：Pixabay 授权