Extended Configuration | wu-ui是全面兼容多端，基于vue2、vue3和nvue开发的uniapp生态框架。无论平台，一致体验。

Extension Configuration - JS Tool Library

wu-ui Due to the use of the uni modules standard for development, wu ui no longer defaults to attaching built-in methods to the' uni 'object, which means thatuni cannot be directly used in the project by default $w.xxx. However, it can be solved through extension and can be used through global or local introduction.

Global Introduction

In the main. js of the project root directory, by introducing and using the wu-ui-tools tool library, you can uni any * Vue in the project$w.xxxfor use, please note that these two lines should be placed in import App from './App':

//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

Local introduction

vue

<script setup>
    //TimeFormat is used to format the time
    import {timeFormat} from "@/uni_modules/wu-ui-tools/lib/function/index.js";
    console.log(timeFormat(1690809870, "yyyy-mm-dd hh: MM: ss")) //2023-07-31 21:24:30
    //Email for email verification test.js for various verifications
    import {email} from "@/uni_modules/wu-ui-tools/libs/function/test.js";
    //Verify email
    console.log(email("1317948850@qq.com")); //true;
</script>

<script setup>
    //TimeFormat is used to format the time
    import {timeFormat} from "@/uni_modules/wu-ui-tools/lib/function/index.js";
    console.log(timeFormat(1690809870, "yyyy-mm-dd hh: MM: ss")) //2023-07-31 21:24:30
    //Email for email verification test.js for various verifications
    import {email} from "@/uni_modules/wu-ui-tools/libs/function/test.js";
    //Verify email
    console.log(email("1317948850@qq.com")); //true;
</script>

All tools please refer to API

WARNING

Some built-in methods cannot use uni.$w.xxx, you need to use this.$w.xxx usage, such as' this.'$w.getRect Obtain node layout information, please refer to node layout information for details. Reason: The node layout information obtained by $w.getRect must be obtained in a Vue file with a view layer, and cannot be directly mounted on a uni object. Therefore, it can only be mixed into the global using the 'Vue. mixin' method, so it needs to be obtained through this.'$w.xxx use.

The method of obtaining node layout information nvue is different from vue. Please refer to the document: [Obtaining Node Layout Information nvue]

Extended Configuration - Custom Theme

Wu-ui has a built-in set of theme colors by default, which are the same as' uni-modules/wi-ui tools/theme.scss are consistent, and the color values in theme.scss can be modified and introduced in uni. scss to customize the theme. The specific usage method is as follows:

Introduce the theme. scss theme file of wu-ui in the uni.scss of the project root directory

scss

//uni.scss
@import "@/uni_modules/wu-ui-tools/theme.scss";
//You can also import your own scss file, and keep the variable name consistent with the theme. scss file
@import "@/common/style/custom-theme.scss";

//uni.scss
@import "@/uni_modules/wu-ui-tools/theme.scss";
//You can also import your own scss file, and keep the variable name consistent with the theme. scss file
@import "@/common/style/custom-theme.scss";

Customize your own theme color

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 order 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 order color: # dadbde;
$wu bg color: # f3f4f6;
$wu disabled color: # c8c9cc;

Extended Configuration - Basic Style

wu-ui has built-in basic styles, and it is recommended that developers globally introduce them in app.vue, such as hiding the' scroll view 'scroll bar in' H5 'and removing default styles.

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>

Extended configuration - built-in configuration

To modify the built-in configuration scheme of wu-ui, we can use the setConfig method to modify it. Currently, only the config, props, color, and' index 'attributes are supported. It is recommended to only modify' config 'and' props', unless you are aware of the impact of your modifications.

//Main.js
import wuUI from '@/uni_ Modules/wu ui tools';
//#ifdef VUE2
Vue.use (wuUI);
//#endif
//#ifdef VUE3
App.use (wuUI);
//#endif
//Calling the setConfig method will deeply merge object properties internally, allowing for reliable nested configuration
//Need to execute after Vue. use (wuUI)
uni.$w.SetConfig(){
    //Modify the properties of the $wu. config object
    config:{
        //Modifying the default unit to rpx is equivalent to executing uni$ Wu. config. unit='rpx '
        unit: 'rpx'
    },
    //Modify the properties of the $wu.props object
    props:{
        //Modify the default value of the size parameter of the wu text component, note that all default values must be declared as default
        text:{
            color:{
                default: 'red'
            }
        }
        //Other component attribute configurations, specific parameter names can be viewed in the props.js of each component
        //....
    }
})

//Main.js
import wuUI from '@/uni_ Modules/wu ui tools';
//#ifdef VUE2
Vue.use (wuUI);
//#endif
//#ifdef VUE3
App.use (wuUI);
//#endif
//Calling the setConfig method will deeply merge object properties internally, allowing for reliable nested configuration
//Need to execute after Vue. use (wuUI)
uni.$w.SetConfig(){
    //Modify the properties of the $wu. config object
    config:{
        //Modifying the default unit to rpx is equivalent to executing uni$ Wu. config. unit='rpx '
        unit: 'rpx'
    },
    //Modify the properties of the $wu.props object
    props:{
        //Modify the default value of the size parameter of the wu text component, note that all default values must be declared as default
        text:{
            color:{
                default: 'red'
            }
        }
        //Other component attribute configurations, specific parameter names can be viewed in the props.js of each component
        //....
    }
})

Extension Configuration - JS Tool Library ​

Global Introduction ​

Local introduction ​

Extended Configuration - Custom Theme ​