# 代码模板

**Repository Path**: digital-artisan/code-template

## Basic Information

- **Project Name**: 代码模板
- **Description**: 提供常用编程语言的基础代码模板，帮助开发者快速搭建项目框架，提高开发效率。目前包含uniapp
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-04-01
- **Last Updated**: 2026-04-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# Code Template

基于 uni-app 的代码模板项目，提供完整的前端开发架构。

## 项目简介

这是一个基于 DCloud [uni-app](https://uniapp.dcloud.io) 框架开发的多端应用模板，支持同时运行于微信小程序、H5、各端 App 等平台。项目集成了 uni-ui 组件库、常用工具模块和业务接口，提供了规范化的开发结构以提升开发效率。

## 技术栈

- **框架**: uni-app (Vue 3 / Vue 2)
- **UI 组件**: uni-ui
- **网络请求**: 自封装 request 模块
- **状态管理**: uni-app 内置
- **构建工具**: HBuilderX / Vite

## 目录结构

```
applet/
├── api/                    # 接口模块
│   ├── modules/
│   │   ├── common.js      # 通用接口
│   │   ├── test.js        # 测试接口
│   │   └── user.js        # 用户接口
│   └── index.js           # 接口入口
├── pages/                  # 页面目录
│   └── index/
│       └── index.vue      # 首页
├── static/                 # 静态资源
│   ├── customicons.ttf    # 自定义字体图标
│   └── *.png             # 图片资源
├── uni_modules/            # uni-ui 组件
├── utils/                  # 工具模块
│   ├── api.js             # 接口配置
│   ├── auth.js           # 权限模块
│   ├── config.js         # 配置模块
│   ├── debounce.js       # 防抖节流
│   ├── env.js            # 环境变量
│   ├── example.js       # 示例代码
│   ├── index.js         # 工具入口
│   ├── loading.js       # Loading/Toast
│   ├── request.js      # 请求模块
│   ├── router.js       # 路由模块
│   └── storage.js       # 存储模块
├── App.vue               # 应用入口
├── main.js              # 入口文件
├── manifest.json        # 应用配置
├── pages.json          # 页面路由配置
└── index.html          # H5 入口
```

## 快速开始

### 开发环境

1. 下载并安装 [HBuilderX](https://www.dcloud.io/hbuilderx.html)
2. 导入本项目到 HBuilderX
3. 点击运行 → 选择目标平台

### 命令行开发

```bash
# 安装依赖
npm install

# 开发运行
npm run dev:%platform%
# 例如: npm run dev:mp-weixin

# 构建发布
npm run build:%platform%
# 例如: npm run build:mp-weixin
```

支持的 platform: `mp-weixin` (微信小程序)、`h5` (Web)、`app` (App)、`mp-alipay` (支付宝小程序)

## 工具模块

### 请求模块 (request.js)

封装了 uni.request，提供拦截器功能：

```javascript
import { http } from '@/utils/request.js'

// GET 请求
const data = await http.get('/api/test')

// POST 请求
const data = await http.post('/api/login', { name: 'test' })
```

### 配置模块 (config.js)

```javascript
import { config } from '@/utils/config.js'

// 获取上传地址
const uploadUrl = config.uploadUrl
```

### 存储模块 (storage.js)

```javascript
import { storage } from '@/utils/storage.js'

// 设置缓存
storage.set('token', 'xxx')

// 获取缓存
const token = storage.get('token')

// 移除缓存
storage.remove('token')
```

### 防抖节流 (debounce.js)

```javascript
import { debounce, throttle } from '@/utils/debounce.js'

// 防抖函数
const debouncedFn = debounce(() => {
  console.log('执行')
}, 300)

// 节流函数
const throttledFn = throttle(() => {
  console.log('执行')
}, 300)
```

### 环境变量 (env.js)

根据不同平台切换环境配置：

```javascript
import { envConfig } from '@/utils/env.js'

const apiBaseUrl = envConfig.apiBaseUrl
```

## uni-ui 组件使用

项目已集成 uni-ui 组件库，可直接使用：

```html