4. 创建 Shell

这里我们来创建一个默认的 Shell，表现为头部标题栏，内部包含后退按钮，标题，LOGO和更多按钮。还记得我们在上一步添加了从 index.html 到 second.html 的链接吗？但我们并没有创建反向的链接，所以用户到达 second.html 之后将无法回退（除非点击浏览器或者手机系统提供的返回按钮）。Shell 头部标题栏的后退按钮可以帮我们解决这个问题。

我们需要在 每个页面 的 标签内部（先于 mip.js 的引用）创建 <mip-shell> 标签。每个页面只能至多创建一个，可以不创建，即使用默认配置（之前的两个页面均是这类情况）。创建内容如下：

这里我们创建了两端规则，分别是：

1. 匹配 /index.html 规则的页面（例子中仅 ），设置如下：

   • LOGO 图片地址，标题文字“我的首页”
   • 设置了两个下拉按钮
   • 设置为首页 （首页标题栏左边没有后退按钮）

关于 <mip-shell> 标签更多的配置项和其他细节，您可以参阅 Shell 文档。

预览效果

我们已经成功地为我们的两个页面添加了头部标题栏。打开 index.html 可以看到效果（虽然样式颇为简陋）：

注意到右上角的三个点，点击之后可以展现更多按钮，即我们配置过的“关注”和“发消息”（还包含一个动画效果）：

最后我们看一下页面的切换效果。在切换到第二页时，因为 Shell 独立于页面之外且配置完整，因此头部标题可以直接出现在目标页面加载之前，大大提升了体验：

页面后退和前进时的动画略有不同：前进时需要载入目标页面，因此需要 loading；而后退的目标页面已经存在，因此可以直接展现，效果更好：