Precautions

Since uni-app supports multi-terminal development, and each terminal, especially each mini program platform, does not have a unified standard, which protects the costs of developers and enterprises. Fortunately, uni-app uses the Vue standard to unify the writing methods of each terminal. It promotes the development of the ecology, but due to the reasons of some small program platforms themselves, some compatibility problems will still occur. We will collect the problems encountered in the process of making wu-ui and collect the compatibility problem format in this topic in a timely manner. Hope it can help uni-app developers.

###WeChat Mini Program :::Note The basic library of WeChat mini program needs to be set to 2.19.2 and above. :::

###Alipay applet :::Note wu-ui needs to enable component2 mode to support Alipay applet :::

Alipay has been upgraded to component2 mode a long time ago. This mode supports more functions and features. Many features on uni-app, such as provide/inject, $slots, etc., need to be turned on. To support it, this mode is turned off by default in new uni-app projects, so it needs to be turned on in manifest.json in the project root directory. If there is no alipay attribute node, just add it:

json

...
"mp-Alipay": {
    "Component 2": true
},
...

...
"mp-Alipay": {
    "Component 2": true
},
...

###Vue feature support on various platforms

The following features have been tested by wu-ui on various mini program development tools, H5 browsers, and APPs (excluding NVUE), and are supported. Among them, the Alipay mini program needs to turn on component2 mode.

App (vue)	App (nvue)	H5	Mini program
√	√	√	√

provide/inject
$slots
v-model/sync
$parent / $children

Set page background color

Generally, we set the background color for the page node of the page or for the outermost view of the page. There are the following points to note:

Set via page node This method is valid across the board, but it should be noted that on WeChat applet or some Android models, if the node is written in a style tag with the scoped attribute, it is invalid, so we recommend that you can Add one more style tag without the scoped attribute, as follows:

vue

/* If you need css support, you can also add the lang attribute */
<style lang="scss">
    page {
        background-color: $w-bg-color;
    }
</style>

/* Other styles with scoed attribute */
<style lang="scss" scoped>
    .box {
        ...
    }
</style>

/* If you need css support, you can also add the lang attribute */
<style lang="scss">
    page {
        background-color: $w-bg-color;
    }
</style>

/* Other styles with scoed attribute */
<style lang="scss" scoped>
    .box {
        ...
    }
</style>

Set through the outer view of the page Compared with the page node, the height of view defaults to the content height, so if the page content is less than one screen height, the remaining part at the bottom is still the default white, so we set a minimum height for the view that needs this, so that It is equal to the window height:

vue

<template>
    <view class="wrap">
    ...
    </view>
</template>

<style scoped lang="scss">
    .wrap {
        background-color: $w-bg-color;
        min-height: 100vh;
    }
</style>

<template>
    <view class="wrap">
    ...
    </view>
</template>

<style scoped lang="scss">
    .wrap {
        background-color: $w-bg-color;
        min-height: 100vh;
    }
</style>

Traps of global assignment of device information

We all know that device information can be obtained through uni.getSystemInfoSync(), but it is very cumbersome to write it every time it is used, so many students will have a whim, such as in main.js or in In App.vue, the result of uni.getSystemInfoSync() is assigned to Vue.prototype, as follows:

// main.js
Vue.prototype.system = uni.getSystemInfoSync();

// main.js
Vue.prototype.system = uni.getSystemInfoSync();

There is no problem with the above writing method. We can get the device information through this.system anywhere, but there is a trap here. It is written in main.js, which means that the assignment code will only be executed once, and it is started by the APP. time, but in uni-app, the windowHeight attribute of the device information does not include the APP navigation bar and tabbar height. When we enter the homepage, windowHeight does not include the tabbar height, and the height may be '700px ', but after entering the inner page, there is no tabbar, and the windowHeight height is still 700px (the 50px height of the tabbar is missing), which is obviously incorrect. The above mentioned only affects the windowHeight attribute, and other attributes are not affected. If you need to obtain the height, it is recommended to execute uni.getSystemInfoSync() every time, or use the shortcut tool uni.$ provided by wu-ui. You can get it through w.sys() method.

The mini program main package is too large to preview and publish

We all know that the size of the main package for previewing and publishing WeChat mini programs cannot exceed 2M, otherwise it will not be possible to preview and upload to the real machine. Students often report that when they first use wu-ui, the main package exceeds 2M during debugging. It is not possible to preview on the real machine. Let us make an explanation here. wu-ui is introduced on demand. When released, HX will automatically remove the components you do not use. Even if you use all components of wu-ui, the entire The size of wu-ui is only about 500K, but it has the following two prerequisites:

debugging During the debugging phase, for the sake of debugging-friendly effect and compilation speed, HX does not compress and remove comments from JS by default, nor does it introduce components on demand, so the JS files will be very large. We need to do this in HBuilder X Just do the following and recompile:

HBuilderX Run->Run to the applet simulator->Check whether to compress the code when running

HBuilderX Run->Run to the applet simulator->Check whether to compress the code when running

publish When publishing in HX, wu-ui components will be introduced on demand (if all wu-ui components are used, it will occupy about 500k space). If the main package still exceeds 2M, you need to start from multiple aspects:

Mini program subcontracting(opens new window)
Place static resources on the server for reference
Cancel the "ES6 to ES5" setting

Advantages and Disadvantages of uni.scss

uni.scss comes with a project file for the new uni-app project, and the preprocessor used is sass/scss. It can be seen that uni-app officially recommends scss, and our wu-ui also uses A firm advocate of scss, it is not recommended to use less, stylus, etc. in uni-app.

uni.scss has the following characteristics:

No need to import, uni-app will automatically import this file when compiling
The scss variables defined here can be used globally. You can define some colors, themes, sizes and other variables here.
uni.scss will be compiled into each scss file (please pay attention to understand this sentence)

To sum up, we can know that uni.scss mainly uses the characteristics of scss to define some global variables for reference by each style tag written lang=scss, but this leads to an important question:

Everything written in uni.scss will be injected into every file in which scss is declared. This means that if your uni.scss has a few hundred lines and a size of about 10k, then this 10k will be injected into all other scss files (pages). If your application has 50 pages, it may cause the overall package size to increase by 50 * 10 = 500k, which may cause the mini program to The package is too large to preview and publish, so we recommend that you only put content related to scss variables into uni.scss.

Style override compatibility

In order to prevent styles from being overwritten or polluted by users, generally components or pages will add the scoped attribute to the style tag. The following is a demonstration of the internal structure of a component:

vue

/* item.vue */
<template>
    <view class="item"></view>
</template>

<style scoped>
    .item {
        border: 1px solid red;
    }
</style>

/* item.vue */
<template>
    <view class="item"></view>
</template>

<style scoped>
    .item {
        border: 1px solid red;
    }
</style>

We introduce the item component above into the page, and want to change its border border to color (blue). Generally, we modify it through the v-deep or /deep/ command, as follows:

vue

<template>
    <item></item>
</template>

<style scoped>
    ::v-deep .item {
        border: 1px solid blue;
    }
</style>

<template>
    <item></item>
</template>

<style scoped>
    ::v-deep .item {
        border: 1px solid blue;
    }
</style>

The above writing method is normal in App and H5, but it is invalid in WeChat applet. It requires that ::v-deep or /deep/ must be preceded by the class name of the parent element, as follows:

vue

<template>
    <view class="wrap">
        <item></item>
    </view>
</template>

<style scoped>
    .wrap ::v-deep .item {
        border: 1px solid blue;
    }
</style>

<template>
    <view class="wrap">
        <item></item>
    </view>
</template>

<style scoped>
    .wrap ::v-deep .item {
        border: 1px solid blue;
    }
</style>

If it is in the Alipay applet, the class name and inline style written on the component are invalid, as follows:

vue

<template>
    /* In the Alipay applet, any class and style on the component label will be removed and will not be added to the root element inside the component */
    <item style="border: 1px solid blue" class="item"></item>
</template>

<template>
    /* In the Alipay applet, any class and style on the component label will be removed and will not be added to the root element inside the component */
    <item style="border: 1px solid blue" class="item"></item>
</template>

Precautions ​

Set page background color ​

Traps of global assignment of device information ​

The mini program main package is too large to preview and publish ​