Tui Plus Vapor

Appearance

使用示例 ​

本节提供了 tui-vitex 编译器的一些使用示例，帮助你快速上手。

基础使用示例 ​

1. 基本配置 ​

vite.config.ts

ts
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';
import TuiCollector from './uni_modules/tui-vitex';
import theme from './theme.json'

export default defineConfig({
    devSourcemap: true,
    plugins: [
        TuiCollector({
            unit: 'rpx',
            theme
        }),
        uni()
    ]
});

theme.json

json
{
  "light": {
    "bg": {
      "primary": {
        "normal": "#007AFF",
        "dark": "#0056b3",
        "light": "#4da3ff",
        "plain": "#e6f0ff"
      }
    },
    "text": {
      "1": "#333333",
      "2": "#666666",
      "3": "#999999",
      "4": "#c0c4cc"
    }
  },
  "dark": {
    "bg": {
      "primary": {
        "normal": "#0a84ff",
        "dark": "#0066cc",
        "light": "#3495ff",
        "plain": "#1c3a5f"
      }
    },
    "text": {
      "1": "#ffffff",
      "2": "#e0e0e0",
      "3": "#b0b0b0",
      "4": "#808080"
    }
  }
}

2. 元子化样式示例 ​

页面组件

html
<template>
  <t-page title="元子化样式示例">
    <view class="container tbg-pn tp-m">
      <text class="ttl1">Hello World</text>
      <view class="card tbg-wh tp-m tr-m">
        <text class="ttl2">卡片内容</text>
        <button class="btn tbg-pn ttc-wh tp-s tr-s">点击按钮</button>
      </view>
    </view>
  </t-page>
</template>

<style>
.container {
  min-height: 100vh;
}

.card {
  margin-top: 20rpx;
}

.btn {
  margin-top: 16rpx;
}
</style>

3. 环境变量示例 ​

配置文件

env
# .env.development
VITE_API_BASE_URL=https://dev-api.example.com
VITE_APP_TITLE=开发环境

# .env.production
VITE_API_BASE_URL=https://api.example.com
VITE_APP_TITLE=生产环境

使用环境变量

ts
// api.ts
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;

export async function fetchData() {
  const response = await fetch(`${apiBaseUrl}/data`);
  return response.json();
}

// App.uvue
<template>
  <view class="app-container">
    <text class="app-title">{{ appTitle }}</text>
    <button @click="loadData">加载数据</button>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { fetchData } from './api';

const appTitle = import.meta.env.VITE_APP_TITLE;
const data = ref(null);

async function loadData() {
  data.value = await fetchData();
}
</script>

高级使用示例 ​

1. 组件编译增强 ​

t-view 组件

html
<t-view class="tbg-pn tp-m">
  <text class="ttl1">增强组件示例</text>
  <t-text class="ttl2">
    这是 <slot>插槽内容</slot>
  </t-text>
</t-view>

2. 条件编译 ​

跨平台代码

html
<template>
  <view class="container">
    <!-- #ifdef H5 -->
    <text class="h5-text">Web 平台特有的内容</text>
    <!-- #endif -->
    
    <!-- #ifdef MP-WEIXIN -->
    <text class="weixin-text">微信小程序特有的内容</text>
    <!-- #endif -->
    
    <!-- #ifdef APP-PLUS -->
    <text class="app-text">App 平台特有的内容</text>
    <!-- #endif -->
  </view>
</template>

<style>
/* #ifdef H5 */
.h5-text {
  font-size: 16px;
}
/* #endif */

/* #ifdef MP-WEIXIN */
.weixin-text {
  font-size: 28rpx;
}
/* #endif */

/* #ifdef APP-PLUS */
.app-text {
  font-size: 18px;
}
/* #endif */
</style>

3. 主题切换 ​

主题管理

ts
// themeManager.ts
import { getTuiThemeConfig } from '@/uni_modules/tui-plus-vapor/common/model/theme.uts';

export function getCurrentTheme() {
  return uni.getSystemInfoSync().osTheme;
}

export function setAppTheme(theme: 'light' | 'dark') {
  return uni.setAppTheme({ theme });
}

export function getThemeColor(key: string) {
  return getTuiThemeConfig('bg', key, 'normal');
}

// 使用示例
import { getCurrentTheme, setAppTheme, getThemeColor } from './themeManager';

// 获取当前主题
const currentTheme = getCurrentTheme();

// 切换主题
await setAppTheme('dark');

// 获取主题颜色
const primaryColor = getThemeColor('primary');

性能优化示例 ​

1. 样式优化 ​

合理使用元子化样式

html
<!-- 好的做法 -->
<view class="tbg-pn tp-m tr-m">
  <text class="ttl1 tfsm">优化示例</text>
</view>

<!-- 避免的做法 -->
<view class="tbg-pn tp-m tr-m tfg-pn tfs-m">
  <text class="ttl1 tfsm ttc-pn">过度使用</text>
</view>

2. 编译优化 ​

减少条件编译嵌套

html
<!-- 好的做法 -->
<!-- #ifdef H5 -->
<view class="h5-content">Web 内容</view>
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<view class="weixin-content">小程序内容</view>
<!-- #endif -->

<!-- 避免的做法 -->
<!-- #ifdef APP-PLUS -->
  <!-- #ifdef APP-ANDROID -->
    <!-- #ifdef SDKVERSION >= 21 -->
    <view>嵌套过深</view>
    <!-- #endif -->
  <!-- #endif -->
<!-- #endif -->

3. 环境变量优化 ​

集中管理环境配置

ts
// config.ts
export const config = {
  api: {
    baseUrl: import.meta.env.VITE_API_BASE_URL,
    timeout: 10000
  },
  app: {
    title: import.meta.env.VITE_APP_TITLE,
    version: import.meta.env.VITE_APP_VERSION
  },
  debug: import.meta.env.VITE_DEBUG_MODE === 'true'
};

// 使用
import { config } from './config';

console.log('API 基础 URL:', config.api.baseUrl);
console.log('应用标题:', config.app.title);

常见场景示例 ​

1. 表单页面 ​

html
<template>
  <t-page title="表单页面">
    <view class="form-container tbg-wh tp-m">
      <view class="form-item tm-b">
        <text class="label ttl2">用户名</text>
        <input class="input ttl1" placeholder="请输入用户名" />
      </view>
      <view class="form-item tm-b">
        <text class="label ttl2">密码</text>
        <input class="input ttl1" type="password" placeholder="请输入密码" />
      </view>
      <button class="submit-btn tbg-pn ttc-wh tp-m tr-m">登录</button>
    </view>
  </t-page>
</template>

<style>
.form-container {
  margin: 20rpx;
  border-radius: 12rpx;
}

.form-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.label {
  width: 120rpx;
}

.input {
  flex: 1;
  height: 48rpx;
}

.submit-btn {
  margin-top: 32rpx;
  width: 100%;
}
</style>

2. 列表页面 ​

html
<template>
  <t-page title="列表页面">
    <view class="list-container">
      <view v-for="item in list" :key="item.id" class="list-item tbg-wh tp-m tm-b">
        <view class="item-content">
          <text class="item-title ttl1">{{ item.title }}</text>
          <text class="item-desc ttl3">{{ item.description }}</text>
        </view>
        <view class="item-arrow">→</view>
      </view>
    </view>
  </t-page>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
  { id: 1, title: '项目 1', description: '这是项目 1 的描述' },
  { id: 2, title: '项目 2', description: '这是项目 2 的描述' },
  { id: 3, title: '项目 3', description: '这是项目 3 的描述' }
]);
</script>

<style>
.list-container {
  padding: 20rpx;
}

.list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 8rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.item-content {
  flex: 1;
}

.item-title {
  margin-bottom: 8rpx;
}

.item-arrow {
  color: #999;
  margin-left: 16rpx;
}
</style>

总结 ​

通过以上示例，你应该已经了解了 tui-vitex 编译器的基本使用方法。在实际应用中，你可以根据具体需求灵活运用这些技巧，创建高效、美观的 uni-app x 应用。

提示：

  • 合理使用元子化样式，提高开发效率
  • 利用环境变量管理不同环境的配置
  • 使用组件编译增强，优化组件性能
  • 运用条件编译，处理平台差异
  • 遵循最佳实践，保持代码的清晰和可维护性