Cool Unix + OpenAuth.Net 实现一款校园小程序的开发

前言

此项目只是为了记录自己在学习uniapp x 于OpenAuth.Net中遇到问题，有问题欢迎指正。目前还没想好做什么小程序，暂定为校园服务类(校友圈、二手市场、跑腿等等等等....)小程序吧虽然已经烂大街的开源但是总得自己做过了才知道水有多深，有啥好的想法小伙伴可以直接留言噢😁。

持续不间断更新。。。

技术框架

前端框架

官网地址https://unix.cool-js.com/src/introduce/

Cool Unix 是一个现代化的跨端应用开发脚手架，基于 uni-app x 技术栈，为开发者提供了完整的解决方案，助力快速构建高质量、高性能的跨平台应用。

相对于

以下是对uniapp 与uniapp x的直观比较，部分观点可能不够完善请多担待。新一代的框架虽然上手难度大，但是在技术日新月异的发展下仅仅局限于传统的开发语言往往都是比较吃亏的，长期以往使得自己成为了笼中鸟，离开了自己熟悉的地方就啥也不会了，所以适当的学习新技术也是为了更好的提升自己的能力。

对比维度	uni-app (传统)	uni-app X (新一代)
技术架构	基于 WebView 渲染，逻辑层和视图层分离，存在通信开销	将代码编译为原生语言 (如ArkTS, Kotlin)，无WebView，逻辑与视图同进程，消除通信延迟
开发语言	支持 Vue.js (主要Vue2)	基于 TypeScript 的 UTS 语言，强制使用 Vue3 语法
性能表现	接近Web性能，复杂动画或大数据量场景易卡顿	接近原生性能，启动速度快，渲染帧率稳定，适合复杂动效和高频交互
原生能力调用	通过JS引擎桥接调用，存在中间层	直接调用原生API，无需中间层转换，能力更强，集成更深
包体积	包含WebView等运行时，体积相对较大	去除WebView相关代码，体积更精简
学习与迁移成本	✅ 上手容易，尤其对Vue开发者；生态成熟，资料丰富	⚠️ 学习曲线较陡，需掌握UTS和Vue3；插件生态仍在建设中

后端框架

我也在使用👉项目主页 | Admin.NET👈这个框架，确实不错。不过人总要尝试新事物才能不断进步。有兴趣的朋友可以了解一下，个人认为这是一款相当优秀的.NET框架。

OpenAuth.Net官网http://doc.openauth.net.cn/core/

OpenAuth.Net是基于最新版.Net的开源权限工作流快速开发框架。源于Martin Fowler企业级应用开发思想及最新技术组合（SqlSugar、EF、Quartz、AutoFac、WebAPI、Swagger、Mock、NUnit、Vue2/3、Element-ui/plus、IdentityServer等）。核心模块包括：角色授权、代码生成、API鉴权、智能打印、表单设计、工作流、定时任务等。

更多的不做介绍，直接打开官网地址即可查看，我这里使用的OpenAuth.Net 的开源版本，开源版本已经包含了所需的所有功能模块，当然有实力的大佬也可以支持开源作者的不易。

框架搭建

两款框架的搭建方法在各自官网上都有详细说明，按照官方指南操作通常不会出现问题。

Cool Unix

Cool Unix快速开始指南https://unix.cool-js.com/src/introduce/quick.html

由于 Cool Unix是使用Uniapp开发的，所以需要使用 HBuilderX 打开项目。

安装 HBuilderX
拉取代码
1. 使用Git拉取代码到本地，若没有安装Git，请参考Git 详细安装教程（详解 Git 安装过程的每一个步骤）_git安装-CSDN博客
2. 拉取命令
  复制代码
```
git clone https://gitee.com/cool-team-official/cool-unix.git
```

安装依赖
1.

复制代码

   # 推荐使用 pnpm（更快，更节省空间）
   pnpm i

使用HBuilderX导入项目，并运行

备注：我这里只是使用HBuilderX作为运行的服务，开发我使用的是vscode，因为vscode对vue3以及ts的插件更为丰富，开发效率远远高于HBuilderX。(仅个人爱好)

OpenAuth.Net

针对于OpenAuth.Net 就不过多复述了，在官网已经写的够明细了。直接参考官网的即可，唯一需要注意的是Git是否已经安装

快速开始 | OpenAuth.Nethttp://doc.openauth.net.cn/core/start/

框架文件结构如下

📦OpenAuth.Net

┣ 📂.cursor //cursor rules、MCP配置

┣ 📂newdocs //文档

┣ 📂Infrastructure //基础工具类

┣ 📂OpenAuth.Repository //数据库访问相关代码

┣ 📂OpenAuth.App //应用逻辑代码

┣ 📂OpenAuth.Identity //IdentityServer4服务器，提供OAuth服务

┣ 📂OpenAuth.WebApi //WebApi接口站点

┣ 📂Vue2 //开源Vue2前端项目

┣ 📂数据库脚本 //数据库脚本

┣ 📜.gitattributes

┣ 📜.gitignore

┣ 📜LICENSE

┣ 📜.cursorignore //cursor codebase index忽略文件

┣ 📜Dockerfile //docker文件

┣ 📜OpenAuth.Net.sln //解决方案

┗ 📜README.md

功能实现

小程序端身份校验与登录

OpenAuth.Net框架已内置登录认证功能，具体可参考👉登录认证 | OpenAuth.Net👈。当前需要实现后端与前端小程序的登录联动，由于小程序采用独立身份认证体系，因此核心在于实现一键登录功能。

登录认证 | OpenAuth.Net

首先还是需要先实现前后端的联动，同时也实现多种方法的登录。

1、启动Cool Unix项目，找到登录界面

2、修改登录页面"/pages/user/login"，

2.1、修改路径 pages\user\types\index.ts,为LoginForm增加登录参数。

因为此处后端使用账号+密码的方式进行登录，而前端设计的是验证码登录，为了节约成本就直接账号密码登录就行了啦，此处可能有人疑惑，为毛 **smsCode?: string;**中间有一个问号其实这个就是允许为空的含义。

复制代码

export type LoginForm = {
	phone: string;
	smsCode?: string;
	password: string;
};

2.2、修改 /pages/user/login，完整代码如下，其中注释了验证码模块，新增了密码输入模块，修改登录参数为后端接口需要的参数。

html 复制代码

<view class="mb-3 flex flex-row">
			<cl-input
				v-model="form.password"
				password
				prefix-icon="shield-check-fill"
				:placeholder="t('请输入密码')"
				:border="false"
				:pt="{
					className: parseClass([
						'!h-[90rpx] flex-1 !rounded-xl !px-4',
						[isDark, '!bg-surface-70', '!bg-white']
					]),
					prefixIcon: {
						className: 'mr-1'
					}
				}"
			></cl-input>
		</view>
		<!-- <view class="relative flex flex-row items-center mb-5">
			<cl-input
				v-model="form.smsCode"
				:clearable="false"
				type="number"
				prefix-icon="shield-check-fill"
				:placeholder="t('请输入验证码')"
				:maxlength="4"
				:border="false"
				:pt="{
					className: parseClass([
						'!h-[90rpx] flex-1 !rounded-xl !px-4',
						[isDark, '!bg-surface-70', '!bg-white']
					]),
					prefixIcon: {
						className: 'mr-1'
					}
				}"
			>
			</cl-input>

			<view class="absolute right-0">
				<sms-btn
					:ref="refs.set('smsBtn')"
					:phone="form.phone"
					@success="showCode = true"
				></sms-btn>
			</view>
		</view> -->

修改登录方法

javascript 复制代码

await request({
		url: "/api/Check/Login",
		method: "POST",
		data: {
			"account":phone,
			"password":password,
			"appKey":"openauth"
		}
	})
		.then((res) => {
			emit("success", res);
		})
		.catch((err) => {
			ui.showToast({
				message: (err as Response).message!
			});
		});

	loading.value = false;

3.3、记住修改后端服务为自己的地址(启动OpenAuth.Net的服务路径)

config/proxy.ts