“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

01 Install the uView component library using NPM

UView relies on SCSS, and you must install this plug-in otherwise it will not work. If your project is created by HBuilder X, you are sure to have installed SCSS plug-in. If not, please go to tools -> Plug-in Installation in HX menu to find "SCSS/SASS compile" plug-in to install. If it does not take effect, Restart HX and run NPM install uview-ui to download the libraryCopy the code

You have installed Scss

02 Importing and registering uView

// in main.js, note that these two lines are placed after import Vue. import uView from "uview-ui"; Vue.use(uView);Copy the code

Introduction of uView global SCSS theme files

Import @import 'uview-ui/theme. SCSS 'in uni. SCSS file;Copy the code

Introduction of uView base style

In app.vue, the [first line] position is introduced, why the first line, because the styles you follow can override the built-in styles of the uView component. Note that adding the lang=" SCSS "attribute to the style tag will cause problems if not, I already have the hole. <style lang=" SCSS "> /* Add lang=" SCSS "to the style tag */ @import "uview-ui/index.scss"; </style>Copy the code

04 EasyCOM module mode

{// Add component configuration mode "easycom": {"^u-(.*)": "Uview - the UI/components/u - $1 / u - $1. Vue"}, / / the following is the content of your own "pages" : / /... }Copy the code

Use component CountDown

<template>
<view class="">
    <u-count-down :timestamp="timestamp"></u-count-down>
</view>
</template>

<script>
export default {
data() {
  return {
     timestamp: 86400,
  }
}
}
</script>
Copy the code

The component is used successfully

Tips for developing applets using UNI-App

Uni-app officially recommends SCSS. We should also actively use SCSS. Don't say you like less. Use less in your project. <style lang=" SCSS "></style> </style> </style> It can be used globally, such as defining colors, sizes, or variablesCopy the code

About compression and distribution and development

We all know that the main package size for applet preview and release should not exceed 2M, otherwise the real machine will not preview and release. Some partners will say, when using the uView component library, will increase the size of the small program? UView was introduced on demand. It will automatically delete components that we don't normally use. Note: if you don't click Publish when you upload the applets. Components that you are not using will not be deleted. So as long as you click "publish" completely do not need to worry about the size of the small program is too big ~ there is a point to pay attention to is: when we debug, that is, when we develop. HBuilderX does not compress and uncomment JS by default. Components are also not imported on demand. So it's common to see a friendly prompt on the console like this: [Running mode does not compress code and contains sourcemap, large volume; HBuilderX run -> Run to applets emulator -> check whether to compress MyTip code in applets at runtime. I also don't recommend using too advanced syntax because syntactic advanced translates to ES5 and increases the amount of code ~ uni. SCSS is compiled into every SCSS file (important) so that duplicate colors can be defined togetherCopy the code

The uni. SCSS file is not that simple

Uni.scss will compile into every SCSS file (very important) all the code we write in uni.scss. Is compiled into every file that declares SCSS, which means. If our uni. SCSS has hundreds of lines, the size is about 10K. This 10K is then injected into the declaration SCSS file (page). Let's say our project has 50 pages. You can calculate that this may result in an extra 50 * 10 = 500K package size is not terrible. So the uni. SCSS file should not exceed 5K. <style lang=" SCSS "></style> You probably know whyCopy the code

For style overrides

To prevent styles from being overwritten or contaminated by the user, we apply the scoped attribute to the style tag on both components and pages. </view> </template> <style scoped>. {background-color: #007AFF; } </style> Change the component color in the page. We usually modify with v-deep or /deep/ instructions, <template> </my-zujain> </template> </template> <style scoped> red; } </style> <style scoped lang=" SCSS "> } < span style = "box-sizing: border-box! Important; word-wrap: break-word! Important; But in the small program is not normal. <template> <view class="cont-box"> <my-zujain></my-zujain> </my-zujain> </view> </template> <style scoped> .cont-box ::v-deep .zujian { border: 1px solid blue; } </style> < span style = "box-sizing: border-box! Important; color: RGB (51, 51, 51); font-size: 14px! Important; white-space: inherit! Important;Copy the code