泽野之乡

发表于 更新于

微信小程序视频无法播放问题解析与解决方案

问题背景

在使用微信小程序的 <video> 组件播放第三方 OSS（对象存储服务）地址的视频时，开发者工具模拟器中可以正常播放，但真机上无法播放。

请求差异分析

  • 模拟器请求：
    • 请求头包含 Range：bytes=0- 或 bytes=655360-
    • 模拟器能够正确处理分段加载视频。
  • 真机请求：
    • 请求头缺少 Range 或为 No range。
    • 服务端无法正确处理缺失 Range 的请求，导致视频无法播放。

真机需要 Range 请求的原因

微信小程序真机的 <video> 组件依赖 Range 请求以支持以下功能：

  • 渐进式加载：分段加载视频以优化缓冲和内存管理。
  • 拖拽进度条：支持用户快进、快退操作。
  • 性能优化：真机资源有限，无法一次性加载整个视频。
  • 用户体验：支持即时播放，无需等待整个视频下载完成。

解决方案

以下是优化微信小程序 <video> 组件播放视频的步骤：

1. 确保正确的 Content-Type

服务端响应头需返回正确的视频 MIME 类型，例如：

1
Content-Type: video/mp4
  • 检查服务端是否正确设置了 Content-Type，避免使用不标准的 MIME 类型（如 application/octet-stream）。

2. 检查并优化 Response Headers

  • 移除不必要的响应头（如无关的 Cache-Control 或自定义头）。
  • 如果服务端不支持 Range 请求，需在后端添加对 Range 请求的支持。
  • 示例：为真机请求添加默认 Range 请求头（bytes=0-65535）以获取视频元数据。

3. 验证域名和协议

  • 确保视频资源使用 HTTPS 协议。
  • 在小程序后台（“开发 -> 开发设置 -> 服务器域名”）中配置合法的视频资源域名。

4. 确保视频编码格式兼容

  • 微信小程序对视频格式要求严格，推荐使用 H.264 编码的 MP4 格式。
  • 使用 FFmpeg 转换视频格式：
    1
    ffmpeg -i input.mov -vcodec h264 -acodec aac output.mp4
  • 验证视频是否符合小程序的编码要求，避免使用不兼容的编码格式（如 H.265）。

5. 使用 wx.downloadFile 预下载视频

通过 wx.downloadFile API 下载视频到临时路径后播放，避免直接使用 OSS 地址可能带来的问题：

1
2
3
4
5
6
7
8
9
10
11
wx.downloadFile({
  url: 'https://your-domain.com/video.mp4',
  success: res => {
    if (res.statusCode === 200) {
      this.setData({ videoSrc: res.tempFilePath });
    }
  },
  fail: err => {
    console.error('下载视频失败:', err);
  }
});

在 WXML 中使用：

1
<video src="{{videoSrc}}" controls />

6. 优化服务端代码(中间件)

以下是优化后的服务端代码，用于处理 Range 请求并确保真机兼容性：

import { REMOTE_API_CONFIG } from "@/config/orginone";
import { NextRequest, NextResponse } from "next/server";

export async function GET(req: NextRequest, { params }: { params: Promise<{ path: string[] }> }) {
  const { path } = await params;
  const targetUrl = `${REMOTE_API_CONFIG.baseUrl}/${path.join("/")}`;

  // 获取 Range 请求头
  const range = req.headers.get("range");
  console.log("Range request:", range || "No range");

  // 构建请求头
  const requestHeaders: HeadersInit = {
    "User-Agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1",
    "Accept": "*/*",
    "Accept-Encoding": "identity", // 禁用压缩以确保兼容性
  };

  // 为真机添加默认 Range 请求
  if (!range) {
    requestHeaders["Range"] = "bytes=0-65535";
    console.log("Added default range for mobile: bytes=0-65535");
  } else {
    requestHeaders["Range"] = range;
  }

  // 发起请求
  const resp = await fetch(targetUrl, {
    headers: requestHeaders,
  });

  // 检查响应状态
  if (!resp.ok) {
    console.error(`Failed to fetch video: ${resp.status}`);
    return new NextResponse("Failed to fetch video", { status: resp.status });
  }

  // 设置响应头
  const headers = new Headers(resp.headers);
  headers.set("Content-Type", "video/mp4"); // 确保正确的 MIME 类型

  return new NextResponse(resp.body)
}

发表于

Next.js App Router 特殊文件大全（Next.js 15 最新）

在 Next.js App Router 中，有一些文件名具有特殊含义，只要放在 app 目录的特定位置，Next.js 就会自动识别并应用对应功能。
本文将系统整理这些特殊文件的作用、使用方式和注意事项。

1. page.tsx / page.jsx

作用：定义当前路由的页面内容。

使用方法：

1
2
3
export default function Page() {
  return <h1>首页</h1>;
}

注意事项：
- 每个目录只能有一个 page.tsx。
- 必须是默认导出（default export）。
- 与 layout.tsx 搭配可实现共享布局。

2. layout.tsx

作用： 定义当前路由及其子路由的共享布局。

使用方法：
1
2
3
4
5
6
7
8
9
10
11
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header>公共头部</header>
        {children}
        <footer>公共底部</footer>
      </body>
    </html>
  );
}

注意事项：
- 接收 children 属性。
- 可嵌套，形成分层布局。
- 元数据可在 layout.tsx 中配置，作用于所有子页面。

3. template.tsx

作用： 类似布局，但不会缓存，每次导航都会重新渲染。

使用场景：

  • 需要强制刷新 UI 状态的布局，如动画过渡页面。
1
2
3
export default function Template({ children }: { children: React.ReactNode }) {
  return <div className="fade">{children}</div>;
}

注意事项：

  • 与 layout.tsx 不同，template.tsx 不会在客户端保留状态。
  • 适合做页面切换动画或临时状态隔离。

4. not-found.tsx

作用： 定义当前路由下的 404 页面。
1
2
3
export default function NotFound() {
  return <h2>页面不存在</h2>;
}

注意事项：
- 只影响所在目录及子路由。
- 可在代码中调用 notFound() 来触发。

5. error.tsx

作用： 捕获并渲染当前路由的运行时错误。
1
2
3
4
5
6
7
8
9
10
"use client";

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (
    <div>
      <h2>出错了</h2>
      <button onClick={() => reset()}>重试</button>
    </div>
  );
}

注意事项：
- 必须是客户端组件（”use client”）
- reset() 可重新渲染页面

6. loading.tsx

作用： 定义当前路由的加载状态 UI。
1
2
3
export default function Loading() {
  return <p>加载中...</p>;
}

注意事项：
- 会在页面加载或切换时自动显示。
- 适合与 流式渲染（Streaming） 搭配。

7. default.tsx

作用： 用于并行路由中定义默认子路由。

1
2
3
export default function Default() {
  return <p>这是默认视图</p>;
}

注意事项：

  • 仅用于并行路由 (folder) 机制。

8. route.ts / route.js

作用： 定义 API 路由（取代 pages/api）。

1
2
3
export async function GET() {
  return Response.json({ message: 'Hello API' });
}

注意事项：

  • 可导出 GET, POST, PUT, DELETE 等方法。
  • 返回 Response 对象。

9. head.tsx

作用： 自定义 HTML 内容。

1
2
3
4
5
6
7
8
export default function Head() {
  return (
    <>
      <title>我的网站</title>
      <meta name="description" content="描述内容" />
    </>
  );
}

注意事项：

  • 仅在当前路由及子路由生效。
  • 不推荐与 metadata API 混用。

10. metadata API（非文件，但常用）

作用： 配置页面 SEO 信息。
1
2
3
4
export const metadata = {
  title: '产品详情',
  description: '这是产品详情页'
};

11. opengraph-image.tsx / twitter-image.tsx

作用： 动态生成社交分享图片。

1
2
3
4
5
6
7
import { ImageResponse } from 'next/og';

export const size = { width: 1200, height: 630 };

export default function Image() {
  return new ImageResponse(<div>分享图</div>, { width: 1200, height: 630 });
}

12. icon.tsx / apple-icon.tsx / favicon.ico

作用： 定义网站图标。
1
2
3
export default function Icon() {
  return <svg>...</svg>;
}

13. manifest.webmanifest

作用： PWA 应用清单。

⸻

总结

文件名 作用
page.tsx 页面内容
layout.tsx 共享布局
template.tsx 非缓存布局
not-found.tsx 404 页面
error.tsx 错误处理
loading.tsx 加载状态
default.tsx 并行路由默认页
route.ts API 路由
head.tsx 自定义 head
opengraph-image.tsx 分享图片
icon.tsx 网站图标
manifest.webmanifest PWA 配置

发表于

Next.js 链接与导航

在 Next.js 中，导航分为两大类：

  1. 声明式导航（通过 <Link> 组件）
  2. 命令式导航（通过 useRouter API）

1. 声明式导航

使用 next/link 实现页面跳转：

1
2
3
4
5
6
7
8
import Link from 'next/link';

// 普通跳转
<Link href="/blog">Blog</Link>

// 替换当前历史记录（不会新增 history 记录）
<Link href="/blog" replace>Blog</Link>

2. 获取当前路径

在客户端组件中，可以用 usePathname 获取当前路由路径：
1
2
3
4
5
6
7
8
'use client';

import { usePathname } from 'next/navigation';

export default function PathInfo() {
  const pathname = usePathname();
  return <p>当前路径：{pathname}</p>;
}

3. 参数（params）与搜索参数（searchParams）

在 Next.js 的 page.tsx 中，可以通过 props 获取路由参数和查询参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 服务端组件写法
export default async function Article({
  params,
  searchParams,
}: {
  params: Promise<{ articleId: string }>;
  searchParams: Promise<{ lang?: 'zh' | 'en' }>;
}) {
  const { articleId } = await params;
  const { lang = 'en' } = await searchParams;

  return <div>文章 ID: {articleId}，语言: {lang}</div>;
}

// 客户端组件写法
'use client';
import { use } from 'react';

export default function Article({
  params,
  searchParams,
}: {
  params: Promise<{ articleId: string }>;
  searchParams: Promise<{ lang?: 'zh' | 'en' }>;
}) {
  const { articleId } = use(params);
  const { lang = 'en' } = use(searchParams);

  return <div>文章 ID: {articleId}，语言: {lang}</div>;
}
参数说明
  • params
    动态路由参数，如 /articles/123 中的 articleId=123
  • searchParams
    查询参数，如 /articles/123?lang=zh 中的 lang=zh
  • 注意：
  • page.tsx 可以访问 params 和 searchParams
  • layout.tsx 只能访问 params，无法访问 searchParams

4. 命令式导航（程序化导航）

在客户端组件中使用 useRouter 实现导航：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
'use client';

import { useRouter } from 'next/navigation';

export default function Navigator() {
  const router = useRouter();

  return (
    <div>
      <button onClick={() => router.push('/path')}>跳转</button>
      <button onClick={() => router.replace('/path')}>替换跳转</button>
      <button onClick={() => router.back()}>返回</button>
      <button onClick={() => router.refresh()}>刷新</button>
    </div>
  );
}

常用方法

  • router.push(path)：跳转到新路径
  • router.replace(path)：替换当前路径（不新增历史记录）
  • router.back()：返回上一页
  • router.refresh()：刷新当前页面数据

总结

  • 静态跳转 用
  • 动态跳转 用 useRouter
  • params 获取动态路由参数
  • searchParams 获取查询参数（仅在页面可用）
  • 布局组件（layout）无法获取查询参数

发表于

路由元数据（Metadata API）

Next.js 中的 元数据 API 是一个非常强大的功能，它允许我们为每个页面定义元数据，从而在被 搜索引擎索引 或 社交平台分享 时，有更好的展示效果。

在 Next.js 中使用元数据的两种方式

你可以在 layout.tsx 或 page.tsx 中定义元数据，方式有两种：

  1. 静态元数据对象
  2. 动态的 generateMetadata 函数

元数据规则

  • layout.tsx 和 page.tsx 都可以导出元数据：
    • 布局元数据（layout）会应用到该布局下的所有页面
    • 页面元数据（page）只应用于该页面
  • 元数据遵循 自上而下 的顺序，从根布局开始
  • 当多个层级都定义了相同字段时，会 合并 元数据：
    • 页面元数据 的优先级高于 布局元数据

静态元数据对象示例

1
2
3
4
5
// page.tsx
export const metadata = {
  title: '首页',
  description: '这是网站的首页描述',
};
动态生成元数据示例
1
2
3
4
5
6
7
8
9
10
11
// page.tsx
import { Metadata } from 'next';

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const id = params.productId;

  return {
    title: `产品 ${id}`,
    description: `这是产品 ${id} 的详情页`,
  };
}

注意：

  1. 同一路由 不能同时导出 metadata 对象和 generateMetadata 函数
  2. 客户端组件（带 “use client”）无法使用元数据 API

元数据合并规则

假设：

  • 根布局 app/layout.tsx：
    • export const metadata = { title: ‘网站’ };
  • 页面 app/about/page.tsx：
    • export const metadata = { title: ‘关于我们’ };

最终页面标题为 “关于我们”，因为 页面元数据优先级更高。

元数据 title 字段的高级用法

title 可以是 字符串 或 对象：

1
2
3
4
5
6
7
8
9
10
11
12

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    default: '默认标题',         // 没有设置时使用
    template: '%s | 安全生产',   // 模板格式：页面标题 | 安全生产
    absolute: '',               // 绝对覆盖，优先级最高
  },
  description: '页面描述内容',
};

总结

  • 静态或动态二选一
  • 页面元数据优先级最高
  • 元数据从根到叶子合并

发表于

基础布局

布局是在应用程序的多个页面之间共享的 UI。 layout.tsx 文件会用来包裹页面的内容，它接受一个 children 属性，并在布局中渲染。

根布局的示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// app/layout.tsx
export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

文件结构示例：

1
2
3
4
app
 ├─ layout.tsx       # 根布局
 └─ about
     └─ page.tsx     # about 页面

渲染流程：
about/page.tsx 内容 → app/layout.tsx 布局中渲染

嵌套布局

如果在某个子目录（如 about）中创建一个 layout.tsx，
则该布局会只作用于该目录及其子路由。

显示层级：

about/page.tsx → about/layout.tsx → app/layout.tsx

这样可以为某些页面单独定制布局，而不影响全局。

多个根布局

Next.js 支持 路由分组 (Route Groups) 来实现多个根布局。
1. 创建一个路由分组目录（名称用括号括起来，如 (admin)）
2. 在分组目录下添加自己的 layout.tsx，该布局将只作用于分组内的页面。

示例结构：

1
2
3
4
5
6
7
8
9
10
app
 ├─ (admin)
 │   ├─ layout.tsx     # admin 专属布局
 │   └─ dashboard
 │       └─ page.tsx
 └─ (shop)
     ├─ layout.tsx     # shop 专属布局
     └─ products
         └─ page.tsx

这样 (admin) 和 (shop) 互不干扰，各自拥有不同的根布局。

总结

  • layout.tsx 用于定义布局，接收 children。
  • 根布局放在 app/layout.tsx。
  • 嵌套布局放在子目录中，只影响该目录。
  • 使用路由分组可实现多个独立的根布局。

发表于

Next.js 路由系统（约定式路由）

Next.js 的路由系统基于 约定大于配置 原则，开发者只需要将页面组件放在特定目录下，即可自动生成对应的路由，无需手动配置路由表。

路由基本约定

  1. 所有路由文件必须放在 app/ 目录下（App Router 模式）。
  2. 每个文件夹表示一个 URL 路径段。
  3. 路由页面文件必须命名为 page.tsx 或 page.js。
  4. 每个页面组件将自动作为一个路由。

示例

app/
├── page.tsx → 路由路径 /
├── about/
│ └── page.tsx → 路由路径 /about
└── contact/
└── page.tsx → 路由路径 /contact

动态路由

使用 [] 包裹文件夹名来创建动态路由参数。

示例

app/
└── products/
└── [productId]/
└── page.tsx → 路由路径 /products/:productId

1
2
3
4
// products/[productId]/page.tsx
export default function ProductPage({ params }: { params: { productId: string } }) {
  return <div>Product ID: {params.productId}</div>;
}

嵌套动态路由

支持多级动态参数结构。
app/
└── products/
└── [productId]/
├── page.tsx → /products/:productId
└── [reviewId]/
└── page.tsx → /products/:productId/:reviewId

捕获所有路由段（Catch-All Routes）

使用 […slug] 语法捕获任意数量的路径段。

示例

app/
└── blog/
└── […slug]/
└── page.tsx → /blog/* 动态匹配所有子路径

1
2
3
4
// blog/12
export default function CatchAllPage({ params }: { params: { slug: string[] } }) {
  return <div>路径段: {params.slug.join(' / ')}</div>;
}

404 页面（Not Found）

全局 404 页面
app/not-found.tsx

你也可以为每个路由子目录创建局部 404 页面：
app/
└── about/
├── not-found.tsx
└── page.tsx

在 not-found.tsx 中定义页面不存在时的 UI：

1
2
3
export default function NotFound() {
  return <h2>此页面不存在</h2>;
}

主动触发 404
你可以通过 notFound() 方法主动触发 404：

1
2
3
4
5
6
import { notFound } from 'next/navigation';

export default function Page({ params }) {
  if (!data) return notFound();
  return <div>正常页面内容</div>;
}

私有文件夹（下划线命名）

使用下划线 _ 开头的文件夹（如 _components/）不会被视为路由路径。

  • 通常用于存放共享组件、工具函数、布局模板等。
  • 如果确实需要使用下划线路径（不推荐），需通过 %5f URL 编码。

路由分组（Route Groups）

使用 括号 () 包裹文件夹名 创建逻辑上的路由分组，不影响实际 URL 路径结构。

app/
└── (auth)/
└── login/
└── page.tsx → /login

小结

功能 语法/文件名 示例路径
静态路由 page.tsx /about
动态路由 [id]/page.tsx /products/123
嵌套路由 子目录结构 /products/123/reviews/1
捕获全部路由 […slug] /blog/a/b/c
404 页面 not-found.tsx /about/not-found.tsx
路由分组 (group)/ /login from (auth)/login
私有目录 _components/ 不作为路由路径

发表于

微信小程序关联服务号发送模板消息全流程

前言

由于微信小程序模板消息有行业限制，且长期模板申请门槛较高，因此在某些业务场景下，使用小程序自身模板消息并不灵活。

针对这种情况，可以通过“微信开放平台”关联小程序与服务号的方式，由服务号代替小程序发送模板消息，从而实现消息通知。

前置准备

要实现小程序与服务号的消息打通，必须完成以下认证操作：

  1. 微信服务号认证：费用 ¥300 / 年；
  2. 微信小程序认证：费用 ¥300 / 年；
  3. 微信开放平台认证：费用 ¥300 / 年。

⚠️ 注意：三个认证缺一不可。

微信开放平台绑定操作

  1. 登录 微信开放平台，完成认证；
  2. 在“账号管理”中，绑定你的 微信小程序 和 服务号。

绑定成功后，两个账号将共享同一 UnionID，可实现用户身份互通。

开放平台绑定示意图

核心流程详解

  1. 用户在小程序中登录，获取 UnionID；
  2. 通过 UnionID 查询对应的 服务号 openid；
  3. 服务号根据 openid，调用消息推送接口发送模板消息。

流程图如下：

核心流程图解

核心接口文档参考

总结

通过微信开放平台绑定小程序与服务号，并结合 UnionID 机制，可以灵活实现小程序与服务号间的消息互通。
这种方式适合对消息通知有较高需求的应用场景，是微信官方推荐的解决方案之一。

发表于

微信消息推送的几种方式

一、推送方式及对比

微信平台支持多种消息推送方式，主要包括以下三种：

推送方式 使用平台 消息类型 用户接受程度
小程序推送 微信小程序 模板消息 / 服务通知 ★★★★★（强提醒）
服务号推送 微信服务号 模板消息 ★★★★☆
公众号推送 微信订阅号 图文消息 / 通知 ★★★☆☆

✅ 通知强提醒等级排序：服务通知 > 服务号 > 公众号

二、推送效果截图

1. 服务通知截图

服务通知示例

2. 服务号通知截图

服务号示例

3. 公众号通知截图

公众号示例

三、小程序消息推送说明

小程序支持不同类型的消息模板推送，其模板分类与使用要求如下：

小程序模板分类说明

类型 类目要求 使用限制
新版一次性订阅消息 仅支持电商等特定类目 用户订阅后可发送 1 条消息，无时间限制
一次性订阅消息 一般类目均可使用 同上
长期订阅消息 仅限政务民生、医疗、教育等公共服务类目 当前使用方式未公开
设备订阅消息 公共服务类目，需接入硬件设备支持 每日对单一用户可发送 1 条消息

📌 说明：新版模板会优先出现在符合类目要求的小程序的公共模板库中。

模板管理界面示意图

小程序订阅模板示意

小程序推送使用场景说明

  • 基础订阅场景
    用户每完成一次订阅授权，开发者即可下发一条消息，没有时间限制。即使订阅与实际推送之间间隔很久，也不会失效。

  • 支付关联场景
    用户在小程序内完成微信支付后，开发者可基于支付订单触发服务通知，每笔订单最多可下发 3 条消息，该额度与普通订阅消息互不冲突。

四、公众号消息推送说明

公众号消息类型对比

公众号类型 模板消息支持 限制条件
订阅号 ❌ 不支持模板消息 仅支持图文或图文卡片消息
服务号 ✅ 支持模板消息 需企业或组织认证

💡 服务号每月可主动向用户推送 4 条模板消息，适合企业级服务与重要通知场景。

五、核心流程图

以下为小程序/服务号消息推送核心流程示意图：

核心流程图

六、总结对比

项目 小程序订阅消息 服务号模板消息 公众号图文推送
接收强度 ★★★★★ ★★★★☆ ★★★☆☆
适用场景 支付提醒、任务提醒、系统通知等 用户服务通知 日常图文传播
限制 需用户主动订阅 企业认证 用户关注即可
模板多样性 模板需符合类目限制 模板较自由 图文内容为主

如需集成微信消息推送，请结合业务所属类目、目标用户行为和提醒紧急程度，选择最合适的推送方式，以实现更高的用户触达率和业务转化效果。

发表于

问题：

  • 安装了SCSS IntelliSense ，输入 $,再选择，会多一个 $符号，如： font-size:$$font-size-xs。有没有办法解决？

解决

  1. 终端输入命令，打开services文件夹 open /Users/apple/.vscode/extensions/mrmlnc.vscode-scss-0.10.0/out/unsafe/services
  2. 修改 parser.js 文件中的 findDocumentSymbols 方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
   async function findDocumentSymbols(document, ast) {
    const symbols = ls.findDocumentSymbols(document, ast);
    const links = await findDocumentLinks(document, ast);
    const result = {
        functions: [],
        imports: convertLinksToImports(links),
        mixins: [],
        variables: []
    };
    for (const symbol of symbols) {
        const position = symbol.location.range.start;
        const offset = document.offsetAt(symbol.location.range.start);
        if (symbol.kind === vscode_css_languageservice_1.SymbolKind.Variable) {
            result.variables.push({
                name: symbol.name.replace("$", ""), // 关键点
                offset,
                position,
                value: getVariableValue(ast, offset)
            });
        }
        else if (symbol.kind === vscode_css_languageservice_1.SymbolKind.Method) {
            result.mixins.push({
                name: symbol.name,
                offset,
                position,
                parameters: getMethodParameters(ast, offset)
            });
        }
        else if (symbol.kind === vscode_css_languageservice_1.SymbolKind.Function) {
            result.functions.push({
                name: symbol.name,
                offset,
                position,
                parameters: getMethodParameters(ast, offset)
            });
        }
    }
    return result;
}

发表于

1. 安装 Homebrew

如果还没有安装 Homebrew，可以使用以下命令安装 Homebrew：

1
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

你可以访问 Homebrew 的 官方网站 了解更多信息。

2. 使用 Homebrew 安装 MongoDB

a. 添加 MongoDB 官方 Homebrew Tap

首先，运行以下命令来添加 MongoDB 官方的 Homebrew Tap（软件源）：

1
brew tap mongodb/brew

b. 安装 MongoDB 社区版

接下来，使用 Homebrew 来安装 MongoDB 社区版：

1
brew install mongodb-community@6.0

这里的 @6.0 是 MongoDB 的版本号，你可以根据需要替换为其他版本。

3. 启动 MongoDB 服务

安装完成后，可以通过 Homebrew 启动 MongoDB：

1
brew services start mongodb/brew/mongodb-community

这会将 MongoDB 作为 macOS 服务启动，并且会在每次系统启动时自动启动。

如果你只想手动启动 MongoDB 而不让它自动运行，可以使用以下命令：

1
mongod --config /usr/local/etc/mongod.conf

4. 检查 MongoDB 是否运行

你可以运行以下命令，查看 MongoDB 服务是否已经成功启动：

1
brew services list

MongoDB 的状态应该显示为 “started”。

5. 连接 MongoDB

MongoDB 服务器启动后，你可以通过 mongo 命令连接到 MongoDB 的命令行工具：

1
mongo

如果一切正常，你现在应该已经连接到 MongoDB 的 shell，可以开始使用数据库了。

6. 停止 MongoDB 服务

如果你需要停止 MongoDB 服务，可以运行以下命令：

1
brew services stop mongodb/brew/mongodb-community

这样，你就可以在 Mac 上成功安装和运行 MongoDB。如果遇到任何问题，请确保 Homebrew 和 MongoDB 的安装路径正确，并查看 Homebrew 提供的安装日志。

0%