【前端】PWA

目錄

  • 概述
    • 實戰
    • vue項目
    • 問題匯總

PWA（漸進式 Web 應用，Progressive Web App） 2015提出

概述

PWA 是一種提升 Web 應用體驗的技術，使其具備與原生應用相似的功能和性能。PWA不僅能夠在網頁上運行，還能在手機或桌面上像傳統的移動應用一樣進行交互，同時保留了Web應用的靈活性。
它通過借助一些先進的功能，如Service Workers、Web App Manifest 和 Push Notifications 等，來提升用戶體驗、優化性能，并能在離線或低網速環境下依然保持可用性。
PWA 強調的是“漸進式”，即可以根據設備的能力逐步增強其功能。

  • 主要特點：
    • 離線支持： 使用 Service Worker，可以使應用在沒有網絡連接時也能運行。Service Worker 是一種瀏覽器后臺腳本，能夠攔截并緩存網絡請求，使得 Web 應用在離線狀態下仍然能夠繼續工作。
    • 推送通知： PWA 可以向用戶推送通知，即使他們沒有打開應用/應用沒有運行，提升用戶參與度。
    • 響應式設計： PWA 具有響應式設計，可以適應不同的屏幕尺寸和設備，提供一致的用戶體驗。
    • 安裝到主屏幕：通常通過 Web App Manifest 文件配置，它提供了有關應用外觀、名稱、圖標等信息。
      PWA 可以通過瀏覽器直接安裝到設備的主屏幕，用戶像安裝本地應用一樣，直接啟動 PWA，而無需經過應用商店。安裝后，PWA 會像原生應用一樣運行，且不顯示瀏覽器界面。
    • 快速加載： 通過資源緩存、懶加載和其他性能優化手段，PWA 可以提供比傳統 Web 應用更快速的加載體驗。
    • 自更新：PWA 可以在后臺自動更新內容和資源，使得用戶始終體驗到最新版本的應用。
    • 提高性能
      由于 Service Worker 能夠緩存重要資源，PWA 可以大幅度提高應用的加載速度，減少網絡請求。
  • 使用場景：
    需要在沒有穩定網絡的情況下工作，如離線文檔編輯器、離線新聞閱讀器等。
    需要提升用戶參與度的應用，通過推送通知與用戶保持互動。
    需要跨平臺應用并提供與原生應用相似體驗的 Web 應用。

實戰

  • PWA 的技術組成
  1. Web App Manifest
    這是一個JSON文件，告訴瀏覽器如何顯示應用，包括應用的名稱、圖標、啟動頁面、主題顏色等。它允許用戶將 PWA 添加到主屏幕并像原生應用一樣使用。
{"name": "My PWA App","short_name": "PWA","start_url": "/","display": "standalone","background_color": "#ffffff","theme_color": "#0000ff","icons": [{"src": "icons/icon-192x192.png","sizes": "192x192","type": "image/png"},{"src": "icons/icon-512x512.png","sizes": "512x512","type": "image/png"}]
}
  1. Service Worker
    Service Worker 是一個在瀏覽器后臺運行的腳本，它可以攔截網絡請求，緩存資源并提供離線支持。Service Worker 還可以實現推送通知和后臺數據同步等功能。

編寫 Service Worker 注冊腳本
在你的主文件（例如 index.js 或 app.js）中調用 registerServiceWorker
確保你的 manifest.json 文件配置正確

// registerServiceWorker.jsexport function register() {if ('serviceWorker' in navigator) {window.addEventListener('load', () => {const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;  // 指定 Service Worker 的路徑navigator.serviceWorker.register(swUrl).then(registration => {console.log('Service Worker registered with scope: ', registration.scope);}).catch(error => {console.log('Service Worker registration failed: ', error);});});}
}export function unregister() {if ('serviceWorker' in navigator) {navigator.serviceWorker.ready.then(registration => {registration.unregister().then(success => {if (success) {console.log('Service Worker unregistered');}}).catch(error => {console.log('Service Worker unregistration failed: ', error);});});}
}// index.js 或 app.jsimport React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { register } from './registerServiceWorker';  // 導入 register 函數// 注冊 Service Worker
register();ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);

創建 Service Worker 腳本
在 service-worker.js 中，你可以緩存應用資源，處理離線請求等。

// service-worker.jsconst CACHE_NAME = 'my-cache-v1';
const urlsToCache = ['/','/index.html','/styles.css','/script.js', // 你所有的靜態文件，或者可以使用通配符
];// 安裝階段，緩存靜態資源
self.addEventListener('install', event => {event.waitUntil(caches.open(CACHE_NAME).then(cache => {console.log('Opened cache');return cache.addAll(urlsToCache);}));
});// 激活階段，清理過時的緩存
self.addEventListener('activate', event => {const cacheWhitelist = [CACHE_NAME];event.waitUntil(caches.keys().then(cacheNames => {return Promise.all(cacheNames.map(cacheName => {if (!cacheWhitelist.includes(cacheName)) {return caches.delete(cacheName);}}));}));
});// 攔截網絡請求，使用緩存響應請求
self.addEventListener('fetch', event => {event.respondWith(caches.match(event.request).then(cachedResponse => {if (cachedResponse) {return cachedResponse;  // 如果緩存中有匹配的資源，直接返回}return fetch(event.request);  // 否則正常請求}));
});
  1. HTTPS
    PWA 強烈推薦使用 HTTPS，因為 Service Worker 只能在安全的環境下運行，且 HTTPS 提供了更高的安全性。

vue項目

在 Vue + Vite 項目中實現 離線緩存（離線也能訪問） 的最佳方案是使用 PWA（Progressive Web App）技術。你可以使用官方推薦的插件：vite-plugin-pwa，支持離線緩存、自動注冊 Service Worker、更新機制等。
yarn add vite-plugin-pwa -D
修改vite.config.js

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa';export default defineConfig({plugins: [vue(),VitePWA({registerType: 'autoUpdate', // 自動更新 Service WorkerincludeAssets: ['favicon.svg', 'robots.txt'], // 可選：緩存額外資源manifest: {name: 'My Vue App',short_name: 'VueApp',description: '我的離線 Vue 應用',theme_color: '#ffffff',icons: [{src: 'pwa-192x192.png',sizes: '192x192',type: 'image/png',},{src: 'pwa-512x512.png',sizes: '512x512',type: 'image/png',},],},}),],
});//緩存public下所有文件 
import { defineConfig } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'export default defineConfig({plugins: [VitePWA({registerType: 'autoUpdate',includeAssets: ['favicon.ico', 'robots.txt', '**/*'], // ? 顯式包含 public 下所有文件workbox: {globPatterns: ['**/*.{js,css,html,ico,png,svg,json,txt,woff2}'], // ? 緩存這些后綴的文件runtimeCaching: [{urlPattern: /^\/.*\.(json|png|ico|svg|html|js|css|txt)$/,handler: 'CacheFirst',options: {cacheName: 'static-assets',expiration: {maxEntries: 1000,maxAgeSeconds: 60 * 60 * 24 * 30, // 緩存 30 天},},},],},}),],
})
配置項用途執行時機作用范圍
includeAssets👇構建時復制到 dist/，并加入到 PWA 資源清單構建時主要針對 public/ 目錄的資源
globPatterns👇構建時讓 Workbox 自動緩存匹配的靜態資源構建時所有 dist/ 中能匹配的文件
urlPattern👇運行時攔截某些請求并決定是否緩存、如何緩存運行時（瀏覽器端）任意運行時資源（API、圖片等）
類型示例資源推薦用法
靜態資源/robots.txt、favicon? includeAssets + globPatterns
公共 JSON/data/config.json? includeAssets or runtimeCaching
接口數據/api/user/list? runtimeCaching.urlPattern
圖片資源/images/logo.png? globPatterns + runtimeCaching

添加圖標文件（放在 public/ 目錄）
在入口文件注冊 Service Worker: 如果使用 vite-plugin-pwa 的 autoUpdate，你不需要手動注冊，插件會自動幫你做。

if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/sw.js');});
}

構建項目并部署，提示 “安裝應用”，并具備 離線訪問能力。

  • 測試
    打開瀏覽器訪問你的項目
    F12 打開開發者工具 → 應用（Application） → Service Workers
    斷網，再刷新頁面，頁面依然能打開，說明離線緩存成功
    service worker只能在 HTTPS環境/localhost本地測試環境 中使用，否則瀏覽器會阻止
    在這里插入圖片描述
    service worker的東西在cache storage里面
    在這里插入圖片描述
    safari只能看是否開啟，看不了存的內容
    在這里插入圖片描述

  • 控制哪些資源緩存
    使用 workbox 的 runtimeCaching 來配置路由緩存策略

VitePWA({workbox: {runtimeCaching: [{urlPattern: /^https:\/\/your-api\.com\/.*$/,handler: 'NetworkFirst',options: {cacheName: 'api-cache',},},],},
});
  • 注意開發環境不會啟用離線緩存，因為防止有緩存后調試困難
    要測試離線功能，必須使用 build 后的生產版本。
npm install -g serve
serve dist#oryarn build         # 構建生產代碼
npx serve dist     # 啟動本地靜態服務器（正式環境）

問題匯總

  1. Uncaught (in promise) SecurityError: Failed to register a ServiceWorker for scope (‘https://192.168.1.x:417x/’) with script (‘https://192.168.1.x:417x/sw.js’): An SSL certificate error occurred when fetching the script.
    表示正在嘗試在使用 自簽名證書或無效 HTTPS 證書 的本地開發服務器上注冊 Service Worker，而 瀏覽器出于安全原因阻止了這個請求。
  • 解決方法 選其一
    （1） localhost地址是ok的 或者
    （2）使用受信任的證書：
    如果你 必須通過 IP 地址 + HTTPS 訪問，你需要：
    為你的 IP 或本地域名（如 my-app.local）生成一個自簽名證書；
    將該證書導入到本地的「受信任根證書」；
    配置 Vite 使用該證書。
    這過程較復雜，通常不推薦在本地開發中這么做，除非你對證書比較熟悉。
    1）安裝
brew install mkcert
brew install nss # 如果你使用 Firefox

Windows：直接在 https://github.com/FiloSottile/mkcert 下載對應版本，解壓到 PATH 中。
2）創建本地 CA（僅第一次需要）mkcert -install這會自動生成并安裝本地根證書到受信任列表中（支持 macOS、Windows、Linux）。
3）為 IP 地址創建證書（例如 192.168.1.4）
mkcert 192.168.1.4
會生成兩個文件：
192.168.1.4.pem（證書）
192.168.1.4-key.pem（私鑰）
4) 配置 Vite 使用這個證書
將文件重命名為更簡潔的名字：

mv 192.168.1.4.pem server.crt
mv 192.168.1.4-key.pem server.key

在 vite.config.ts 中配置：

import { defineConfig } from 'vite';
import fs from 'fs';export default defineConfig({server: {https: {key: fs.readFileSync('./server.key'),cert: fs.readFileSync('./server.crt'),},host: '192.168.1.4',port: 4173}
});

現在可以訪問：https://192.168.1.x:417x。不會有證書警告，且 Service Worker 能正常注冊。
2. 桌面chrome的Service Worker 正常工作，安卓chrome還是沒存上
手機端檢查service worker，chrome://serviceworker-internals 已被廢棄，故使用：在手機上打開 DevTools（推薦）
電腦和手機連接同一個 Wi-Fi
手機開啟開發者模式 + USB 調試
用數據線連接電腦
電腦 Chrome 打開：
chrome://inspect/#devices
在手機 Chrome 中打開你要調試的網頁
電腦端點擊 inspect，就能打開該網頁的 DevTools（像桌面一樣調試）
切換到 DevTools 的 “Application” → “Service Workers” 面板查看注冊情況

  1. An SSL certificate error occurred when fetching the script.了解此錯誤
    index.html:1 Uncaught (in promise) SecurityError: Failed to register a ServiceWorker for scope (‘https://xx/’) with script (‘https://xx/sw.js’): An SSL certificate error occurred when fetching the script.
    試圖在 HTTPS 本地開發環境 注冊 Service Worker，但瀏覽器因為 SSL 證書不受信任 而阻止了注冊。
    必須把證書 xx.pem 安裝到手機上，安裝后還要啟用“信任用戶證書”（安卓設置中），否則瀏覽器依然會報“SSL 證書錯誤”，Service Worker 無法注冊。
    1）準備證書（把 .pem 轉為 .crt）安卓只識別 .crt 格式證書。在電腦上把 .pem 轉為 .crt：打開終端，運行：cp 192.168.1.4.pem 192.168.1.4.crt簡單改擴展名，因為 mkcert 生成的 .pem 實際上就是 X.509 格式。
  1. 把證書傳到手機
    3)安裝證書 不同廠商界面略有不同
  • 安卓10
    打開設置 → 安全 或 安全與隱私
    選擇：加密與憑據 或 更多安全設置
    點擊：從存儲設備安裝 或 安裝證書
    選擇你剛才傳進去的證書
    選擇安裝為：【VPN 和應用程序（用戶）】
    手機提示“已安裝證書”，說明成功。
  1. 開啟信任用戶證書（某些安卓必須）
    部分安卓系統（尤其是 Android 11 及以上）默認不信任用戶安裝的證書，你需要手動開啟：
    打開瀏覽器輸入 chrome://flags，搜索 “insecure origins treated as secure”
    或手動啟用：設置 → 關于手機 → 連續點擊版本號 7 次，開啟開發者模式/【開發者選項】
    找到：信任用戶 CA 證書或類似選項：允許應用信任用戶 CA
    ?? 注意：不是所有 ROM 都提供這個選項，如果你的瀏覽器（尤其是 Chrome）仍然不信任用戶證書，就只能部署到支持 HTTPS 的遠程服務器（如 Vercel）。
    5） 驗證是否成功
    打開手機瀏覽器，訪問，看地址欄是否出現綠色 🔒 或無警告
    打開 DevTools 調試（用 chrome://inspect）查看 Service Worker 是否正常注冊
  1. 在安卓中提示“需要提供私鑰才能安裝證書”。
    用adb安裝到系統證書 或用openssl轉換一下再安裝
    你導入的是 客戶端證書（Client Certificate），而系統安裝時需要：
    公鑰 + 私鑰，并且要打包成 .p12（或 .pfx）格式。
    解決辦法：生成 .p12 文件（含私鑰）
    你需要用 openssl 將你的公鑰和私鑰打包成一個 .p12 文件，再傳到文石設備上安裝。
    所需材料：一個 .crt（或 .pem）文件：公鑰證書，一個 .key 文件：私鑰文件（必須你自己持有）
#打包命令
openssl pkcs12 -export \-in client.crt \-inkey client.key \-out client.p12 \-name "my-cert"

系統會要求你設置一個導入密碼（可以設置一個簡單密碼）設備安裝時要求輸入
5. 上述做完，安卓chrome還是不信任該網站

  • 使用vite-plugin-mkcert
    這是一個 Vite 插件，用于：
    為你的本地開發服務器（vite dev）啟用 HTTPS
    自動創建并安裝受信任的本地開發證書（通過 mkcert）
    這對在 移動設備（如文石）上訪問你的本地開發頁面 非常重要，因為：
    移動端通常拒絕連接未信任的 HTTP 或自簽名 HTTPS，如果你配置了 mkcert，瀏覽器就可以直接信任你的本地 HTTPS 網站
  • 還是不行，試一下：把證書放進系統 CA 目錄
    mkcert 安裝時會自動創建一個「根證書（CA）」用于簽發你本地開發用的 HTTPS 證書。這個根證書是你要導入安卓系統 CA 的那個證書，mkcert -CAROOT找到位置
    沒root的將rootCA.pem發送到手機，直接安裝成CA證書，成功讓chrome信任了，解決問題?
    openssl x509 -inform PEM -subject_hash_old -in rootCA.pem | head -1生成一串字符串，記住它，后面加上.0作為新文件的名稱
    cp rootCA.pem 新文件名稱形如cp rootCA.pem 119xxxxa.0
    通過adb命令放入已root的設備

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/82800.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/82800.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/82800.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

湖北理元理律師事務所：從法律合規到心靈契合的服務升維

湖北理元理律師事務所：從法律合規到心靈契合的服務升維

債務優化不僅是數字游戲&#xff0c;更是信任重建的過程。湖北理元理律師事務所在實踐中發現&#xff1a;68%的債務糾紛中存在溝通斷裂。為此&#xff0c;機構構建了“三維信任修復機制”。 維度一&#xff1a;信息透明的技術實現 區塊鏈存證艙&#xff1a;客戶手機實時查看律…
閱讀更多...
香橙派3B學習筆記2：Vscode遠程SSH登錄香橙派_權限問題連接失敗解決

香橙派3B學習筆記2：Vscode遠程SSH登錄香橙派_權限問題連接失敗解決

Vscode下載插件&#xff0c;ssh遠程登錄香橙派。 ssh &#xff1a; orangepi本地ip 密碼 &#xff1a; orangepi 安裝 Remote - SSH 擴展SSH插件&#xff1a; SSH遠程連接&#xff1a; ssh usernameremote_host ssh -p port_number usernameremote_host默認22端口號就用第一行…
閱讀更多...
VMware安裝Ubuntu實戰分享大綱

VMware安裝Ubuntu實戰分享大綱

深入解析快速排序 一、分治策略分解 分解階段&#xff1a; 選擇基準元素 $pivot$將數組劃分為三個子集&#xff1a; $$ left {x | x < pivot} $$ $$ equal {x | x pivot} $$ $$ right {x | x > pivot} $$ 遞歸排序&#xff1a; 對 left 和 right 子集遞歸調用快速排…
閱讀更多...
AI 讓無人機跟蹤更精準——從視覺感知到智能預測

AI 讓無人機跟蹤更精準——從視覺感知到智能預測

AI 讓無人機跟蹤更精準——從視覺感知到智能預測 無人機跟蹤技術正在經歷一場前所未有的變革。曾經，我們只能依靠 GPS 或簡單的視覺識別來跟蹤無人機，但如今，人工智能（AI）結合深度學習和高級視覺算法，正讓無人機的跟蹤變得更加智能化、精準化。 尤其是在自動駕駛、安防監…
閱讀更多...
GATED DELTA NETWORKS : IMPROVING MAMBA 2 WITH DELTA RULE

GATED DELTA NETWORKS : IMPROVING MAMBA 2 WITH DELTA RULE

TL;DR 2024 年 Nvidia MIT 提出的線性Transformer 方法 Gated DeltaNet&#xff0c;融合了自適應內存控制的門控機制&#xff08;gating&#xff09;和用于精確內存修改的delta更新規則&#xff08;delta update rule&#xff09;&#xff0c;在多個基準測試中始終超越了現有…
閱讀更多...
Laravel單元測試使用示例

Laravel單元測試使用示例

Date: 2025-05-28 17:35:46 author: lijianzhan 在 Laravel 框架中&#xff0c;單元測試是一種常用的測試方法&#xff0c;它是允許你測試應用程序中的最小可測試單元&#xff0c;通常是方法或函數。Laravel 提供了內置的測試工具PHPUnit&#xff0c;實踐中進行單元測試是保障代…
閱讀更多...
【FastAPI】--3.進階教程(二)

【FastAPI】--3.進階教程(二)

【FastAPI】--進階教程1-CSDN博客 【FastAPI】--基礎教程-CSDN博客 目錄 1.FastAPI - CORS ?2.FastAPI - CRUD 操作 2.1.Create 2.2.Read 2.3.Update 2.4.Delete 3.FastAPI - 使用 GraphQL 4.FastAPI - Websockets 5.FastAPI - 事件處理程序 6.FastAPI - 安裝 Fla…
閱讀更多...
FEMFAT許可的更新與升級流程

FEMFAT許可的更新與升級流程

隨著工程仿真技術的不斷發展&#xff0c;FEMFAT作為一款領先的疲勞分析軟件&#xff0c;持續為用戶提供卓越的性能和創新的功能。為了保持軟件的最新性和高效性&#xff0c;了解FEMFAT許可的更新與升級流程至關重要。本文將為您詳細介紹FEMFAT許可的更新與升級流程&#xff0c;…
閱讀更多...
麒麟v10，arm64架構，編譯安裝Qt5.12.8

麒麟v10，arm64架構，編譯安裝Qt5.12.8

Window和麒麟x86_64架構&#xff0c;官網提供安裝包&#xff0c;麒麟arm64架構的&#xff0c;只能自己用編碼編譯安裝。 注意&#xff0c;“桌面”路徑是中文&#xff0c;所以不要把源碼放在桌面上編譯。 1. 下載源碼 從官網下載源碼&#xff1a;https://download.qt.io/arc…
閱讀更多...
20250528-C#知識：結構體

20250528-C#知識：結構體

C#知識&#xff1a;結構體 結構體是一種自定義數據類型&#xff0c;用戶可以根據自身需求設計自己的結構體用來表示某種數據集合。結構體是一種值類型&#xff0c;結合了值類型的優點&#xff0c;避免了引用類型的缺點。本文簡單介紹并探究一下C#中的結構體。 結構體一般寫在命…
閱讀更多...
CRM系統的功能模塊劃分

CRM系統的功能模塊劃分

基礎管理模塊 用戶管理 用戶注冊與登錄角色權限管理部門組織架構用戶信息管理 系統設置 基礎參數配置系統日志管理數據字典管理系統監控 客戶管理模塊 客戶信息管理 客戶基本信息客戶分類管理客戶標簽管理客戶關系圖譜 聯系人管理 聯系人信息聯系記錄溝通歷史重要日期提醒 …
閱讀更多...
Python中的跨域資源共享（CORS）處理

Python中的跨域資源共享（CORS）處理

在Web開發中&#xff0c;跨域資源共享&#xff08;CORS&#xff09;是瀏覽器強制執行的安全機制&#xff0c;用于控制不同源&#xff08;協議域名端口&#xff09;之間的資源交互。下面我將通過Python示例詳細講解CORS的實現。 原生Python實現CORS Flask框架手動實現CORS fr…
閱讀更多...
Kruskal算法剖析與py/cpp/Java語言實現

Kruskal算法剖析與py/cpp/Java語言實現

Kruskal算法剖析與py/cpp/Java語言實現 一、Kruskal算法的基本概念1.1 最小生成樹1.2 Kruskal算法核心思想 二、Kruskal算法的執行流程三、Kruskal算法的代碼實現3.1 Python實現3.2 C實現3.3 Java實現 四、算法復雜度分析4.1 時間復雜度4.2 空間復雜度 五、Kruskal算法應用場景…
閱讀更多...
微信小程序返回上一頁監聽

微信小程序返回上一頁監聽

本文實現的是微信小程序在返回上一頁時獲取通知并自定義業務。 最簡單的實現&#xff1a; 使用 wx.enableAlertBeforeUnload() 優點&#xff1a;快速接入 缺點&#xff1a;手勢不能識別、無法自定義彈窗內容&#xff08;僅詢問&#xff09; 方法二&#xff1a; page-conta…
閱讀更多...
Excel 統計某個字符串在指定區域出現的次數

Excel 統計某個字符串在指定區域出現的次數

【本文概要】 Excel 統計某個字符串在指定區域出現的次數&#xff1a; 1、Excel 統計一個單元格內的某字符串的出現次數 2、Excel 統計某一列所有單元格內的某字符串的出現次數 3、Excel 統計某一區域所有單元格內的某字符串的出現次數 1、Excel 統計一個單元格內的某字符串的出…
閱讀更多...
生物化學：藥品藥物 營養和補充劑信息 第三方認證信息 常見誤區 匯總

生物化學：藥品藥物 營養和補充劑信息 第三方認證信息 常見誤區 匯總

常見維生素和礦物質成分表 成分名稱好處副作用&#xff08;超量或敏感情況&#xff09;運作方式推薦日劑量&#xff08;成人&#xff09;劑量說明維生素A&#xff08;視黃醇&#xff09;視力、免疫、皮膚健康過量可致肝損傷、頭痛、脫發調節視網膜功能、細胞分化700–900 g RA…
閱讀更多...
mock庫知識筆記（持續更新）

mock庫知識筆記（持續更新）

文章目錄 mock簡介導入方式參數簡介使用場景&#xff08;待更新&#xff09;常見問題總結&#xff08;待更新&#xff09;Python代碼官網 mock簡介 mock是一個模擬對象庫&#xff0c;具有模擬其他python對象的功能&#xff0c;還能指定模擬對象的返回值和設置模擬對象的屬性。…
閱讀更多...
扇形 圓形 面積公式

扇形 圓形 面積公式

? 一、圓的面積公式 全圓面積&#xff1a; A circle π r 2 A_{\text{circle}} \pi r^2 Acircle?πr2 ? 二、扇形的面積公式&#xff08;兩種制式&#xff09; 弧度制&#xff1a; A sector 1 2 r 2 θ A_{\text{sector}} \frac{1}{2} r^2 \theta Asector?21?r2θ …
閱讀更多...
怎樣將win11+ubuntu雙系統的ubuntu從機械硬盤遷移至固態硬盤(1)

怎樣將win11+ubuntu雙系統的ubuntu從機械硬盤遷移至固態硬盤(1)

將 Ubuntu 從機械硬盤遷移到固態硬盤是一個涉及多個步驟的過程。以下是一個基本的遷移指南&#xff1a; 1. 前期準備 1.1 備份數據&#xff1a; 確保你已備份數據&#xff0c;以防止在遷移過程中出現意外導致任何數據丟失。 1.2 固態硬盤安裝&#xff1a; 確保固態硬盤正確…
閱讀更多...
js中common.js和ECMAScript.js區別

js中common.js和ECMAScript.js區別

以下是關于 CommonJS 和 ECMAScript Modules&#xff08;ESM&#xff09;的詳細對比分析&#xff0c;包含底層原理和示例說明&#xff1a; &#x1f9e9; 核心差異對比表 特性CommonJSES Modules來源Node.js 社區規范ECMAScript 語言標準加載方式動態加載&#xff08;運行時解…
閱讀更多...
最新文章

Copyright @ 2022~2023