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 方法

待续ui