JavaScript 项目中使用 Firebase

2,958 阅读3分钟

Firebase 官方文档

Firebase 模块

配置 web 应用或 node.js 应用

firebase 配置对象

var firebaseConfig = {
  apiKey: "api-key",
  authDomain: "project-id.firebaseapp.com",
  databaseURL: "https://project-id.firebaseio.com",
  projectId: "project-id",
  storageBucket: "project-id.appspot.com",
  messagingSenderId: "sender-id",
};

配置 web 应用

  • 从 CDN 添加特定 Firebase SDK

    • 使用 script 标签引入
    <body>
    <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
    <!-- Firebase App (核心模块) 必须在其他模块之前引入 -->
    <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-app.js"></script>
    
    <!-- 添加模块 -->
    <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-database.js"></script>
    
    <script>
      var firebaseConfig = {
        // ...
      };
      firebase.initializeApp(firebaseConfig);
    </script>
    </body>
    
  • 动态加载特定 Firebase SDK

    1. 安装 Firebase JavaScript SDK:
    npm install --save firebase
    
    1. 例如,要仅加载身份验证和实时数据库,请使用以下 import 语句:
    // Firebase App (核心模块) 必须在其他模块之前引入
    import * as firebase from "firebase/app";
    
    import "firebase/auth";
    import "firebase/database";
    
    const firebaseConfig = {
     // ...
    };
    
    firebase.initializeApp(firebaseConfig);
    
    1. 适用于 JavaScript 应用的可用 Firebase SDK(import 模块)
    Firebase 产品 库参考
    Firebase 核心(必需) import "firebase/app";
    身份验证 import "firebase/auth";
    Cloud Firestore import "firebase/firestore";
    Cloud Functions for Firebase 客户端 SDK import "firebase/functions";
    云消息传递 import "firebase/messaging";
    Cloud Storage import "firebase/storage";
    实时数据库 import "firebase/database";
  • 添加整个 Firebase JavaScript SDK

    • 要加载整个 Firebase JavaScript SDK,请在您应用的 body 标记中使用以下 script 标记:
    <body>
    <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
    <!-- 加载整个 Firebase JavaScript SDK -->
    <script src="https://www.gstatic.com/firebasejs/5.10.1/firebase.js"></script>
    
    <script>
        var firebaseConfig = {
          // ...
        };
        // 初始化 Firebase
        firebase.initializeApp(firebaseConfig);
    </script>
    </body>
    

配置 Node.js 应用

  1. 安装
npm install --save firebase
  1. 引入 Firebase 模块。使用以下任一选项:

    • require 语法
    // 部分引入
    // Firebase App (核心模块) 必须在其他模块之前引入
    var firebase = require("firebase/app");
    
    // 添加你想使用的 Firebase services
    require("firebase/auth");
    require("firebase/database");
    
    // 整个引入
    var firebase = require("firebase");
    
    • ES2015 import 语法
    // 按需引入
    // Firebase App (核心模块) 必须在其他模块之前引入
    import * as firebase from "firebase/app";
    
    // 添加你想使用的 Firebase services
    import "firebase/auth";
    import "firebase/database";
    
    // 整个引入
    import firebase from "firebase";
    
  2. 在应用中初始化

var firebaseConfig = {
 // ...
};

// 初始化 Firebase
firebase.initializeApp(firebaseConfig);
  1. 适用于 JavaScript 应用的可用 Firebase SDK(Node.js 的模块)

    Firebase 产品 库参考
    Firebase 核心(必需) "firebase/app"
    身份验证 "firebase/auth";
    Cloud Firestore "firebase/firestore";
    Cloud Functions for Firebase 客户端 SDK "firebase/functions";
    实时数据库 "firebase/database";

Firebase 部分API

  • CollectionReference 对象可用于添加文档、获取文档引用和查询文档(使用从Query继承的方法)。

    • doc 方法:获取集合中指定路径上的文档的 DocumentReference。如果没有指定路径,则自动生成的惟一ID将用于返回的文档引用。返回 DocumentReference 实例
    • get 方法:执行查询并以 QuerySnapshot 的形式返回结果。返回 Promise<QuerySnapshot>
    • add 方法:使用指定的数据向此集合添加新文档,并自动为其分配文档ID。
    • where 方法:创建并返回带有附加筛选器的新查询,该筛选器文档必须包含指定的字段,且值应满足所提供的关系约束。
    • onSnapshot 方法:为 QuerySnapshot 事件附加侦听器,可以传递单独的 onNextonError 回调函数,也可以传递带有 nexterror 回调函数的单个观察者对象。可以通过调用 onSnapshot 调用时返回的函数来取消侦听器。
  • DocumentReference 对象引用Firestore数据库中的文档位置,可用于写入、读取或侦听该位置。该位置的文档可能存在,也可能不存在。DocumentReference 还可以用于创建子集合的 CollectionReference

    • get 方法
    • set 方法
    • update 方法
    • onSnapshot 方法

待续