快速上手

本节将介绍如何在项目中使用 WXUI，请认真阅读本章节。

请使用最新HBuilderX版本

安装

由于特殊的授权方式，WXUI仅有一种安装方式。使用 HbuilderX 将WXUI导入的项目中。

初始化

1. 在APP.uvue中引入样式

/* App.uvue */
<style lang="scss">
    @import '@/uni_modules/wx-ui/libs/index.scss';
</style>

2. 全局配置

如果您需要在初始化时修改全局配置可以在 main.uts 中使用如下代码(查看全局配置详细)

import App from './App'
import { createSSRApp } from 'vue'

// 引入全局配置
import { WxConfig, WxSetConfigType } from '@/uni_modules/wx-ui/libs/config.uts'
// 创建全局配置
let wxConfig = new WxConfig();
// 修改全局配置 设置时可选填
wxConfig.setConfig({
	theme: {
		primary: '#18caff'
	}
} as WxSetConfigType)

export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}

使用组件

WXUI符合uni-modules规范，因此导入后无需引入即可使用任意组件。

TIP

输入 <wx- 可以快速选择WXUI系列组件

组件事件类型

组件事件类型来自统一组件类型文件 @/uni_modules/wx-ui/libs/componentType.uts

组件事件的命名规则为: 组件标签名首字母大写+事件名+Event

如:

<wx-calendar>的switch事件类型名为WxCalendarSwitchEvent

示例代码

   <template>
        <!-- #ifdef APP -->
        <scroll-view style="flex:1">
        <!-- #endif -->
            <wx-calendar @switch="calendarSwitch"></wx-calendar>
        <!-- #ifdef APP -->
        </scroll-view>
        <!-- #endif -->
   </template>

   <script setup>
        import type { WxCalendarSwitchEvent } from '@/uni_modules/wx-ui/libs/componentType.uts'
        let calendarSwitch = (e: WxCalendarSwitchEvent)=> {
            console.log(e.type)
        }
   </script>

使用组件的方法或设置属性

使用 ref 获取组件并转换为组件的类型，通过 . 操作符 调用组件方法或设置属性。

语法

ref<驼峰ComponentPublicInstance | null>(null)

如:

<wx-calendar> 的类型为：WxCalendarComponentPublicInstance

示例代码

<template>
    <!-- #ifdef APP -->
    <scroll-view style="flex:1">
    <!-- #endif -->
        <wx-calendar ref="wxCalendarRef"></wx-calendar>
    <!-- #ifdef APP -->
    </scroll-view>
    <!-- #endif -->
</template>

<script setup>
    let wxCalendar = ref<WxCalendarComponentPublicInstance | null>(null)
    onReady(()=>{
        // 调用日历初始化方法
        wxCalendar.value!.init();
    })
</script>