TMUI4x(鸿蒙Next)

Appearance

TMUI4x2026-02-01
785
3.1m

混合开发 - 组件库 ​

介绍 ​

为了让你开发的web应用更加的与tmui4x开发的uniappx应用融合。我开发了tmui3.2 web vue组件库

它与uniapp版本的tmui3.2一样，文档可以共同查阅，但不同的是经过了改造后可以在web vue使用。 它不依赖于uniapp可以在任意vue环境中使用开发移动端应用。

它的风格与tmui4x一样，如果采用本组件库开发与tmui4x一起混合开发，风格一致，并且主题上会自动使用tmui4x开发的app中的主题色

当你打开web应用时，它的主题色就是你宿主app中的主题色，完美的融合在一起，让你的web混合开与和原生融合在了一起。

下载 ​

只有是tmui4x的会员才可以下载使用见代码仓库

tmui3.2vue版本

文档同tmui3.2

在混合开发中使用 ​

请直接从我的demo仓库开始吧，已经为你配置好了类型，插件等一切就绪。

单独使用 ​

如果你不是在uniappx混合开发中使用，仅作为你web 移动端使用。

一、复制tmui3.2 vue组件

从demo代码仓库中下载好tm-ui vue组件包。复制到你的项目目录根目录/src/components/tm-ui位置即可。

二、引用

在你的src/main.ts中如下配置

ts

import { createApp } from 'vue'
// @ts-ignore
import './style.css'
import App from './App.vue'
//必须安装
import { createPinia } from 'pinia'
//必须安装
import router from './router'
// 引入组件包
import tmui from './components/tm-ui'

const app = createApp(App)
app.use(createPinia())
app.use(router)
// 最后引用安装好。
app.use(tmui)
app.mount('#app')

三、配置tsconfig

为了有类型提示，你还需要配置tsconfig来获得类型提示

ts

{
 ...
  "compilerOptions": {
	...
    // 包含类型定义文件
    "typeRoots": ["./components/tm-ui"],
	...
  },
  "include": [
    "components/tm-ui/*.ts",
    "components/tm-ui/**/*.ts",
  ]
}

四、配置vite.config.ts

为了让组件内可以使用view,rpx,uni.方法标签你需要配置我开发的vite插件以此来适配。tmui3.2

ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
//引入tmui中的插件
import tmuiVitePlugin from './src/components/tm-ui/vitePlugin'

// https://vite.dev/config/
export default defineConfig({
  server:{
    port:3000,
  },
  plugins: [
	vue(), 
	// 配置插件,兼容rpx，view标签或者单位。
	muiVitePlugin()
  ],
  resolve: {
    alias: {
      // 配置 Vue 别名为包含模板编译器的版本，主要是兼容编译tmui3.2
      'vue': 'vue/dist/vue.esm-bundler.js'
    }
  }
})

自带的全局方法 ​

可以在引用组件库后可全局使用

uni.方法使用有关方法，只是部分映射了，注意里面有两个方法是特殊的。

uni.chooseImage和uni.chooseVideo。这两个法，如果你是单独在web中使用，就是input file选择器。

如果你是在混合开发中使用，它是自动调用uniappx中的系统安卓api，会返回文件信息。可以上传。

同样的，<input type="file" />如果在混合中使用它也会自动调用宿主应用的选择器。它是按照w3c规范，可以使用相机或者相册 得到媒体文件，也可以选择仅相机或者仅相册获取媒体文件。

最近更新