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

掘金检察官
268 阅读2分钟

一， 核心技术

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

兼容性

Apph5微信小程序支付宝小程序百度小程序字节小程序QQ小程序
app-vue app-nvue√√√√√√

获取代码

uniapp-v3-wot

演示

image.png image.png

二，环境部署

三，项目结构

image.png

四，组件实例

示例页面 @/pages/index/index

示例页面 @/pages/list/index

示例页面 @/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 地址

gitee.com/hu-yanjun/v…

avatar
文章
阅读
粉丝