blackteay/uniapp-vue3-vite-ts-template
1
0
Fork 0
mirror of https://gitee.com/h_mo/uniapp-vue3-vite-ts-template synced 2025-04-05 06:12:44 +08:00
Code Issues Projects Releases Wiki Activity

wip: next

Browse Source
This commit is contained in:
h_mo 2024-06-08 00:58:20 +08:00
parent 7bc5b4ccba
commit 872babf2c2
88 changed files with 1628 additions and 2206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env
View File

@ -1,2 +0,0 @@
# title
VITE_APP_TITLE = Uni-app Vue3 Ts --Vite

14
.env.development
View File

@ -1,14 +0,0 @@
# 运行环境
VITE_ENV = development
# 是否使用模拟数据
VITE_USE_MOCK = true
VITE_PORT = 3000
# BASE_URL
VITE_BASE_URL = /api/v1
# 上传域名
VITE_UPLOAD_URL = /upload

12
.env.production
View File

@ -1,12 +0,0 @@
# 运行环境
VITE_ENV = production
# 是否使用模拟数据
VITE_USE_MOCK = true
# api域名
VITE_BASE_URL = /api/v1
# 上传域名
VITE_UPLOAD_URL = /upload

77
.eslintrc.cjs
View File

@ -1,77 +0,0 @@
// 参考：https://eslint.bootcss.com/docs/rules/
// 参考：https://blog.csdn.net/x550392236/article/details/89497202
// 参考：https://blog.csdn.net/brokenkay/article/details/111106266
module.exports = {
root: true,
/**环境提供预定义的全局变量 */
env: {
/**Node.js全局变量和Node.js范围 */
node: true,
/**浏览器全局变量 */
browser: true,
},
/**定义ESLint的解析器 */
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser',
},
/**定义文件继承的子规范 */
extends: ['eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended','./.eslintrc-auto-import.json'],
plugins: ['vue', '@typescript-eslint'],
rules: {
'no-var': 'error', //要求使用 let 或 const 而不是 var
camelcase: 'error', // 双峰驼命名格式
indent: ['error', 4, { SwitchCase: 1 }], //代码缩进2个空格
semi: ['error', 'always'], //行尾需要有分号
quotes: ['error', 'single'], //强制使用一致的反勾号、双引号或单引号
'linebreak-style': ['error', 'windows'], //强制使用一致的换行风格,"unix"：\n 表示 LF , "windows"：\r\n 表示 CRLF
eqeqeq: ['error', 'always', { null: 'ignore' }], //比较时强制使用 === 或者 !==,但对null作比较时可以不用全等
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': [
'warn',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_',
},
], //不允许使用未使用的变量
'@typescript-eslint/no-explicit-any': 'off', //不允许任何类型
'@typescript-eslint/no-empty-function': 'off', //不允许空函数
'vue/html-indent': ['error', 4], //在<template>中强制一致缩进
'vue/singleline-html-element-content-newline': 'off', //要求在单行元素的内容之前和之后有一个换行符
'vue/max-attributes-per-line': 'off', //执行每行的最大属性数(被 prettier 最大单行控制了暂off)
'vue/multi-word-component-names': 'off', //要求组件名称始终为多字
'vue/html-self-closing': 'off', //执行自我封闭式
'no-undef': 'off', //禁用未声明的变量，除非它们在 /*global */ 注释中被提到
'@typescript-eslint/ban-ts-comment': 'off', // 不允许@ts-<指令>评论或要求指令后的描述
'@typescript-eslint/ban-types': 'off', // 不允许某些类型
'@typescript-eslint/no-non-null-assertion': 'off', // 不允许使用！后缀操作符的非空断言
},
globals: {
//可以定义全局中的变量的权限（只读，可读可写）
defineProps: 'readonly',
defineEmits: 'readonly',
defineExpose: 'readonly',
withDefaults: 'readonly',
uni: 'readonly',
},
ignorePatterns: [
// # 忽略目录
'/dist',
'/public',
'/src/public',
'/src/static',
'/node_modules',
// # 忽略文件
'**/*-min.js',
'**/*.min.js',
'**/*-min.css',
'**/*.min.css',
'**/*.tsbuildinfo',
'**/*.config.js',
'**/*.config.ts',
'/src/manifest.json',
],
};

4
.husky/commit-msg
View File

@ -1,4 +0,0 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
pnpm commitlint --edit "$1"

9
.husky/lintstagedrc.cjs
View File

@ -1,9 +0,0 @@
module.exports = {
'*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
'{!(package)*.json,*.code-snippets,.!(browserslist)*rc}': ['prettier --write--parser json'],
'package.json': ['prettier --write'],
'*.vue': ['prettier --write'],
'*.{scss,less,styl,css,html}': ['prettier --write'],
'*.md': ['prettier --write'],
'*.hbs': ['prettier --write'],
};

7
.husky/pre-commit
View File

@ -1,7 +0,0 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
[ -n "$CI" ] && exit 0
# 根据./lintsstagedrc.cjs配置格式化并提交代码
npm run lint:lint-staged

3
.npmrc
View File

@ -2,4 +2,5 @@
# 提示:如果你不希望pnpm在对等依赖问题上失败，在项目根目录下的.npmrc文件中添加"strict-peer-dependencies=false"。
# auto-install-peers=true
strict-peer-dependencies=false
registry=https://registry.npmmirror.com
# registry=https://registry.npmmirror.com
registry=https://registry.npmjs.org

16
.prettierignore
View File

@ -1,16 +0,0 @@
# 忽略目录
/dist
/build
/public
/node_modules
/src/static
# 忽略文件
**/*-min.js
**/*.min.js
**/*-min.css
**/*.min.css
**/*.tsbuildinfo
/src/manifest.json
.eslintcache
pnpm-lock.yaml

17
.prettierrc.cjs
View File

@ -1,17 +0,0 @@
//////////////////////////////////////////////////////////////////
// 官网参考：https://prettier.io/docs/en/options.html#tab-width //
////////////////////////////////////////////////////////////////
module.exports = {
/**.pellerrc 的架构 */
$schema: 'https://json.schemastore.org/prettierrc',
/**在所有代码语句的末尾添加分号 */
semi: true,
/**使用 4 个空格缩进 */
tabWidth: 4,
/**每行最多 160 字符 */
printWidth: 160,
/**指定文件的结尾换行符 */
endOfLine: 'auto',
/**使用单引号代替双引号 */
singleQuote: true,
};

2
.vscode/extensions.json vendored
View File

@ -7,6 +7,6 @@
"Vue.volar", // Vue语言支持扩展
"Vue.vscode-typescript-vue-plugin", // 一个TS服务器插件，使TS服务器知道*.vue文件。
"esbenp.prettier-vscode", // 代码格式化
"dbaeumer.vscode-eslint" //代码质量检查
"dbaeumer.vscode-eslint" // 代码质量检查
]
}

60
.vscode/settings.json vendored
View File

@ -5,25 +5,69 @@
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.detectIndentation": false,
"editor.tabSize": 4,
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"files.eol": "auto",
"eslint.enable": true,
//////////////////////////////////////////////////////////////////
// 官网参考：https://prettier.io/docs/en/options.html#tab-width //
////////////////////////////////////////////////////////////////
"prettier.enable": true,
"prettier.semi": true,
"prettier.tabWidth": 4,
"prettier.printWidth": 160,
"prettier.endOfLine": "auto",
"prettier.singleQuote": true,
"prettier.ignorePath": ".prettierignore"
"prettier.ignorePath": ".prettierignore",
// Enable the ESlint flat config support
// (remove this if your ESLint extension above v3.0.5)
"eslint.experimental.useFlatConfig": true,
// Disable the default formatter, use eslint instead
"prettier.enable": false,
"editor.formatOnSave": false,
// Auto fix
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "never"
},
// Silent the stylistic rules in you IDE, but still auto fix them
"eslint.rules.customizations": [
{ "rule": "style/*", "severity": "off" },
{ "rule": "format/*", "severity": "off" },
{ "rule": "*-indent", "severity": "off" },
{ "rule": "*-spacing", "severity": "off" },
{ "rule": "*-spaces", "severity": "off" },
{ "rule": "*-order", "severity": "off" },
{ "rule": "*-dangle", "severity": "off" },
{ "rule": "*-newline", "severity": "off" },
{ "rule": "*quotes", "severity": "off" },
{ "rule": "*semi", "severity": "off" }
],
// Enable eslint for all supported languages
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml",
"toml",
"xml",
"gql",
"graphql",
"astro",
"css",
"less",
"scss",
"pcss",
"postcss"
]
}

14
README.md
View File

@ -138,16 +138,14 @@
```
## 预览
- 域名到期，暂时已不能预览
[//]: # (- H5)
[//]: # ( ![h5]&#40;https://api-catch.ranesuangyu.top/images/20220621/364f2b47d91ae5ae82a33d33854e2540.png&#41;)
[//]: # (- 小程序&#40;体验版-需申请体验&#41;)
[//]: # ()
[//]: # ( ![小程序]&#40;http://api-catch.ranesuangyu.top/images/20220621/8d4388315ef5b8630d0c0b3963d1ba6b.jpg&#41;)
[//]: # '- H5'
[//]: # ' ![h5](https://api-catch.ranesuangyu.top/images/20220621/364f2b47d91ae5ae82a33d33854e2540.png)'
[//]: # '- 小程序(体验版-需申请体验)'
[//]: #
[//]: # ' ![小程序](http://api-catch.ranesuangyu.top/images/20220621/8d4388315ef5b8630d0c0b3963d1ba6b.jpg)'
## 安装使用

37
commitlint.config.cjs
View File

@ -1,37 +0,0 @@
// https://github.com/conventional-changelog/commitlint/#what-is-commitlint
// 例：feat: 增加功能
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
2,
'always',
[
'feat', // 新功能(feature)
'fix', // 修补bug
'docs', // 文档(documentation)
'style', // 格式、样式(不影响代码运行的变动)
'refactor', // 代码重构
'perf', // 性能改进
'test', // 添加测试
'ci', // 持续集成
'chore', // 构建过程或辅助工具的变动
'revert', // 回滚到上一个版本
'workflow', // 工作流改进
'mod', // 不确定分类的修改
'wip', // 开发中
'types', // 类型修改
'release', // 版本发布
'resolve a conflict', // 解决冲突
'merge branch', // 合并分支
'dependencies', // 依赖项修改
'devDependencies', // 开发依赖修改
'strengthen', // 加强，巩固
],
],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never'],
},
};

2
env/.env vendored Normal file
View File

@ -0,0 +1,2 @@
# title
VITE_APP_TITLE='Uni-app Vue3 Ts --Vite'

17
env/.env.development vendored Normal file
View File

@ -0,0 +1,17 @@
# 运行环境
VITE_ENV=development
# 是否使用模拟数据
VITE_USE_MOCK=true
VITE_PORT=3000
# BASE_URL
VITE_BASE_URL==/api
# 上传域名
VITE_UPLOAD_URL=/upload
# 代理前缀,仅H5有效
VITE_PROXY_PREFIX=/api
VITE_UPLOAD_PROXY_PREFIX=/upload

12
env/.env.production vendored Normal file
View File

@ -0,0 +1,12 @@
# 运行环境
VITE_ENV=production
# 是否使用模拟数据
VITE_USE_MOCK=true
# api域名
VITE_BASE_URL=/api/v1
# 上传域名
VITE_UPLOAD_URL=/upload

34
eslint.config.js Normal file
View File

@ -0,0 +1,34 @@
/** @type {import('eslint').Linter.Config} */
import antfu from '@antfu/eslint-config';
import process from 'node:process';
/**
* @see https://github.com/antfu/eslint-config
*/
export default antfu({
formatters: true,
vue: true,
jsx: true,
unocss: true,
rules: {
'style/indent': ['error', 2, { SwitchCase: 2 }],
'style/quotes': ['error', 'single'],
'style/semi': ['error', 'always'],
'style/semi-style': ['error', 'last'],
'style/max-len': ['error', { code: 160, tabWidth: 2 }],
'style/brace-style': ['error', '1tbs', { allowSingleLine: true }],
'vue/script-indent': ['error', 2, { baseIndent: 0 }],
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
},
env: {
node: true,
},
ignores: [
'./dist/*',
'./.vscode/*',
'./.idea/*',
'./README.md',
],
});

9
index.html
View File

@ -1,14 +1,17 @@
<!DOCTYPE html>
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<script>
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'));
var coverSupport =
'CSS' in window &&
typeof CSS.supports === 'function' &&
(CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write(
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
(coverSupport ? ', viewport-fit=cover' : '') +
'" />',
);
)
</script>
<title></title>
<!--preload-links-->

110
package.json
View File

@ -1,10 +1,11 @@
{
"name": "uniapp_vue3_vite_ts",
"version": "1.3.1",
"type": "module",
"version": "2.0.0-alpha.1",
"scripts": {
"dev:app": "uni -p app",
"dev:custom": "uni -p",
"dev:h5": "uni",
"dev:h5": "pnpm git:hooks && uni",
"dev:h5:ssr": "uni --ssr",
"dev:mp-alipay": "uni -p mp-alipay",
"dev:mp-baidu": "uni -p mp-baidu",
@ -12,7 +13,7 @@
"dev:mp-lark": "uni -p mp-lark",
"dev:mp-qq": "uni -p mp-qq",
"dev:mp-toutiao": "uni -p mp-toutiao",
"dev:mp-weixin": "uni -p mp-weixin",
"dev:mp-weixin": "pnpm git:hooks && uni -p mp-weixin",
"dev:quickapp-webview": "uni -p quickapp-webview",
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
@ -30,67 +31,68 @@
"build:quickapp-webview": "uni build -p quickapp-webview",
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
"build:quickapp-webview-union": "uni build -p quickapp-webview-union",
"lint": "pnpm lint:format & pnpm lint:eslint",
"lint:eslint": "eslint --max-warnings 0 --fix --ext .js,.cjs,.mjs,.jsx,.ts,.cts,.mts,.tsx,.vue ./src",
"lint:format": "prettier --write --loglevel warn \"src/**/*.{js,ts,json,tsx,css,less,vue,html,md}\"",
"lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.cjs",
"prepare": "husky install"
"lint:fix": "eslint . --fix",
"git:hooks": "npx simple-git-hooks"
},
"dependencies": {
"@alova/adapter-uniapp": "^1.2.2",
"@alova/mock": "^1.5.1",
"@dcloudio/uni-app": "3.0.0-alpha-4000120240201002",
"@dcloudio/uni-app-plus": "3.0.0-alpha-4000120240201002",
"@dcloudio/uni-components": "3.0.0-alpha-4000120240201002",
"@dcloudio/uni-h5": "3.0.0-alpha-4000120240201002",
"@dcloudio/uni-i18n": "3.0.0-alpha-4000120240201002",
"@dcloudio/uni-mp-alipay": "3.0.0-alpha-4000120240201002",
"@dcloudio/uni-mp-baidu": "3.0.0-alpha-4000120240201002",
"@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-4000120240201002",
"@dcloudio/uni-mp-lark": "3.0.0-alpha-4000120240201002",
"@dcloudio/uni-mp-qq": "3.0.0-alpha-4000120240201002",
"@dcloudio/uni-mp-toutiao": "3.0.0-alpha-4000120240201002",
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-4000120240201002",
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-4000120240201002",
"@fortawesome/fontawesome-free": "^6.5.1",
"@iconify/iconify": "^3.1.1",
"alova": "^2.17.0",
"@dcloudio/uni-app": "3.0.0-alpha-4010920240607001",
"@dcloudio/uni-app-plus": "3.0.0-alpha-4010920240607001",
"@dcloudio/uni-components": "3.0.0-alpha-4010920240607001",
"@dcloudio/uni-h5": "3.0.0-alpha-4010920240607001",
"@dcloudio/uni-i18n": "3.0.0-alpha-4010920240607001",
"@dcloudio/uni-mp-alipay": "3.0.0-alpha-4010920240607001",
"@dcloudio/uni-mp-baidu": "3.0.0-alpha-4010920240607001",
"@dcloudio/uni-mp-kuaishou": "3.0.0-alpha-4010920240607001",
"@dcloudio/uni-mp-lark": "3.0.0-alpha-4010920240607001",
"@dcloudio/uni-mp-qq": "3.0.0-alpha-4010920240607001",
"@dcloudio/uni-mp-toutiao": "3.0.0-alpha-4010920240607001",
"@dcloudio/uni-mp-weixin": "3.0.0-alpha-4010920240607001",
"@dcloudio/uni-quickapp-webview": "3.0.0-alpha-4010920240607001",
"alova": "^2.21.2",
"crypto-js": "^4.2.0",
"echarts": "^5.5.0",
"lodash-es": "^4.17.21",
"pinia": "2.0.36",
"vue": "^3.4.19"
"pinia": "^2.1.7",
"vue": "^3.4.27"
},
"devDependencies": {
"@commitlint/cli": "^17.8.1",
"@commitlint/config-conventional": "^17.8.1",
"@dcloudio/types": "^3.4.7",
"@dcloudio/uni-automator": "3.0.0-alpha-4000120240201002",
"@dcloudio/uni-cli-shared": "3.0.0-alpha-4000120240201002",
"@dcloudio/uni-stacktracey": "3.0.0-alpha-4000120240201002",
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-4000120240201002",
"@iconify/json": "^2.2.186",
"@antfu/eslint-config": "^2.21.1",
"@dcloudio/types": "^3.4.8",
"@dcloudio/uni-automator": "3.0.0-alpha-4010920240607001",
"@dcloudio/uni-cli-shared": "3.0.0-alpha-4010920240607001",
"@dcloudio/uni-stacktracey": "3.0.0-alpha-4010920240607001",
"@dcloudio/vite-plugin-uni": "3.0.0-alpha-4010920240607001",
"@iconify/vue": "^4.1.2",
"@types/crypto-js": "^4.2.2",
"@types/lodash-es": "^4.17.12",
"@types/node": "^17.0.45",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"@unocss/preset-icons": "^0.46.5",
"eslint": "^8.57.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-vue": "^9.22.0",
"husky": "^8.0.3",
"lint-staged": "^13.3.0",
"postcss": "^8.4.35",
"prettier": "^3.2.5",
"sass": "^1.71.1",
"typescript": "^5.3.3",
"uni-mini-router": "^0.0.11",
"@types/node": "^20.14.2",
"@unocss/eslint-plugin": "^0.61.0",
"@vitejs/plugin-vue": "^5.0.5",
"@vue/runtime-core": "^3.4.27",
"eslint": "^9.4.0",
"eslint-plugin-format": "^0.1.1",
"globals": "^15.4.0",
"lint-staged": "^15.2.7",
"picocolors": "^1.0.1",
"rollup-plugin-visualizer": "^5.12.0",
"sass": "^1.77.5",
"simple-git-hooks": "^2.11.1",
"tsx": "^4.15.4",
"typescript": "^5.4.5",
"uni-mini-router": "^0.1.6",
"uni-read-pages-vite": "^0.0.6",
"unocss": "^0.51.13",
"unocss-preset-weapp": "^0.6.3",
"unplugin-auto-import": "^0.16.7",
"vite": "^5.1.4"
"unocss": "^0.61.0",
"unocss-preset-weapp": "^0.60.1",
"unplugin-transform-class": "^0.5.3",
"vite": "^5.3.0",
"vite-plugin-restart": "^0.4.0"
},
"simple-git-hooks": {
"pre-commit": "npx lint-staged",
"commit-msg": "npx tsx ./scripts/verify-commit.ts"
},
"lint-staged": {
"*": "eslint --fix"
}
}

28
scripts/verify-commit.ts Normal file
View File

@ -0,0 +1,28 @@
/**
* 提交信息校验
* @link https://github.com/toplenboren/simple-git-hooks
* @see 参考：https://github.com/vuejs/vue-next/blob/master/.github/commit-convention.md
*/
import { readFileSync } from 'node:fs';
import path from 'node:path';
import process from 'node:process';
import pico from 'picocolors';
const msgPath = path.resolve('.git/COMMIT_EDITMSG');
const msg = readFileSync(msgPath, 'utf-8').trim();
const commitRE
= /^(?:revert: )?(?:feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|mod|release|strengthen)(?:\(.+\))?: .{1,50}/;
if (!commitRE.test(msg)) {
console.log(pico.yellow(`\n提交的信息: ${msg}\n`));
console.error(
` ${pico.white(pico.bgRed(' 格式错误 '))} ${pico.red(
'无效的提交信息格式.',
)}\n\n${
pico.red(' 正确的提交消息格式. 例如:\n\n')
} ${pico.green('feat: add a new feature')}\n`
+ ` ${pico.green('fix: fixed an bug')}`,
);
process.exit(1);
}

10
shims-uni.d.ts vendored Normal file
View File

@ -0,0 +1,10 @@
/// <reference types='@dcloudio/types' />
import 'vue';
declare module '@vue/runtime-core' {
type Hooks = App.AppInstance & Page.PageInstance;
interface ComponentCustomOptions extends Hooks {
}
}

8
src/App.vue
View File

@ -1,18 +1,16 @@
<script setup lang="ts">
import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
import { useAuthStore } from '@/state/modules/auth';
import { onHide, onLaunch, onShow } from '@dcloudio/uni-app';
onLaunch(() => {
console.log('App Launch');
});
onShow(() => {
const authStore = useAuthStore();
authStore.initToken();
console.log('App Show');
});
onHide(() => {
console.log('App Hide');
});
</script>
<style lang="scss">
@import '@/assets/main.scss';
</style>

69
src/assets/main.scss
View File

@ -1,69 +0,0 @@
view,
scroll-view,
swiper,
match-media,
movable-area,
movable-view,
cover-view,
cover-image,
icon,
text,
rich-text,
progress,
button,
checkboxe,
ditor,
form,
input,
label,
picker,
picker-view,
radio,
slider,
switch,
textarea,
navigator,
audio,
camera,
image,
video,
live-player,
live-pusher,
map,
canvas,
web-view,
:before,
:after {
box-sizing: border-box;
}
/* 隐藏scroll-view的滚动条 */
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}
// 超出省略,最多5行
@for $i from 1 through 5 {
.text-ellipsis-#{$i} {
// vue下，单行和多行显示省略号需要单独处理
@if $i == '1' {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} @else {
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: $i;
-webkit-box-orient: vertical !important;
}
}
}
page {
background-color: #f2f2f2;
}

4
src/components/AppProvider/index.vue
View File

@ -1,7 +1,9 @@
<script lang="ts" setup name="AppProvider"></script>
<template>
<view>
<slot></slot>
<slot />
</view>
</template>
<style lang="scss" scoped></style>

6
src/components/BasicButton/index.vue
View File

@ -3,14 +3,14 @@ import { buttonProps } from '@/components/BasicButton/prpos';
const props = defineProps(buttonProps);
const emits = defineEmits(['click']);
const click = () => {
function click() {
emits('click');
};
}
</script>
<template>
<view class="default-btn" :disabled="props.disabled" @tap="click">
<slot></slot>
<slot />
</view>
</template>

8
src/components/BasicInput/index.vue
View File

@ -1,7 +1,3 @@
<template>
<input :type="type" :name="name" :value="value" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
@ -28,4 +24,8 @@ export default defineComponent({
});
</script>
<template>
<input :type="type" :name="name" :value="value">
</template>
<style lang="scss" scoped></style>

65
src/components/Iconify/index.vue
View File

@ -1,43 +1,26 @@
<script lang="ts" setup name="Iconify">
import { assign } from 'lodash-es';
import { isBoolean } from '@/utils/is';
<script lang="ts" setup>
import type { IconProps } from '@iconify/vue';
/**
* @name Iconify
* @desc 图标
* @docs https://iconify.design/docs/icon-components/vue/
* @example <Iconify icon="ant-design:home-outlined" />
*/
import { Icon } from '@iconify/vue';
const props = defineProps({
icon: {
type: String,
},
size: {
type: [Number, String],
},
color: {
type: String,
},
});
const iconSize = computed<string | boolean>(() => (props.size ? `${props.size}rpx` : false));
let style = computed(() => {
let ISize = unref(iconSize);
return assign({ width: isBoolean(ISize) ? '' : ISize, height: isBoolean(ISize) ? '' : ISize }, { color: props.color });
});
const emit = defineEmits(['click']);
const onClick = () => {
emit('click');
};
</script>
<template>
<view ref="elRef" @click="onClick" :class="['iconify', icon]" :style="style"></view>
</template>
<style lang="scss" scoped>
.iconify {
display: inline-block;
vertical-align: middle;
height: 44rpx;
width: 44rpx;
color: inherit;
&:hover {
cursor: pointer;
opacity: 0.8;
}
interface Props {
icon: string
size?: string | number
width?: IconProps['width']
height?: IconProps['height']
color?: IconProps['color']
}
</style>
const props = withDefaults(defineProps<Props>(), {});
</script>
<template>
<Icon v-bind="props" />
</template>
<style lang="scss" scoped></style>

4
src/components/Test/index.vue
View File

@ -6,9 +6,11 @@ const props = defineProps({
},
});
const text = 'TEXT: ' + props.text;
const text = `TEXT: ${props.text}`;
</script>
<template>
<view>{{ text }}</view>
</template>
<style lang="scss" scoped></style>

7
src/enums/appEnum.ts
View File

@ -1,7 +0,0 @@
/**
* @description: 客户端 api 返回结果设置
*/
export enum ClientApiResultEnum {
CLIENT_SUCCESS = 1,
CLIENT_ERROR = 0,
}

112
src/enums/platformEnum.ts
View File

@ -1,112 +0,0 @@
/**
* 平台
*/
export enum PLATFORMS {
DEFAULT = 'DEFAULT' /* 默认 */,
VUE3 = 'VUE3' /* HBuilderX 3.2.0+ */,
APP_PLUS = 'APP-PLUS' /* App */,
APP_PLUS_NVUE = 'APP-PLUS-NVUE' /* App nvue 页面 */,
APP_NVUE = 'APP-NVUE' /* App nvue 页面 */,
H5 = 'H5' /* H5 */,
MP_WEIXIN = 'MP-WEIXIN' /* 微信小程序 */,
MP_ALIPAY = 'MP-ALIPAY' /* 支付宝小程序 */,
MP_BAIDU = 'MP_BAIDU' /* 百度小程序 */,
MP_TOUTIAO = 'MP-TOUTIAO' /* 字节跳动小程序 */,
MP_LARK = 'MP-LARK' /* 飞书小程序 */,
MP_QQ = 'MP-QQ' /* QQ小程序 */,
MP_KUAISHOU = 'MP-KUAISHOU' /* 快手小程序 */,
MP_JD = 'MP-JD' /* 京东小程序 */,
MP_360 = 'MP-360' /* 360小程序 */,
MP = 'MP' /* 微信小程序/支付宝小程序/百度小程序/字节跳动小程序/飞书小程序/QQ小程序/360小程序 */,
QUICKAPP_WEBVIEW = 'QUICKAPP-WEBVIEW' /* 快应用通用(包含联盟、华为) */,
QUICKAPP_WEBVIEW_UNION = 'QUICKAPP-WEBVIEW-UNION' /* 快应用联盟 */,
QUICKAPP_WEBVIEW_HUAWEI = 'QUICKAPP-WEBVIEW-HUAWEI' /* 快应用华为 */,
}
/**
* 平台环境
* @constructor
*/
function PLATFORM_ENV() {
let platform = PLATFORMS.DEFAULT;
/* #ifdef VUE3 */
platform = PLATFORMS.VUE3;
/* #endif */
/* #ifdef APP-PLUS */
platform = PLATFORMS.APP_PLUS;
/* #endif */
/* #ifdef APP-PLUS-NVUE */
platform = PLATFORMS.APP_PLUS_NVUE;
/* #endif */
/* #ifdef APP-NVUE */
platform = PLATFORMS.APP_NVUE;
/* #endif */
/* #ifdef H5 */
platform = PLATFORMS.H5;
/* #endif */
/* #ifdef MP */
platform = PLATFORMS.MP;
/* #endif */
/* #ifdef MP-WEIXIN */
platform = PLATFORMS.MP_WEIXIN;
/* #endif */
/* #ifdef MP-ALIPAY */
platform = PLATFORMS.MP_ALIPAY;
/* #endif */
/* #ifdef MP_BAIDU */
platform = PLATFORMS.MP_BAIDU;
/* #endif */
/* #ifdef MP-TOUTIAO */
platform = PLATFORMS.MP_TOUTIAO;
/* #endif */
/* #ifdef MP-LARK */
platform = PLATFORMS.MP_LARK;
/* #endif */
/* #ifdef MP-QQ */
platform = PLATFORMS.MP_QQ;
/* #endif */
/* #ifdef MP-KUAISHOU */
platform = PLATFORMS.MP_KUAISHOU;
/* #endif */
/* #ifdef MP-JD */
platform = PLATFORMS.MP_JD;
/* #endif */
/* #ifdef MP-360 */
platform = PLATFORMS.MP_360;
/* #endif */
/* #ifdef QUICKAPP-WEBVIEW */
platform = PLATFORMS.QUICKAPP_WEBVIEW;
/* #endif */
/* #ifdef QUICKAPP-WEBVIEW-UNION */
platform = PLATFORMS.QUICKAPP_WEBVIEW_UNION;
/* #endif */
/* #ifdef QUICKAPP-WEBVIEW-HUAWEI */
platform = PLATFORMS.QUICKAPP_WEBVIEW_HUAWEI;
/* #endif */
return platform;
}
/**
* 当前平台
* 在微信小程序中 "process.env['UNI_PLATFORM']" 无效
*/
export const CURRENT_PLATFORM = PLATFORM_ENV();

13
src/enums/routerEnum.ts
View File

@ -1,13 +0,0 @@
export enum NAVIGATE_TYPE {
NAVIGATE_TO = 'navigateTo',
REDIRECT_TO = 'redirectTo',
RE_LAUNCH = 'reLaunch',
SWITCH_TAB = 'switchTab',
NAVIGATE_BACK = 'navigateBack',
}
export const NAVIGATE_TYPE_LIST = ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'];
export const HOME_PAGE = '/pages/index/index';
export const LOGIN_PAGE = '/pages/login/index';
export const NOT_FOUND_PAGE = '/pages/notFound/404';

4
src/hooks/app/useGlobalStyle.ts
View File

@ -4,7 +4,7 @@ const { globalStyle } = pagesJson;
/**
* 全局样式
*/
export const useGlobalStyle = () => {
export function useGlobalStyle() {
const { navigationBarTextStyle, navigationBarTitleText, navigationBarBackgroundColor, backgroundColor } = globalStyle;
return {
navigationBarTextStyle,
@ -12,4 +12,4 @@ export const useGlobalStyle = () => {
navigationBarBackgroundColor,
backgroundColor,
};
};
}

149
src/hooks/app/useSystem.ts
View File

@ -3,150 +3,9 @@
* @description 除去uni官方不推荐使用的返回参数
* @link https://uniapp.dcloud.net.cn/api/system/info.html
*/
export const useSystem = () => {
const {
// device
deviceId,
deviceBrand,
deviceModel,
deviceType,
devicePixelRatio,
deviceOrientation,
// os
osName,
osVersion,
osLanguage,
osTheme,
// @ts-ignore
osAndroidAPILevel,
// rom
romName,
romVersion,
// browser
browserName,
browserVersion,
// host
hostFontSizeSetting,
hostSDKVersion,
hostName,
hostVersion,
hostLanguage,
hostTheme,
hostPackageName,
// uni-app框架
uniPlatform,
uniCompileVersion,
uniRuntimeVersion,
// app
appId,
appName,
appVersion,
appVersionCode,
appLanguage,
// @ts-ignore
appWgtVersion,
// 其他
ua,
screenWidth,
screenHeight,
windowWidth,
windowHeight,
windowTop,
windowBottom,
statusBarHeight,
safeArea,
safeAreaInsets,
// 某些小程序特殊的返回参数
// @ts-ignore
benchmarkLevel,
// @ts-ignore
batteryLevel,
currentBattery,
navigationBarHeight,
titleBarHeight,
albumAuthorized,
cameraAuthorized,
locationAuthorized,
microphoneAuthorized,
notificationAuthorized,
notificationAlertAuthorized,
notificationBadgeAuthorized,
notificationSoundAuthorized,
bluetoothEnabled,
locationEnabled,
wifiEnabled,
cacheLocation,
storage,
} = uni.getSystemInfoSync();
const { top: safeAreaTop, bottom: safeAreaBottom, left: safeAreaLeft, right: safeAreaRight, height: safeAreaHeight, width: safeAreaWidth } = safeArea!;
const { top: safeAreaInsetsTop, bottom: safeAreaInsetsBottom, left: safeAreaInsetsLeft, right: safeAreaInsetsRight } = safeAreaInsets!;
export function useSystem() {
const systemInfo = reactive<UniNamespace.GetSystemInfoResult>(uni.getSystemInfoSync());
return {
deviceId,
deviceBrand,
deviceModel,
deviceType,
devicePixelRatio,
deviceOrientation,
osName,
osVersion,
osLanguage,
osTheme,
osAndroidAPILevel,
romName,
romVersion,
browserName,
browserVersion,
hostFontSizeSetting,
hostSDKVersion,
hostName,
hostVersion,
hostLanguage,
hostTheme,
hostPackageName,
uniPlatform,
uniCompileVersion,
uniRuntimeVersion,
appId,
appName,
appVersion,
appVersionCode,
appLanguage,
appWgtVersion,
ua,
screenWidth,
screenHeight,
windowWidth,
windowHeight,
windowTop,
windowBottom,
statusBarHeight,
safeAreaTop,
safeAreaBottom,
safeAreaLeft,
safeAreaRight,
safeAreaHeight,
safeAreaWidth,
safeAreaInsetsTop,
safeAreaInsetsBottom,
safeAreaInsetsLeft,
safeAreaInsetsRight,
benchmarkLevel,
batteryLevel,
currentBattery,
navigationBarHeight,
titleBarHeight,
albumAuthorized,
cameraAuthorized,
locationAuthorized,
microphoneAuthorized,
notificationAuthorized,
notificationAlertAuthorized,
notificationBadgeAuthorized,
notificationSoundAuthorized,
bluetoothEnabled,
locationEnabled,
wifiEnabled,
cacheLocation,
storage,
systemInfo,
};
};
}

12
src/main.ts
View File

@ -1,18 +1,16 @@
import { createSSRApp } from 'vue';
import App from './App.vue';
import 'uno.css';
import { setupStore } from '@/state';
import { setupRouter } from '@/router';
import 'virtual:uno.css';
import { setupRouter } from './router';
import { setupStore } from './stores';
export function createApp() {
const app = createSSRApp(App);
// Configure router
setupRouter(app);
// Configure store
setupStore(app);
setupRouter(app);
return {
app,
};

134
src/manifest.json
View File

@ -1,31 +1,31 @@
{
"name" : "uniapp_vue3_vite_ts",
"appid" : "__UNI__4350F4E",
"description" : "",
"versionName" : "1.2.1",
"versionCode" : "100",
"transformPx" : false,
"name": "uniapp_vue3_vite_ts",
"appid": "__UNI__4350F4E",
"description": "",
"versionName": "1.2.1",
"versionCode": "100",
"transformPx": false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
"app-plus": {
"usingComponents": true,
"nvueStyleCompiler": "uni-app",
"compilerVersion": 3,
"splashscreen": {
"alwaysShowBeforeRender": true,
"waiting": true,
"autoclose": true,
"delay": 0
},
/* 模块配置 */
"modules" : {},
"optimization" : {
"subPackages" : true
"modules": {},
"optimization": {
"subPackages": true
},
/* 应用发布信息 */
"distribute" : {
"distribute": {
/* android打包配置 */
"android" : {
"permissions" : [
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
@ -42,74 +42,74 @@
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
],
"minSdkVersion" : 21
"minSdkVersion": 21
},
/* ios打包配置 */
"ios" : {
"dSYMs" : false
"ios": {
"dSYMs": false
},
/* SDK配置 */
"sdkConfigs" : {
"ad" : {}
"sdkConfigs": {
"ad": {}
},
"splashscreen" : {
"useOriginalMsgbox" : true
"splashscreen": {
"useOriginalMsgbox": true
}
}
},
/* 快应用特有相关 */
"quickapp" : {},
"quickapp": {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "wxc8e4923d551cd4a4",
"setting" : {
"urlCheck" : false,
"es6" : true,
"postcss" : true,
"minified" : true
"mp-weixin": {
"appid": "wxc8e4923d551cd4a4",
"setting": {
"urlCheck": false,
"es6": true,
"postcss": true,
"minified": true
},
"usingComponents" : true,
"permission" : {},
"optimization" : {
"subPackages" : true
"usingComponents": true,
"permission": {},
"optimization": {
"subPackages": true
},
"lazyCodeLoading" : "requiredComponents",
"style" : "v2"
"lazyCodeLoading": "requiredComponents",
"style": "v2"
},
"mp-alipay" : {
"usingComponents" : true,
"optimization" : {
"subPackages" : true
"mp-alipay": {
"usingComponents": true,
"optimization": {
"subPackages": true
}
},
"mp-baidu" : {
"usingComponents" : true
"mp-baidu": {
"usingComponents": true
},
"mp-toutiao" : {
"usingComponents" : true
"mp-toutiao": {
"usingComponents": true
},
"uniStatistics" : {
"enable" : false
"uniStatistics": {
"enable": false
},
"vueVersion" : "3",
"h5" : {
"router" : {
"mode" : "hash",
"base" : "./"
"vueVersion": "3",
"h5": {
"router": {
"mode": "hash",
"base": "./"
},
"devServer" : {
"https" : false
"devServer": {
"https": false
},
"title" : "uniapp_vue3_vite_ts",
"unipush" : {
"enable" : false
"title": "uniapp_vue3_vite_ts",
"unipush": {
"enable": false
},
"sdkConfigs" : {
"maps" : {}
"sdkConfigs": {
"maps": {}
},
"optimization" : {
"treeShaking" : {
"enable" : true
"optimization": {
"treeShaking": {
"enable": true
}
}
}

2
src/mock/index.ts
View File

@ -1,5 +1,5 @@
import { createAlovaMockAdapter } from '@alova/mock';
import { uniappRequestAdapter, uniappMockResponse } from '@alova/adapter-uniapp';
import { uniappMockResponse, uniappRequestAdapter } from '@alova/adapter-uniapp';
import { mockGroupV1 } from '@/mock/v1';
/**

14
src/mock/utils.ts
View File

@ -1,14 +1,14 @@
import { ResultEnum } from '@/enums/httpEnum';
import { API } from '@/services/model/baseModel';
import type { API } from '@/services/model/baseModel';
interface MockResponseOptions<T = any> {
status: number;
statusText: string;
responseHeaders: Record<string, any>;
body: API<T>;
status: number
statusText: string
responseHeaders: Record<string, any>
body: API<T>
}
export const createMock = (options: Partial<API>): MockResponseOptions => {
export function createMock(options: Partial<API>): MockResponseOptions {
return {
status: 200,
statusText: 'OK',
@ -19,4 +19,4 @@ export const createMock = (options: Partial<API>): MockResponseOptions => {
...options,
},
};
};
}

9
src/mock/v1/modules/auth.ts
View File

@ -1,21 +1,22 @@
import { defineMock } from '@alova/mock';
import { createMock } from '@/mock/utils';
import { join, sampleSize } from 'lodash-es';
import { createMock } from '@/mock/utils';
import { ResultEnum } from '@/enums/httpEnum';
const createRandomToken = (len = 36 * 6) => {
function createRandomToken(len = 36 * 6) {
const token = join(sampleSize('0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ._-', len), '');
return `eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.${token}`;
};
}
export const authMocks = defineMock({
// 登录
'[POST]/api/v1/login': (params) => {
'[POST]/api/login': (params) => {
const { email, password } = params.data;
if (email === 'uni-app@test.com' && (password === 'Vue3_Ts_Vite' || password === '123456')) {
const token = createRandomToken();
return createMock({ data: { token } });
}
console.log('模拟登录');
return createMock({ data: [], code: ResultEnum.FAIL, message: '邮箱或密码错误' });
},
});

51
src/pages.json
View File

@ -47,58 +47,9 @@
"style": {
"navigationBarTitleText": "日志"
}
},
{
"name": "NotFound",
"path": "pages/notFound/404",
"style": {
"navigationBarTitleText": "Not Found"
},
"meta": {
"ignoreAuth": true
}
}
],
"subPackages": [
{
"root": "pagesA",
"pages": [
{
"path": "list/test1/index",
"style": {
"navigationBarTitleText": "test1"
},
"meta": {
"ignoreAuth": true
}
},
{
"path": "list/test2/index",
"style": {
"navigationBarTitleText": "test2",
"navigationStyle": "custom"
},
"meta": {
"ignoreAuth": true
}
}
]
},
{
"root": "pagesB",
"pages": [
{
"path": "detail/index",
"style": {
"navigationBarTitleText": "Detail"
},
"meta": {
"ignoreAuth": true
}
}
]
}
],
"subPackages": [],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",

66
src/pages/about/index.vue
View File

@ -1,74 +1,10 @@
<script lang="ts" setup>
import BasicButton from '@/components/BasicButton/index.vue';
import AppProvider from '@/components/AppProvider/index.vue';
import { useAuthStore } from '@/state/modules/auth';
onLoad(() => {
console.log('about load');
});
const authStore = useAuthStore();
const isLogin = ref(false);
const router = useRouter();
onShow(() => {
isLogin.value = authStore.isLogin;
});
const handleJump = (url: string) => {
router.push(url);
};
// 登出
const handleLoginOut = () => {
authStore.loginOut().then(() => {
isLogin.value = false;
});
};
</script>
<template>
<AppProvider>
<view class="container">
<view class="head-wrap">
<view class="avatar">
<image class="img" src="/static/images/avatar.png" />
</view>
<view class="desc">{{ isLogin ? '测试' : '未登入' }}</view>
</view>
<view class="cell"><BasicButton @click="handleJump('/pages/log/index?id=4345&title=log&word=关键词')">log</BasicButton></view>
<view class="cell" v-if="isLogin"><BasicButton @click="handleLoginOut">登出</BasicButton></view>
<view class="cell" v-else>
<BasicButton @click="handleJump('/pages/login/index')"> 登入 </BasicButton>
</view>
</view>
</AppProvider>
<view>关于</view>
</template>
<style lang="scss" scoped>
.container {
padding: 96rpx 24rpx;
.head-wrap {
display: flex;
flex-direction: column;
align-items: center;
.avatar {
height: 120rpx;
width: 120rpx;
border: 2rpx solid #d1d5db;
border-radius: 120rpx;
overflow: hidden;
padding: 6rpx;
.img {
height: 100%;
width: 100%;
}
}
.desc {
font-size: 28rpx;
line-height: 120rpx;
}
}
.cell {
margin-top: 60rpx;
text-align: center;
}
}
</style>

16
src/pages/demo/index.vue
View File

@ -1,21 +1,11 @@
<script lang="ts" setup>
import BasicButton from '@/components/BasicButton/index.vue';
import AppProvider from '@/components/AppProvider/index.vue';
import { ref } from 'vue';
const router = useRouter();
const jumpList1 = () => {
// router.push('/pagesA/list/test1/index11?key=words&page=1&limit=15');
router.push({ path: '/pagesA/list/test1/index', query: { key: 'word', page: '1', limit: '15' } });
};
const demo = ref('Demo');
</script>
<template>
<AppProvider>
<view class="container"> 页面构建中... </view>
<view class="_u_center">
<BasicButton @click="jumpList1">List1 → </BasicButton>
</view>
</AppProvider>
<view>{{ demo }}</view>
</template>
<style lang="scss" scoped>

74
src/pages/index/index.vue
View File

@ -1,69 +1,23 @@
<script setup lang="ts">
import BasicButton from '@/components/BasicButton/index.vue';
import AppProvider from '@/components/AppProvider/index.vue';
import { CURRENT_PLATFORM, PLATFORMS } from '@/enums/platformEnum';
import { judgePlatform } from '@/utils/platform';
import Iconify from '@/components/Iconify/index.vue';
import { getEnvValue } from '@/utils/env';
const appTitle = getEnvValue<string>('VITE_APP_TITLE');
const title = ref(appTitle);
const platform = CURRENT_PLATFORM;
const isVue3 = judgePlatform(PLATFORMS.VUE3);
import { useRouter } from 'uni-mini-router';
const router = useRouter();
const handleGetStarted = () => {
router.pushTab({ path: '/pages/demo/index' });
};
function onClick() {
console.log('click');
router.push({ name: 'Login' });
}
// const pt = __UNI_PLATFORM__;
</script>
<template>
<AppProvider>
<view class="content">
<image class="logo" src="/static/svg/LOGO.svg" />
<view class="text-area">
<text class="">{{ title }}</text>
<view class="border border-solid border-blue text-primary h-44 center text-mini">
home
</view>
<view class="text-area">
<text class="">是否是Vue3: {{ isVue3 }}</text>
</view>
<view class="text-area">
<text class="_u_text-red">当前平台: {{ platform }}</text>
</view>
<BasicButton @click="handleGetStarted">Get Started → </BasicButton>
<view class="_u_text-red">uno css</view>
<Iconify icon="i-ph-anchor-simple-thin" size="65" />
<Iconify icon="i-system-uicons-book-text" />
<Iconify icon="i-system-uicons-battery-full" size="65" />
<Iconify icon="i-system-uicons-box-add" :size="65" />
<Iconify icon="i-system-uicons-bell-snooze" color="red" :size="65" />
</view>
</AppProvider>
<button @click="onClick">
登录
</button>
</template>
<style lang="scss">
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin: 280rpx auto 50rpx;
}
.text-area {
display: flex;
justify-content: center;
margin-bottom: 60rpx;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>

4
src/pages/log/index.vue
View File

@ -5,7 +5,9 @@ onLoad((query) => {
</script>
<template>
<view style="line-height: 88rpx; text-align: center">登录后访问log</view>
<view style="line-height: 88rpx; text-align: center">
登录后访问log
</view>
</template>
<style lang="scss" scoped></style>

36
src/pages/login/index.vue
View File

@ -1,10 +1,12 @@
<script setup lang="ts">
import { useAuthStore } from '@/state/modules/auth';
import { Toast } from '@/utils/uniapi/prompt';
// import { useRequest } from 'alova';
import { login } from '@/services/api/auth';
import { omit } from 'lodash-es';
import { useRequest } from 'alova';
import { useRouter } from 'uni-mini-router';
import { reactive, ref, unref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { omit } from 'lodash-es';
import { useAuthStore } from '@/stores/modules/auth';
import { login } from '@/services/api/auth';
import { Toast } from '@/utils/uniapi/prompt';
const pageQuery = ref<Record<string, any> | undefined>(undefined);
onLoad((query) => {
@ -19,7 +21,7 @@ const form = reactive({
});
const authStore = useAuthStore();
const { send: sendLogin } = useRequest(login, { immediate: false });
const submit = (e: any) => {
function submit(e: any) {
sendLogin(e.detail.value).then((res) => {
Toast('登录成功', { duration: 1500 });
authStore.setToken(res.token);
@ -27,11 +29,11 @@ const submit = (e: any) => {
if (unref(pageQuery)?.redirect) {
// 如果有存在redirect(重定向)参数，登录成功后直接跳转
const params = omit(unref(pageQuery), ['redirect', 'tabBar']);
if (unref(pageQuery)?.tabBar) {
if (unref(pageQuery)) {
// 这里replace方法无法跳转tabbar页面故改为replaceAll
router.replaceAll({ name: unref(pageQuery).redirect, params });
} else {
router.replace({ name: unref(pageQuery).redirect, params });
unref(pageQuery)?.tabBar === 'true'
? router.replaceAll({ name: unref(pageQuery)?.redirect, params })
: router.replace({ name: unref(pageQuery)?.redirect, params });
}
} else {
// 不存在则返回上一页
@ -39,23 +41,27 @@ const submit = (e: any) => {
}
}, 1500);
});
};
}
</script>
<template>
<view class="container">
<view class="title">登录</view>
<view class="title">
登录
</view>
<view class="form-wrap">
<form class="form" @submit="submit">
<label class="form-item">
<view class="form-label">邮箱:</view>
<view class="form-element"><input name="email" :value="form.email" /></view>
<view class="form-element"><input name="email" :value="form.email"></view>
</label>
<label class="form-item">
<view class="form-label">密码:</view>
<view class="form-element"><input type="password" name="password" :value="form.password" /></view>
<view class="form-element"><input type="password" name="password" :value="form.password"></view>
</label>
<button form-type="submit" class="submit-btn" hover-class="none">登录</button>
<button form-type="submit" class="submit-btn" hover-class="none">
登录
</button>
</form>
</view>
</view>

8
src/pages/notFound/404.vue
View File

@ -13,9 +13,9 @@ onLoad((query) => {
/**
* 返回首页
*/
const backHome = () => {
function backHome() {
router.pushTab(redirect.value);
};
}
</script>
<template>
@ -24,7 +24,9 @@ const backHome = () => {
<view class="mb-40rpx">
<text>{{ go }} 页面找不到了~</text>
</view>
<BasicButton @click="backHome">返回首页</BasicButton>
<BasicButton @click="backHome">
返回首页
</BasicButton>
</view>
</template>

16
src/pagesA/list/test1/index.vue
View File

@ -2,12 +2,20 @@
import BasicButton from '@/components/BasicButton/index.vue';
const router = useRouter();
const jumpTest2 = () => {
function jumpTest2() {
router.push('/pagesA/list/test2/index?id=256');
};
}
</script>
<template>
<view class="_u_center"> Test1 </view>
<view class="_u_center"><BasicButton @click="jumpTest2">Test2 → </BasicButton></view>
<view class="center">
Test1
</view>
<view class="center">
<BasicButton @click="jumpTest2">
Test2 →
</BasicButton>
</view>
</template>
<style scoped></style>

10
src/pagesA/list/test2/index.vue
View File

@ -2,14 +2,18 @@
import BasicButton from '@/components/BasicButton/index.vue';
const router = useRouter();
const jumpDetail = () => {
function jumpDetail() {
router.push('/pagesB/detail/index?page=1&limit=20');
};
}
</script>
<template>
<view>
<view> Test2 </view>
<BasicButton @click="jumpDetail">Detail → </BasicButton>
<BasicButton @click="jumpDetail">
Detail →
</BasicButton>
</view>
</template>
<style scoped></style>

6
src/pagesB/detail/index.vue
View File

@ -1,3 +1,7 @@
<script lang="ts" setup></script>
<template>Detail</template>
<template>
Detail
</template>
<style scoped></style>

56
src/router/guard.ts
View File

@ -1,5 +1,4 @@
import { useAuthStore } from '@/state/modules/auth';
import { Router } from 'uni-mini-router/lib/interfaces';
import type { Router } from 'uni-mini-router/lib/interfaces';
export function createRouterGuard(router: Router) {
createBeforeEachGuard(router);
@ -7,36 +6,37 @@ export function createRouterGuard(router: Router) {
}
function createBeforeEachGuard(router: Router) {
router.beforeEach((to, _, next) => {
const authStore = useAuthStore();
// @ts-ignore
if (to && to?.meta?.ignoreAuth) {
// 如果目标路由忽略验证直接跳转
router.beforeEach((_1, _2, next) => {
// const authStore = useAuthStore();
// if (to && to?.meta?.ignoreAuth) {
// // 如果目标路由忽略验证直接跳转
// next();
// } else if (!authStore.isLogin && to && to.name !== 'Login') {
// // 如果没有登录且目标路由不是登录页面则跳转到登录页面
// // 将目标路由和参数传入登录页面，登录成功后直接跳转到目标路由，优化体验
// next({ name: 'Login', params: { redirect: to.name!, ...to.query }, navType: 'push' });
// } else if (authStore.isLogin && to && to.name === 'Login') {
// // 如果已经登录且目标页面是登录页面则跳转至首页
// next({ name: 'Home', navType: 'replaceAll' });
// } else {
// next();
// }
next();
} else if (!authStore.isLogin && to && to.name !== 'Login') {
// 如果没有登录且目标路由不是登录页面则跳转到登录页面
// 将目标路由和参数传入登录页面，登录成功后直接跳转到目标路由，优化体验
next({ name: 'Login', params: { redirect: to.name!, tabBar: to?.meta?.tabBar, ...to.query }, navType: 'push' });
} else if (authStore.isLogin && to && to.name === 'Login') {
// 如果已经登录且目标页面是登录页面则跳转至首页
next({ name: 'Home', navType: 'replaceAll' });
} else {
next();
}
});
}
function createAfterEachGuard(router: Router) {
router.afterEach((to) => {
// @ts-ignore
if (to && to?.meta?.ignoreAuth) return;
const authStore = useAuthStore();
if (!authStore.isLogin && to && to.name !== 'Login') {
// 如果没有登录且目标路由不是登录页面则跳转到登录页面
router.push({ name: 'Login', params: { tabBar: to?.meta?.tabBar, ...to.query }});
} else if (authStore.isLogin && to && to.name === 'Login') {
// 如果已经登录且目标页面是登录页面则跳转至首页
router.replaceAll({ name: 'Home' });
}
router.afterEach((_) => {
// if (to && to?.meta?.ignoreAuth)
// return;
// const authStore = useAuthStore();
// if (!authStore.isLogin && to && to.name !== 'Login') {
// // 如果没有登录且目标路由不是登录页面则跳转到登录页面
// router.push({ name: 'Login', params: { ...to.query } });
// } else if (authStore.isLogin && to && to.name === 'Login') {
// // 如果已经登录且目标页面是登录页面则跳转至首页
// router.replaceAll({ name: 'Home' });
// }
console.log('afterEach', _);
});
}

4
src/router/index.ts
View File

@ -3,8 +3,8 @@
* @see https://gitee.com/fant-mini/uni-mini-router
*/
import { createRouter } from 'uni-mini-router';
import { App } from 'vue';
import { createRouterGuard } from '@/router/guard';
import type { App } from 'vue';
import { createRouterGuard } from './guard';
const router = createRouter({
routes: [...ROUTES], // 路由表信息

6
src/services/model/authModel.d.ts vendored
View File

@ -1,7 +1,7 @@
declare interface LoginParams {
email: string;
password: string;
email: string
password: string
}
declare interface LoginModel {
token: string;
token: string
}

8
src/services/model/baseModel.d.ts vendored
View File

@ -1,7 +1,7 @@
import { ResultEnum } from '@/enums/httpEnum';
import type { ResultEnum } from '@/enums/httpEnum';
declare interface API<T = any> {
code: ResultEnum;
data?: T;
message: string;
code: ResultEnum
data?: T
message: string
}

12
src/state/app.ts
View File

@ -1,12 +0,0 @@
import { defineStore } from 'pinia';
interface AppState {
sys?: string | number;
}
export const useAppStore = defineStore({
id: 'app-store',
state: (): AppState => ({}),
getters: {},
actions: {},
});

55
src/state/modules/auth.ts
View File

@ -1,55 +0,0 @@
import { defineStore } from 'pinia';
import { getCache, removeCache, setCache } from '@/utils/cache';
import { TOKEN_KEY } from '@/enums/cacheEnum';
// import { logout } from '@/services/api/auth';
interface AuthState {
token?: string;
}
export const useAuthStore = defineStore({
id: 'auth',
state: (): AuthState => ({
token: undefined,
}),
getters: {
getToken: (state) => state.token,
isLogin: (state): boolean => !!state.token,
getAuthorization: (state) => {
return state.token ? { authorization: `Bearer ${state.token}` } : {};
},
},
actions: {
initToken() {
this.token = getCache<string>(TOKEN_KEY) || undefined;
},
setToken(token: string | undefined) {
setCache(TOKEN_KEY, token);
this.token = token;
},
/**
* @description 登出
*/
async loginOut(): Promise<any> {
try {
// await logout();
removeCache(TOKEN_KEY);
this.setToken(undefined);
} catch (err: any) {
console.error(err);
}
},
/**
* @description 刷新token
*/
// async refreshToken(): Promise<LoginModel> {
// try {
// const { data } = await refreshToken();
// this.setToken(data.token);
// return Promise.resolve(data);
// } catch (err: any) {
// return Promise.reject(err);
// }
// },
},
});

12
src/state/modules/user.ts
View File

@ -1,12 +0,0 @@
import { defineStore } from 'pinia';
interface UserState {
id?: string | number;
}
export const useUserStore = defineStore({
id: 'user',
state: (): UserState => ({}),
getters: {},
actions: {},
});

12
src/stores/app.ts Normal file
View File

@ -0,0 +1,12 @@
import { defineStore } from 'pinia';
interface AppState {
sys?: string | number
}
export const useAppStore = defineStore({
id: 'app-store',
state: (): AppState => ({}),
getters: {},
actions: {},
});

0
src/state/index.ts → src/stores/index.ts
View File

56
src/stores/modules/auth.ts Normal file
View File

@ -0,0 +1,56 @@
import { defineStore } from 'pinia';
import { getCache, removeCache, setCache } from '@/utils/cache';
import { TOKEN_KEY } from '@/enums/cacheEnum';
// import { logout } from '@/services/api/auth';
interface AuthState {
token?: string | null
}
export const useAuthStore = defineStore({
id: 'auth',
state: (): AuthState => ({
token: null,
}),
getters: {
getToken: state => state.token,
isLogin: (state): boolean => !!state.token,
getAuthorization: (state) => {
return state.token ? { authorization: `Bearer ${state.token}` } : {};
},
},
actions: {
initToken() {
this.token = getCache<string>(TOKEN_KEY) || null;
},
setToken(token: string | null) {
setCache(TOKEN_KEY, token);
this.token = token;
},
/**
* @description 登出
*/
async loginOut(): Promise<any> {
try {
// await logout();
removeCache(TOKEN_KEY);
this.setToken(null);
} catch (err: any) {
console.error(err);
}
},
/**
* @description 刷新token
*/
// async refreshToken(): Promise<LoginModel> {
// try {
// const { data } = await refreshToken();
// this.setToken(data.token);
// return Promise.resolve(data);
// } catch (err: any) {
// return Promise.reject(err);
// }
// },
},
});

12
src/stores/modules/user.ts Normal file
View File

@ -0,0 +1,12 @@
import { defineStore } from 'pinia';
interface UserState {
id?: string | number
}
export const useUserStore = defineStore({
id: 'user',
state: (): UserState => ({}),
getters: {},
actions: {},
});

0
src/styles/main.css Normal file
View File

3
src/types.d.ts vendored
View File

@ -1,2 +1,3 @@
//type.d.ts
// type.d.ts
declare const ROUTES: [];
declare const PLATFORM: string;

24
src/types/env.d.ts vendored
View File

@ -1,22 +1,24 @@
// / <reference types="vite/client" />
declare module '*.vue' {
import { DefineComponent } from 'vue';
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
const component: DefineComponent<{}, {}, any>;
import type { DefineComponent } from 'vue';
const component: DefineComponent<NonNullable<unknown>, NonNullable<unknown>, any>;
export default component;
}
interface ImportMetaEnv {
readonly VITE_ENV: string;
readonly VITE_APP_TITLE: string;
readonly VITE_BASE_URL: string;
readonly VITE_UPLOAD_URL: string;
readonly VITE_APP_CACHE_PREFIX: string;
readonly VITE_PORT: number;
readonly VITE_USE_MOCK: string;
readonly VITE_ENV: string
readonly VITE_APP_TITLE: string
readonly VITE_BASE_URL: string
readonly VITE_UPLOAD_URL: string
readonly VITE_APP_CACHE_PREFIX: string
readonly VITE_PORT: number
readonly VITE_USE_MOCK: string | boolean
readonly VITE_PROXY_PREFIX: string
readonly VITE_UPLOAD_PROXY_PREFIX: string
}
interface ImportMeta {
readonly env: ImportMetaEnv;
readonly env: ImportMetaEnv
}

8
src/types/uni-mini-router.d.ts vendored Normal file
View File

@ -0,0 +1,8 @@
declare module 'uni-mini-router' {
interface Route {
meta?: {
ignoreAuth?: boolean
tabBar?: boolean
}
}
}

4
src/types/unplugin-transform-class-vite.d.ts vendored Normal file
View File

@ -0,0 +1,4 @@
declare module 'unplugin-transform-class/vite' {
const transformClassVitePlugin: any;
export default transformClassVitePlugin;
}

47
src/uni.scss
View File

@ -0,0 +1,47 @@
view,
scroll-view,
swiper,
match-media,
movable-area,
movable-view,
cover-view,
cover-image,
icon,
text,
rich-text,
progress,
button,
checkboxe,
ditor,
form,
input,
label,
picker,
picker-view,
radio,
slider,
switch,
textarea,
navigator,
audio,
camera,
image,
video,
live-player,
live-pusher,
map,
canvas,
web-view,
:before,
:after {
box-sizing: border-box;
}
/* 隐藏scroll-view的滚动条 */
::-webkit-scrollbar {
display: none;
width: 0 !important;
height: 0 !important;
-webkit-appearance: none;
background: transparent;
}

5
src/utils/cache/index.ts vendored
View File

@ -1,5 +1,6 @@
import { createStorage, CreateStorageParams } from './storageCache';
import { cacheCipher, DEFAULT_CACHE_TIME, DEFAULT_PREFIX_KEY, enableStorageEncryption } from '@/settings/encryptionSetting';
import type { CreateStorageParams } from './storageCache';
import { createStorage } from './storageCache';
import { DEFAULT_CACHE_TIME, DEFAULT_PREFIX_KEY, cacheCipher, enableStorageEncryption } from '@/settings/encryptionSetting';
const options: Partial<CreateStorageParams> = {
prefixKey: DEFAULT_PREFIX_KEY,

21
src/utils/cache/storageCache.ts vendored
View File

@ -4,18 +4,18 @@ import { AesEncryption } from '@/utils/cipher';
import { isNullOrUnDef } from '@/utils/is';
export interface CreateStorageParams extends EncryptionParams {
prefixKey: string;
hasEncrypt: boolean;
timeout?: number | null;
prefixKey: string
hasEncrypt: boolean
timeout?: number | null
}
export const createStorage = ({
export function createStorage({
prefixKey = '',
key = cacheCipher.key,
iv = cacheCipher.iv,
timeout = null,
hasEncrypt = true,
}: Partial<CreateStorageParams> = {}) => {
if (hasEncrypt && [key.length, iv.length].some((item) => item !== 16)) {
}: Partial<CreateStorageParams> = {}) {
if (hasEncrypt && [key.length, iv.length].some(item => item !== 16)) {
throw new Error('When hasEncrypt is true, the key or iv must be 16 bits!');
}
@ -34,10 +34,6 @@ export const createStorage = ({
private hasEncrypt: boolean;
/**
*
* @param {*} storage
*/
constructor() {
this.prefixKey = prefixKey;
this.encryption = encryption;
@ -77,7 +73,8 @@ export const createStorage = ({
*/
get<T = any>(key: string, def: any = null): T {
const val = uni.getStorageSync(this.getKey(key));
if (!val) return def;
if (!val)
return def;
try {
const decVal = this.hasEncrypt ? this.encryption.decryptByAES(val) : val;
@ -110,4 +107,4 @@ export const createStorage = ({
}
}
return new Storage();
};
}

6
src/utils/cipher.ts
View File

@ -1,4 +1,4 @@
import { encrypt, decrypt } from 'crypto-js/aes';
import { decrypt, encrypt } from 'crypto-js/aes';
import UTF8, { parse } from 'crypto-js/enc-utf8';
import pkcs7 from 'crypto-js/pad-pkcs7';
import ECB from 'crypto-js/mode-ecb';
@ -7,8 +7,8 @@ import md5 from 'crypto-js/md5';
import Base64 from 'crypto-js/enc-base64';
export interface EncryptionParams {
key: string;
iv: string;
key: string
iv: string
}
/**

3
src/utils/env.ts
View File

@ -1,6 +1,4 @@
import pkg from '../../package.json';
import { judgePlatform } from '@/utils/platform';
import { PLATFORMS } from '@/enums/platformEnum';
/**
* @description: Generate cache key according to version
@ -80,6 +78,5 @@ export function getBaseUrl(): string {
* @example:
*/
export function getUploadUrl(): string {
if (judgePlatform(PLATFORMS.H5) && isDevMode()) return '/upload';
return getEnvValue<string>('VITE_UPLOAD_URL');
}

45
src/utils/http/index.ts
View File

@ -1,19 +1,18 @@
import { createAlova } from 'alova';
import AdapterUniapp from '@alova/adapter-uniapp';
import { assign } from 'lodash-es';
import { checkStatus } from './checkStatus';
import { getBaseUrl, isUseMock } from '@/utils/env';
import { mockAdapter } from '@/mock';
import { assign } from 'lodash-es';
import { useAuthStore } from '@/state/modules/auth';
import { checkStatus } from '@/utils/http/checkStatus';
import { useAuthStore } from '@/stores/modules/auth';
import { ContentTypeEnum, ResultEnum } from '@/enums/httpEnum';
import { Toast } from '@/utils/uniapi/prompt';
import { API } from '@/services/model/baseModel';
import type { API } from '@/services/model/baseModel';
const BASE_URL = getBaseUrl();
const HEADER = {
'Content-Type': ContentTypeEnum.JSON,
Accept: 'application/json, text/plain, */*',
'Accept': 'application/json, text/plain, */*',
};
/**
@ -22,6 +21,7 @@ const HEADER = {
*/
const alovaInstance = createAlova({
baseURL: BASE_URL,
localCache: null, // 设置为null即可全局关闭全部请求缓存
...AdapterUniapp({
/* #ifndef APP-PLUS */
mockRequest: isUseMock() ? mockAdapter : undefined, // APP 平台无法使用mock
@ -32,7 +32,7 @@ const alovaInstance = createAlova({
const authStore = useAuthStore();
method.config.headers = assign(method.config.headers, HEADER, authStore.getAuthorization);
},
responsed: {
responded: {
/**
* 请求成功的拦截器
* 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
@ -41,38 +41,27 @@ const alovaInstance = createAlova({
*/
onSuccess: async (response, method) => {
const { config } = method;
const { enableDownload, enableUpload } = config;
// @ts-ignore
const { statusCode, data: rawData } = response;
const { code, message, data } = rawData as API;
const { requestType } = config;
const { statusCode, data: rawData, errMsg } = response as UniNamespace.RequestSuccessCallbackResult;
if (statusCode === 200) {
if (enableDownload) {
// 下载处理
return rawData;
}
if (enableUpload) {
// 上传处理
return rawData;
if (requestType) {
return response;
}
const { code, message, data } = rawData as API;
if (code === ResultEnum.SUCCESS) {
return data as any;
}
message && Toast(message);
return Promise.reject(rawData);
}
checkStatus(statusCode, message || '');
return Promise.reject(rawData);
throw new Error(`[请求错误]：${message}`);
}
throw new Error(`[请求错误]：${errMsg}`);
},
/**
* 请求失败的拦截器，请求错误时将会进入该拦截器。
* 第二个参数为当前请求的method实例，你可以用它同步请求前后的配置信息
* @param err
* @param method
*/
onError: (err, method) => {
// error('Request Error!');
return Promise.reject({ err, method });
onError: (err) => {
throw new Error(`[请求错误]：${err}`);
},
},
});

1
src/utils/interceptors/index.ts
View File

@ -1,4 +1,3 @@
export function setupInterceptors() {
}

6
src/utils/is.ts
View File

@ -93,8 +93,8 @@ export const isServer = typeof window === 'undefined';
export const isClient = !isServer;
export function isUrl(path: string): boolean {
// @ts-ignore
const reg =
/^((https|http|ftp|rtsp|mms):\/\/)(([0-9a-zA-Z_!~*'().&=+$%-]+: )?[0-9a-zA-Z_!~*'().&=+$%-]+@)?(([0-9]{1,3}.){3}[0-9]{1,3}|([0-9a-zA-Z_!~*'()-]+.)*([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z].[a-zA-Z]{2,6})(:[0-9]{1,4})?((\/?)|(\/[0-9a-zA-Z_!~*'().;?:@&=+$,%#-]+)+\/?)$/;
// @ts-expect-error
const reg
= /^((https|http|ftp|rtsp|mms):\/\/)(([\w!~*'().&=+$%-]+: )?[\w!~*'().&=+$%-]+@)?((\d{1,3}.){3}\d{1,3}|([\w!~*'()-]+.)*([0-9a-zA-Z][0-9a-zA-Z-]{0,61})?[0-9a-zA-Z].[a-zA-Z]{2,6})(:\d{1,4})?((\/?)|(\/[\w!~*'().;?:@&=+$,%#-]+)+\/?)$/;
return reg.test(path);
}

133
src/utils/platform.ts
View File

@ -1,124 +1,15 @@
import { PLATFORMS } from '@/enums/platformEnum';
/**
* 判断是否是某个平台环境
* @param target 目标平台
*
* @return boolean
* @description 获取当前平台
*/
export function judgePlatform(target: PLATFORMS): boolean {
let isVue3 = false;
let isAppPlus = false;
let isAppPlusNvue = false;
let isAppNvue = false;
let isH5 = false;
let isMp = false;
let isMpWeinxin = false;
let isMpAlipay = false;
let isMpBaidu = false;
let isMpToutiao = false;
let isMpLark = false;
let isMpQq = false;
let isMpKuaishou = false;
// let isMpJd = false;
let isMp360 = false;
let isQuickAppWebView = false;
let isQuickAppWebViewUnion = false;
let isQuickAppWebViewHuawei = false;
switch (target) {
case PLATFORMS.VUE3:
/* #ifdef VUE3 */
isVue3 = true;
/* #endif */
return isVue3;
case PLATFORMS.APP_PLUS:
/* #ifdef APP-PLUS */
isAppPlus = true;
/* #endif */
return isAppPlus;
case PLATFORMS.APP_PLUS_NVUE:
/* #ifdef APP-PLUS-NVUE */
isAppPlusNvue = true;
/* #endif */
return isAppPlusNvue;
case PLATFORMS.APP_NVUE:
/* #ifdef APP-NVUE */
isAppNvue = true;
/* #endif */
return isAppNvue;
case PLATFORMS.H5:
/* #ifdef H5 */
isH5 = true;
/* #endif */
return isH5;
case PLATFORMS.MP:
/* #ifdef MP */
isMp = true;
/* #endif */
return isMp;
case PLATFORMS.MP_WEIXIN:
/* #ifdef MP-WEIXIN */
isMpWeinxin = true;
/* #endif */
return isMpWeinxin;
case PLATFORMS.MP_ALIPAY:
/* #ifdef MP-ALIPAY */
isMpAlipay = true;
/* #endif */
return isMpAlipay;
case PLATFORMS.MP_BAIDU:
/* #ifdef MP_BAIDU */
isMpBaidu = true;
/* #endif */
return isMpBaidu;
case PLATFORMS.MP_TOUTIAO:
/* #ifdef MP-TOUTIAO */
isMpToutiao = true;
/* #endif */
return isMpToutiao;
case PLATFORMS.MP_LARK:
/* #ifdef MP-LARK */
isMpLark = true;
/* #endif */
return isMpLark;
case PLATFORMS.MP_QQ:
/* #ifdef MP-QQ */
isMpQq = true;
/* #endif */
return isMpQq;
case PLATFORMS.MP_KUAISHOU:
/* #ifdef MP-KUAISHOU */
isMpKuaishou = true;
/* #endif */
return isMpKuaishou;
// case PLATFORMS.MP_JD:
// /* #ifdef MP-JD */
// isMpJd = true;
// /* #endif */
// return (isMpJd = true);
// break;
case PLATFORMS.MP_360:
/* #ifdef MP-360 */
isMp360 = true;
/* #endif */
return isMp360;
case PLATFORMS.QUICKAPP_WEBVIEW:
/* #ifdef QUICKAPP-WEBVIEW */
isQuickAppWebView = true;
/* #endif */
return isQuickAppWebView;
case PLATFORMS.QUICKAPP_WEBVIEW_UNION:
/* #ifdef QUICKAPP-WEBVIEW-UNION */
isQuickAppWebViewUnion = true;
/* #endif */
return isQuickAppWebViewUnion;
case PLATFORMS.QUICKAPP_WEBVIEW_HUAWEI:
/* #ifdef QUICKAPP-WEBVIEW-HUAWEI */
isQuickAppWebViewHuawei = true;
/* #endif */
return isQuickAppWebViewHuawei;
default:
return false;
}
}
const platform = PLATFORM;
const isH5 = platform === 'h5';
const isApp = platform === 'app';
const isMp = platform.startsWith('mp-');
export {
platform,
isH5,
isApp,
isMp,
};

18
src/utils/uniapi/index.ts
View File

@ -4,8 +4,8 @@
* @param showToast 配置是否弹出提示，默认弹出提示
* @constructor
*/
export const SetClipboardData = (data: string, showToast = true) =>
new Promise((resolve, reject) => {
export function SetClipboardData(data: string, showToast = true) {
return new Promise((resolve, reject) => {
uni.setClipboardData({
data,
showToast,
@ -17,13 +17,14 @@ export const SetClipboardData = (data: string, showToast = true) =>
},
});
});
}
/**
* @description 获取系统剪贴板内容
* @constructor
*/
export const GetClipboardData = () =>
new Promise((resolve, reject) => {
export function GetClipboardData() {
return new Promise((resolve, reject) => {
uni.getClipboardData({
success: (res) => {
resolve(res);
@ -33,19 +34,20 @@ export const GetClipboardData = () =>
},
});
});
}
/**
* rpx 换算为 px
* @param upx
*/
export const rpx2px = (upx: number) => {
export function rpx2px(upx: number) {
return uni.upx2px(upx);
};
}
/**
* px 换算为 rpx
* @param px
*/
export const px2rpx = (px: number) => {
export function px2rpx(px: number) {
return px / (uni.upx2px(100) / 100);
};
}

100
tsconfig.json
View File

@ -1,4 +1,52 @@
{
{ // 指定要从编译中排除的文件列表
"compilerOptions": { // 指定基目录以解析非相对模块名
"rootDir": "./src", // 在源文件中指定根文件夹
"outDir": "./dist", // 为所有发出的文件指定一个输出文件夹
"target": "ESNext", // 允许export=导出，由import from 导入
"lib": ["ESNext", "DOM", "ScriptHost"], // 是否启用对装饰器的实验性支持，装饰器是一种语言特性，还没有完全被 JavaScript 规范批准
"emitDecoratorMetadata": true, // 是否通过" . “(obj.key) 语法访问字段和"索引”( obj[“key”])， 以及在类型中声明属性的方式之间的一致性
/* 实验选项 */
"experimentalDecorators": true,
"baseUrl": "./", // 编译出目标语言版本
"module": "ESNext", // 生成代码的模板标准
"moduleResolution": "node", // 删除注释
"paths": { "@/*": ["./src/*"] }, // 有错误时不进行编译
"resolveJsonModule": true, // TS需要引用的库
"types": ["@types/node"], // 设置发出文件的换行符
// "sourceMap": true, //为发出的JavaScript文件创建源映射文件。
// "declaration": true, // 从项目中的TypeScript和JavaScript文件生成.d.ts文件
// "declarationMap": true, // 为d.ts文件创建源地图
/* 严格检查选项 */
"strict": true, // 在进行类型检查时，请考虑null和undefined。
"strictBindCallApply": true, // 检查bind、call和apply方法的参数是否与原始函数匹配。
"strictFunctionTypes": true, // 不允许this有隐式的any类型
"strictNullChecks": true, // 在给函数赋值时，要确保参数和返回值是子类型兼容的。
"strictPropertyInitialization": true, // 开启所有严格的类型检查
"alwaysStrict": true, // 是否检查子类继承自基类时，其重载的函数命名与基类的函数不同步问题
"noFallthroughCasesInSwitch": true, // 在代码中注入'use strict'
"noImplicitAny": true, // 检查函数是否不含有隐式返回值
"noImplicitOverride": true, // 是否检查未使用的参数
"noImplicitReturns": true, // 不允许隐式的any类型
"noImplicitThis": true, // 是否通过索引签名来描述对象上有未知键但已知值的对象
"noPropertyAccessFromIndexSignature": false, // 检查switch中是否含有case没有使用break跳出
"noUncheckedIndexedAccess": true, // 类的实例属性必须初始化
/* 额外检查 */
"noUnusedLocals": true, // 是否检查未使用的局部变量
"noUnusedParameters": true, // 在输出中启用颜色和格式，使编译器错误更容易阅读
"newLine": "crlf", // 是否查看 TS 在编译时花费的时间
"noEmitOnError": true, // 指定要包含的类型包名，而不需要在源文件中引用
"removeComments": true, // 指定TypeScript如何从给定的模块说明符查找文件
"esModuleInterop": true, // 指定一组条目，它们将导入重新映射到其他查找位置
"pretty": true, // 为装饰器启用对发出类型元数据的实验性支持
/* 高级选项 */
"forceConsistentCasingInFileNames": true, // 是否区分文件系统大小写规则
"extendedDiagnostics": false // 是否解析 JSON 模块
// "incremental": true // 增量编译
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
@ -8,53 +56,5 @@
"typings/*.ts",
"typings/*.d.ts"
], // 指定要包含在编译中的文件匹配列表
"exclude": [], // 指定要从编译中排除的文件列表
"compilerOptions": {
"baseUrl": "./", // 指定基目录以解析非相对模块名
// "rootDir": "./src", // 在源文件中指定根文件夹
// "outDir": "./dist", // 为所有发出的文件指定一个输出文件夹
"target": "ESNext", // 编译出目标语言版本
"module": "ESNext", // 生成代码的模板标准
"moduleResolution": "node", // 指定TypeScript如何从给定的模块说明符查找文件
"esModuleInterop": true, // 允许export=导出，由import from 导入
"lib": ["ESNext", "DOM", "ScriptHost"], // TS需要引用的库
"types": ["@types/node"], // 指定要包含的类型包名，而不需要在源文件中引用
"removeComments": true, // 删除注释
"paths": { "@/*": ["./src/*"] }, //指定一组条目，它们将导入重新映射到其他查找位置
"pretty": true, // 在输出中启用颜色和格式，使编译器错误更容易阅读
"newLine": "crlf", // 设置发出文件的换行符
// "sourceMap": true, //为发出的JavaScript文件创建源映射文件。
// "declaration": true, // 从项目中的TypeScript和JavaScript文件生成.d.ts文件
// "declarationMap": true, // 为d.ts文件创建源地图
/* 严格检查选项 */
"strict": true, // 开启所有严格的类型检查
"alwaysStrict": true, // 在代码中注入'use strict'
"noImplicitAny": true, // 不允许隐式的any类型
"noImplicitThis": true, // 不允许this有隐式的any类型
"strictNullChecks": true, // 在进行类型检查时，请考虑null和undefined。
"strictBindCallApply": true, // 检查bind、call和apply方法的参数是否与原始函数匹配。
"strictFunctionTypes": true, // 在给函数赋值时，要确保参数和返回值是子类型兼容的。
"strictPropertyInitialization": true, // 类的实例属性必须初始化
/* 额外检查 */
"noUnusedLocals": true, //是否检查未使用的局部变量
"noUnusedParameters": true, //是否检查未使用的参数
"noImplicitReturns": true, //检查函数是否不含有隐式返回值
"noImplicitOverride": true, //是否检查子类继承自基类时，其重载的函数命名与基类的函数不同步问题
"noFallthroughCasesInSwitch": true, //检查switch中是否含有case没有使用break跳出
"noUncheckedIndexedAccess": true, //是否通过索引签名来描述对象上有未知键但已知值的对象
"noPropertyAccessFromIndexSignature": false, //是否通过" . “(obj.key) 语法访问字段和"索引”( obj[“key”])， 以及在类型中声明属性的方式之间的一致性
/* 实验选项 */
"experimentalDecorators": true, //是否启用对装饰器的实验性支持，装饰器是一种语言特性，还没有完全被 JavaScript 规范批准
"emitDecoratorMetadata": true, //为装饰器启用对发出类型元数据的实验性支持
/* 高级选项 */
"forceConsistentCasingInFileNames": true, //是否区分文件系统大小写规则
"extendedDiagnostics": false, //是否查看 TS 在编译时花费的时间
"noEmitOnError": true, //有错误时不进行编译
"resolveJsonModule": true //是否解析 JSON 模块
// "incremental": true // 增量编译
}
"exclude": []
}

52
unocss.config.js
View File

@ -1,36 +1,36 @@
/**
* unocss defineConfig
* @link unocss: https://github.com/unocss/unocss
* @link unocss-preset-weapp: https://github.com/MellowCo/unocss-preset-weapp
* */
* @type {import('unocss').UserConfig}
*/
import { defineConfig, presetIcons } from 'unocss';
import presetWeapp from 'unocss-preset-weapp';
import { transformerAttributify, transformerClass } from 'unocss-preset-weapp/transformer';
const transformRules = {
'.': '-d111-',
'/': '-s111-',
':': '-c111-',
'%': '-p111-',
'!': '-e111-',
'#': '-w111-',
'(': '-b111l-',
')': '-b111r-',
'[': '-f111l-',
']': '-f111r-',
$: '-r111-',
',': '-r222-',
'.': '-d2e-',
'/': '-s2f-',
':': '-c3a-',
'%': '-p25-',
'!': '-e21-',
'#': '-w23-',
'(': '-b28-',
')': '-b29-',
'[': '-f4b-',
']': '-f5d-',
'$': '-r24-',
',': '-r2c-',
};
const prefix = `_u_`;
const prefix = '';
export default defineConfig({
presets: [
// https://github.com/MellowCo/unocss-preset-weapp
presetWeapp({
nonValuedAttribute: true,
prefix: prefix,
prefix,
whRpx: true,
transform: true,
platform: 'uniapp',
@ -43,13 +43,23 @@ export default defineConfig({
],
shortcuts: [
{
'border-base': 'border border-gray-500_10',
'_u_z-tar-both': '_u_z-988',
'_u_head-fixed': '_u_fixed _u_top-0 _u_left-0 _u_w-full _u_z-tar-both',
_u_center: '_u_flex _u_justify-center _u_items-center',
center: 'flex justify-center items-center',
},
],
theme: {},
theme: {
colors: {
primary: '#007AFF',
secondary: '#4CD964',
danger: '#FF3B30',
warning: '#FF9500',
info: '#5AC8FA',
light: '#F0F0F0',
dark: '#1A1A1A',
},
fontSize: {
mini: ['20rpx', '26rpx'],
},
},
transformers: [
transformerAttributify({
classPrefix: prefix,

114
vite.config.ts
View File

@ -1,43 +1,81 @@
// Vite中文网：https://vitejs.cn/config/
import { ConfigEnv, loadEnv, UserConfig } from 'vite';
import { resolve } from 'path';
/**
* vite 配置
* @see https://cn.vitejs.dev/config/
* @type {import('vite').UserConfig}
*/
import { resolve } from 'node:path';
import process from 'node:process';
import type { UserConfig } from 'vite';
import { defineConfig, loadEnv } from 'vite';
import TransformPages from 'uni-read-pages-vite';
import uni from '@dcloudio/vite-plugin-uni';
import Unocss from 'unocss/vite';
import TransformPages from 'uni-read-pages-vite'; // vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
import UnoCSS from 'unocss/vite';
import transformClass from 'unplugin-transform-class/vite';
import { visualizer } from 'rollup-plugin-visualizer';
import ViteRestart from 'vite-plugin-restart';
export default ({ mode }: ConfigEnv): UserConfig => {
export default defineConfig(async ({ mode }) => {
const root = process.cwd();
const env = loadEnv(mode, root);
const env = loadEnv(mode, resolve(root, 'env'));
const isProd = mode === 'production';
const { UNI_PLATFORM } = process.env;
const isH5 = UNI_PLATFORM === 'h5';
const { VITE_PROXY_PREFIX, VITE_UPLOAD_PROXY_PREFIX, VITE_BASE_URL, VITE_UPLOAD_URL, VITE_PORT } = env;
return {
base: './',
envDir: './env', // 自定义env目录
// 设置路径别名
resolve: {
alias: {
'@': resolve('./src'),
},
extensions: ['.js', '.json', '.ts', '.vue'], // 使用路径别名时想要省略的后缀名，可以自己 增减
extensions: ['.js', '.ts'], // 使用路径别名时想要省略的后缀名，可以自己 增减
},
// 自定义全局变量
define: {
'process.env': {},
ROUTES: new TransformPages().routes,
'PLATFORM': JSON.stringify(UNI_PLATFORM),
'ROUTES': new TransformPages().routes,
},
css: {
preprocessorOptions: {
scss: {
additionalData: '@import "./src/uni.scss";',
},
},
},
plugins: [
// @ts-expect-error TODO uni() 会报错：uni is not a function,暂时使用此方式解决
uni?.default(),
UnoCSS(),
transformClass(),
ViteRestart({
restart: ['vite.config.ts'],
}),
isH5 && isProd
&& visualizer({
filename: './node_modules/.cache/visualizer/stats.html',
open: true,
gzipSize: true,
brotliSize: true,
}),
],
// 开发服务器配置
server: {
host: true,
// open: true,
port: env.VITE_PORT as any,
port: Number.parseInt(VITE_PORT!, 10),
proxy: {
'/api': {
target: env.VITE_BASE_URL,
[VITE_PROXY_PREFIX!]: {
target: VITE_BASE_URL,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
rewrite: (path: string) => path.replace(/^\/api/, ''),
},
'/upload': {
target: env.VITE_BASE_URL,
[VITE_UPLOAD_PROXY_PREFIX!]: {
target: VITE_UPLOAD_URL,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/upload/, ''),
rewrite: (path: string) => path.replace(/^\/upload/, ''),
},
},
},
@ -45,43 +83,23 @@ export default ({ mode }: ConfigEnv): UserConfig => {
build: {
outDir: 'dist',
chunkSizeWarningLimit: 1500,
sourcemap: !isProd,
target: 'es6',
minify: isProd ? 'terser' : false,
terserOptions: {
compress: {
drop_console: isProd,
drop_debugger: true,
},
},
rollupOptions: {
output: {
entryFileNames: `assets/[name].${new Date().getTime()}.js`,
chunkFileNames: `assets/[name].${new Date().getTime()}.js`,
assetFileNames: `assets/[name].${new Date().getTime()}.[ext]`,
compact: true,
// manualChunks: {
// vue: ['vue', 'vue-router', 'vuex'],
// echarts: ['echarts'],
// },
},
},
},
// 插件
plugins: [
uni(),
Unocss(),
// 自动导入
AutoImport({
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/,
/\.vue\?vue/, // .vue
],
imports: [
'vue',
'uni-app',
'pinia',
{
'uni-mini-router': ['useRouter', 'useRoute'],
},
],
dts: 'typings/auto-imports.d.ts',
eslintrc: {
enabled: true,
},
}),
],
};
};
} as UserConfig;
});