JavaScript 項目中使用 Firebase

時間 2019-11-06

標籤 javascript 項目使用 firebase 欄目 JavaScript 简体版

原文原文鏈接

Firebase 官方文檔html

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 SDKnode

使用 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 SDKweb

安裝 Firebase JavaScript SDK：

npm install --save firebase
複製代碼

例如，要僅加載身份驗證和實時數據庫，請使用如下 import 語句：

// Firebase App (核心模塊) 必須在其餘模塊以前引入
import * as firebase from "firebase/app";

import "firebase/auth";
import "firebase/database";

const firebaseConfig = {
 // ...
};

firebase.initializeApp(firebaseConfig);
複製代碼

適用於 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 SDKshell

要加載整個 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 應用

安裝

npm install --save firebase
複製代碼

引入 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";
複製代碼

在應用中初始化npm

var firebaseConfig = {
 // ...
};

// 初始化 Firebase
firebase.initializeApp(firebaseConfig);
複製代碼

適用於 JavaScript 應用的可用 Firebase SDK（Node.js 的模塊）api

Firebase 產品	庫參考
Firebase 核心（必需）	"firebase/app"
身份驗證	"firebase/auth";
Cloud Firestore	"firebase/firestore";
Cloud Functions for Firebase 客戶端 SDK	"firebase/functions";
實時數據庫	"firebase/database";

Firebase 部分API

CollectionReference 對象可用於添加文檔、獲取文檔引用和查詢文檔(使用從Query繼承的方法)。app
- doc 方法：獲取集合中指定路徑上的文檔的 DocumentReference。若是沒有指定路徑，則自動生成的唯一ID將用於返回的文檔引用。返回 DocumentReference 實例
- get 方法：執行查詢並以 QuerySnapshot 的形式返回結果。返回 Promise<QuerySnapshot>
- add 方法：使用指定的數據向此集合添加新文檔，並自動爲其分配文檔ID。
- where 方法：建立並返回帶有附加篩選器的新查詢，該篩選器文檔必須包含指定的字段，且值應知足所提供的關係約束。
- onSnapshot 方法：爲 QuerySnapshot 事件附加偵聽器，能夠傳遞單獨的 onNext 和 onError 回調函數，也能夠傳遞帶有 next 和 error 回調函數的單個觀察者對象。能夠經過調用 onSnapshot 調用時返回的函數來取消偵聽器。
DocumentReference 對象引用Firestore數據庫中的文檔位置，可用於寫入、讀取或偵聽該位置。該位置的文檔可能存在，也可能不存在。DocumentReference 還能夠用於建立子集合的 CollectionReference。函數
- get 方法
- set 方法
- update 方法
- onSnapshot 方法