# fast-mobile-app

**Repository Path**: liuxiaojinla/fast-mobile-app

## Basic Information

- **Project Name**: fast-mobile-app
- **Description**: fast-mobile-app 是一个基于 uni-app 开发的移动应用的框架，它抽离和封装了日常开发中的80%的常规业务逻辑，在开发中无需额外编写复杂难以维护的业务逻辑， 为你的应用提供了一整套健壮的能力，在1分钟内即可拥有一套完整的应用
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: v3
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 63
- **Forks**: 35
- **Created**: 2019-01-30
- **Last Updated**: 2026-02-05

## Categories & Tags

**Categories**: weixin-lapp

**Tags**: uni-app, 多端开发, 小程序

## README

# FastMobileApp

完全基于 UniApp 开发、拒绝臃肿、全新的开发体验、符合现代化编程方式

## 特性

- ⚡️ [Vue 3](https://github.com/vuejs/core), [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.io/), [esbuild](https://github.com/evanw/esbuild) - 就是快！

- 🔧 [ESM 优先](https://github.com/uni-helper/plugin-uni)

- 🗂 [基于文件的路由](./src/pages)

- 📦 [组件自动化加载](./src/components)

- 📑 [布局系统](./src/layouts)

- 🎨 [UnoCSS](https://github.com/unocss/unocss) - 高性能且极具灵活性的即时原子化 CSS 引擎

- 😃 [各种图标集为你所用](https://github.com/antfu/unocss/tree/main/packages/preset-icons)

- 🔥 使用 [新的 `<script setup>` 语法](https://github.com/vuejs/rfcs/pull/227)

- 📥 [API 自动加载](https://github.com/antfu/unplugin-auto-import) - 直接使用 Composition API 无需引入

- 🦾 [TypeScript](https://www.typescriptlang.org/) & [ESLint](https://eslint.org/) - 保证代码质量

## 介绍

**fast-mobile-app** 是一个基于 uni-app 开发的移动应用的框架，它抽离和封装了日常开发中的80%的常规业务逻辑，在开发中无需额外编写复杂难以维护的业务逻辑，
为你的应用提供了一整套健壮的能力，在1分钟内即可拥有一套完整的应用

1. 用户授权（底层API优化，并和后端接入进行抽象，后端按照指定的要求处理程序即可）
2. 请求封装（日常开发中最常用的无非就是网络请求和后端进行交互，借鉴Axios设计思想对原始的Http进行封装处理，同时提供一整套请求鉴权处理机制）
3. 多文件上传（多文件上传，再也不不用写太多的代码了，内部目前支持：远程上传、七牛上传驱动，有兴趣的同学可以扩展OSS和COS上传驱动以满足开发中的需求）
8. 日期时间的转换
9. 数据验证（快速验证数据是否合法）

## 软件架构

**遵循配置优先，从繁杂的业务逻辑中解脱您的双手，让更多细节变得清晰可控**，框架本身提供的API是通过服务注册模式完成的， 在任何地方均可使用[API名称]进行使用，如：getUserInfo()

1. 使用 uni-app 作为底层依托可输出多端应用（微信小程序、支付宝小程序、App、H5等）
2. 抽离大量重复且庞杂代码作为核心业务驱动
3. 可根据业务需求随时定制的业务代码
4. 预置大量日常开发中常用的组件
5. 整合高颜值，高效率的小程序组件库（ColorUI）
6. 整合强大的CSS动画库并进行对移动端相关优化（animation.css）
7. 数据模式可以构建复杂的应用

**目录说明**

## 安装教程

## 使用说明

### 配置总览

框架所有的业务配置均在 common/config 目录下。

> [config/app.ts](src/config/app.ts)

```javascript
// 应用基础配置
// 获取配置 config
module.exports = {
	// 应用ID
	accessId: '',
	// 应用密钥
	accessKey: '',
	// 签名类型
	signType: 'md5',

	// 版本号
	version: '1.0',

	// 订阅消息模板ID
	tmplIds: [],

	// 自动订阅模板消息
	autoSubscribeTmplMsg: true,

	// 登录用户缓存标识
	userInfoKey: '__USER_INFO__',

	// 登录用户SessionId标识
	sessionIdKey: '__SESSION__',

	// 登录成功后的回调
	onLogged: function(res) {
		console.info('app.onLogged', res)
	},

	// 登出成功后的回调
	onLogout: function(res) {
		console.info('app.onLogout', res)
	},

	// 当前用户信息发生变更
	onUserChange: function({detail: user}) {
		console.info('user info change:', user);
	},

	// 跳转地址
	onLinkTo: function(url, type) {
	},

	// 腾讯地图key列表
	QQMapKeys: [],

	// 下来刷新完成提示音
	stopPullDownRefreshAudio: '',
};
```

> Http基础配置 [config/http.ts](src/config/http.ts)

```javascript
module.exports = {
	// 默认选项配置
	defaults: {
		// 网络请求基础URL
		baseURL: baseURL,

		// 是否返回原始数据
		returnRaw: false,

		// 是否显示错误提示语
		isShowErrorTips: true,
	},

	// 使用小程序原始登录器
	// #ifdef MP
	login: logins.weapp, // 使用小程序原始登录器
	loginUrl: baseURL + '/weapp_login', // 登录地址
	loginUserInfo: true, // 登录时是否获取用户信息
	// #endif

	// 使用账户登录器
	// #ifdef H5
	login: logins.account, // 使用账户登录
	loginUrl: baseURL + '/login', // 登录地址
	loginPage: '/pages/auth/login', // 自定义登录页面地址
	// #endif

	// 所有请求回调
	onRequest: function(config) {
	},

	// 业务成功码
	successCode: 1,
	// 业务成功处理器（所有通过的业务请求，都会回调此函数）
	onSuccess: function(data, response) {
	},

	// 默认提示语
	loadingText: '请稍后...',
	errorTips: '网络错误，请稍后~', // 默认错误提示语
	loginAuthTips: '此操作需要您授权基本信息', // 授权提示语
	loginAuthFailedTips: '请先授权后，进行重试~', // 授权失败提示语
	loginFailedMsg: '登录失败，请稍后再试~', // 登录失败提示语

	// 登录失效错误码
	loginInvalidCode: -1,
	// 登录最大尝试次数
	loginMaxCount: 1,
	// 登录超时操作
	onLoginTimout: function(config, response) {
		uni.showModal({
			content: '登录超时，请稍后再试~',
			showCancel: false
		});
	},

	// 无权限错误码
	unauthorizedCode: -10,
	// 无权限处理器
	onUnauthorized: function(config, response) {
		http.resolveModal(config)({
			title: '温馨提示',
			content: '暂无权限，详细请查看权限说明？',
			showCancel: true,
			confirmColor: '#2E8B57',
			confirmText: '了解一下',
			success: (res) => {
				if (res.cancel) {
					return;
				}

				uni.navigateTo({
					url: '/pages/auth/unauthorized'
				});
			}
		});
	},

	// 其他业务处理器
	logicErrors: {
		// '40000': function(data, response) { // 数据验证错误
		// }
	},

	// 默认HTTP错误处理器
	statusErrors: {
		'404': function(config, response) {
			if (config.method.toUpperCase() === 'GET') {
				uni.navigateBack();
			}
		},
		// '500': function(response) {
		// },
	},

	// 请求拦截器
	requestInterceptors: [
		http.basicRequestInterceptor,
	],

	// 响应拦截器
	responseInterceptors: [
		http.basicResponseInterceptor
	]
};
```

### 网络请求

**基本请求**

```javascript
// GET 请求
http.get(uri, data, options).then(() => console.log, err => console.error);

// POST 请求
http.post(uri, data, options).then(() => console.log, err => console.error);

// PUT 请求
http.put(uri, data, options).then(() => console.log, err => console.error);

// DELETE 请求
http.delete(uri, data, options).then(() => console.log, err => console.error);
```

**参数说明**

    uri:String 请求的URL，如果在 /common/config/http.js 中设置了baseURL，那么你可以在此处使用相对路径
    data:Object 请求的参数，GET与DELETE请求中是query参数，POST与PUT请求时是body参数
    options:Object 请求选项，如果在请求过程中，你有额外对请求的一些描述时，它是非常有用的，比如发送一个请求时
    让它弹窗一个loading，请求失败或业务失败的时候进行Toast提示，当然这些在内部已经进行智能判断了，实际上在开发过程中
    如无特殊请求描述，无需指定此参数，下面会展示完整的options参数细节：

```javascript
// options:Object 描述
const options = {

	// 是否显示错误提示语
	isShowErrorTips: true,

	// 是否返回原始数据
	returnRaw: false,

	// 是否显示成功提示
	successTips: undefined, // POST,PUT 为true，其他为false

	// 提示器
	hint: {
		hintSuccess: function(msg) {
		},
		hintError: function(msg) {
		}
	},

	// 模态框提示器，一版用于强提醒
	modal: function(options: ModalOptions) {
	},

	// 是否显示loading
	loading: Boolean | String | {
		showLoading: function() {
		},
		hideLoading: function() {
		}
	},
	// loading 显示文字
	loadingText: String,

	// http status error
	statusErrors: {
		'404': function(config, response) {
		}
	},

	// 应用业务失败
	logicErrors: {
		'40040': function(data, response) {
		}
	}
}
```

**文件上传**

除了基本的网络请求，在日常开发中，上传应该是比较高频的一个操作，在每个上传地方都写大量的上传业务逻辑，哦， 想想都很头大，那么现在回到这里，上传将变的轻而易举。

```javascript
// 上传文件
upload({
	filePath: '',
	formData: {},
	name: 'file'
}).then(() => console.log, err => console.error)
```

### API概览

```javascript

// 授权是否被拒绝
isAuthDeny(err);

// 当前页面是否正在显示
isShowPage(pageObj);

// 获取当前页面
getCurrentPage();

// 当前页面需要显示返回首页按钮
isShowHomeButton();

// 返回上一页面实例
prePage(cb);

// 数组转对象
arr2obj(prefix, data, initIndex = 0);

// 增加对微信原始API支持promise
promise.xxx;

// 延迟返回上一页
back(delay = 1500, options = {});

// 错误提示
hintError(msg);

// 成功提示
hintSuccess(msg);

// 获取用户信息
getUserInfo(options = {});

// 尝试订阅消息
tryRequestSubscribeMessage(options);

// 自动尝试订阅模板消息
autoRequestSubscribeMessage();

// MD5
md5();

```


**全局事件监听**

> 全局事件监听存放在 [listeners](src/listeners) 目录下，由 index.js 统一导出

**代码示例**

```javascript
// 全局事件监听
export default {
	// 监听用户授权跳转
	'sys.getUserInfo.to': function() {
		console.log('sys.getUserInfo.to...');
		const page = getCurrentPage();
		if (page.onLogin && page.onLogin(options) !== false) {
			return;
		}

		uni.navigateTo({
			url: '/pages/auth/auth'
		});
	}
};
```

### 缓存

框架实现了一个简单的缓存处理器，它支持设置到期时间后自动清除缓存数据，在一些页面需要数据的地方，特别有用

**代码示例**

```javascript
// 获取缓存
cache.get(key, defaultValue = null);

// 设置缓存
cache.set(key, value, ttl = 3600)

// 清除缓存
cache.forget(key)
```

### 用户

用户鉴权的机制，已有原来的getApp().globalData全局变量改为内部私有管控，全局变量随意性操作比较大，在某些情况下它将变得不可控，而使用内部私有管控，会起到一定的隔离性与简洁性

**代码示例**

```javascript
// 获取当前登录sessionID
getSessionId()

// 设置当前登录sessionID
setSessionId(sessionId)

// 用户信息
user.value();
user.notify(data);
user.subscribe(callback);
user.unsubscribe(callback);

// 主动调用登录服务器
login(options); // 内部实现逻辑略显复杂，请自行观看

// 当前是否已登录服务器
isLogged();

// 主动登出服务器
logout()
```

> 用户信息是基于订阅者实现的，在某些场景下，你的多个页面可能需要实时更新同步到最新的用户信息，避免过多的网络请求造成服务器损耗

### 数据验证

> 实例化模式，一般用于表单提交前的验证

```javascript
// 验证规则，格式：字段名:[验证规则1,[带参数验证规则,参数]...]
const rules = {
	'title': ['require', ['len', '3,48'], 'chsDash'],
	'name': ['require', ['len', '2,24'], 'alphaDash'],
	'age': ['require', ['egt', 18], ['elt', 32]]
};

//提示信息
const messages = {
	'title.len': '标题文字长度请输入3-48个字符之间'
};

//字段对应的中文名称
const fields = {
	'title': '标题',
	'name': '名称',
	'age': '年龄'
};

//实例化验证类
const validate = new Validate(rules, messages, fields);

//要验证的数据
const data = {
	title: '你好',
	name: 'helloworld',
	age: '45'
};

//检查数据
if (validate.check(data)) {
	console.log('validate success!');
} else {
	console.error('validate fail:', validate.getError());
}
```

> 静态调用，一般用于对某一个字段做特殊验证
```javascript
console.log('必须存在：', Validate.is(undefined, 'require'));
console.log('只允许字母：', Validate.is('abcd', 'alpha'));
console.log('只允许字母和数字：', Validate.is('abcd124', 'alphaNum'));
console.log('只允许字母、数字和下划线 破折号：', Validate.is('abcd124--', 'alphaDash'));
console.log('只允许汉字：', Validate.is('abcd124', 'chs'));
console.log('只允许汉字、字母：', Validate.is('abcd124', 'chsAlpha'));
console.log('只允许汉字、字母和数字：', Validate.is('abcd124', 'chsAlphaNum'));
console.log('只允许汉字、字母、数字和下划线_及破折号-：', Validate.is('abcd124', 'chsAlphaNum'));
console.log('是否为邮箱地址：', Validate.is('110@.com', 'email'));
console.log('验证是否为11位手机号：', Validate.is('13673679989', 'mobile'));
console.log('验证是否为座机电话：', Validate.is('0371-4569-225', 'tel'));
console.log('是否为IP地址：', Validate.is('127.0.0.1', 'ip'));
console.log('是否为一个URL地址：', Validate.is('127.0.0.1', 'url'));
console.log('是否为float：', Validate.is('127.0.0.1', 'float'));
console.log('是否是数字：', Validate.is('48.56', 'number'));
console.log('是否为整型：', Validate.is('48.56', 'integer'));
console.log('是否为布尔值：', Validate.is('false', 'boolean'));
console.log('是否为数组：', Validate.is([], 'array'));
```

### 工具方法

```javascript
// 随机打乱数组
shuffle(arr)

// 从 list中产生一个随机样本。传递一个数字表示从list中返回n个随机元素。否则将返回一个单一的随机项。
sample(arr, n, guard)

// 将多维数组拉平
flatten(array, shallow)

// 返回传入 arrays（数组）交集。结果中的每个值是存在于传入的每个arrays（数组）里。
intersection(...arr)

// 取两个数组的差集
difference(...arr)

// 它类似于map，但是这用于对象。转换每个属性的值。
mapObject(obj, iteratee)

// 尝试执行方法
safeCallback(func, param, thisArg)

// 创建并返回一个像节流阀一样的函数，当重复调用函数的时候，至少每隔 wait毫秒调用一次该函数。对于想控制一些触发频率较高的事件有帮助。
throttle(func, wait, options)

// 返回 function 函数的防反跳版本, 将延迟函数的执行(真正的执行)在函数最后一次调用时刻的 wait 毫秒之后.
debounce(func, wait, immediate)

// 创建一个函数,调用不超过count 次。 当count已经达到时，最后一个函数调用的结果将被记住并返回。
before(func, count)

// 创建一个只能调用一次的函数。重复调用改进的方法也没有效果，只会返回第一次执行时的结果。
once(func)

// 创建一个函数, 只有在运行了 count 次之后才有效果. 在处理同组异步请求返回结果时,
after(func, count)

// 大于未来某个时刻可是执行
gtFuture(func, wait, context)

// 小于未来某个时刻可是执行
ltFuture(func, wait, context)

// 左填充
leftFill(str, num, fillStr)

// 右填充
rightFill(str, num, fillStr)

// 创建唯一id
uuid(prefix = '')

// 创建类似订单
orderedUuid(prefix = '')

// 解析URL
parseUrl(url)

// 解析Url Query字符串
parseUrlQuery(str)

// 组装url
buildUrl(obj)

// 保留小数点
toDecimal(number, dotNum = 2)

// 转换为人性化数字
toSimplify(num, isLetter = false)

// 格式化日期
formatDate(formatStr = 'yyyy-MM-dd hh:mm:ss', date = new Date())

// 格式化成日期
formatDate.date(date = new Date())

// 格式化成时间
formatDate.time(date = new Date(), isSeconds = false)

// 格式化成日期时间
formatDate.datetime(date = new Date(), isSeconds = false)

// 获取今天的开始时间
todayStart(date = new Date())

// 获取今天的结束时间
todayEnd(date = new Date())

// 获取今天开始和结束的时间
today(start = new Date(), end = new Date())
```

### Vue 的扩展

```javascript
// 调用生命周期钩子函数
Vue.prototype.$callHook(name)


// 价格过滤器
Vue.filter('price', function(price, fixed = 0){});


// 日期
Vue.filter('date', function(timeStamp, isSeconds = false){})

// 友好的日期
Vue.filter('firendlyDate', function(timeStamp) {})
```