uni-app基础知识复习大纲

1.uni-app简介

(1).uni-app概述：uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

(2).uni-app由来：是为了解决跨平台开发的问题。在移动应用开发中，不同平台（如iOS、Android）有不同的开发语言和技术栈，这导致开发者需要针对不同平台开发多套代码，增加了开发和维护的成本。DCloud公司正是看到了这些问题，因此决心打造一款终极的跨平台解决方案，此时，uni-app就应运而生，Uni-app的出现使得开发者可以使用同一套代码，快速地部署到多个平台，提高了开发效率和降低了开发成本。

特点:

1、跨更多平台

2、一套代码，多平台运行

3、运行体验好，性能高

4、开发生态、周边生态丰富（组件丰富）

5、通用技术栈，学习/开发成本低，

2.uni-app环境搭建

一、下载HBuilderX，官网下载地址：HBuilderX-高效极客技巧

二、下载安装微信开发者工具，下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档

三、打开HBuilderX工具，选择【工具】-->【设置】-->【运行设置】，在微信开发者工具路径输入框中填入微信开发者工具的安装路径。

3.uni-app项目的创建和运行

通过HBuilderX可视化界面创建第一个uni-app项目并运行在h5(浏览器)端：

第一步：打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目

第二步:输入项目名，项目储存路径.

第三步:项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。

4.uni-app开发规范

uni-app开发规范遵循以下原则：

1、页面文件遵循Vue单文件组件

2、组件标签规范类似于微信小程序规范。

3、接口能力（JS API）规范类似微信小程序规范，但需要将wx前缀改为uni。

4、数据绑定及事件处理同Vue.js规范，同时额外补充了uniapp本身的App及页面的生命周期的规范。

5、为了更好的兼容多端运行，建议使用Flex布局进行开发。

5.全局配置

概述：全局配置主要在page.json文件里进行配置，可以配置页面路径、窗口样式、导航显示、底部tabBar的显示等等。

配置项列表

属性	类型	必填	描述
globalStyle	Object	否	设置默认页面的窗口表现
pages	Object Array	是	设置页面路径及窗口表现
tabBar	Object	否	设置底部 tab 的表现
condition	Object	否	启动模式配置
easycom	Object	否	组件自动引入规则
subPackages	Object Array	否	分包加载配置

6.页面配置

概述：页面配置主要配置页面的样式、标题、导航栏等等，主要在page.json文件中的pages节点进行页面的配置，页面配置的权重高于全局配置

pages属性表

属性	类型	默认值	描述
path	String	无	配置页面的路径
style	Object	无	配置页面的窗口表现（样式)

7.uni-app内置组件

外部资源的引入

在uni-app中引入外部资源（例如图片、字体、样式表等）可以通过以下步骤实现：

1. 准备资源文件：确保你拥有要引入的外部资源文件，并将它们存放在适当的位置，例如图片存放在/static目录下，样式表存放在/static/css目录下等。

2. 使用资源：在需要使用这些资源的地方，可以直接引用它们。例如，如果要使用一张图片，可以在<template>中使用<img>标签，并设置src属性为图片的路径；如果要引入样式表，可以在<template>中使用<style>标签，并通过@import引入外部样式表。

3. 配置webpack：如果需要引入的资源不是标准的JavaScript、CSS、图片等文件类型，而是一些非标准类型的文件（例如字体文件），可能需要在webpack配置中进行相应的配置，以确保这些文件能够正确地被打包和引入。

4. 注意跨域：如果引入的资源位于其他域名下，需要确保服务端允许跨域访问，否则可能会出现跨域访问限制的问题。

8.uni-app组件基础信息

uni-app是一款基于Vue.js的跨平台应用开发框架，可以用于快速开发iOS、Android、Web等多个平台的应用。以下是uni-app组件的基础信息：

1. 视图组件（View Components）：

   • <view>：类似于HTML中的<div>，用于包裹其他组件或内容。
   • <text>：用于显示文本内容。
   • <image>：用于显示图片。

2. 基础内容组件（Basic Content Components）：

   • <icon>：用于显示图标。
   • <progress>：用于显示进度条。
   • <rich-text>：用于显示富文本内容。

3. 表单组件（Form Components）：

   • <input>：用于输入文本。
   • <textarea>：用于多行文本输入。
   • <checkbox>：用于多选框。
   • <radio>：用于单选框。
   • <switch>：用于开关选择。
   • <slider>：用于滑块选择。

4. 导航组件（Navigation Components）：

   • <navigator>：用于页面跳转。
   • <swiper>：用于轮播图效果。

5. 媒体组件（Media Components）：

   • <audio>：用于播放音频。
   • <video>：用于播放视频。

6. 地图组件（Map Components）：

   • <map>：用于显示地图。

7. 画布组件（Canvas Components）：

   • <canvas>：用于绘制图形。

8. 开放能力组件（Open Capabilities Components）：

   • <ad>：用于显示广告。
   • <web-view>：用于嵌入Web页面。

9.uni-app的页面样式与布局

一、uni-app尺寸单位

      在 uni-app 中，可以使用以下几种尺寸单位来定义页面元素的大小：

      1、px : 像素（Pixel）是最常见的尺寸单位，表示固定大小的像素值。在 uni-app 中，1px 相当于设备上的一个物理像素。

      2、rpx : rpx（Responsive Pixel）是相对长度单位，可以根据屏幕宽度进行自适应缩放。在不同密度的屏幕上，1rpx 会被转换成不同的物理像素数，保证在不同屏幕下的显示效果一致。通常在 uni-app中推荐使用rpx来定义长度单位，特别是用于移动端小程序和 App 的开发。

      3、百分比（%）: 百分比是相对长度单位，基于父元素的大小来定义元素的大小。可以使用百分比来实现响应式布局，让页面元素根据父元素的大小进行自适应调整。

10.uni-app的路由操作

基于页面栈的路由

1. 页面跳转： 使用uni.navigateTo或uni.redirectTo方法实现页面跳转。
2. 返回上一页： 使用uni.navigateBack方法返回上一页。
3. 关闭当前页面并跳转到应用内的某个页面： 使用uni.reLaunch方法。

1. 基于vue-router的路由

   如果你的Uni-app项目采用了vue-router，你可以直接使用vue-router提供的路由操作方法。通常情况下，你需要在router/index.js文件中定义路由规则，并在组件中使用this.$router来访问路由对象。

1. 页面跳转：

1. 返回上一页：this.$router.go(-1); // 返回上一页
2. 关闭当前页面并跳转到应用内的某个页面：this.$router.replace({ path: '/' });

11.uni-app的生命周期

概述：uni-app完全支持Vue实例的生命周期，同时还新增了应用的生命周期和页面的生命周期。

Uni-app中组件的生命周期钩子函数与Vue.js框架中的类似，但也有一些额外的生命周期钩子函数适用于跨平台开发的需求。以下是Uni-app中常用的生命周期钩子函数：

1. beforeCreate： 在实例初始化之后，数据观测(data observer)和事件配置(event/watcher)之前被调用。
2. created： 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event事件回调。
3. beforeMount： 在挂载开始之前被调用：相关的 render 函数首次被调用。
4. mounted： 实例被挂载后调用，这时候 DOM 已经渲染完成，可以访问到 DOM 节点。
5. beforeUpdate： 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
6. updated： 数据更新后调用，发生在虚拟 DOM 重新渲染和打补丁之后。这个钩子函数不会在初始化渲染的时候调用。
7. beforeDestroy： 实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed： 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

除了以上常用的生命周期钩子函数外，Uni-app还提供了特定于跨平台开发的生命周期钩子函数：

• onLaunch： 当 App 初始化完成时触发，全局只触发一次。
• onShow： 当 App 从后台进入前台显示触发。
• onHide： 当 App 从前台进入后台触发。
• onError： 当 App 报错时触发。
• onUniNViewMessage： 当 nvue 页面通过 UniView.postMessage 发送消息时触发。
• onPageNotFound： 当找不到页面时触发。
• onThemeChange： 当系统主题改变时触发。