“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