更新记录

1.0.0（2025-08-27） 下载此版本

最新版本uniapp模板框架开发； 全新一代vue3基础框架上线；

平台兼容性

uni-app(4.07)

其他

uniapp+vue3+TypeScript, 支持黑夜模式，自定义主题切换，项目基础框架

一， 核心技术

• uniapp：使用uniapp-vue3版本搭建
• pnpm：快速、节省磁盘空间的包管理器(node版本18以上) 安装方法 npm i pnpm
• TypeScript：TypeScript 起源于使用JavaScript开发的。由于JavaScript语言本身的局限性，难以胜任大型项目的开发和维护。因此微软开发了TypeScript ，使得其能够胜任大型项目的开发。
• luch-request： luch-request 是一个基于Promise 开发的uni-app跨平台、项目级别的请求库，它有更小的体积，易用的api，方便简单的自定义能力。
• Pinia：使用uniapp-vue3内置自带的Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。
• Wot Design Uni：wot-design-uni组件库基于vue3+Typescript构建，参照wot design的设计规范进行开发，提供 70+高质量组件，支持暗黑模式、国际化和自定义主题，旨在给开发者提供统一的 UI 交互，同时提高研发的开发效率。

兼容性

gitee 获取代码

uniapp-v3-wot

演示

二，环境部署

• 安装依赖

  pnpm i

• HBuider 4.+以上版本

  下载地址 https://www.dcloud.io/hbuilderx.html

• 运行

  使用 HBuider 运行

三，项目结构

四，组件实例

• Wot Design Uni 组件库

示例页面 @/pages/index/index

• z-paging 列表组件

示例页面 @/pages/list/index

• pinia 使用

示例页面 @/pages/login/index

• 主题切换

示例页面 @/pages/mine/index

• ts 范型使用

示例页面 @/pages/PersonInter/index

五，主题配置文件

位置 @/composables

切换主题可以使用

import { useTheme } from '@/composables/useTheme'
const { theme, toggleTheme } = useTheme()
// theme 获取当前主题 light | dark
// toggleTheme(type) 修改当前主题 type=light | dark

个性化配置主题

import { useTheme } from '@/composables/useTheme'
import { colors } from '@/composables/themeStyle' // 自定义的主题，可以在这里修改
const { setThemeVars } = useTheme()
setThemeVars('primary')

主题配置

1，此处可以覆盖Wot Design Uni 组件样式

2，也可以定义样式 在页面直接引用

@/composables/themeStyle.ts
export const colors : ThemeStyle = {
    'primary': {
        color: '#007AFF',
        name: '蓝色',
    },
    'deepViolet': {
        color: '#DA70D6',
        name: '深紫罗兰色',
    },
    'deepPink': {
        color: '#eb2f96',
        name: '深粉色',
    },
    'scarlet': {
        color: '#f5222d',
        name: '猩红色',
    },
    'orangeRed': {
        color: '#fa541c',
        name: '橙红色',
    },
    'emerald': {
        color: '#13c2c2',
        name: '绿宝石',
    },
    'limeGreen': {
        color: '#52c41a',
        name: '酸橙绿',
    }
}
// 修改wot组件样式 或者 自定义属性全局使用
const variateStyle = (type : string) => {
    return {
        buttonPrimaryBgColor: colors[type].color,
        tabsNavLineBgColor: colors[type].color,
    }
}

使用主题自定义样式

import { useTheme } from '@/composables/useTheme'
const { themeVars } = useTheme()
themeVars.buttonPrimaryBgColor // get主题设置

覆盖 原生标签css默认样式

@/composables/theme.scss
// 白天模式 
.wot-theme-light {
  min-height: 100% !important;
  color: #565656;
  background-color: #f7f7f7 !important;
}
// 黑夜模式
.wot-theme-dark {
  min-height: 100% !important;
  color: #f9f9f9;
  background-color: #3f3f3f !important;
}

六，api请求

参数可参考 luch-request

// 使用 全局请求
let { proxy } = getCurrentInstance()
proxy.$http.get('地址'， {params: {name: '111'}, 其他配置...}) 
proxy.$http.post('地址'，{name: 'qqq'}, {其他配置...}) 
...

七，通用方法

定义全局方法

@/utils/utils.js
export function showToast(data, position = "center") {
    uni.showToast({
        title: data,
        icon: 'none',
        duration: 3000,
        position
    })
}
...

使用定义方法

let { proxy } = getCurrentInstance()
proxy.$utils.showToast('成功')

八，图表

参数可参考 ucharts

实例 @/pages/index/index

gitee 地址

https://gitee.com/hu-yanjun/v3-template.git