艾特森企业小程序开发全解析:ThinkPHP 与 uniApp 的协同应用
一、项目概述与技术选型
艾特森作为一家多元化企业，需要一款综合性小程序满足内部管理与外部展示需求。经过技术评估，我们选择 ThinkPHP 6.0 作为后端框架，利用其高效的 ORM 和路由系统；前端采用 uniApp 跨平台框架，实现一次开发多端部署。
二、系统架构设计
- 后端架构：ThinkPHP 框架 + MySQL 数据库，采用 MVC 模式，实现业务逻辑分离
- 前端架构：uniApp+Vue.js，组件化开发，状态管理使用 Vuex
- 通信协议：前后端通过 RESTful API 进行数据交互，采用 JWT 进行身份验证
- 三、ThinkPHP 后端开发
- 环境搭建
# 安装ThinkPHP
composer create-project topthink/think aitesen-api
cd aitesen-api
php think run
- 数据库设计
设计用户、部门、公告、审批等核心数据表，示例用户表结构：
// database/migrations/2025_06_20_create_users_table.php
use think\migration\Migrator;
use think\migration\db\Column;
class CreateUsersTable extends Migrator
{
public function change()
{
$table = $this->table('users', ['engine' => 'InnoDB']);
$table->addColumn('username', 'string', ['limit' => 50, 'comment' => '用户名'])
->addColumn('password', 'string', ['limit' => 100, 'comment' => '密码'])
->addColumn('role', 'integer', ['default' => 1, 'comment' => '角色：1-普通员工，2-管理员'])
->addColumn('department_id', 'integer', ['comment' => '部门ID'])
->addColumn('created_at', 'datetime', ['comment' => '创建时间'])
->addColumn('updated_at', 'datetime', ['comment' => '更新时间'])
->create();
}
}- API 开发
实现用户认证、数据查询等核心接口：
// app/controller/User.php
namespace app\controller;
use app\BaseController;
use think\facade\Cache;
use think\facade\Validate;
use app\model\User as UserModel;
class User extends BaseController
{
// 用户登录
public function login()
{
$data = $this->request->post();
$validate = Validate::rule([
'username' => 'require',
'password' => 'require'
]);
if (!$validate->check($data)) {
return json(['code' => 400, 'msg' => $validate->getError()]);
}
$user = UserModel::where('username', $data['username'])
->findOrEmpty();
if ($user->isEmpty() || !password_verify($data['password'], $user->password)) {
return json(['code' => 401, 'msg' => '用户名或密码错误']);
}
// 生成token
$token = uniqid() . bin2hex(random_bytes(16));
Cache::set('user_token_' . $token, $user->id, 3600);
return json([
'code' => 200,
'msg' => '登录成功',
'data' => [
'token' => $token,
'user_info' => $user
]
]);
}
}
四、uniApp 前端开发
- 项目初始化
# 安装HBuilderX开发工具
# 创建uniApp项目
npx degit dcloudio/uni-preset-vue my-project
cd my-project
npm install
- 页面与组件开发
创建登录页、首页、个人中心等核心页面
<!-- pages/login/login.vue -->
<template>
<view class="container">
<view class="logo">
<image src="/static/logo.png" mode=""></image>
</view>
<view class="form">
<view class="input-item">
<text class="label">用户名</text>
<input v-model="username" placeholder="请输入用户名" />
</view>
<view class="input-item">
<text class="label">密码</text>
<input v-model="password" password placeholder="请输入密码" />
</view>
<button class="login-btn" @click="login">登录</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
}
},
methods: {
login() {
if (!this.username || !this.password) {
uni.showToast({
title: '用户名和密码不能为空',
icon: 'none'
});
return;
}
uni.request({
url: 'https://api.aitesen.com/user/login',
method: 'POST',
data: {
username: this.username,
password: this.password
},
success: (res) => {
if (res.data.code === 200) {
uni.setStorageSync('token', res.data.data.token);
uni.setStorageSync('userInfo', res.data.data.user_info);
uni.reLaunch({
url: '/pages/index/index'
});
} else {
uni.showToast({
title: res.data.msg,
icon: 'none'
});
}
},
fail: () => {
uni.showToast({
title: '网络错误，请稍后重试',
icon: 'none'
});
}
});
}
}
}
</script>
- 全局样式与状态管理
配置全局样式和 Vuex 状态管理
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
userInfo: uni.getStorageSync('userInfo') || {},
token: uni.getStorageSync('token') || ''
},
mutations: {
SET_USER_INFO(state, userInfo) {
state.userInfo = userInfo;
uni.setStorageSync('userInfo', userInfo);
},
SET_TOKEN(state, token) {
state.token = token;
uni.setStorageSync('token', token);
}
},
actions: {
login({ commit }, userInfo) {
commit('SET_USER_INFO', userInfo);
// 生成并设置token
const token = 'Bearer ' + Math.random().toString(36).substr(2);
commit('SET_TOKEN', token);
},
logout({ commit }) {
commit('SET_USER_INFO', {});
commit('SET_TOKEN', '');
uni.removeStorageSync('userInfo');
uni.removeStorageSync('token');
}
}
})
五、前后端集成与优化
- 接口统一封装
// common/request.js
const baseUrl = 'https://api.aitesen.com';
export const request = (options) => {
return new Promise((resolve, reject) => {
uni.request({
url: baseUrl + options.url,
method: options.method || 'GET',
data: options.data || {},
header: {
'Content-Type': 'application/json',
'Authorization': uni.getStorageSync('token') || ''
},
success: (res) => {
if (res.statusCode === 200) {
resolve(res.data);
} else {
reject(res.data);
}
},
fail: (err) => {
reject(err);
}
});
});
};
- 性能优化策略
- 图片资源压缩与懒加载
- 接口数据缓存处理
- 组件按需加载
- 长列表虚拟滚动
六、小程序发布与部署
- 后端部署
- 服务器环境配置（Nginx+PHP+MySQL）
- 代码版本控制与自动化部署
- 定时备份策略
- 前端发布
- 代码提交审核
- 小程序打包与上传
- 发布与灰度测试
关键技术点回顾
- ThinkPHP 的中间件与权限控制
- uniApp 的条件编译与多端适配
- 前后端分离的开发模式
- 小程序性能优化实践
