uni-app移动应用开发（微课版）课件 项目一 初识uni-app

项目一初识uni-app

项目一初识uni-app

项目任务：任务1uni-app简介任务2uni-app初体验任务3uni-app开发规范和页面分析任务4综合案例01任务1uni-app简介

任务1

uni-app简介

uni-app是一个使用Vue.js开发所有前端应用的框架，由DCloud公司开发。uni是统一的意思，意味着uni-app框架的目标就是要统一编码开发所有前端应用，最大限度解耦前端编码和底层运行平台。这样使得开发人员能够专注于应用业务代码的编写，而不必关心应用运行在什么平台上，从而提升代码的重用性和应用开发效率，降低了运维成本。uni-app的优势和特点包括以下几点：

1.跨平台支持开发者可以编写一次代码，然后编译运行在多个平台上。

2.易上手uni-app基于通用的前端框架Vue.js框架和一些特定的uni-app组件以及API来构建各种类型的应用，易于学习和使用。

3.性能优异在Web（响应式）、iOS、Android、小程序等多个平台，uni-app通过优化和特定的编译技术，能够提供接近原生的应用性能。

任务1

uni-app简介

4.丰富的组件和APIuni-app提供了丰富的UI组件库和模板样式，包括Vant、MintUI、uView等，开发者可以根据自己的需求选择适合的组件库，快速构建应用程序。在API方面，uni-app支持使用原生API和插件来访问设备功能和第三方服务。

5.社区活跃使用者众多uni-app拥有一个全球性的开发者社区，为开发者提供了丰富的资源和支持。02任务2uni-app初体验

1.2.1下载HBuilderX

uni-app官方推荐使用HBuilderX开发uni-app项目。

访问HBuilder官网，在官网主页鼠标移动到“more”图标上可以看到所示下载页面。页面中有正式版和Alpha（内测版），每个版本根据操作系统不同又分为Windows和MacOS两个版本，这里下载正式版的Windows版本，版本为4.0.8。Windows版本不需要安装，下载完毕后直接解压运行。在解压目录下双击HBuilderX.exe文件即可运行Hbuilder。

1.2.2使用HBuilderX创建uni-app项目

uni-app官方提供了两种方式创建uni-app项目，分别是基于HBuilderX可视化界面和基于vue-cli脚手架。其中，基于HBuilderX可视化页面的方式创建项目比较简单，也是官方首推的方式。下面将以此方式为主介绍uni-app项目的创建。

在创建项目之前，需要先注册一个HBuilder账号，以便HBuilder后续功能的使用。可单击HBuilderX左下角“未登录”图标，弹出登录页面。单击登录页面下方的“注册用户”按钮注册账号。

1.2.2使用HBuilderX创建uni-app项目

HBuilderX创建uni-app项目的步骤如下。1.打开HBuilderX，在HBuilderX界面上部工具栏单击“文件”→“新建”→“项目”，弹出新建项目窗口。

1.2.2使用HBuilderX创建uni-app项目

2.在新建项目窗口中输入项目名为uniappdemo1，选择模板处已自动选择模板为默认模板，右下角自动选择Vue版本为3。单击创建按钮即可完成项目的创建。

1.2.2使用HBuilderX创建uni-app项目

项目创建完毕后可以单击项目根目录下的mainfest.json文件查看项目相关配置。mainfest.json文件支持通过页面和源码两种方式进行配置。可以看到项目的基础配置选项，内部包括uni-app应用标识，应用名称，应用版本号和Vue版本号等配置项。除此之外还可以看到Web配置、APP配置、各种小程序配置以及最后的源码配置选项。

1.2.3认识uni-app项目结构

uniappdemo1项目默认结构如下。

1.2.3认识uni-app项目结构1.pages目录用于存放开发人员的业务页面文件。pages目录下默认存在一个index/index.vue文件是项目启动时跳转的首页。2.static目录用于存放应用的如图片、视频等静态资源。uni-app规定静态资源只能存放于此目录，不能存放在其他目录。static目录下默认存在一个logo.png文件，logo.png就是首页index.vue引用的一个静态logo。3.App.vueuni-app的主组件，也是所有组件的入口。uni-app的所有页面组件都是在App.vue下进行切换的。App.vue本身不作为页面存在，也不能添加<templates>标签编写视图元素，一般用于配置App全局样式以及监听应用的生命周期。4.index.html整个应用的入口文件，用于挂载main.js中定义的Vue实例。

1.2.3认识uni-app项目结构

5.main.jsuni-app的入口文件，用于初始化vue实例、引入App.vue和一些使用的插件。

6.manifest.json整个应用的配置文件，用于指定应用的名称、图标、权限等。

7.pages.jsonpages.json文件用来对uni-app进行全局配置，配置页面路由、窗口样式、原生的导航栏、底部的原生tabbar等。例如pages.json存在"path":"pages/index/index"代码，用于在应用启动时页面自动跳转到pages目录下index/index.vue组件。8.misify.adaptor.js提供了适配器函数，使得开发者能够以更优雅的Promise的形式来调用微信小程序的API。

1.2.3认识uni-app项目结构

9.uni.scss

用于设置整体应用的风格，比如按钮颜色、边框风格等。uni.scss文件里预置了一批scss变量预置。uni-app的编译器对uni.scss进行了特殊处理，使得应用中每个scss文件内部都注入了uni.scss。这样在所有的scss文件中无需导入uni.scss文件就可直接使用uni.scss内部的样式变量。

1.2.4运行uni-app

HBuilderX中的uni-app项目支持在多个不同平台上运行，包括Web（响应式）、App、小程序等。

1.Web（响应式）uni-app项目将运行在浏览器上以Web形式呈现。HBuilderX提供了一些主流浏览器的Web运行环境。如要运行在Chrome浏览器上，在HBuilderX界面上部工具栏单击“运行”→“运行到浏览器”→“Chrome”。

1.2.4运行uni-app

第一次运行时，控制台会提示自动去下载相关的编译工具。控制台中可以看到基于Vue3的uni-app项目默认使用Vite工具编译。

1.2.4运行uni-app

等待一小会，编译工具下载完成后即可在Chrome浏览器中看到页面显示Hello。浏览器访问地址默认为http://localhost:5173/。可以在Chrome內打开调试模式（右键->检查）开启设备模拟，模拟移动设备。uni-app应用使用热启动原则，如果修改页面代码，能够不重启应用动态刷新页面。

1.2.4运行uni-app

如果要停止运行uni-app项目，可在HBuildX下方控制台右键鼠标，在弹出菜单中单击“停止运行项目”即可。也可单击控制台右上角的红色按钮，停止运行。

1.2.4运行uni-app

为什么在浏览器中输入http://localhost:5173/能够显示index.vue页面？因为在项目的路由配置文件pages.json内部定义了如下路由跳转规则。uni-app约定当访问项目根目录时，默认执行pages.json内部定义的第一条路由跳转。"pages":[

{

"path":"pages/index/index",

"style":{

"navigationBarTitleText":"uni-app"

}

},],

1.2.4运行uni-app

2.App

App模式又称真机运行模式，此模式下需要电脑事先用数据线连接手机或开启相应的模拟器软件。真机运行环境主要分为iOS和Android两类，二者操作流程类似。以Android环境为例，如使用模拟器运行，需事先开启模拟器。如使用手机运行需事先将手机用数据线连接电脑，并开启USB调试模式。然后在HBuilderX界面上部工具栏单击“运行”→“运行到手机或模拟器”→“运行到AndroidApp基座”。

1.2.4运行uni-app弹出如下窗口，如果连接正常，方框内会显示相应的设备名称，选择设备单击运行按钮即可。如果在运行过程中出现问题，可单击“运行”→“运行到手机或模拟器”→“真机运行常见故障排除指南”查找解决方案。

1.2.4运行uni-app

3.小程序uni-app项目支持运行到微信、支付宝、百度、头条、飞书、QQ、快手、钉钉、淘宝等小程序平台。这里以微信小程序为例，介绍操作流程。在HBuilderX界面上部工具栏单击“运行”→“运行到小程序模拟器”→“微信开发者工具”。

1.2.4运行uni-app首次运行需设置微信开发者工具路径。如果没有安装微信开发者工具可以单击下面的网址进行下载，当前最新的微信开发者工具版本为1.0.6。

1.2.4运行uni-app安装完毕微信开发者工具后，双击“微信开发者工具.exe”打开微信开发者工具，单击“设置”->“安全”，将服务的端口打开。不执行此步骤，后续步骤中微信开发者工具将不能正常运行。

1.2.4运行uni-app

在HBuilderX界面上部工具栏单击“运行”→“运行到小程序模拟器”→“微信开发者工具”。等一小会即可开启微信开发者工具。在微信开发者工具内可以看到uni-app项目的主页。

1.2.5

打包发行uni-app

HBuilderX支持在多个不同平台上打包发行uni-app项目，包括Web（响应式）、App、小程序等。

1.Web（响应式）uni-app项目打包发行为Web项目之前需打开根目录下mainfest.json文件进行如下Web配置。

1.2.5

打包发行uni-app（1）配置页面标题：页面标题默认为应用名称，这里配置为uniappdemo1。此配置为可选配置。（2）配置路由模式：uni-app项目的路由模式和Vue一样，有history和hash两种选择，这里选择hash模式，此配置为可选配置。（3）配置运行基础路径：uni-app项目的运行基础路径作用相当于vue.config.js配置文件中的publicPath配置项，用于设定应用部署时的访问路径。如果应用被部署在一个子目录下，就需要用这个选项指定这个子目录。例如应用被部署在https://域名/myapp/，则可设置publicPath为/myapp/。如果publicPath设置为空字符串或./，资源访问就为相对路径，与项目部署路径无关，项目部署在任意路径都可以成功访问资源。这里设置运行基础路径为相对路径./，以便打包发行的uni-app项目可以部署在服务器的任意路径下访问。此配置为必选配置，不配置将会导致应用打包部署后无法访问资源。

1.2.5

打包发行uni-app上述Web配置完毕后在mainfest.json文件的源码配置中就会显示如下配置信息。"h5":{

"router":{

"mode":"hash",

"base":"./"

},

"title":"uniappdemo1"}单击HBuilderX界面上部工具栏单击“发行”→“网站-PCWeb或手机H5（仅适用于uni-app）”进行发行打包。

1.2.5

打包发行uni-app

1.2.5

打包发行uni-app接着弹出如下窗口，在窗口中输入网站标题为uniappdemo1，网站域名可以不输入。单击“发行”按钮。

1.2.5

打包发行uni-app

打包成功时，HBuilderX下方控制台会显示打包资源所在的路径，位于项目unpackage/dist/build/web目录下。

准备一个Tomcat，这里使用Tomcat10。将unpackage/dist/build/的web目录整体复制到Tomcat10的webapps目录下，然后启动Tomcat10。

在浏览器中输入地址http://localhost:8080/web即可看到页面显示Hello。

1.2.5

打包发行uni-app

2.App

uni-app项目打包发行成原生App有两种模式，分别是云打包和本地打包。其中，云打包模式较为简单，也是官方推荐使用的打包模式，需要用户注册登录才能使用。这里以云打包为例介绍uni-app项目打包发行成原生App的操作步骤。

单击HBuilderX界面上部工具栏单击“发行”→“原生App云打包”进行发行打包。

1.2.5

打包发行uni-app

原生App云打包页面主要分为Android设置和IOS设置页面，分别对应于Android打包和iOS打包，默认显示Android设置页面。Android打包和iOS打包流程类似，只是证书制作流程不一样，这里以Android打包为例介绍原生App云打包的使用。

1.2.5

打包发行uni-app

在Android设置页面中Android包名自动使用manifest.json文件基础配置中的uni-app应用标识填充。在Android打包过程中，HBuilderX支持使用使用三种证书打包，分别是使用自有证书、使用云端证书和使用公共测试证书。其中，自有证书在App正式运用上线时使用，云端证书和公共测试证书在测试时使用。云端证书是利用DCloud云服务器生成证书。公共测试证书是一个默认生成的统一证书，不需用户自己制作。如果不知道如何制作证书，可单击“Android证书使用指南”超链接查看。证书配置完毕后可单击“打包”按钮进行打包。

打包成功后在HBuilderX下方控制台内会显示出apk包所在的目录，位于项目的unpackage/release/apk文件夹中。在Android手机中可以直接点击安装，也可以发布在应用市场。

1.2.5

打包发行uni-app

3.小程序

uni-app项目支持打包发行到微信、支付宝、百度、头条、飞书、QQ、快手、钉钉、淘宝等小程序平台。这里以发行到微信小程序平台为例，介绍具体操作流程。uni-app项目打包发行到微信小程序平台前需打开根目录下mainfest.json文件进行如下微信小程序配置。在其中输入微信小程序AppID。如没有微信小程序AppID，需要在微信公众号平台注册账号，获取微信微信小程序AppID。

1.2.5

打包发行uni-app

单击HBuilderX界面上部工具栏单击“发行”→“小程序-微信（仅适用于uni-app）”进行发行打包。

在弹出的窗口中可以看到微信小程序名称和微信小程序AppID被自动填充了。此处微信小程序名称可以改动，最终发行的名称以微信公众平台上设置的为准。单击“发行”按钮即可进入打包发行过程。

1.2.5

打包发行uni-app

打包成功后在HBuilderX下方控制台内会显示出微信小程序资源包所在的目录，位于项目的unpackage/dist/build/mp-weixin文件夹中。

如果已安装微信开发者工具，稍等片刻，HBuilderX会自动开启微信开发者工具，打包的资源会自动导入到微信开发者工具中。如果没有安装微信开发者工具，需自己手动打开微信开发者工具导入打包的资源。随后单击微信开发者工具界面右上角“上传”按钮上传打包的资源，在微信公众号平台提交审核即可。03任务3uni-app开发规范和页面分析

1.3.1了解uni-app开发规范

uni-app代码编写的基本语言包括JS、Vue、CSS以及TS、SCSS等CSS预处理器。根据uni-app官网的描述，uni-app开发规范可以归纳为以下几点。

1.页面文件规范uni-app的页面文件遵循Vue单文件组件(SFC)规范，即每个页面是一个.vue文件。每个.vue文件的内部结构包含<template>、<script>和<style>三种类型的顶级语言块以及可选引入的一些用户自定义块。一个.vue文件只能包含一个<template>和<script>语言块，但是可以包含一个或多个<style>语言块。如需使用一些CSS预处理器规则编写CSS代码，可通过如下lang属性设置。<stylelang="scss">

//设置使用scss规则编写css

/*scss样式*/</style>

1.3.1了解uni-app开发规范

2.组件规范组件是uni-app视图层的基本组成单元。uni-app的组件分为基础组件和扩展组件。基础组件在uni-app框架中已经内置，无需导入和注册即可直接使用。除基础组件之外，其余组件都称为扩展组件。扩展组件需要将组件导入项目中才可以使用。uni-app的基础组件类似HTML里的基础标签元素。例如基础组件中最常用的<view>组件，其作用类似于HTML的<div>。由于应用多端运行，uni-app不推荐在页面中直接使用HTML标签，因为uni-app应用运行在Web端HTML标签是能够被正常识别，但是运行在App或者小程序端时，HTML标签就可能会无法识别了。因此，编写代码时仍然建议使用官方提供的组件，多端运行时uni-app编译器会自动将这些官方组件编译成对应平台运行的标签和组件。

1.3.1了解uni-app开发规范

下面是一个uni-app基础组件的应用实例，在一个vue页面的根<view>组件下插入一个<button>组件。<button>组件的内容为“按钮”，属性size的值为“mini”，绑定了一个change事件。<template>

<view>

<buttonsize="mini"

@change="bindChange">按钮</button>

</view></template>可以看出uni-app基础组件规范与小程序规范相近，熟悉小程序开发的读者学习uni-app的基础组件能很快上手。uni-app约定所有组件与属性名都是小写，单词之间以连字符-连接。组件根节点为<template>标签，在Vue3项目中<template>标签下可以有一个或多个<view>组件。组件上的事件绑定需要遵循Vue的事件绑定语法，如绑定一个Change事件要写成@change="eventName"。

1.3.1了解uni-app开发规范

3.接口规范（JSAPI）uni-app的JSAPI由标准ECMAScript的JSAPI和uni扩展API两部分组成。标准ECMAScript的JSAPI仅是最基础的JS，在此基础之上浏览器扩展了window、document、navigator等对象，小程序扩展了wx.xx、my.xx、swan.xx等各种API。uni扩展API是基于标准ECMAScript扩展了一个uni对象，uni对象的接口规范与小程序规范类似，但是将wx、my、swan前缀统一替换为uni。例如HTTP请求接口为uni.request、上传文件接口为uni.uploadFile、获取当前位置接口为uni.getLocation等。

4.数据绑定及事件处理规范uni-app的数据绑定及事件处理遵循Vue规范，同时补充了应用生命周期及页面的生命周期。

1.3.1了解uni-app开发规范

5.布局规范在使用uni-app开发App端应用时，为了性能更好有时会使用.nvue页面。.vue页面使用WebView渲染引擎，对Web端样式支持最好。而.nvue页面使用App原生渲染引擎Weex，渲染速度更快，但是只支持Web中的Flex布局样式代码，不支持其他Web页面布局。在uni-app中，nvue和vue页面可以混搭使用。为了App端CSS代码的通用性，官方建议所有页面统一使用Flex布局进行开发。

1.3.2认识uni-app页面在uniappdemo1项目中存在一个默认的首页index.vue，这个页面就是一个最基本的uni-app页面，下面以index.vue为例分析介绍uni-app页面内部的基本组成元素。index.vue页面主要分为三块<template>、<script>和<style>。1.<template>块<template>块内容如下，内部包含一些uni-app的官方组件。例如根容器组件<view>，<view>组件相当HTML标签中的<div>，起到一个容器的作用，其他所有的uni-app官方组件都必须写在<view>组件内。

1.3.2认识uni-app页面上述代码在<view>组件中定义了一个<image>图像子组件和一个<view>子组件。在<view>子组件又定义了一个<text>子组件，<text>子组件类似于HTML标签中的<span>，其文本内容通过{{title}}获取，{{title}}就是Vue中取变量值的写法。<template> <viewclass="content"> <imageclass="logo"src="/static/logo.png"></image> <viewclass="text-area"> <textclass="title">{{title}}</text> </view> </view></template>

1.3.2认识uni-app页面和HTML标签一样，所有的uni-app官方组件可以设置属性，uni-app官方组件的属性包括公共属性、自定义属性和特殊属性。（1）公共属性：公共属性包括id,class,ref,style等，例如<viewclass="content">代码就设置了一个class属性值为content。（2）自定义属性：自定义属性是各uni-app官方组件自身特有的属性，例如在<imageclass="logo"src="/static/logo.png"></image>代码中，<image>组件除了设置了一个公共属性class，还设置了一个自定义属性src指定加载的图片路径。src属性是<image>组件自定义的，<view>组件中就没有该属性。（3）特殊属性：特殊属性就是Vue的一些指令，以v-开头。例如v-if、v-else、v-for、v-model等。

1.3.2认识uni-app页面

2.<script>块<script>块内容如下，内部主要是按照Vue2的规则定义一些JS代码，在后续的编程中会统一以Vue3组合式API的写法来编写JS代码，这里只做了解。其中data()内部定义一些变量，onLoad()是一个页面监听函数，在当前页面加载时执行。methods内部定义一些方法。<script>

exportdefault{

data(){

return{

title:'Hello'

}

},

onLoad(){

},

methods:{

}

}</script>

1.3.2认识uni-app页面上述代码在data()内部定义了一个变量title，title的值为Hello字符串。然后在<template>块中的<text>组件中通过{{title}}获取title变量的值，就可以在页面上看到Hello。

3.<style>块<style>块内部主要是定义一些CSS样式代码。和Vue页面一样，<style>块中还有一个lang属性可以设置，用于指定书写CSS代码的规则，默认情况下使用CSS规则来书写CSS样式，lang属性值为css，可以省略不写。如果想使用一些CSS预处理器规则书写CSS代码，可重新设置lang属性值。常用的CSS预处理器有less、sass、scss等。

1.3.2认识uni-app页面<style>

.content{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

}

.logo{

height:200rpx;

width:200rpx;

margin-top:200rpx;

margin-left:auto;

margin-right:auto;

margin-bottom:50rpx;

}

.text-area{

display:flex;

justify-content:center;

}

.title{

font-size:36rpx;

color:#8f8f94;

}</style>

左侧代码就对<template>块中创建的content、logo、text-area、title4个class定义样式代码。

1.3.3创建uni-app页面

在uniappdemo1项目的pages目录上单击右键，在弹出的菜单中单击“新建页面”。弹出新建uni-app页面窗口。在窗口中输入文件名为my-demo，在最下方pages.json中设置navigationBarTitleText配置项值为my-demo。单击“创建”按钮即可完my-demo.vue页面的创建。

1.3.3创建uni-app页面

1.3.3创建uni-app页面

可以看到在新建uni-app页面窗口中自动选择了默认模板创建页面，并默认勾选“创建同名目录”和“在pages.json中注册”两个选项。勾选“创建同名目录”意味着页面存在于路径为pages/my-demo/my-demo路径下。勾选“在pages.json中注册”意味着这个新建页面已经注册进pages.json路由配置中，项目启动后可以通过路由被外界访问。默认模板新建出来的my-demo.vue页面内容如下，包括<template>、<script>和<style>三块内容、，<template>内部包含一个<view>根组件，<script>内部是Vue2规范的JS代码，<style>内部没有内容。

1.3.3创建uni-app页面<template>

<view>

</view></template>

<script>

exportdefault{

data(){

return{

}

},

methods:{

}

}</script>

<style>

</style>

1.3.3创建uni-app页面

pages.json文件中会新增了一条路由信息，如下黑体内容。从中可以知道my-demo页面的路由地址为pages/my-demo/my-demo。"pages":[

{

"path":"pages/index/index",

"style":{

"navigationBarTitleText":"uni-app"

}

},

{

"path":"pages/my-demo/my-demo",

"style":

{

"navigationBarTitleText":"my-demo",

"enablePullDownRefresh":false

}

}],

1.3.3创建uni-app页面这里对my-demo.vue页面内容做4点修改，修改后的代码如下所示。（1）对<view>组件添加属性class="view-class"。（2）在<view>组件添加一个文本组件<text>，文本组件添加属性class="text-class"，并显示“my-demo页面”文本内内容。（3）删除<script>原有内容，采用Vue3setup函数。

（4）对view-class和text-class设置CSS样式，样式采用scss预处理器规则编写。

1.3.3创建uni-app页面<template> <viewclass="view-class"> <!--定义一个文本--> <textclass="text-class">my-demo页面</text> </view></template><scriptsetup>//删除原有代码</script><stylelang="scss">//采用scss形式编写css代码 .view-class{ background-color:green; .text-class{ color:red; } }</style>

1.3.3创建uni-app页面将uniappdemo1项目运行到Chrome浏览器，在Chrome浏览器中输入地址http://localhost:5173/#/pages/my-demo/my-demo，即可访问my-demo.vue页面。由于此处使用了scss规范编写CSS代码，HBuilderX检测到后会先自动安装sass插件，将sass规则的样式转化成CSS代码。等待插件安装完毕后，即可看到my-demo.vue页面。04任务4综合案例

1.4.1案例任务

在uniappdemo1项目下新建一个登录login.vue页面，页面组件包含用户名和密码两个输入框和一个“登录”按钮。用户输入用户名密码后单击“登录”按钮即可跳转到index.vue页面。

1.4.2任务分析

此任务的实施关键步骤如下。1.通过前面的学习可知uni-app项目的pages目录下存放vue页面文件。因此需首先在uniappdemo1项目的pages目录下创建一个新的login.vue页面。2.在login.vue页面定义一个根组件<view>，在<view>组件中添加用户名和密码两个输入框和一个“登录”按钮子组件，输入框子组件使用官方内置输入框组件<input>，使用示例如下。<inputclass="uni-input"placeholder="输入框组件"/>登录”按钮子组件使用官方内置的路由组件，使用示例如下。<navigatorurl="跳转的页面url"> <buttontype="default">跳转到新页面</button></navigator>3.pages.json文件中路由顺序需要更改，默认情况下项目启动跳转indexvue，这里需要改变成启动跳转到login.vue。

1.4.3任务实施

uniappdemo1项目的pages目录上单击右键，在弹出的菜单中单击“新建页面”。弹出新建uni-app页面窗口。在窗口中输入文件名为login，在最下方