WU-UI

中文

English

中文

English

Appearance

扩展配置 - JS 工具库 ​

wu-ui由于使用了uni-modules的标准进行开发，所以不再默认将内置方法挂载到uni对象上，也就意味着默认情况下不能在项目中直接使用uni.$w.xxx。但是可以通过扩展可以解决，可以通过全局引入或局部引入使用。

全局引入 ​

在项目根目录中的 main.js 中，引入并使用wu-ui-tools工具库，即可在项目任意*vue 内已uni.$w.xxx进行使用，注意这两行要放在 import App from './App' 之后：

js
// main.js
import wuUI from "@/uni_modules/wu-ui-tools";
// #ifdef VUE2
Vue.use(wuUI);
// #endif
// #ifdef VUE3
app.use(wuUI);
// #endif
// main.js
import wuUI from "@/uni_modules/wu-ui-tools";
// #ifdef VUE2
Vue.use(wuUI);
// #endif
// #ifdef VUE3
app.use(wuUI);
// #endif

局部引入 ​

vue
<script setup>
// timeFormat 用于格式化时间
import { timeFormat } from "@/uni_modules/wu-ui-tools/libs/function/index.js";
console.log(timeFormat(1690809870, "yyyy-mm-dd hh:MM:ss")); //2023-07-31 21:24:30
// email用于邮箱验证 test.js用于各种验证
import { email } from "@/uni_modules/wu-ui-tools/libs/function/test.js";
// 验证邮箱
console.log(email("1317948850@qq.com")); // true;
</script>
<script setup>
// timeFormat 用于格式化时间
import { timeFormat } from "@/uni_modules/wu-ui-tools/libs/function/index.js";
console.log(timeFormat(1690809870, "yyyy-mm-dd hh:MM:ss")); //2023-07-31 21:24:30
// email用于邮箱验证 test.js用于各种验证
import { email } from "@/uni_modules/wu-ui-tools/libs/function/test.js";
// 验证邮箱
console.log(email("1317948850@qq.com")); // true;
</script>

全部工具请参考API

注意

部分内置方法不能使用 uni.$w.xxx 进行使用，需要通过 this.$w.xxx 使用，如 this.$w.getRect 获取节点布局信息，详情见节点布局信息。

原因：$w.getRect 获取的是节点布局信息必须依靠在有视图层的 vue 文件中才能获取到，无法直接挂载到 uni 对象上，所以只能使用 Vue.mixin 的方式混入全局，故需要通过 this.$w.xxx 使用。

获取节点布局信息的方式 nvue 与 vue 不一样，参考文档：[获取节点布局信息-nvue]

扩展配置 - 自定义主题 ​

wu-ui默认内置了一套主题颜色，默认颜色与uni_modules/wu-ui-tools/theme.scss一致，可以修改theme.scss中的颜色值并在uni.scss中引入，即可自定义主题。具体使用方法如下：

  1. 在项目根目录的 uni.scss 中引入 wu-ui 的 theme.scss 主题文件
scss
// uni.scss
@import "@/uni_modules/wu-ui-tools/theme.scss";

// 也可以引入自己的scss文件，变量名和theme.scss中保持一致即可
@import "@/common/style/custom-theme.scss";
// uni.scss
@import "@/uni_modules/wu-ui-tools/theme.scss";

// 也可以引入自己的scss文件，变量名和theme.scss中保持一致即可
@import "@/common/style/custom-theme.scss";
  1. 自定义属于自己的主题色
scss
/* /uni_modules/wu-ui-tools/theme.scss */
$wu-main-color: #303133;
$wu-content-color: #606266;
$wu-tips-color: #909193;
$wu-light-color: #c0c4cc;
$wu-border-color: #dadbde;
$wu-bg-color: #f3f4f6;
$wu-disabled-color: #c8c9cc;
....
/* /uni_modules/wu-ui-tools/theme.scss */
$wu-main-color: #303133;
$wu-content-color: #606266;
$wu-tips-color: #909193;
$wu-light-color: #c0c4cc;
$wu-border-color: #dadbde;
$wu-bg-color: #f3f4f6;
$wu-disabled-color: #c8c9cc;
....

扩展配置 - 基础样式 ​

wu-ui内置了一些基础样式，建议开发者在App.vue中全局引入，比如H5中隐藏scroll-view的滚动条，去除默认样式等。

vue
/* App.vue */
<style lang="scss">
    @import '@/uni_modules/wu-ui-tools/index.scss';
</style>
/* App.vue */
<style lang="scss">
    @import '@/uni_modules/wu-ui-tools/index.scss';
</style>

扩展配置 - 内置配置 ​

想要修改wu-ui的内置配置方案，我们可以通过setConfig方法进行修改，目前只支持修改config、props、color、index属性，建议只修改config、props， 除非您清楚知道自己的修改所带来的影响。

js
// main.js
import wuUI from '@/uni_modules/wu-ui-tools';

// #ifdef VUE2
Vue.use(wuUI);
// #endif
// #ifdef VUE3
app.use(wuUI);
// #endif

// 调用setConfig方法，方法内部会进行对象属性深度合并，可以放心嵌套配置
// 需要在Vue.use(wuUI)之后执行
uni.$w.setConfig({
	// 修改$wu.config对象的属性
	config: {
		// 修改默认单位为rpx，相当于执行 uni.$wu.config.unit = 'rpx'
		unit: 'rpx'
	},
	// 修改$wu.props对象的属性
	props: {
		// 修改wu-text组件的size参数的默认值，注意：默认值都要用default声明
		text: {
			color: {
				default: 'red'
			}
		}
		// 其他组件属性配置，具体的参数名称可以去每个组件的props.js中进行查看
		// ......
	}
})
// main.js
import wuUI from '@/uni_modules/wu-ui-tools';

// #ifdef VUE2
Vue.use(wuUI);
// #endif
// #ifdef VUE3
app.use(wuUI);
// #endif

// 调用setConfig方法，方法内部会进行对象属性深度合并，可以放心嵌套配置
// 需要在Vue.use(wuUI)之后执行
uni.$w.setConfig({
	// 修改$wu.config对象的属性
	config: {
		// 修改默认单位为rpx，相当于执行 uni.$wu.config.unit = 'rpx'
		unit: 'rpx'
	},
	// 修改$wu.props对象的属性
	props: {
		// 修改wu-text组件的size参数的默认值，注意：默认值都要用default声明
		text: {
			color: {
				default: 'red'
			}
		}
		// 其他组件属性配置，具体的参数名称可以去每个组件的props.js中进行查看
		// ......
	}
})