# uc-miniapp

**Repository Path**: sonny_java/uc-miniapp

## Basic Information

- **Project Name**: uc-miniapp
- **Description**: 在微信小程序开发中，我们常常陷入重复搭建基础框架的困境。为此，我们精心打造了基于Uniapp和ColorUI的微信小程序快速开发框架uc-miniapp，旨在为开发者提供一套开箱即用的解决方案。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-07-04
- **Last Updated**: 2026-07-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# uc-miniapp 一个快速开发微信小程序的简单基础框架

> **大浪淘沙 经典咏流传**
> 一个让微信小程序开发事半功倍的极简解决方案

在微信小程序开发中，我们常常陷入重复搭建基础框架的困境。为此，我们精心打造了基于 **Uniapp** 和 **ColorUI** 的快速开发框架，旨在为开发者提供一套开箱即用的解决方案。

**项目地址**：https://gitee.com/mask_lxj/uc-miniapp
## 核心技术

- Uniapp：https://uniapp.dcloud.net.cn/quickstart.html
- ColorUI：https://miren.lovemi.ren/colorui-document/
- HBuilder X：https://dcloud.io/hbuilderx.html
- 微信小程序开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/

## 框架亮点

### 🚀 **5分钟快速启动**

- **零基础配置**：只需修改简单配置，立即运行完整小程序
- **开箱即用**：基础页面、核心功能全部内置，专注业务开发
- **模块化设计**：按需取用，自由扩展

### 🌟 **经典页面架构**

<center class="half">
<img src="./static/readme/page_home.png" style="zoom:40%;" />
<img src="./static/readme/page_user.png" style="zoom:40%;" />
<img src="./static/readme/page_login.png" style="zoom:40%;" />
</center>

### 🔑 **一键授权登录**

```
import request from './request.js';

// 一键授权登录
export const wxLogin = (params) => {
	return request({
		url: '/auth/login',
		method: 'post',
		data: params
	});
};
```

### 🧩 **功能清单**

| 模块         | 功能                | 状态 |
| :----------- | :------------------ | :--- |
| **核心框架** | 统一配置管理        | ✅    |
|              | 路由封装            | ✅    |
| **网络请求** | 统一请求拦截器      | ✅    |
|              | 自动错误处理        | ✅    |
| **用户系统** | 微信一键授权登录    | ✅    |
|              | 用户信息查询        | ✅    |
| **UI组件**   | ColorUI组件深度集成 | ✅    |
|              | 常用业务组件封装    | ✅    |
| **示例页面** | 首页模板            | ✅    |
|              | 个人中心页          | ✅    |
|              | 登录/注册页         | ✅    |

## 🚦 快速开始

> 视频教程：https://b23.tv/IKIqHuv

### 1.打开HBuilder X，克隆uc-miniapp项目

```
git clone https://gitee.com/mask_lxj/uc-miniapp.git
```

### 2.修改相关配置修改

打开 `manifest.json`修改sdk微信小程序相关配置：

```json
/* SDK配置 */
"sdkConfigs" : {
	"oauth" : {
		"weixin" : {
			"appid" : "微信公众平台获取appid",
			"appsecret" : "微信公众平台获取appsecret",
			"UniversalLinks" : ""
		}
	}
}
```

打开`utils/config.js`修改后台接口地址相关配置：

```js
// 本地环境配置
const BASE_URL = "http://localhost:8000";

// 线上环境配置
// const BASE_URL = "";

// 登录相关配置(根据后台接口可选配置)
const authType = 'WX';
const clientId = 'ef51c9a3e9046c4f2ea45142c8a8344a';

export default {
	BASE_URL: BASE_URL,
	authType: authType,
	clientId: clientId
}
```

### 3.运行项目 或 运行到微信开发者工具

```
# 微信开发者工具中运行
npm run dev:mp-weixin
```

## 🛠 核心功能

### 1.统一请求封装

```
// 引入接口
import { userInfo } from '@/utils/api.js';

// 直接使用
const userRes = await userInfo();
```

### 2.主题配置系统

scss

```
<style>
/*每个页面公共css */
@import 'colorui/main.css';
@import 'colorui/icon.css';

page {
  width: 100%;
  height: 100%;
  background-color: white;
}
</style>
```

## 📂 目录结构

以下是项目主要目录

```
├── apidoc             # 接口文档
├── pages              # 页面目录
│   ├── index          # 首页
│   ├── user           # 我的页面
│   └── login          # 登录页
├── colorui            # colorui组件 
├── utils              # 工具库
│   ├── api.js         # API模块
│   ├── request.js     # 网络请求
│   └── config.js      # 全局配置文件
├── manifest.json	   # Uniapp配置文件
```

## 🤝 加入贡献

欢迎提交PR或Issue！我们特别需要：

- 更多精美页面模板
- 常用业务组件
- 国际化解决方案

## 📜 版权说明

- uc-miniapp生态技术框架全系版本采用 Apache License2.0协议
- 代码可用于个人项目等接私活或企业项目脚手架使用，uc-miniapp全系开源版完全免费
- 二次开发如用于开源竞品请先联系群主沟通，禁止任何变相的二开行为，未经审核视为侵权
- 请不要删除和修改uc-miniapp源码头部的版权与作者声明及出处

## 💖 赞赏作者
- 更多开源技术讨论，可以关注作者**微信公众号"小洛十技"**

- 如果觉得项目还不错 或 者对你的开发有一定帮助，可以打赏作者喝杯奶茶哦🧋
<img src="./static/readme/author.png" style="zoom: 25%;" />