Today, I will take everyone to learn uniapp with zero foundation. In the following courses, we will refer to uniapp as uni for short. I am here to teach you from zero foundation, and I can take you to do a simple practical project later. So don't worry that you don't have the foundation, just study hard with Brother Shitou.
First, know uniapp
1-1, the benefits of uniapp
Before we learn uniapp, we must first understand the benefits of uniapp. If
you look at the official website https://uniapp.dcloud.net.cn,
you can see that we can write a set of codes that can be published to iOS, Android, Web (responsive), and Various small programs (WeChat/Alipay/Baidu/Toutiao/Feishu/QQ/Kuaishou/DingTalk/Taobao), quick apps and other platforms.
To sum up, uniapp has the following advantages
- 1. The same set of codes can be compiled and run on multiple terminals (small programs, Android, ios, web, etc.)
- 2. Save manpower and maintenance cost
- 3. Close to the original, better experience
- 4. High development efficiency and shorter development time
- 5. The cost of learning is relatively low (you can get started in 3-15 days)
- 6. The community is active, the version iteration is fast, and problems are easier to solve in the community
1-2, why choose uni-app
uni-app has stronger advantages in 8 key indicators such as the number of developers, cases, cross-terminal leveling, expansion flexibility, performance experience, surrounding ecology, learning costs, and development costs.
1-3, functional frame diagram and multi-platform operation
As can be seen from the uni-app functional framework diagram below, uni-app does not sacrifice platform features in the process of cross-platform, but can gracefully call the platform's proprietary capabilities, and truly embrace all rivers and learn from each other's strengths. In fact, to put it bluntly, it is to develop a set of uniapp codes, which can run on the current mainstream platforms. Greatly save development costs.
If you look at the above picture, you can actually know that if there is no uniapp, we want to run our project in app, h5, and applet, then we need to develop at least 4 sets of codes for different platforms. The real advantage of uni is that we only need Developing a set of code can run on all platforms on mainstream platforms.
The figure below shows the effect that our set of code can run on multiple platforms.
1-4, uniapp and vue, the relationship between applets
uniapp is based on the vue framework, so if you know vue, it will be very easy
to learn uniapp.
Of course, if you don't have a small program or Vue foundation, it's okay, just follow Brother Stone to study this uniapp introductory course carefully.
Second, developer tools
The so-called workers must first sharpen their tools if they want to be good at their work. We must have a handy developer tool to develop uniapp.
Our tool for developing uniapp is HBuilderX
2-1, download the HBuilderX developer tools
HBuilderX is a general-purpose front-end development tool, but it has been specially enhanced for uni-app. The following is the official introduction of hbuilder.
We can go directly to the official website to download the HBuilderX developer tool
website download address . After entering, we only need to click to download. Remember to download the corresponding version for windows and mac computers.
2-2, install HBuilderX
In fact, the installation of HBuilderX is very simple. The installation package we downloaded above can be decompressed. After decompressing, the following figure is shown. Of course, I am here for the installation process of a window computer. If you have a mac computer, you can install it yourself. The installation process is basically the same.
We double-click the exe file in the decompressed file to run it.
After opening
, it is as follows Of course, if you feel that it is troublesome to double-click the exe file from the directory every time to open it, you can pin it to the taskbar or create a shortcut, and then put the shortcut on the desktop.
You can also send directly to the desktop shortcut
Under normal circumstances, when we open the project for the first time and close it, the system will prompt us to automatically create a desktop shortcut.
Of course, I prefer to pin it to the taskbar, because I will often use the entire developer tool in the future, so I just need to open it as convenient as possible.
3. Create your own first uni-app
Of course, if you have studied Brother Stone's small program course, you can get started quickly by learning uni. Conversely, if you don't have a small program or Vue foundation, it's fine, just follow Brother Stone to study hard.
3-1, create a new uniapp project
Click File -> New -> Project in the toolbar
and then configure the following on the pop-up creation page
- 1. Project name: choose whatever you want, you can use Chinese characters, but try to use English or pinyin
- 2. Project path: generally keep the default, but I personally prefer to put it on the desktop, so that it is easier to find the code later.
- 3. Select a template: You can use the default blank template during the study period. After we have learned almost the same, we can use the official template for rapid development.
- 4. Vue version: Because our uniapp is developed based on vue, we must choose the vue version here. Since we are learning, we recommend that you learn the latest version. You can use the version of vue 3
- 5. During the study period, we do not use uniCloud and gitCode code hosting platforms, so these two options do not need to be checked. With all of this set up, it's time to click Create.
Regarding the project path, for example, I create a new demo1 blank folder on the desktop, then click Browse when creating a project, and select the demo1 folder I created.
In this way, the project we created will be in the demo1 file, that is, our project source code exists in demo1. The
newly created project is as follows,
we can see that our new project is created in demo1. Here is our first The uniapp project is created.
Students who have followed Shitou to learn the development of WeChat applets can probably see that the uniapp project is actually very similar to the applet project.
The syntax of some components is also very similar, because uniapp is based on the Vue framework, and the applet also borrows from Vue. So if you have studied Brother Shitou's small program course, and then learn uni, you must learn quickly. Of course, even if you haven't learned small programs, Brother Shitou will lead everyone to get started with uni with zero foundation, as long as you study hard with Brother Shitou.
3-2, Know the uniapp project directory structure
We created the project in the previous step, and in this section we will get to know the project.
The directory structure of a complete uni project is as follows. We will guide you to learn one by one as we learn more in the later stage, so at this stage, you only need to know roughly, and there is no need to memorize it by rote.
You can first compare the official directory structure to get a general idea of what each file does in the first project we created. In the accompanying video explanation, I will slowly bring everyone familiar with it.
Let me first tell you about the directory structure of our new project in layman's terms, so that everyone can understand
- pages: The directory where all pages are stored. We currently only have one index page, and we will create other pages later, such as personal center, list page, detail page, etc., all placed in this pages file
- static: Static resource directory, such as icons, pictures, audio and video, etc.
- App.vue: Our root component, which is used to configure App global styles and monitors, and all page switching is performed here.
- index.html: It is a single-page file generated by the vue framework used by our uniapp, which is somewhat similar to the index page of our web page.
- main.js: Project initialization entry file, mainly used to initialize some needed things
- manifest.json : used to specify the application name, appid, logo, version and other packaging information. We will configure the WeChat applet, Alipay applet, etc. later, which can be configured here
- pages.json : Configure page information such as page routing, navigation bar, tabs, etc., determine the path of the page file, window style, navigation bar, tabbar at the bottom, etc.
- uni.scss: Here are common style variables built into uni-app, which is convenient to control the overall style of the application, such as color, border, etc.
The official documents also have a general introduction
3-3, Understanding developer tools
We can do some developer configurations in the top toolbar. For example, I set the theme to cool black here.
Of course, here you can do some simple settings according to your own preferences. We will slowly use the things in the toolbar in our later studies, and I will introduce them to you slowly in the video.
The functions of our commonly used developer tools include simulators and debuggers, which are in the next section.
3-4, Project preview
The preview of our project is commonly used in the following ways. In order to reduce everyone's learning costs, we mainly run it on the built-in browser during the learning stage, and we will gradually teach you to run it on the applet or mobile phone later.
Running to the browser is running on the browser on our computer
Running to the mobile phone or emulator: it can run on our Android or Apple mobile phone
Running to the applet: the project we developed can run on WeChat, Alipay, Baidu Mini program etc.
Run to the built-in browser: This is the most commonly used method in our current learning stage, so we can use the built-in browser to run at present.
3-5, run the project to the built-in browser
We click to run to the built-in browser, and the first time it will prompt: install the plug-in, we click OK to install it. Then wait patiently for the plugin to be installed.
The installation is successful
, and then click to run to the built-in browser again, and you can preview our project on the built-in browser. At
this time, we also have a debugger. The debugger is mainly used to print some log information to help us debug the project. Auxiliary bug fixes.
Four, uniapp development three musketeers
4-1, page layout, style, js logic
If you have studied Brother Shitou’s introductory course on small programs, you must know Brother Shitou’s three swordsmen in small program development. In fact, uni development also has its own three musketeers.
In fact, the knowledge points of the Three Musketeers in the applet are also applicable to uniapp
4-2, uniapp and applet, traditional web comparison
| structure | Applets | traditional web | sleep app |
|---|---|---|---|
| Structure layout | Wxml | Html | written in the template |
| style | Wxss | Css | written in style |
| logic | JavaScript | JavaScript | written in the script |
| configuration | Json | none | Json |
The difference from applets is that the page layout, style, and logic of uniapp are all written in the same .vue file, so we will learn some differences between uniapp and applets, but they are still very similar in general. So no matter whether you have studied Brother Stone's small program course, it will not affect the zero-based entry uniapp.
Five, the learning of notes and log printing
5-1, some commonly used shortcut keys
In order to improve the efficiency of code writing during development, we usually use some shortcut keys. Our development tools come with a lot of shortcuts. I won’t list them here. I will take out some commonly used shortcut keys and give you a general introduction. I will take a window computer as an example. If you have a mac computer, you can go to it yourself. Take a look at the default keyboard shortcuts for the developer tools. Just read it a few times and memorize the commonly used ones.
| shortcut key combination | describe |
|---|---|
| Ctrl+A | select all |
| Ctrl+C | copy selection |
| Ctrl+V | Paste copied content |
| Ctrl+D | delete the current line of code |
| Ctrl+N | create a new file |
| Ctrl+W | close file |
| Ctrl+Shift+W | close all files |
| Ctrl+S | save document |
| Ctrl+/ | Turn on/off code comments |
| Ctrl+Shift+/ | Enable/disable comment selection |
| Ctrl + Shift +R | copy current line to next line |
| Ctrl+F | Open the search bar, you can find and replace the specified content or all the content |
| Ctrl+H | Open the search box, you can search for the specified content location |
| Ctrl+R | Quickly open the run box |
| Ctrl+Z | Undo the modification and return to the previous step |
| Ctrl+Shift+Z | back to next step |
| Ctrl+↑ | move line code up |
| Ctrl+↓ | move code down |
| Alt+/ | Activate Code Assistant |
If you don’t like the default shortcut keys, you can reset the shortcut keys yourself. It is not recommended to customize the shortcut keys here. Just memorize the commonly used shortcut keys that come with it.
There may be slight differences in the shortcut keys on some computers, and the default shortcut keys that come with the developer tool shall prevail.
5-1, the learning of annotations
Before we study the following courses, let's learn about annotations. Comments are used to give hints in the code, mainly to let others get familiar with your code faster, and it is also convenient for you to look at your own code later and recall it quickly. Note that there are shortcut keys, just as we have mentioned commonly used shortcut keys in the previous section.
- Windows computer: Ctrl+/
- Mac computer: command+/
You can see that the three commonly used annotations are as follows, which correspond to the Three Musketeers we learned earlier.
- The annotations for the layout are:
<!-- --> - The comment of the js logic code is: //
- The css-style comments are: /* */
We don’t need to memorize the writing of each comment here, we only need to remember the shortcut keys to quickly generate comments. This is the benefit of shortcut keys.
5-3, the learning of log printing
During the development process, we always encounter various problems. Learning to read logs on the console can help us quickly locate and solve problems.
Log printing is often used in our development process. As for log printing, it is to print out some things in advance to verify whether the results of our code output are correct.
The syntax of log printing is as follows
console.log("我的打印出来的日志内容")
It can be seen that we printed the log we wrote in the console log, and later told us that this line of code was written on line 16. In this way, in the future development process, we can quickly and conveniently verify the code, locate the problem, and solve the problem.
5-4, log error message
After we have written our code, we can click to run it. Sometimes an error will be reported in the log of the console. The general error is as shown in the figure below. Basically, it is a dark red burst. Therefore, under normal circumstances, there will be a burst in the console log. Red, it means that there is an error in our code. At this time, we must locate the error in our code according to the error log.
In the following practical courses, we will deliberately write some error codes, and then teach you how to identify errors and change the code.
Six, the learning of common components of small programs
uni provides developers with a series of basic components, which are similar to the basic label elements in html, but uni is different from html, more similar to applets, and more suitable for mobile phones.
As shown in the figure below, the uni project is on the left and the applet project is on the right. You can see that both uni and applets use view components, so uni and applets are more similar.
The official components are as follows, and we will tell you some commonly used components next. Of course, there are some other components that are not commonly used. In the actual combat courses later, if they are used, they will be explained to you.
6-1, Know the view component
view component: It is equivalent to a box, which can be used to hold some other components. It is similar to the div in traditional html and is used to wrap various elements.
Official document: https://uniapp.dcloud.net.cn/component/view.html
If you have a web foundation of html, you can use our small program The view in is understood as the div tag in html. It doesn't matter if you haven't learned it, just follow me to learn view.
Simply use in code:
6-2, know the text component
text component: mainly used to display text.
6-3, know the input component
The input component is mainly used to obtain the information entered by the user. It is generally used when the user fills in information, submits data, logs in, registers, and submits a form.
Official document: https://uniapp.dcloud.net.cn/component/input.html
The input box input has many attributes. Here I will take you to learn some commonly used attributes. For others, you can read the official documents for detailed study.
Let's take the type attribute as an example. Our type attribute has the following attribute values.
For example, if we set the type of input to the value of the number attribute, then we can only enter numbers when inputting content.
6-4, know the button component
button component: It is a button component with default button effects, which we will often use later.
Official document: https://uniapp.dcloud.net.cn/component/button.html
The button button has many attributes. Here I will take you to learn some commonly used attributes. For others, you can go to the official documents to learn in detail,
such as some commonly used button attributes we set
6-5, know the picture image component
image component: mainly used to display pictures, which can be local pictures or network pictures.
Official document: https://uniapp.dcloud.net.cn/component/image.html
Our image components commonly use the three attributes of src, mode, and lazy-load, so we will focus on explaining these three attributes next. attributes.
When we don't set the width and height for the image, the default width of the image component is 320px and the height is 240px.
6-5–1, the src attribute displays network pictures
We use the src attribute to set the image resources to be displayed. There are two types of image resources
- local image resource
- Internet image resource
Since our local pictures will take up the size of the mini program software package, we recommend you to use network pictures as much as possible.
We set the syntax for displaying pictures as follows
<image src="图片资源地址"></image>
As shown in the figure below, we display a network image.
Here is a network image address for everyone
https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg
If this address has expired, you can go to the Internet to find pictures yourself. Just find a picture, then right click, click copy picture address, you can get the network picture.
6-5-2, the src attribute displays local pictures
To use image to display local pictures, we need to put the pictures in static in advance, as shown in the figure below, we put the local pictures in the static directory
Then set the src attribute in the image component to point to this local image, and then it can be displayed in uniapp.
I display both network pictures and local pictures in the applet, so that everyone can compare and learn.
6-5-3, set the image cropping and zooming mode by mode
Another important attribute of the image component is mode. When we use pictures, we cannot guarantee 100% that the ratio of the picture is exactly what we want. At this time, we need to crop and zoom the picture.
Common settings for mode are as follows
| value | illustrate |
|---|---|
| scaleToFill | Scaling mode, zooming the picture without maintaining the aspect ratio, so that the width and height of the picture are fully stretched to fill the image element |
| aspectFit | Zoom mode, keep the aspect ratio to zoom the picture, so that the long side of the picture can be fully displayed. That is to say, the picture can be displayed completely. |
| aspectFill | Scale mode, keep the aspect ratio to zoom the picture, and only ensure that the short side of the picture can be fully displayed. That is, the picture is usually only complete in the horizontal or vertical direction, and interception will occur in the other direction. |
| widthFix | Zoom mode, the width remains unchanged, the height changes automatically, and the aspect ratio of the original image remains unchanged |
| heightFix | Zoom mode, the height remains unchanged, the width changes automatically, and the aspect ratio of the original image remains unchanged 2.10.3 |
| top | Crop mode, does not zoom the picture, only shows the top area of the picture |
| bottom | Crop mode, does not scale the picture, only shows the bottom area of the picture |
| center | Crop mode, does not zoom the picture, only shows the middle area of the picture |
| left | Crop mode, does not zoom the picture, only shows the left area of the picture |
| right | Crop mode, does not zoom the picture, only shows the right area of the picture |
| top left | Crop mode, does not zoom the picture, only shows the upper left area of the picture |
| top right | Crop mode, does not zoom the picture, only shows the upper right area of the picture |
| bottom left | Crop mode, does not zoom the picture, only shows the lower left area of the picture |
| bottom right | Crop mode, does not zoom the picture, only displays the lower right area of the picture |
也可以看官方文档
比如我们有一个原图如下。
设置不同的mode值，可以很明显的看出来区别
后面我们需要对图片做裁剪或者伸缩处理时，就可以设置不同的mode值来实现不同的效果。
比如我们设置mode属性为center，就可以看到我们只保留图片中间区域
6-5-4，图片懒加载
image组件是支持图片懒加载的，图片懒加载。只针对page与scroll-view下的image有效，其实就是当我们一个列表页有很多图片时，我们可以使用懒加载，来加快页面加载速度。使用懒加载时，我们只需要给image设置lazy-load就可以了。
七，数据绑定，函数，事件
7-1，数据绑定
7-1-2，组件外的数据绑定(文本插值)
我们在页面布局里写数据，一般情况下可以直接写，比如下面我们可以用10个text里显示10个编程小石头，假设我们有一个这样的需求，需要把编程小石头给为石头哥。如果我们每个都改一遍，是不是要改10遍，这样就导致效率低下了。
所以我们这里可以用数据动态绑定来提升效率。
数据绑定最常见的形式就是使用 {
{…}}（双大括号）的文本插值，就是用{
{}}包裹你的值，然后这个值就可以动态的显示了，比如我用 {
{name}} 然后给这个name设置值为：编程小石头，如下，可以看到我们和上面写10遍编程小石头是一样的。
我们想把编程小石头改为石头哥，就只需要改name的值就行了。如下所示。
这样我们就明白用数据绑定的好处，其实我们后面的开发中，除了那种死的不会变的直接写死外，其他的后面可能需要改变的最好都用数据绑定。
关于数据绑定的语法需要大家记住，一定要多练，因为后面会经常用的。
就是在页面布局需要显示数据的地方用 {
{数据名}}
然后在js的data里设置数据值，如下：
这里其实使用了vue的数据绑定，而vue官方又叫这种数据绑定为文本插值。其实就是把数据动态的绑定到我们组件外。
7-1-2，组件内的数据绑定(v-bind属性绑定)
我们上面一节学习的文本插值式的数据绑定，那是把我们的数据动态的绑定到组件外。
如果我们想动态的绑定组件内的属性数据呢。比如我们的image图片组件的src属性，我们的图片链接不想写死，想动态的去替换。这个时候就可以用v-bind 动态地绑定属性了
v-bind也可以缩写为‘ : ’，可以用于响应式地更新
可以看到我们使用v-bind或者缩写的 ： 都可以动态的把url数据绑定到image的src属性上。
这里要注意文本插值和属性绑定是有区别的
- 文本插值绑定数据，需要用{ {}}
- v-bind属性绑定，不需要{
{}}
7-2，绑定数据的读取
我们上面通过{
{}}绑定数据到data里，我们绑定的数据有时候也需要用，而使用绑定的数据，可以通过this.数据名来使用
可以看到我们通过this.name就可以获取name绑定的数据。
7-3，函数的学习
函数的两种使用方式如下图：
我们的函数一般是写在js逻辑区域的methods里，比如我们定义一个getname函数，有下面两种写法。
石头哥这里推荐第一种方式定义函数，这也更简单。
7-4，点击事件的学习
接下来我们学习事件，我们常用的事件如下，这里我们先重点讲解下@click点击事件和
@input获取输入值的事件
我们如果想给一个组件定义点击事件，就要用到uni的事件处理，由于uni是基于vue语法的额，所以我们给uni里的组件定义点击事件，就要用到vue的语法。
我们给一个组件绑定点击事件的语法如下：
我们可以使用 v-on 指令来监听点击事件，从而执行 JavaScript 代码。
v-on 指令可以缩写为 @ 符号。
语法格式：
v-on:click="methodName"
或
@click="methodName"
methodName就是函数名，如下所示
可以看出我们使用v-on和@都可以定义点击事件，我这里推荐大家用@简写的方式
7-5，获取用户输入信息
获取input输入框里用户输入的内容有两种方式
- @input结合函数
- v-model数据绑定获取输入内容(推荐)
7-5-1，@input结合函数获取输入内容
我们获取用户输入会用到@input事件，其实我们在学习input组件时，官方有给出这个属性的。
看官方的文档，可以知道@input主要是为了获取用户的输入内容。
@input的定义如下图，其中的getname就是我们定义的函数，用来接收用户输入的。
在布局里定义好bindinput事件以后，在js页面再定义一个和事件名一样的函数即可。
然后就可以监听用户输入了
视频里会作详细讲解。如果你有买老师的课程，或者购买老师的年卡，可以获取对应的学习视频。
7-5-2，v-model双向绑定数据获取输入内容
-
v-model是什么
v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。 -
为什么使用v-model
v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。 -
v-model的原理简单描述
v-model主要提供了两个功能，view层输入值影响data的属性值，data属性值发生改变会更新view层的数值变化
具体的语法如下：
这样当我们用户输入内容后，输入的内容就可以绑定到name上，后面直接使用就行了。
下面来对比下@input和v-model的代码
可以发现v-model比着@input，很明显的节省了一步定义函数getname，所以这里推荐大家使用v-model来获取input输入内容。
另外，v-model 还可以用于各种不同类型的输入数据的获取，用于在表单类元素(单选、多选、下拉选择、输入框等)上双向绑定数据，后面学习中用到我会再做具体讲解。
八,综合小案例~开发简单的计算器
8-1，效果图预览
上一节和大家讲解了小程序的一些常用组件，这节就带大家写出自己的第一个简单计算器。做一个综合性的练习。由于是入门，这里先教大家简单的加法运算。效果图如下
实现起来特别简单，代码也特别少，就下面三个
- index.wxml：上图的布局视图页
- index.js：实现加法逻辑的页面
- app.json：一些全局的配置。基本是都是默认的这里不用管
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n1U75mfw-1597396869759)(https://upload-images.jianshu.io/upload_images/6273713-2b8639cf9f1fc8ea.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]
下面就带带大家敲出属于自己的计算器小程序代码。
8-2，先看index.wxml
<!--index.wxml -->
<input placeholder="请输入数字a" bindinput="inputa" />
<text>+</text>
<input placeholder="请输入数字b" bindinput="inputb" />
<button bindtap='sum'>计算</button>
<text>结果为：{
{result}}</text>
代码虽然少，但是作为刚入门的你，看起来可能很茫然，下面详细给大家讲下。
<input placeholder="请输入数字a" bindinput="inputa" />
<input placeholder="请输入数字b" bindinput="inputb" />
就是我们输入数字a的输入框，这里input就是我们认识的第一个小程序组件。
input的官方简介如下：https://developers.weixin.qq.com/miniprogram/dev/component/input.html
placeholder：设置默认显示文字（当我们输入文字时，默认的就没有了）
bindinput=“inputa”：定义一个inputa方法来获取input的输入内容。在index.js中会用到
-
+
这里的组件是用来显示文本的这里我们只是为了显示一个 + 号
<button bindtap='sum'>计算</button>
这里是个按钮就是我们的计算按钮
bindtap=‘sum’：定义个叫sum的方法，用来计算结果在index.js中会用到
-
结果为：{ {result}}
{ {result}} 这种写法，是小程序用来绑定数据用的，这里用来显示我们的计算结果用的，
上面代码和对应的显示如下：
8-3，再来看index.js，我们加法的逻辑实现
可以看到我们在index.wxml里定义的bindinput=“inputa”，bindtap='sum’在下面有用到
Page({
/**
* 页面的初始数据
* 初始化两个输入值
*/
data: {
input1: 0,
input2: 0
},
//获取用户输入的值a
inputa: function (e) {
this.setData({
input1: e.detail.value
})
},
//获取用户输入的值b
inputb: function (e) {
this.setData({
input2: e.detail.value
})
},
// 拿到两个输入值以后求和
sum: function (e) {
var a = parseInt(this.data.input1);
var b = parseInt(this.data.input2);
// 求和
var sumResult = a + b
this.setData({
// 把结果赋值到sum标签上
result: sumResult
})
}
})
index.js的代码不多，大家可以先照着敲一下。学小程序前期不需要你理解，但是一定要多敲多练。
这里的逻辑用文字写出来，估计大家新入门时还是不太好理解，我会录视频来给大家讲解。
九，wxss和css样式美化
我们上面的学习，大家可以看出来，我们写的页面都比较简陋，也就是不太好看，主要是我们没有使用css样式进行美化，从今天开始我们就来学习一些样式相关的知识，用来美化我们的小程序。其实我们小程序三剑客里的wxss和我们的css是一样的。所以我接下来会把一些常用的css知识点给大家讲解一下。还有小程序里特有的一些样式知识也做下重点讲解。
一些特别基础的css知识可能不会讲太多。
这里把一些css的文档给大家一个，大家抽个几小时可以快速的学习下css基础，css不要求大家学习时全部记住，只需要大致知道相应的知识点，后面学习时会回来快速的查阅就行。
- 菜鸟教程：https://www.runoob.com/css/css-tutorial.html
- w3cshool教程：https://www.w3school.com.cn/css/index.asp
9-1，css基础语法
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:
在我们小程序的代码里就体现如下
- 1，在wxml里定义一个class选择器
- 2，在wxss实现css样式
我们这里主要给title选择器实现红色背景，黄色字体。效果如下
可以看出我们css主要是实现页面美化用的，所以你如果想让你的小程序变得美丽漂亮，就要好好学习css样式了。
9-2，CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束, 实例如下:
/*这是个注释*/
.title{
text-align:center;
/*这是另一个注释*/
color:black;
font-family:arial;
}
9-3,Id 和 Class选择器
- id 选择器以 “#” 来定义。
下面的两个 id 选择器，第一个可以定义元素的颜色为红色，第二个定义元素的颜色为绿色：
#red {
color:red;
}
#green {
color:green;
}
- class 选择器
class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用,类选择器以一个点"."号显示
.red {
color:red;
}
.green {
color:green;
}
我们小程序的css中用的最多的就是id和class选择器。
9-4，CSS 背景
CSS 属性定义背景效果常用的方式:
- background-color（最常用）
background-color 属性定义了元素的背景颜色.如：
.title {background-color:red;} 就是设置类选择器title的背景颜色为红色
我们上面的 background-color也可以简写为 background，如：
.title {background-color:red;} 也是设置背景为红色
9-5，css中颜色设置的三种方式
CSS中，颜色值通常以以下方式定义:
- 十六进制 - 如：“#ff0000”
- RGB - 如：“rgb(255,0,0)”
- 颜色名称 - 如：“red”
我这里给大家提供一个颜色表，大家可以拿到自己喜欢颜色的十六进制值。
https://tool.oschina.net/commons?type=3
如果这个连接失效了，大家自己百度下“颜色对照表”也可以找到类似的。
部分截图如下。
9-6，文本常用样式
9-6-1,文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐
- text-align: center； 文本居中对齐
- text-align: left； 文本居左对齐
- text-align: right； 文本居右对齐
9-6-2，文本修饰
text-decoration 属性用来设置或删除文本的装饰
- text-decoration: overline; 上划线
- text-decoration: line-through; 中间划线
- text-decoration:underline; 下划线
9-6-3，color设置文本颜色
如下所示，设置字体颜色为红色的三种方式
/* 英文颜色 */
.title {
color: red;
}
/* rgb设置颜色 */
.title {
color: rgb(255, 0, 0);
}
/* 十六进制设置颜色 */
.title {
color: #FF0000;
}
这些颜色值，可以在我前面给到大家的颜色对照表里找到。
9-6-4，font-size 设置字体大小
font-size可以用来设置字体的大小
- 不写这个属性有默认大小
- font-size: 30px;
- font-size: 50px;
当然我们的文本还有好多别的样式，这里我们只讲这几个重点的，其余的大家可以自己去看下 https://www.runoob.com/css/css-text.html
9-7，css边框和边距
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
我这里画一个图，方便大家理解margin，padding，border。其实我们装手机的快递盒子有点类似。
9-7-1，padding 内边距
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。padding 属性定义元素边框与元素内容之间的空白区域。padding 属性接受像素值或百分比值，但不允许使用负值
- padding: 10px;
如果只设置一个值，那么上下左右都是10px - padding: 10px 20px 30px 40px;
按照上、右、下、左的顺序分别设置各边的内边距。这样设置就是内边距的上间距10px，右间距20px，下边距30px，左边距40px - 也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
padding-left
9-7-2，border边框
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
如下面几种边框
每个边框有 3 个方面：样式，宽度、以及颜色
-
border-style可以来设置样式
我们通过设置border-style来定义上下左右四个边框样式，当让也可以定义单边样式，如果您希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：
border-top-style
border-right-style
border-bottom-style
border-left-style -
border-width设置边框的宽度
您可以通过 border-width 属性为边框指定宽度。
同样border-width: 5px;只有一个值的时候是设置上下左右4个边框的宽度。
您也可以通过下列属性分别设置边框各边的宽度：
border-top-width
border-right-width
border-bottom-width
border-left-width -
border-color设置边框的颜色
您可以通过border-color 属性为边框指定颜色。
同样border-color只有一个值的时候是设置上下左右4个边框的颜色。
您也可以通过下列属性分别设置边框各边的颜色：
border-top-color
border-right-color
border-bottom-color
border-left-color -
当然我们我们的边框宽度，样式，颜色有一种简写方式
.title{
border:5px solid red;
}
我们只需要一个border属性，就可以设置上下左右四个边框的宽度为5px，样式为solid，颜色为red。
9-7-3，margin外边距
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。margin 没有背景颜色，是完全透明的
设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值
- Margin - 单边外边距属性
在CSS中，它可以指定不同的侧面不同的边距：
实例
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
margin属性可以有一到四个值。
- margin:25px 50px 75px 100px;
上边距为25px
右边距为50px
下边距为75px
左边距为100px - margin:25px 50px 75px;
上边距为25px
左右边距为50px
下边距为75px - margin:25px 50px;
上下边距为25px
左右边距为50px - margin:25px;
所有的4个边距都是25px
9-8，border-radius设置圆角边框
border-radius 主要是用来设置圆角用的，下面我通过几个常用的例子来给大家讲解下这个知识点
- 1，直接可以用像素设置圆角大小
.title {
background: red;
/* 可以用像素设置圆角 */
border-radius: 10px;
}
- 2,如果有宽高值，可以设置border-radius为宽高的一半实现圆形
.title {
background: red;
width: 200px;
height: 200px;
border-radius: 100px;
}
当有宽高的时候，设置 border-radius为50%同样可以实现上面的圆形功能。
.title {
background: red;
width: 200px;
height: 200px;
border-radius: 50%;
}
9-9，flex弹性布局
9-10，px和rpx的转换
我们在设置宽度，高度，边框粗细时都会用到尺寸单位，我们这里重点给大家讲解下px和rpx。rpx是微信为小程序专门设计的一个尺寸单位。
px和rpx的换算如下：
我们一般设计规范都是依据iPhone6来设计的，也就是说平常ui设计师给出的1px我们在写代码时要写0.5rpx。
下面给出一个简单的例子
上面红色小石头的字体设置了100px，黑色小石头设置了200rpx，这个时候我们可以看出，红色和黑色小石头的大小是一样的。所以我们后面开发小程序里建议大家用rpx作为小程序的尺寸单位，这样能很好的做自适应。如果我们的设计小姐姐给的是px单位的设计图，我们就要自己用px除以2得到我们对应的rpx大小。
9-11，综合案例一(画个月牙)
比如我们想实现一个红色的半月，如下图
那我们该怎么实现这个月牙呢。
- 1，在wxml里定义两个view组件，并且设置好class类名
- 2，然后再wxss里设置对应的css样式，用到我们前面学的border-radius
可以看出来，我们就是用了border-radius实现了一个红色的圆形和一个白色的圆形，白色的圆形遮住了一部分红色的大圆，这样就实现了一个红色的月牙。
9-12，综合案例二（写个搜索框）
我们在小程序里经常见到下面所示的搜索框，其实这个搜索框实现起来很简单，把我们上面学的知识点都用到了，所以我们接下来用这么一个综合案例带大家熟悉下之前的知识点。
首先我们要在wxml里定义如下布局
布局其实很简单，就是一个父view里套一个子view。
然后就是在wxss里定义样式就可以了
其实到这里就已经可以轻松实现我们上面想要的效果了。
建议大家先跟着写写看。我下面把wxss代码贴出来给大家。
.root {
height: 65rpx;
background: #FFB965;
padding: 10rpx;
}
.input {
height: 100%;
text-align: center;
color: grey;
background: white;
border-radius: 15rpx;
}
9-13，综合案例三（点击改变背景色）
这里结合我们前面学过的点击事件和数据绑定一起来实现：点击改变背景色。
十，条件渲染和列表渲染
我们的条件渲染和列表渲染其实我JavaScript里的if语句和for循环是相似的，我uniapp里就不再讲JavaScript知识了，如果大家感兴趣可以自己去学习下，也可以看石头哥的小程序入门里的JavaScript部分的讲解，讲的已经很清楚了，所以这里不再做JavaScript的讲解了。
从5-1JavaScript变量开始往后学习到13-16数组相关即可。
JavaScript讲解视频：https://www.bilibili.com/video/BV12T4y1E7k6/?p=23
10-1，条件渲染
我们的条件渲染，其实就是在页面上符合条件才会显示页面，不符合条件就不显示。
主要用到了v-if和v-else，用来判断在页面里显示或者不显示。
其实和我们JavaScript里的if和else语句一样的道理，只不过一个是写在页面里，一个是写在js里。
可以看到v-if的条件成立后，就会显示v-if里的内容，而v-else正好和v-if是反着的。
我们也会用到v-else-if来做补充判断 比如我们12岁以下是小学，12-15是初中，15以上是高中，就可以如下图所示的写法。而v-else-if和JavaScript里的else if语句是一样的。
十六,多媒体组件的学习（图片和视频）
16-2,认识视频video组件
video组件：主要用来实现视频播放。
官方学习文档：https://developers.weixin.qq.com/miniprogram/dev/component/video.html
16-2-1，src属性设置视频地址
video组件里也是通过src属性来设置视频资源的。这里的视频资源都是网络连接。
我把这几个mp4格式的视频链接贴给大家
http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4
https://media.w3.org/2010/05/sintel/trailer.mp4
http://vjs.zencdn.net/v/oceans.mp4
如果上面链接失效，我们可以去官方文档拿官方的视频链接
16-2-2，设置视频弹幕属性来显示弹幕
我们上面设置src只能保证视频的正常播放，如果我们想使用弹幕功能，就要为video设置别的属性了。
我们如果想在视频上显示弹幕，就要设置danmu-list属性。可以看出danmu-list属性是一个数组，而这个数组就要放置我们弹幕的一些数据了。
下面我在代码里给大家简单的演示下弹幕的显示。
首先在wxml里设置danmu-list属性，并且给danmu-list绑定数据danmuList
而这个danmuList就要在js里设置了。
我们可以在danmuList的每个弹幕对象里设置弹幕显示的内容，弹幕的颜色，弹幕显示的时间。
通过上图可以看到，我们设置的弹幕成功的显示在了视频上。这样我们就可以轻松的实现弹幕展示功能了。
16-2-3，发送弹幕功能
我们上面只是简单的展示了弹幕，如果我们想让用户发送弹幕该怎么做呢。下面就来教大家实现弹幕的发送功能。
简单起见，我这里设置一个input来获取用户输入的内容，用一个button按钮来触发弹幕的发送。
wxml文件如下：
这里我们特意设置了一个id属性，我们下面发送弹幕时，需要先初始化一个视频对象，而初始化视频对象时就用到了这个id。
js文件如下：
可以看出，我们在onReady页面渲染完成时，初始化了一个视频对象videoContext，然后通过bindInput获取用户输入的弹幕内容。最后在点击发送弹幕按钮时，通过videoContext.sendDanmu来发送弹幕到视频的屏幕上。
到这里，我们发送弹幕的功能也实现了，当然video视频组件还有很多别的属性，这里就不再一个个介绍了。大家可以自己去看官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/video.html
十九，通过tabBar设置多页面
我们正常创建的默认项目是一个单页面，我们要想实现下面效果所示的多页面就要借助tabBar来实现多页面。
官方文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#%E9%85%8D%E7%BD%AE%E9%A1%B9
一个小程序可以配置2-5个多页面，
我们这里以创建3个页面来给大家做下讲解。
19-1，创建image目录放图标
我们要使用tabBar就需要用到图标，所以我们要创建一个放图标的目录。
然后把我提前给大家准备好的图标放到image里即可。
这些图标我会在配套学习资料里给到大家。
19-2，创建多个页面
关于小程序里页面的快速创建我小程序基础里讲过很多遍了，这里就不再啰嗦，直接在app.json里创建下面三个页面即可
19-3，设置tabBar实现多页面布局
上面三个页面创建好以后，我们就可以通过tabBar来设置多页面布局了。
在app.json里添加如下配置。
这样我们就可以实现可以自由切换的多页面小程序了。
到这里我们的多页面项目就创建好了。
19-4,设置tabbar的代码
由于这里的tabbar配置基本上是固定的，我这里把代码贴在笔记里，大家以后用到的时候，只需要把笔记里的这段代码拿过去就可以，里面的配置稍微改下既可以。
"tabBar": {
"color": "#Fc0",
"selectedColor": "#f4c903",
"borderStyle": "white",
"list": [{
"selectedIconPath": "image/tab1-ok.png",
"iconPath": "image/tab1.png",
"pagePath": "pages/home/home",
"text": "首页"
},
{
"selectedIconPath": "image/tab2-ok.png",
"iconPath": "image/tab2.png",
"pagePath": "pages/me/me",
"text": "我的"
}
]
},
二十，navigator页面跳转
我们在小程序里做页面跳转有两种方式
- 1，借助navigator组件
- 2，借助wx.自带方法，在点击的时候做页面跳转
如下图所示的几个wx.方法
官方给出的几种跳转方式的解释如下
20-1，navigator实现页面跳转
navigator其实和我们html里的a标签有点像，也是为了实现页面跳转的。
官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html
我们想用navigator来跳转到别的页面，其实很简单，只需要如上图所示，做简单配置即可。
当然了我们使用navigator来跳转页面时，分下面几种情况。当然这些跳转方式都是通过配置open-type属性来定义的。
20-2，页面的跳转方式
下面我把一些常用的open-type属性列出来给大家，方便大家以后使用。
| open-type值 | 说明 | 对应wx方法 |
|---|---|---|
| navigate | 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 | 对应wx.navigateTo |
| redirect | 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 | 对应 wx.redirectTo |
| switchTab | 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 | 对应 wx.switchTab |
| reLaunch | 关闭所有页面，打开到应用内的某个页面 | 对应 wx.reLaunch |
| navigateBack | 关闭当前页面，返回上一页面或多级页面 | 对应 wx.navigateBack |
| exit | 退出小程序，target="miniProgram"时生效 | 无 |
如我们使用navigate做页面跳转，只写个url属性，open-type的值默认就是navigate
这样我们跳转到新页面后，会有一个返回按钮。我们可以通过这个返回按钮返回上一个页面。
我会在视频里为大家一个个演示其余的方法和功能。
20-3，点击事件结合wx方法实现跳转
我们做页面跳转除了使用navigate组件外，还可以通过点击事件借助wx方法实现页面跳转。
常用的wx方法：
| wx方法 | 说明 |
|---|---|
| wx.navigateTo | 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面 |
| wx.redirectTo | 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面 |
| wx.switchTab | 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 |
| wx.reLaunch | 关闭所有页面，打开到应用内的某个页面 |
| wx.navigateBack | 关闭当前页面，返回上一页面或多级页面 |
| 我这里给大家举个简单的例子 |
- 在wxml里设置点击事件
- 然后再js里设置点击后跳转页面
这样我们就可以实现页面跳转了，和使用navigate做跳转一样的效果。
其余的几个wx跳转方法，我也会在视频里给大家做演示。
20-4，通过switchTab跳转tabbar页面如何携带数据
我们跳转到tabbar页面是无法直接通过url携带数据，所以我们就要通过别的方式来实现页面跳转时的数据传递，所以这时候可以有两个方式。具体代码我在视频里带大家写一遍。
20-4-1，通过app.js里的globalData
其实就是通过app.js里的全局变量来传递。
20-4-2，通过本地缓存
其实就是在A页面存数据到缓存，然后A页面跳转到B页面时通过取本地缓存来拿到数据，进而实现页面跳转传递参数的功能。
20-5,打开别的小程序
其实我们可以在自己的小程序里通过navigateTo打开别的小程序的，只不过有自己特定的方法：wx.navigateToMiniProgram
对应的官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/navigate/wx.navigateToMiniProgram.html
其实我们只需要拿到别的小程序的appid就可以实现这个功能了，我会在视频里演示怎么拿到别的小程序的appid
二十一，小程序页面生命周期
什么是生命周期
https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
这是官方给出的页面生命周期解释，如下图
作为初学者，一开始不一定能看懂，所以我给大家总结成下面所示的。方便大家学习。其实生命周期就是一个小程序页面从创建到销毁的一个时间周期。
官方文档
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
这是官方给出的解释，感兴趣的同学可以自己看看，我会在视频里把常用的生命周期方法给大家做具体的讲解。
