mobile-landing：基于 Astro 的现代化移动应用落地页模板

本文介绍 mobile-landing，一个基于 Astro + React + TypeScript 构建的现代化移动应用落地页模板。该项目提供了完整的落地页解决方案，包含响应式设计、主题切换、截图画廊、用户评价等核心功能，帮助开发者快速搭建专业的应用展示页面。

项目简介

mobile-landing 是一个开源的移动应用落地页模板，由 Bohdan 开发维护。截至目前，该项目在 GitHub 上已获得 183 stars 和 27 forks，主要使用 TypeScript (77.9%) 和 Astro (18.7%) 编写，采用 MIT 许可证开源。

该项目专为移动应用设计，提供了优雅现代的界面和流畅的用户体验，特别适合用于展示 iOS/Android 应用的核心功能和特色。

核心特性

特性	描述
📱 响应式设计	完美适配移动端、平板和桌面设备
🖼️ 截图画廊	iPhone/iPad 预览展示，支持灯箱效果
🎨 现代 UI	简洁设计，集成 Framer Motion 动画效果
🌗 主题切换	支持亮色/暗色/系统模式，自动持久化
⚡ 极速性能	基于 Astro 构建，优化加载速度
🔍 SEO 就绪	完整的元标签和语义化 HTML 结构
📊 评价系统	星级评分和用户 testimonials 展示
🍎 App Store 集成	自动从 Apple App Store 获取应用数据

技术栈

Astro - 高性能静态站点生成器
React - 组件化 UI 开发
TypeScript - 类型安全的 JavaScript
Tailwind CSS - 实用优先的 CSS 框架
Framer Motion - React 动画库

安装指南

前置要求

Node.js 20+
npm、yarn 或 pnpm

安装步骤

bash

# 克隆仓库
git clone https://github.com/bohd4nx/mobile-landing.git
cd mobile-landing

# 安装依赖
npm install

# 启动开发服务器
npm run dev

开发服务器运行在 http://localhost:4321 🎉

构建与部署

bash

# 生产构建
npm run build

# 预览构建结果
npm run preview

项目结构

text

mobile-landing/
├── public/              # 静态资源
│   └── assets/          # 图片、图标等
├── src/
│   ├── components/      # React 组件
│   ├── layouts/         # 页面布局
│   ├── pages/           # 页面路由
│   │   ├── privacy/     # 隐私政策页面
│   │   └── terms/       # 服务条款页面
│   └── styles/          # 全局样式
├── astro.config.mjs     # Astro 配置
├── tailwind.config.cjs  # Tailwind 配置
└── package.json

自定义配置

所有应用配置集中在统一的配置文件中，你可以轻松修改：

应用名称、描述、图标
App Store 应用 ID
主题颜色
导航菜单
页面内容

法律页面

项目内置了隐私政策和服务条款页面模板：

隐私政策: src/pages/privacy/privacy.md
服务条款: src/pages/terms/terms.md

支持完整的 Markdown 语法，自动应用样式。

使用场景

移动应用官网 - 为 iOS/Android 应用创建专业的展示页面
产品发布页 - 新产品上线时的宣传落地页
应用推广 - 配合广告投放的专用转化页面
作品集展示 - 开发者展示移动开发作品

在线演示

访问官方演示站点查看实际效果：

🌐 https://landing.bohd4n.dev/

项目链接

GitHub 仓库: https://github.com/bohd4nx/mobile-landing
在线演示: https://landing.bohd4n.dev/
作者 Telegram: https://t.me/bohd4n

许可证

MIT License - 详见 LICENSE 文件

⭐ 如果这个项目对你有帮助，请在 GitHub 上给它一个 Star！

字节笔记本