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

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

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

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

从下面uni-app功能框架图可看出，uni-app在跨平台的过程中，不牺牲平台特色，可优雅的调用平台专有能力，真正做到海纳百川、各取所长。其实说白了，就是开发一套uniapp代码，就可以在当前主流的平台上运行。大大的节省了开发成本。 大家看下上图，其实就可以知道，如果没有uniapp，我们想在app，h5，小程序里运行我们的项目，那么我们至少要开发4套不同平台的代码，uni真正的好处就是我们只需要开发一套代码就可以在主流的平台上全平台运行。

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

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

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

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

HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。下面是hbuilder官方的简介 我们可以直接去官网下载HBuilderX开发者工具 官网下载地址 进去后我们只需要点击下载即可，记得window和mac电脑要下载自己对应的版本。

其实HBuilderX的安装很简单，我们上面下载好的安装包，解压好就可以了，解压好以后如下图。当然我这里是window电脑的安装过程，大家如果是mac电脑，可以自行安装。安装过程基本上大差小不差的。 我们在解压好的文件里双击exe文件即可运行。 打开后如下 当然了，如果感觉每次从目录里双击exe文件打开麻烦，可以固定到任务栏或者创建快捷方式，然后把快捷方式放到桌面。 也可以直接发送到桌面快捷方式

一般情况下，我们第一次打开项目关闭的时候，系统会提示我们自动创建一个桌面快捷方式的。 当然我比较喜欢固定到任务栏，因为以后要经常用整个开发者工具，所以怎么样打开方便就怎么来就行了。

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

在点击工具栏里的文件 -> 新建 -> 项目 然后在弹出的创建页面做以下配置

关于项目路径，比如我在桌面新建一个demo1空白文件夹，然后在创建项目时点击浏览，选择自己创建的demo1文件夹即可。 这样我们创建的项目就会在demo1文件里，也就是我们的项目源码就存在了demo1里 新创建好的项目如下 可以看到我们的新项目就创建在了demo1里，到这里我们的第一个uniapp项目就创建好了。 跟着石头哥学过微信小程序开发的同学大概可以看出来，uniapp项目其实和小程序项目很相似的。 一些组件，语法也很相似，因为uniapp就是基于vue框架的，而小程序呢也是借鉴了vue。所以你学过石头哥的小程序课程，再来学uni，肯定学的很快的。当然了，即便没学过小程序，石头哥也会手把手的带着大家零基础入门uni的，只要跟着石头哥认真学习。

我们上面一步创建好了项目，这一节我们就来认识项目。 一个完整的uni项目的目录结构如下，我们后期随着学习的深入会逐个带大家学习，所以目前阶段，大家只需要大致知道就行，没有必要死记硬背下来。 大家可以先对照着官方给出的目录结构，大致的知道我们创建的第一个项目里每个文件都是什么作用。我在配套视频讲解里，会慢慢的带着大家熟悉的。 我这里先用通俗的话给大家说下我们新建项目的目录结构，方便大家理解

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

我们可以在顶部的工具栏里做一些开发者的配置，比如我这里把主题设置为了酷黑色。 当然了这里大家根据自己的喜好，去做一些简单的设置即可。我们后面的学习中会慢慢的用到工具栏里的东西，在视频里我慢慢的给大家做介绍。

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

我们项目的预览常用的有下面几个方式。为了降低大家的学习成本，我们学习阶段主要运行到内置浏览器，后面会慢慢教大家运行到小程序或者手机上。 运行到浏览器就是运行到我们电脑上的浏览器 运行到手机或者模拟器：就是可以运行到我们的安卓或者苹果手机上 运行到小程序：就是我们开发的项目可以运行到微信，支付宝，百度小程序等。 运行到内置浏览器：这是我们目前学习阶段最常用的方式，所以我们目前运行先使用内置浏览器即可。

我们点击运行到内置浏览器，第一次会提示：安装插件，我们点击确定，安装即可。然后耐心等待插件的安装即可。 安装成功 然后再次点击运行到内置浏览器，就可以在内置浏览器上预览我们的项目了 这时候我们也多了一个调试器，调试器主要就是用来打印一些日志信息，来帮助我们调试项目，辅助修复bug。

我们开发好的项目不仅要运行在浏览器里，还需要运行到小程序里，所以我们这里以微信小程序为例，其他的支付宝，百度小程序等，都是一样的原理。 如下图所示，直接点击运行–》运行到小程序模拟器–》微信开发者工具 正常我们第一次运行，会弹出以下弹窗。我们要关联下开发者工具。 所以要先去安装小程序开发者工具。点击上图的链接即可。然后去下载对应的版本即可。 然后点击自己电脑对应系统的版本下载即可。至于安装很方便，只需要双击安装包，不停的点下一步即可，安装完成以后的官方开发者工具长这样。 然后找到安装路径，如下所示。当然最好你自己记住自己安装到哪里了，这样也可以的。 然后记住这个路径

记住后点击下图的浏览，一步步找到上面的路径即可。 点击确定，就可以编译运行到我们的小程序开发者工具了。有时候第一次运行会报如下错误。打不开小程序开发者工具。 这个时候就要按照上的提示，配置下了。打开微信开发者工具 -> 设置 -> 安全设置，将服务端口开启。 打开服务端口 然后，先停止运行 然后再重新运行到微信小程序即可。 可以看到在编译启动中 启动后，要在微信开发者工具里点击下信任并运行。 可以看到我的uniapp项目就可以编译成微信小程序，运行起来了。 并且会编译成微信小程序的代码。这就是uniapp的强大之处。

我们后面运行到支付宝，抖音小程序等都是一样的流程。

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

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

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

如果感觉默认的快捷键不喜欢，可以自己重新设置快捷键,这里不太建议自定义快捷键，熟记自带的常用的快捷键就可以了。 有的电脑上快捷键可能会有细微差距，以开发者工具默认自带的快捷键为准。

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

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

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

日志打印的语法如下

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

有的同学在上面内置浏览器里无法打印日志，所以这里提供一个备用方案，我们在前面运行项目章节有教大家怎么样运行到电脑浏览器。我们只需要运行项目到自己电脑浏览器即可。 如我这里以运行到chrome浏览器(谷歌浏览器)为例 项目运行到浏览器后，右键然后点击检查。就可以看到控制台了。 我们点击Console就和内置浏览器一样，可以打印日志了。

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

uni为开发者提供了一系列的基础组件，这些组件类似于html里的基础标签元素，但是uni与html不同，和小程序更相似，更适合在移动手机端。 如下图所示，左边是uni项目，右边是小程序项目。可以看到uni和小程序都用了view组件，所以uni和小程序还是更相似些。 官方的组件如下，我们接下来就会把一些常用的组件讲给大家。当然了一些其他不常用的组件，在后面的实战课程里，如果用到也会给大家讲解下的。

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

在代码里简单的使用：

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

input组件主要用来获取用户输入的信息的，一般在用户填写信息，提交数据，登录注册和提交表单时会用到。 官方文档：https://uniapp.dcloud.net.cn/component/input.html 输入框input有很多属性，我这里把一些常用的属性带着大家学习下。其他的大家可以自己去看官方文档详细学习 我们以type属性为例，我们的type属性有下面一些属性值。 比如我们给input的type设置为number属性值，那么我们在输入内容的时候，只可以输入数字。

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

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

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

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

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

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

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

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

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

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

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

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

也可以看官方文档 比如我们有一个原图如下。 设置不同的mode值，可以很明显的看出来区别 后面我们需要对图片做裁剪或者伸缩处理时，就可以设置不同的mode值来实现不同的效果。

比如我们设置mode属性为center，就可以看到我们只保留图片中间区域

image组件是支持图片懒加载的，图片懒加载。只针对page与scroll-view下的image有效，其实就是当我们一个列表页有很多图片时，我们可以使用懒加载，来加快页面加载速度。使用懒加载时，我们只需要给image设置lazy-load就可以了。

我们在页面布局里写数据，一般情况下可以直接写，比如下面我们可以用10个text里显示10个编程小石头，假设我们有一个这样的需求，需要把编程小石头给为石头哥。如果我们每个都改一遍，是不是要改10遍，这样就导致效率低下了。 所以我们这里可以用数据动态绑定来提升效率。

数据绑定最常见的形式就是使用 {{…}}（双大括号）的文本插值，就是用{{}}包裹你的值，然后这个值就可以动态的显示了，比如我用 {{name}} 然后给这个name设置值为：编程小石头，如下，可以看到我们和上面写10遍编程小石头是一样的。 我们想把编程小石头改为石头哥，就只需要改name的值就行了。如下所示。

这样我们就明白用数据绑定的好处，其实我们后面的开发中，除了那种死的不会变的直接写死外，其他的后面可能需要改变的最好都用数据绑定。

关于数据绑定的语法需要大家记住，一定要多练，因为后面会经常用的。 就是在页面布局需要显示数据的地方用 {{数据名}} 然后在js的data里设置数据值，如下： 这里其实使用了vue的数据绑定，而vue官方又叫这种数据绑定为文本插值。其实就是把数据动态的绑定到我们组件外。

我们上面一节学习的文本插值式的数据绑定，那是把我们的数据动态的绑定到组件外。 如果我们想动态的绑定组件内的属性数据呢。比如我们的image图片组件的src属性，我们的图片链接不想写死，想动态的去替换。这个时候就可以用v-bind 动态地绑定属性了

v-bind也可以缩写为‘ : ’，可以用于响应式地更新 可以看到我们使用v-bind或者缩写的 ： 都可以动态的把url数据绑定到image的src属性上。

这里要注意文本插值和属性绑定是有区别的

我们上面通过{{}}绑定数据到data里，我们绑定的数据有时候也需要用，而使用绑定的数据，可以通过this.数据名来使用 可以看到我们通过this.name就可以获取name绑定的数据。

函数的两种使用方式如下图：

我们的函数一般是写在js逻辑区域的methods里，比如我们定义一个getname函数，有下面两种写法。 石头哥这里推荐第一种方式定义函数，这也更简单。

接下来我们学习事件，我们常用的事件如下，这里我们先重点讲解下@click点击事件和 @input获取输入值的事件

我们如果想给一个组件定义点击事件，就要用到uni的事件处理，由于uni是基于vue语法的额，所以我们给uni里的组件定义点击事件，就要用到vue的语法。 我们给一个组件绑定点击事件的语法如下：

我们可以使用 v-on 指令来监听点击事件，从而执行 JavaScript 代码。 v-on 指令可以缩写为 @ 符号。

语法格式：

methodName就是函数名，如下所示 可以看出我们使用v-on和@都可以定义点击事件，我这里推荐大家用@简写的方式

获取input输入框里用户输入的内容有两种方式

我们获取用户输入会用到@input事件，其实我们在学习input组件时，官方有给出这个属性的。

看官方的文档，可以知道@input主要是为了获取用户的输入内容。 @input的定义如下图，其中的getname就是我们定义的函数，用来接收用户输入的。

在布局里定义好bindinput事件以后，在js页面再定义一个和事件名一样的函数即可。 然后就可以监听用户输入了 视频里会作详细讲解。如果你有买老师的课程，或者购买老师的年卡，可以获取对应的学习视频。

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 还可以用于各种不同类型的输入数据的获取，用于在表单类元素(单选、多选、下拉选择、输入框等)上双向绑定数据，后面学习中用到我会再做具体讲解。

用大白话讲：变量就是一个装东西的盒子 再通俗些讲：变量就是用于存放数据的容器，我们通过变量名获取对应的数据。 如上图所示，我们的盒子(变量)可以装名字，布尔类型的true，还可以用来装数字。 变量的本质：就是在程序的内存中申请一块用来存放数据的空间。

变量由变量名和存储的值组成，语法如下

变量有点类似我们的酒店房间。一个房间就可以看作是一个变量。例如我们的808号房间是情侣间。那么808这个房号就相当于我们的变量名，情侣间就是这个变量存储的值。

变量在使用时分两个步骤：

来看下具体代码

这段代码的意思是声明一个叫age的变量 var是一个JavaScript关键字，用来声明变量，使用该关键字声明变量以后，计算机会自动为变量分配一个内存空间，用来存储数据。 age就是我们的变量名，我们要通过变量名来访问到计算机内存里分配的空间。

还是拿我们的酒店房间来举例，声明变量就相当于在前台办理入住，确定要住那个房间，也就是确定房间号(变量名)，然后确定房间号对应的房型，比如单人间，双人间，情侣间。而确定房型就相当于是给变量赋值。

这段代码的意思，就是给age变量赋值为10 上面的 = 用来把右边的值赋给左边的变量名，也就是把我们的变量名age指向数值10，就可以用age来操作我们的数值了。赋值的目的就是为了后面使用数值。

我们上面变量的使用可以直接写到一行

声明变量同时给变量赋值，我们称之为变量的初始化。

一个变量可以被重新赋值，新的赋值会覆盖掉前面的赋值，变量值将以最后一次赋的值为准。

如上面的代码，我们的变量age先被赋值10，后又被赋值18，那么最后我们的age就是18 这就好比，酒店的房间，808屋一开始住的是石头哥，后面石头哥走了，刘德华住进去了，那这个时候你再去808找人，找到的就是刘德华了。

还记得我们的7-5这节学习了如何获取用户输入的信息吗？我们是不是可以用变量来存储我们获取到的用户输入信息呢。

讲解视频里会做详细讲解

局部变量：变量在函数内声明，只能在函数内部访问。 全局变量：变量在函数外定义，整个代码都可以调用的变量。

下面是我们小程序里的全局变量和局部变量。 如上图所示的局部变量和全局变量的定义。

上一节变量的学习，我们知道变量是用来装数据的盒子，可是数据有很多，有各种各样的类型。不同类型的数据占用的计算器内存也不一样。就好比胖子睡大床，瘦子睡小床就行。 在计算机中不同的数据占用的存储空间是不同的，为了便于区分，充分利用存储空间，于是就定义了不同的数据类型。 简单来说，数据类型就是数据的类别型号，比如“张三”是个人名，18是个数字

我们的数据类型可以分成下面两大类

js数字类型的数据，既可以是整数，也可以是小数(浮点数)

用引号或者双引号包起来的都是字符串类型，如 “编程小石头”，‘石头哥’都是字符串。字符串和羊肉串有点像，羊肉串是用竹签把羊肉一串串的串起来。字符串就是把字符串起来。

上面代码的age1和age2是有区别的，age1的18被双引号包裹着，所以是字符串，age2就是一个数字18，所以是数字型。这也进一步说明了，只要是被单引号或者双引号包裹着的都是字符串类型。

字符串是由若干字符组成的，这些字符的数量就是字符串的长度，通过字符串的length属性可以获取整个字符串的长度。 还是拿羊肉串来类比，比如你一个羊肉串上串了5块羊肉，那么这个羊肉串的长度就是5。 使用的语法如下

多个字符串之间可以使用 + 进行拼接，其拼接方式为 字符串+字符串=拼接之后的新字符串。 语法如下：

上面的12+12=24，“12”+12=“1212” 这就告诉我们字符串加任何类型的数据，拼接后的结果都是字符串。

布尔类型有两个值：true和false，其中true表示真，false表示假。

一个声明后没有赋值的变量会有一个默认值 undefined 一个声明变量，并且赋值null，就代表这个变量是空值(学习object对象时，我们会继续研究null) null 和 undefined 的值相等，但类型不同，下面的8-7会有代码演示

typeof 操作符用来检测变量的数据类型

打印null和undefined的数据类型如下

注意：这里的 == 用来判断值是否相等，后面会讲。 上面的代码可以看出：null 和 undefined 的值相等，但类型不同

就是把一种数据类型的变量转换成另外一种数据类型，比如把字符串的 “18”转换为数字类型的18 常用的数据类型转换

转为数字的几个特殊情况

运算符也被称为操作符，是用于实现赋值，比较和运算等功能的符号。

表达式：是由数字，运算符，变量等以能求得结果的有意义的操作组成的式子。 表达式最终都会有一个结果返回给我们，这个返回结果我们称之为返回值

比较运算符是两个数据进行比较时所使用的运算符，比较运算以后会返回一个布尔值的结果，就是返回对或者错(true或false)