今天开始带着大家一起零基础学习uniapp，在下面的课程中我们就简称uniapp为uni吧。我这里从零基础开始教大家，后面可以带大家简单的做一个实战项目。所以不用担心自己没有基础，跟着石头哥认真学习就行了的。

一，认识uniapp

1-1，uniapp的好处

我们学习uniapp之前先要认识uniapp的好处

看下官网 https://uniapp.dcloud
就可以看到，我们用编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

总结起来uniapp有以下几点好处

  • 1，同一套代码可以编译运行多端（小程序，安卓，ios，web等）
  • 2，节省人力和维护成本
  • 3，接近原生，体验效果更好
  • 4，开发效率高，开发时间更短
  • 5，学习成本比较低（3-15天即可入门）
  • 6，社区活跃，版本迭代快，有问题更容易在社区解决

1-2，为什么要选择uni-app

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势

1-3，功能框架图和多平台运行

从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。其实说白了，就是开发一套uniapp代码，就可以在当前主流的平台上运行。大大的节省了开发成本。

大家看下上图，其实就可以知道，如果没有uniapp，我们想在app，h5，小程序里运行我们的项目，那么我们至少要开发4套不同平台的代码，uni真正的好处就是我们只需要开发一套代码就可以在主流的平台上全平台运行。

下图可以看到我们一套代码可以在多个平台运行的效果。

1-4，uniapp和vue，小程序的关系

uniapp是基于vue框架，所以如果你会vue的话，来学uniapp会很简单
uniapp的开发规范和小程序相似，所以如果你跟着石头哥学过小程序，再来学uniapp就能很快的入门。

当然了，如果你没有小程序或者vue基础，也没事的，只要跟着石头哥认真学习这门uniapp入门课即可。

二，开发者工具

所谓工欲善其事，必先利其器。我们开发uniapp肯定要有一个得心应手的开发者工具。

我们开发uniapp的工具就是HBuilderX

2-1，下载HBuilderX开发者工具

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。下面是hbuilder官方的简介

我们可以直接去官网下载HBuilderX开发者工具 官网下载地址
进去后我们只需要点击下载即可，记得window和mac电脑要下载自己对应的版本。

2-2，安装HBuilderX

其实HBuilderX的安装很简单，我们上面下载好的安装包，解压好就可以了，解压好以后如下图。当然我这里是window电脑的安装过程，大家如果是mac电脑，可以自行安装。安装过程基本上大差小不差的。

我们在解压好的文件里双击exe文件即可运行。

打开后如下

当然了，如果感觉每次从目录里双击exe文件打开麻烦，可以固定到任务栏或者创建快捷方式，然后把快捷方式放到桌面。

也可以直接发送到桌面快捷方式

一般情况下，我们第一次打开项目关闭的时候，系统会提示我们自动创建一个桌面快捷方式的。

当然我比较喜欢固定到任务栏，因为以后要经常用整个开发者工具，所以怎么样打开方便就怎么来就行了。

三，创建属于自己的第一个uni-app

当然如果你有学过石头哥的小程序课程，再来学习uni就可以很快的入门的。反过来说，如果你没有小程序或者vue基础，也没事的，只要跟着石头哥认真学习即可。

3-1,创建一个新的uniapp项目

在点击工具栏里的文件 -> 新建 -> 项目

然后在弹出的创建页面做以下配置

  • 1，项目名称：随便取，可以用汉字，但是尽量用英文或者拼音
  • 2，项目路径：一般保持默认即可，不过我个人比较喜欢放在桌面，这样后面找代码方便些。
  • 3，选择模板：学习期间用默认空白模板即可，后面我们学的差不多了，就可以使用官方提供的模板，进行快速开发了。
  • 4，vue版本：因为我们的uniapp是基于vue开发的，所以这里要选择vue版本，既然我们学习，就建议大家学习最新的，用vue 3这个版本就可以了
  • 5，学习期间，我们不使用uniCloud和gitCode代码托管平台，所以这两个选项不用勾选即可。所有这些设置完，就可以点击创建了。

关于项目路径，比如我在桌面新建一个demo1空白文件夹，然后在创建项目时点击浏览，选择自己创建的demo1文件夹即可。

这样我们创建的项目就会在demo1文件里，也就是我们的项目源码就存在了demo1里

新创建好的项目如下

可以看到我们的新项目就创建在了demo1里，到这里我们的第一个uniapp项目就创建好了。
跟着石头哥学过微信小程序开发的同学大概可以看出来，uniapp项目其实和小程序项目很相似的。

一些组件，语法也很相似，因为uniapp就是基于vue框架的，而小程序呢也是借鉴了vue。所以你学过石头哥的小程序课程，再来学uni，肯定学的很快的。当然了，即便没学过小程序，石头哥也会手把手的带着大家零基础入门uni的，只要跟着石头哥认真学习。

3-2，认识uniapp项目目录结构

我们上面一步创建好了项目，这一节我们就来认识项目。
一个完整的uni项目的目录结构如下，我们后期随着学习的深入会逐个带大家学习，所以目前阶段，大家只需要大致知道就行，没有必要死记硬背下来。

大家可以先对照着官方给出的目录结构，大致的知道我们创建的第一个项目里每个文件都是什么作用。我在配套视频讲解里，会慢慢的带着大家熟悉的。

我这里先用通俗的话给大家说下我们新建项目的目录结构，方便大家理解

  • pages：所有页面存放的目录，我们目前只有一个index页面，后面再创建别的页面，比如个人中心，列表页，详情页等，都是放在这个pages文件里
  • static：静态资源目录，例如图标，图片，音视频等
  • App.vue：我们的根组件，用来配置App全局样式以及监听，所有页面的切换都是在这里进行的。
  • index.html：就是我们的uniapp使用的vue框架生成的单页面文件，有点类似我们的网页的index页。
  • main.js：项目初始化入口文件，主要用来初始化一些需要的东西
  • manifest.json ：用来指定应用名称、appid、logo、版本等打包信息，后面我们配置微信小程序，支付宝小程序等，可以在这里配置
  • pages.json ：配置页面路由、导航条、选项卡等页面类信息，决定页面文件的路径，窗口样式，导航栏，底部的tabbar等。
  • uni.scss ：这里是uni-app内置的常用样式变量，方便控制应用的整体风格，比如颜色，边框等

官方文档也有大致的介绍的

3-3，认识开发者工具


我们可以在顶部的工具栏里做一些开发者的配置，比如我这里把主题设置为了酷黑色。

当然了这里大家根据自己的喜好，去做一些简单的设置即可。我们后面的学习中会慢慢的用到工具栏里的东西，在视频里我慢慢的给大家做介绍。

我们常用的开发者工具的功能还有模拟器，调试器，在下一节的。

3-4，项目的预览

我们项目的预览常用的有下面几个方式。为了降低大家的学习成本，我们学习阶段主要运行到内置浏览器，后面会慢慢教大家运行到小程序或者手机上。

运行到浏览器就是运行到我们电脑上的浏览器

运行到手机或者模拟器：就是可以运行到我们的安卓或者苹果手机上

运行到小程序：就是我们开发的项目可以运行到微信，支付宝，百度小程序等。

运行到内置浏览器：这是我们目前学习阶段最常用的方式，所以我们目前运行先使用内置浏览器即可。

3-5，运行项目到内置浏览器


我们点击运行到内置浏览器，第一次会提示：安装插件，我们点击确定，安装即可。然后耐心等待插件的安装即可。

安装成功

然后再次点击运行到内置浏览器，就可以在内置浏览器上预览我们的项目了

这时候我们也多了一个调试器，调试器主要就是用来打印一些日志信息，来帮助我们调试项目，辅助修复bug。

四，uniapp开发三剑客

4-1，页面布局，样式，js逻辑

如果大家学过石头哥的小程序入门课，肯定知道石头哥的小程序开发三剑客。其实uni开发也有自己的三剑客。

其实小程序三剑客的知识点，同样适用于uniapp

4-2，uniapp和小程序，传统web对比

结构小程序传统webuniapp
结构布局WxmlHtml写在template里
样式WxssCss写在style里
逻辑JavaScriptJavaScript写在script里
配置Json无Json

和小程序不同的是uniapp的页面布局，样式，逻辑都是写在同一个.vue文件里，所以我们接下来学习uniapp和小程序会有一些差别，但是大体上还是很相近的。所以不管你有没有学过石头哥的小程序课程，都不影响零基础入门uniapp。

五，注释和日志打印的学习

5-1，一些常用的快捷键

我们在开发时为了提高代码编写效率，通常会使用一些快捷键。我们开发工具自带的快捷比较多，我这里不一一列举了，我把一些常用的快捷键拿出来给大家大致讲一讲，我这里以window电脑为例，如果你mac电脑，可以自己去看下开发者工具默认的快捷键。多看几遍把常用的记住就行了。

快捷键组合描述
Ctrl+A全选
Ctrl+C复制选中内容
Ctrl+V粘贴复制的内容
Ctrl+D删除当前这行的代码
Ctrl+N新建文件
Ctrl+W关闭文件
Ctrl+Shift+W关闭全部文件
Ctrl+S保存文件
Ctrl+/开启/关闭代码注释
Ctrl+Shift+/开启/关闭注释已选内容
Ctrl + Shift +R复制当前行到下一行
Ctrl+F打开搜索离材条，可以查找替换指定内容或者全部内容
Ctrl+H打开搜索框，可以搜所指定内容位置
Ctrl+R快速打开运行框
Ctrl+Z撤销修改，返回上一步
Ctrl+Shift+Z返回下一步
Ctrl+↑向上移动行代码
Ctrl+↓向下移动代码
Alt+/激活代码助手

如果感觉默认的快捷键不喜欢，可以自己重新设置快捷键,这里不太建议自定义快捷键，熟记自带的常用的快捷键就可以了。

有的电脑上快捷键可能会有细微差距，以开发者工具默认自带的快捷键为准。

5-1，注释的学习

我们在学习后面课程之前，先来学习下注释。注释是在代码里给予提示使用的，主要是让别人更快的熟悉你的代码，也方便后期自己看自己的代码，快速回忆起来使用的。 注释有快捷键的，正好我们上面一节有讲常用的快捷键。

  • window电脑：Ctrl+/
  • mac电脑：command+/

可以看到我们常用的三种注释如下，正好和我们前面学的三剑客对应起来。

  • 布局的注释是：<!-- -->
  • js逻辑代码的注释是： //
  • css样式的注释是：/* */

    我们这里没有必要记每种注释的写法，只需要记住快捷键，可以快速生成注释即可。这就是快捷键的好处。

5-3，日志打印的学习

我们在开发过程中，总会遇到各种各样的问题，学会在控制台看日志，对我们来说可以帮助我们快速的定位问题，解决问题。
我们开发过程中也会经常用到日志打印。日志打印呢，就是事先打印出来一些东西，用以验证我们的代码输出的结果是否正确。

日志打印的语法如下

console.log("我的打印出来的日志内容")


可以看出我们在控制台日志里打印出来了我们写的日志，并且后面也告知我们这行代码写在了第16行。这样在日后的开发过程中，都可以快速的方便我们校验代码，定位问题，解决问题。

5-4，日志报错信息

我们的代码的编写好，就可以点击运行，有时候运行会在控制台的日志报错，一般的报错如下图，基本上都是深颜色的爆红，所以一般情况下，控制台日志里出现爆红，就说明我们的代码有错误，这时候就要根据报错日志，去定位自己的代码错误了。
我们在后面的实战课程中，会故意写一些错误代码，然后教大家如何识别错误，更改代码。


六，小程序常见组件的学习

uni为开发者提供了一系列的基础组件，这些组件类似于html里的基础标签元素，但是uni与html不同，和小程序更相似，更适合在移动手机端。
如下图所示，左边是uni项目，右边是小程序项目。可以看到uni和小程序都用了view组件，所以uni和小程序还是更相似些。

官方的组件如下，我们接下来就会把一些常用的组件讲给大家。当然了一些其他不常用的组件，在后面的实战课程里，如果用到也会给大家讲解下的。

6-1，认识view组件

view组件：相当于一个盒子，可以用来装一些别的组件。它类似于传统html中的div，用于包裹各种元素内容
官方文档：https://uniapp.dcloud/component/view.html
如果大家有html的web基础，就可以把我们小程序里的view理解为html里的div标签。如果你没学过也无所谓，直接跟着我学习view即可。

在代码里简单的使用：

6-2，认识text组件

text组件：主要用来显示文字的。

6-3，认识input组件

input组件主要用来获取用户输入的信息的，一般在用户填写信息，提交数据，登录注册和提交表单时会用到。
官方文档：https://uniapp.dcloud/component/input.html
输入框input有很多属性，我这里把一些常用的属性带着大家学习下。其他的大家可以自己去看官方文档详细学习

我们以type属性为例，我们的type属性有下面一些属性值。

比如我们给input的type设置为number属性值，那么我们在输入内容的时候，只可以输入数字。

6-4，认识button组件

button 组件：是按钮组件，自带默认的按钮效果，我们后面会经常用到。
官方文档：https://uniapp.dcloud/component/button.html

button按钮有很多属性，我这里把一些常用的属性带着大家学习下。其他的大家可以自己去看官方文档详细学习

如我们设置的一些常用的按钮属性

6-5，认识图片image组件

image组件：主要用来显示图片，可以是本地图片，也可以是网络图片。
官方文档：https://uniapp.dcloud/component/image.html
我们的image组件常用的就是src，mode，lazy-load这三个属性，所以接下来会重点给大家讲解下这三个属性。

当我们不给image设置宽高时，image组件的默认宽度是320px，高度240px。

6-5–1，src属性显示网络图片

我们通过src属性来设置要显示的图片资源，图片资源有两种

  • 本地图片资源
  • 网络图片资源

由于我们本地的图片会占用小程序软件包的大小，所以这里推荐大家尽量使用网络图片。

我们设置显示图片的语法如下

<image src="图片资源地址"></image>

如下图，我们显示一个网络图片。

这里给大家一个网络图片地址
https://res.wx.qq/wxdoc/dist/assets/img/0.4cb08bb4.jpg

如果这个地址过期了，大家可以到网上自己找图片。随便找个图片，然后右键，点击复制图片地址，就可以获取到网络图片了。

6-5-2，src属性显示本地图片

用image显示本地图片，我们需要提前把图片放在static，如下图我们把本地图片放在static目录里

然后在image组件里设置src属性，指向这个本地图片，就可以在uniapp里展示了。
我把网络图片和本地图片都在小程序里展示，给大家对比着学习下。

6-5-3，通过mode设置图片裁剪、缩放的模式

image组件另外一个比较重要的属性就是mode了。我们在使用图片时，不能百分之百保证图片的比例正好是我们想要的，这个时候就要用到图片的裁剪和缩放了。
mode 的常用设置如下

值说明
scaleToFill缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 2.10.3
top裁剪模式，不缩放图片，只显示图片的顶部区域
bottom裁剪模式，不缩放图片，只显示图片的底部区域
center裁剪模式，不缩放图片，只显示图片的中间区域
left裁剪模式，不缩放图片，只显示图片的左边区域
right裁剪模式，不缩放图片，只显示图片的右边区域
top left裁剪模式，不缩放图片，只显示图片的左上边区域
top right裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right裁剪模式，不缩放图片，只显示图片的右下边区域

也可以看官方文档

比如我们有一个原图如下。

设置不同的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/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/css/css-tutorial.html
  • w3cshool教程：https://www.w3school/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/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/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/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/miniprogram/dev/component/video.html

16-2-1，src属性设置视频地址


video组件里也是通过src属性来设置视频资源的。这里的视频资源都是网络连接。

我把这几个mp4格式的视频链接贴给大家

http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4

https://media.w3/2010/05/sintel/trailer.mp4

http://vjs.zencdn/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/miniprogram/dev/component/video.html

十九，通过tabBar设置多页面

我们正常创建的默认项目是一个单页面，我们要想实现下面效果所示的多页面就要借助tabBar来实现多页面。

官方文档：https://developers.weixin.qq/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/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/miniprogram/dev/api/navigate/wx.navigateToMiniProgram.html

其实我们只需要拿到别的小程序的appid就可以实现这个功能了，我会在视频里演示怎么拿到别的小程序的appid

二十一，小程序页面生命周期

什么是生命周期

https://developers.weixin.qq/miniprogram/dev/framework/app-service/page-life-cycle.html
这是官方给出的页面生命周期解释，如下图

作为初学者，一开始不一定能看懂，所以我给大家总结成下面所示的。方便大家学习。其实生命周期就是一个小程序页面从创建到销毁的一个时间周期。

官方文档

https://developers.weixin.qq/miniprogram/dev/reference/api/Page.html
这是官方给出的解释，感兴趣的同学可以自己看看，我会在视频里把常用的生命周期方法给大家做具体的讲解。

应用的生命周期

持续更新中。。。。。

更多推荐

2022年最新最全uniapp入门学习,零基础入门uniapp到实战项目,unicloud数据后台快速打造uniapp小程序项目