更新记录

1.0.0（2025-03-07） 下载此版本

uniapp-v3-wot 1.0.0版本发布

平台兼容性

uniapp-vue3 开发文档

一， 核心技术

• 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 交互，同时提高研发的开发效率。

兼容性

二，环境部署

• 安装依赖

  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

个性化配置主题

主题配置

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

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

@/composables/themeStyle.ts

const variateStyle = {
        // light 白天模式下需要覆盖的样式
    light: {
        buttonPrimaryBgColor: '#07c160', // 覆盖Wot Design Uni 组件样式
        buttonPrimaryColor: '#07c160',
                qwer: "#fff" // 自定义样式
    },
        // dark 黑夜模式
    dark: {
        buttonPrimaryBgColor: 'red',
        buttonPrimaryColor: '#07c160',
                qwer: "#000"
    }
}

使用主题自定义样式

import { useTheme } from '@/composables/useTheme'
const { themeVars } = useTheme()
themeVars.qwer // 白天模式下#fff，黑夜模式下"#000"

覆盖 原生标签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('成功')

gitee 代码

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