如何使用Meteor为移动应用和Web浏览器构建不同的UI

Question

我的项目需要一个Bootstrap响应式网络浏览器应用程序和一个移动应用程序（带有离子组件）。 我如何通过Meteor实现这一目标？我可以使用相同的代码库吗？

Answer 1

是的，你可以。在TyPhone中，我们将Ionic用于移动和Semantic-UI用于Web。您可以使用Bootstrap轻松完成相同的操作。

TyPhone is open source，请随时查看，但基本的想法是让铁路由器发送不同的模板。

Router.route('/', function () {
    if (Meteor.isCordova) {
        this.layout('layout');
        this.render('mobile');
    } else {
        this.render('web');
    }
});

您可能仍需要确保CSS文件不会相互踩到彼此的脚，但这是开始使用的好方法。

修改：

我遇到的一个问题是离子使得主体不可滚动，因此我需要覆盖Web版本上正文的overflow属性。这就是我这样做的方式：

JS：

Template.web.onRendered(function() {
    $("body").addClass("web");
});

CSS：

body.web {
    overflow: auto;
}