变脸式应用 - 逻辑页

第一个逻辑页 - HelloWorld

[任务]

上一节我们创建了新的H5应用项目，本节我们制作一个仅显示”hello world”的逻辑页面，在首页中添加一个链接，点击可进入这个页面。

制作一个逻辑页面，存到文件page/hello.html:

这是个html片段，其中class="hd"与class="bd"分别代表逻辑页的标题栏和主体部分。一般应保持这样的结构，即使不需要标题栏，也建议保留hd这个div，将其设置隐藏即可(style="display:none")。

在首页page/home.html中添加一个链接过来：

在浏览器时刷新H5应用进入首页，点击Hello链接，就可以看到新逻辑页Hello显示出来了。 筋斗云可以动态加载逻辑页，并为它指定id为”hello”(即页面文件名)。 除了使用链接，还可以通过JS代码MUI.showPage("#hello")来显示该页。

点击浏览器的返回按钮，可以回到首页。在返回时，没有网页刷新的过程，这也是变脸式应用的典型特点。

我们也可以在逻辑页的hd部分里为应用添加返回按钮，如：

改好后，不必刷新页面重新从首页进入，直接在浏览器控制台中输入：

就可以直接查看到更新后的逻辑页了。

筋斗云支持逻辑页热更新技术，可以实时热更新当前页面，并保留当前的应用状态。这一技巧在开发调试逻辑页时非常好用，尤其对于复杂的H5应用，不必从首页操作进来。类似的技巧还有卸载一个逻辑页，以便再进入时可重新初始化：

如果你嫌首页上加的链接太难看，可以使用框架默认集成的weui样式库来润色它，如：

同样地，在修改好后，直接在控制台输入MUI.reloadPage()看效果。

筋斗云的核心是页面路由(showPage)和接口调用(callSvr)。它自身不提供移动UI样式库，而是通过集成的weui样式库来提供移动UI样式。 weui是一套同微信原生视觉体验一致的基础样式库，由微信官方团队开发，关于weui的使用可以参考https://weui.io/或自行搜索。 当然你也可以把它换成你自己喜欢的UI库。

为逻辑页添加样式和逻辑

[任务]

上一节中，我们添加了一个逻辑页”hello”。现在我们通过CSS修改显示字体为红色，并在进入和退出页面时弹出提示框。

为逻辑页设置样式，如果这个样式只在这个逻辑页使用，一般就在页面div中内嵌style标签。 页面的逻辑写在与页面同名的js文件中，在页面div上使用mui-script属性指定js文件，并通过mui-initfn标签指定页面初始化函数。

修改hello.html页面文件如下：

在上例中，在内嵌的style标签中为”p”标签指定样式，让它显示红色。 你可能有疑问，这样写会不会影响其它页面中的p标签的样式呢？

筋斗云支持自动限定逻辑页样式作用域。 即框架保证这个样式只会用于当前逻辑页，不会污染到其它页面。

你也可以加页面id前缀来指定：

在不支持这一特性的其它框架中，一般都必须像这样人工来限定。

上面逻辑页中通过mui-script=”hello.js”指定了js文件，创建page/hello.js文件如下：

上面演示了逻辑页进入和退出时常用的事件处理，很容易理解。 一般从后端取数据的操作都习惯放在pagebeforeshow事件中处理。另外还有pageshow, pagecreate等事件。

app_alert是框架提供的异步弹出框函数，可用于提示消息(类似alert)、确认消息(类似confirm)、问询消息(类似PRompt)等，弹出框界面也可自由定制，后面还将介绍。

页面栈

框架支持逻辑页面的前进和后退，甚至可以用手势左右划动页面来后退或前进。

本节讲述一个常见需求：提交订单后进入下一页面，这时点返回按钮（不管是点浏览器的返回按钮还是页面左上方的返回按钮）， 应该跳过提交页面，返回再前一个页面。

在示例应用首页上，点击”立即下单”，进入”创建订单”页，点击”创建订单”按钮，进入”订单列表”页。 这时点击返回按钮，我们看到，它跳过了”创建订单”页，直接返回了再前面一页即首页。

我们查看”创建订单”页的代码(createOrder.js)，其实只需在切换页面前，调用MUI.popPageStack()：

如果想在回退时跳过两个页面（比如提交过程有两步分了两个页面），调用MUI.popPageStack(2)即可。