导入的一种方法是,首先创建一个名为firebase.js并粘贴此代码:
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-app.js";
import { getFirestore, getDocs, collection } from "https://www.gstatic.com/firebasejs/9.6.10/firebase-firestore.js";
//add your credentials from firebase project
const firebaseConfig = {
apiKey: "YOUR-apiKey-nCVgNHJXTs",
authDomain: "YOUR-authDomain.firebaseapp.com",
projectId: "YOUR-projectId-fb",
storageBucket: "YOUR-storageBucket-fb.appspot.com",
messagingSenderId: "YOUR-messagingSenderId",
appId: "YOUR-appId-web:11c8d54e0"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore();
//create your custom method
export const getWolfs = () => {
return getDocs(collection(db, "yourNameCollection"));
};
现在,您可以创建一个名为的新文件main.js并粘贴此代码:
import { getWolfs } from './firebase.js';
//suppose you want to display the list of wolves in the browser console
window.addEventListener("DOMContentLoaded", async (e) => {
const querySnapshot = await getWolfs();
querySnapshot.forEach((doc) => {
console.log(doc.data());
});
});
最后创建html文件索引.html并粘贴此代码:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>firebase</title>
</head>
<body>
<h2>wolves</h2>
<!--main app-->
<script type="module" src="./main.js"></script>
</body>
</html>
示例项目:
这就是全部,我希望它对你有用????