19、MeteorJS：移动应用开发与最佳实践-优快云博客

本文链接：https://blog.youkuaiyun.com/zero1/article/details/149384909

MeteorJS：移动应用开发与最佳实践

1. 移动应用开发基础

要查看匹配的联系人，需在移动设备上运行应用程序，并且至少创建两个用户，其电话号码来自你的联系人，这样匹配操作才能返回这两个联系人。当点击每个联系人时，会导航到一个新的路由。若联系人显示出来，意味着该联系人正在使用此应用程序，此时可以通过应用程序发送消息，这就需要一个单独的界面。

1.1 消息界面构建

添加新路由 ：在 router.js 中添加以下路由来处理消息界面导航：

FlowRouter.route("/messenger/:id", {
  action: function() {
    BlazeLayout.render("messengerLayout", {main: "messenger"});
  }
});

创建布局模板 ：在 layouts 目录下创建 messengerLayout.html ，添加以下布局模板：

<template name="messengerLayout">
    <div class="messengerContainer">
        {{> Template.dynamic template=main}}
    </div>
</template>

创建消息相关文件 ：在 client 目录下创建 messenger 目录，并添加 messenger.html 和 messengerHelper.js 文件。
messenger.html 文件内容如下：

<template name="messenger">
  <div class="messenger-wrapper">
    <div class="name text-center">{{name}}</div>
    <ul>
      {{#each messages}}
        <li class="{{mineClass}}">
          {{> message}}
        </li>
      {{/each}}
    </ul>
  </div>
  <div class="type-area text-center">
    <textarea name="message" class="editor" id="message"></textarea>
    <button type="button" id="send" class="btn btn-primary">Send</button>
  </div>
</template>
<template name="message">
  <div class="senderName">{{senderName}}</div>
  <div class="message">
    <div class="message">{{content}}</div>
    <div>{{readableDate(created_at)}}</div>
  </div>
</template>

messengerHelper.js 文件添加以下辅助函数：

Template.messenger.helpers({
  messages: function() {
    var senderId = Meteor.userId(),
      rxrId = FlowRouter.getParam("id");
    return Messages.find({
      $or: [{
        $and: [{
          sender_id: Meteor.userId()
        }, {
          receiver_id: rxrId
        }]
      }, {
        $and: [{
          sender_id: rxrId
        }, {
          receiver_id: Meteor.userId()
        }]
      }]
    });
  },
  mineClass: function() {
    return this.sender_id === Meteor.userId() ? 'mine' : 'not-mine';
  },
  name: function() {
    return Meteor.users.findOne({_id: FlowRouter.getParam("id")}).profile.name;
  }
});
Template.messenger.events({
  "click #send": function(e) {
    e.target.setAttribute("disabled", true);
    var textarea = document.getElementById("message");
    Messages.insert({
      content: textarea.value,
      sender_id: Meteor.userId(),
      receiver_id: FlowRouter.getParam("id"),
      created_at: Date.now(),
      senderName: Meteor.user().profile.name
    }, function(error, result) {
      if(!error) {
        textarea.value = "";
        e.target.removeAttribite("disabled");
      }
    });
  }
});
var months = ["Jan", "Feb", "March", "April", "May", "June", 
  "July", "August", "September", "October", "November", 
  "December"]
Template.message.helpers({
  readableDate: function() {
    var date = new Date(this.created_at);
    return date.getDate()+", "+months[date.getMonth()].substr(0, 3);
  }
});

创建消息集合 ：在 lib 目录下添加 collections.js 文件，并添加以下集合实例化代码：

Messages = new Mongo.Collection("messages");

当用户在文本区域输入消息并按下发送按钮时，消息将插入到 Messages 集合中，并通过 DDP 发送到其他客户端。若在设备上运行应用程序时看到页面损坏，可将项目文件夹中 Packt 库的 styles.css 样式表添加到应用程序中。

1.2 应用改进方向

可以从以下几个方面改进应用程序：
- 提示用户拍摄自拍作为显示图片。
- 添加推送通知支持。
- 增加创建群消息的选项。

1.3 构建与部署

要部署应用程序，需要创建一个构建。使用以下命令创建构建：

meteor build <path>

创建构建后，可在 <path>/android 目录下找到 Android 构建，在 <path>/ios 目录下找到 iOS 构建。运行移动构建过程时，需要指定移动应用程序要连接的服务器详细信息，例如：

meteor build <path> --server https://tellme.com:8080

获得构建后，可将其分发到 Play Store 或 App Store。

1.4 热代码推送

MeteorJS 支持向客户端进行热代码推送，这对移动应用程序来说是一个很大的优势。对于原生移动应用程序，将构建推送给用户需要时间，而且有些用户会更新，有些则不会。而在 MeteorJS 中，应用程序可以在不发布构建的情况下进行更新。当代码发生更改时，更改后的构建会在移动设备端下载，下载完成后，应用程序会立即更新。可以在移动端通过显示一些 UI 提示来处理应用程序的重新加载。

1.5 移动应用开发的其他要点

1.5.1 访问插件方法

访问插件方法时，最好在 Meteor.startup 回调中编写插件访问代码，但这不是强制性的。如果确定只在应用程序启动后访问插件方法，则无需将代码写在启动回调中。

1.5.2 调试

调试 Android ：使用 Chrome DevTools 调试 Android 移动应用程序。将移动设备连接到装有 Chrome 的系统，然后在浏览器中访问 chrome://inspect 。需要在移动设备上启用调试选项，可从开发者工具的文档链接（https://developer.chrome.com/devtools/docs/remote-debugging）了解如何启用。启用后，设备会显示在连接设备列表中，点击要检查的 Web 视图，Chrome DevTools 会显示该 Web 视图的 HTML、CSS 和 JavaScript 内容，可像在 Chrome DevTools 中一样进行调试。
调试 iOS ：使用 Safari 浏览器调试 iOS 应用程序。连接设备后，打开 Safari 浏览器，找到浏览器菜单中的 Develop 菜单项。如果是模拟器，会看到 Simulator 子菜单；如果是在真实设备上运行应用程序，会看到 iPhone 相关选项。点击后会打开另一组菜单，显示应用程序服务器（本地为 meteor.local ），点击后会打开 Safari 的 Web 检查器，显示 Web 视图的 HTML、CSS 和 JavaScript 内容，可添加断点并调试代码。

1.5.3 测试

使用以下命令测试移动应用程序的包：

meteor test-packages [--ios] [--android] [--ios-device] [--android-device]

可以通过传递参数指定在哪些平台（模拟器或真实设备）上运行测试。

1.5.4 包

访问 https://atmospherejs.com/ 并搜索移动包，可以找到许多有用的包，如 mobile-experience 、 mdg:camera 、 fastclick 和 mdg:geolocation 等。由于应用程序使用 HTML 和 CSS，还可以使用 Twitter Bootstrap 进行样式设计。为避免混合移动应用程序因无网络连接而无法使用的问题，可以使用设备数据库存储数据，将其作为离线存储，以增强用户体验。

1.5.5 包开发

开发支持移动设备的 MeteorJS 包时，除了之前学习的包开发知识外，还需要注意以下两点：
- 如果包依赖其他 Cordova 插件，需要在 package.js 中指定，例如：

Cordova.depends({
    "cordova-plugin-contactsPhoneNumer": 
    "https://github.com/dbaq/cordova-plugin-contacts-phone-numbers.git#6fa2e27afa3c54c18e88eb8ba0649dd4e4200ce2"
});

使用 api.addFiles 方法指定包要使用的文件时，可以指定文件在哪个环境中使用。如果要将文件仅添加到移动构建中，可以将 web.cordova 作为第二个参数，而不是 web ，例如：

api.addFiles('contactsPhoneNumber.js', 'web.cordova');

2. 最佳实践、模式与 SEO

MeteorJS 是一个优秀的 Web 和基于 Web 的应用程序开发框架，具有即时数据共享和响应式 UI 机制，非常适合需要大量实时数据共享的应用程序。虽然已经学习了很多关于 MeteorJS 应用程序开发的知识，但仍有一些技术、方法、模式和安全措施需要深入学习。

2.1 概念总结

发布/订阅 ：发布和订阅是理解如何开发典型 MeteorJS 应用程序的重要概念。服务器可以向客户端发布查询，客户端可以订阅该发布。当数据分页发布时，情况会变得复杂。发布/订阅涉及分布式数据协议（DDP）、MiniMongo、MergeBox 和跟踪器。服务器发布特定数据集，当该数据集因其他客户端的插入或更新而发生变化时，MergeBox 会找出新数据，通过 DDP 发送到客户端，客户端将其放入 MiniMongo，然后跟踪器会使所有模板和注册函数无效，从而使这些模板和函数重新运行。如果按块订阅数据，客户端在特定时刻只持有有限的数据，进行排序或聚合操作时，只能在客户端可用的文档上进行。订阅操作成本较高，服务器会在主内存中维护订阅数据的副本，因此要明智使用，并及时销毁不再使用的订阅。
DDP ：DDP 是一种基于套接字的数据传输协议，MeteorJS 选择它作为默认通信协议，以减少延迟。它可以使用 WebSockets 或长轮询技术实现，MeteorJS 使用 Socket.io 来实现 DDP。
MergeBox ：MergeBox 是一种智能算法，用于找出数据库中现有数据和新数据之间的差异，并决定向客户端发送哪些数据。但它只适用于顶级字段，例如，对于具有嵌套结构的文档：

{
  name: {
    first: "Paulo",
    last: "Cohelo"
  }
}

当 first 属性（二级属性）发生变化时，MergeBox 会将整个 name 属性发送到客户端，在设计数据库文档结构时需要注意这一限制。

2.2 最佳实践和应用模式

目前尚未详细介绍最佳实践和应用模式，但需要思考如何有效管理订阅并对其进行优化，这是 MeteorJS 开发中需要深入思考的问题。

2.3 SEO

MeteorJS 为支持 SEO 提供了哪些功能，目前尚未详细说明，但这是开发过程中需要关注的重要方面。

2.4 社区交流

了解在哪里寻求帮助、哪些人在为 MeteorJS 做出贡献以及应该关注哪些人，对于学习更多关于 MeteorJS 的知识非常重要。

综上所述，MeteorJS 为 Web、Android 和 iOS 应用程序开发提供了全面的支持，一个源代码可以构建为适用于 Web 和移动平台的版本。它使用 Cordova 创建移动构建，允许使用 Cordova 插件，支持在模拟器或真实设备上测试运行应用程序，可使用浏览器进行调试，并且在其生态系统中有大量的包支持移动应用程序开发。通过深入学习和实践，可以更好地掌握 MeteorJS 的开发技巧，开发出高质量的应用程序。

MeteorJS：移动应用开发与最佳实践

3. 最佳实践的深入探讨

3.1 订阅管理最佳实践

合理规划订阅范围 ：在开发 MeteorJS 应用时，要根据实际业务需求，精确规划每个订阅所包含的数据范围。例如，在一个电商应用中，用户在商品列表页可能只需要商品的基本信息（如名称、价格、图片），此时订阅就应只包含这些必要数据，避免订阅过多无用信息，减轻服务器和客户端的负担。
及时销毁无用订阅 ：当订阅不再需要时，要及时将其销毁。比如在一个单页应用中，用户从一个页面切换到另一个页面，之前页面的订阅如果不再使用，就应该销毁。可以在组件销毁的生命周期函数中添加销毁订阅的代码，示例如下：

// 在组件销毁时销毁订阅
Tracker.autorun(function (computation) {
    const subscription = Meteor.subscribe('someData');
    if (subscription.ready()) {
        // 处理数据
    }
    // 在组件销毁时停止订阅
    Tracker.onInvalidate(() => {
        subscription.stop();
    });
});

使用缓存机制 ：对于一些不经常变化的数据，可以使用缓存机制减少不必要的订阅。例如，应用中的一些静态配置信息，可以在首次订阅后将其缓存起来，后续使用时先检查缓存中是否存在该数据，如果存在则直接使用，避免重复订阅。

3.2 性能优化最佳实践

优化数据库查询 ：在进行数据库查询时，要确保查询语句的高效性。使用索引可以大大提高查询速度，对于经常用于查询条件的字段，要添加索引。例如，在 Messages 集合中，如果经常根据 sender_id 和 receiver_id 进行查询，可以为这两个字段添加索引：

Messages._ensureIndex({ sender_id: 1, receiver_id: 1 });

减少不必要的响应式更新 ：MeteorJS 的响应式机制虽然方便，但如果使用不当，会导致不必要的更新。在编写模板和代码时，要尽量减少响应式数据的依赖，只在必要的地方使用响应式数据。例如，对于一些静态文本或不随数据变化而变化的元素，不要将其绑定到响应式数据源上。

3.3 安全最佳实践

数据验证 ：在客户端和服务器端都要对用户输入的数据进行验证，防止恶意输入。例如，在用户发送消息时，要验证消息内容的长度、格式等是否符合要求。在服务器端可以使用 check 包进行验证，示例如下：

import { check } from 'meteor/check';

Meteor.methods({
    sendMessage: function (content, receiver_id) {
        check(content, String);
        check(receiver_id, String);
        // 验证通过后插入消息
        Messages.insert({
            content: content,
            sender_id: Meteor.userId(),
            receiver_id: receiver_id,
            created_at: Date.now(),
            senderName: Meteor.user().profile.name
        });
    }
});

权限控制 ：要对不同的操作和数据进行严格的权限控制。例如，只有消息的发送者和接收者才能查看消息内容，其他用户无法访问。可以在服务器端的发布函数中添加权限验证逻辑，示例如下：

Meteor.publish('messages', function (receiver_id) {
    if (this.userId) {
        return Messages.find({
            $or: [
                {
                    $and: [
                        { sender_id: this.userId },
                        { receiver_id: receiver_id }
                    ]
                },
                {
                    $and: [
                        { sender_id: receiver_id },
                        { receiver_id: this.userId }
                    ]
                }
            ]
        });
    }
    this.ready();
});

4. SEO 优化策略

4.1 预渲染技术

原理：预渲染是指在构建应用时，提前将页面渲染为静态 HTML 文件。当搜索引擎爬虫访问页面时，直接返回预渲染后的 HTML 文件，这样搜索引擎就能轻松抓取页面内容。
实现步骤 ：
1. 安装预渲染工具，如 prerender.io 或 static-site-generator-webpack-plugin 。
2. 配置工具，指定需要预渲染的页面和输出路径。
3. 在构建应用时，运行预渲染命令，生成静态 HTML 文件。

4.2 元标签优化

标题标签（ <title> ） ：标题标签是搜索引擎判断页面内容的重要依据，要确保标题准确概括页面的核心内容，并且包含重要的关键词。例如，在一个新闻详情页，标题可以是 “[新闻标题] - [网站名称]”。
描述标签（ <meta name="description"> ） ：描述标签用于简要描述页面的内容，会显示在搜索引擎的搜索结果中。描述要简洁明了，吸引用户点击。例如：

<meta name="description" content="这是一个关于 MeteorJS 开发的详细介绍页面，包含移动应用开发、最佳实践和 SEO 优化等内容。">

关键词标签（ <meta name="keywords"> ） ：虽然关键词标签对搜索引擎排名的影响越来越小，但合理设置关键词仍然有助于搜索引擎理解页面内容。关键词要与页面主题相关，并且避免堆砌。例如：

<meta name="keywords" content="MeteorJS, 移动应用开发, 最佳实践, SEO">

5. 社区资源与学习路径

5.1 社区资源

官方文档 ：MeteorJS 的官方文档是学习的重要资源，它包含了详细的 API 文档、教程和示例代码。可以访问官方网站（https://www.meteor.com/）获取最新的文档。
论坛和社区 ：MeteorJS 有活跃的论坛和社区，开发者可以在上面交流经验、分享问题和解决方案。例如，Stack Overflow 上有很多关于 MeteorJS 的问题和解答，Meteor 论坛（https://forums.meteor.com/）也是一个很好的交流平台。
开源项目 ：在 GitHub 上有很多优秀的 MeteorJS 开源项目，可以参考这些项目的代码结构、设计模式和实现思路。例如， meteor/meteor 是 MeteorJS 的官方仓库，里面包含了很多核心代码和示例。

5.2 学习路径

基础学习 ：首先学习 MeteorJS 的基础知识，包括安装、项目结构、模板语法等。可以通过官方教程和在线课程进行学习。
实践项目 ：在掌握基础知识后，通过实践项目来巩固所学知识。可以从简单的项目开始，逐步增加项目的复杂度。
深入研究 ：深入研究 MeteorJS 的高级特性，如发布/订阅、DDP、响应式编程等。可以阅读相关的技术文章和书籍，加深对 MeteorJS 的理解。

6. 总结与展望

MeteorJS 作为一个强大的 Web 和移动应用开发框架，为开发者提供了丰富的功能和工具。通过合理运用移动应用开发的技巧、遵循最佳实践和模式、进行有效的 SEO 优化，并充分利用社区资源，开发者可以开发出高质量、高性能的应用程序。

未来，随着技术的不断发展，MeteorJS 也将不断更新和完善。可能会有更多的插件和工具出现，进一步提升开发效率和应用性能。同时，随着对实时数据处理和响应式 UI 需求的增加，MeteorJS 在实时应用开发领域将有更广阔的发展前景。开发者可以持续关注 MeteorJS 的发展动态，不断学习和探索，以适应不断变化的技术环境。

以下是一个简单的流程图，展示了 MeteorJS 应用开发的基本流程：

graph LR
    A[需求分析] --> B[环境搭建]
    B --> C[代码开发]
    C --> D[调试测试]
    D --> E[性能优化]
    E --> F[部署上线]
    F --> G[持续维护]

以下是一个总结表格，对比了 MeteorJS 开发中的一些关键概念和要点：
| 概念 | 描述 | 注意事项 |
| ---- | ---- | ---- |
| 发布/订阅 | 服务器向客户端发布数据，客户端订阅数据 | 合理规划订阅范围，及时销毁无用订阅 |
| DDP | 基于套接字的数据传输协议 | 利用其低延迟特性，提高数据传输效率 |
| MergeBox | 找出数据库数据差异的算法 | 注意其只适用于顶级字段的限制 |
| SEO 优化 | 提高应用在搜索引擎中的排名 | 采用预渲染技术，优化元标签 |