Uni-app的学习总结

一.uni-app简介

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

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

uni-app特点：

1、跨更多平台

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

3、运行体验好，性能高

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

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

二.uni-app环境搭建

环境搭建步骤：

一、下载HBuilderX，官网下载地址：https://www.dcloud.io/hbuilderx.html

选择对应的版本下载即可：

三.uni-app基础知识

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

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

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

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

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

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

除此以外，uni-app项目的开发还需遵循以下规范：

1、目录结构规范

2、命名规范

3、代码规范

4、样式规范

5、注释规范

四.uni-app的组件

概述：组件是页面的基本组成单位，类似原HTML页面的标签，主要用于进行页面结构的搭建。

组件的组成结构：开始/结束标签、内容、属性、属性值。

在进行uni-app项目开发时，通常需要引入一些外部资源，如图片、视频、js脚本、CSS样式等等，以下讲解各种资源的引入方式。

1、本地图片或视频的引入

• 绝对路径,需提供完整的 URL 地址，包括协议、域名和资源路径。

例如：<image src="https://example.com/images/image.jpg">

• 相对路径，需提供相对于当前文件的路径

例如：<image src="../../static/images/image.jpg">

或者

<image src="@/static/images/image.jpg">  但是要注意，这种写法既不是传统意义上的绝对路径，也不是严格意义上的相对路径，而是 uni-app 框架提供的路径别名方式，用来指向特定目录中的资源文件。

2、js文件的引入

例如：import "../../common/js/index.js"

或者：（以下写法需要js文件里面有export 导出关键字才需要这样引入）

写法一： import common from '@/utils/common.js'

写法二： import common from '../../utils/common.js'  具体相对路径请根据实际文件夹情况来设置

3、css文件的引入

写法一： @import "@/styles/common.css"

写法二： @import "../../styles/common.css"   具体相对路径请根据实际文件夹情况来设置

组件的属性类型

组件的属性，有多种类型：

公共属性列表

每个组件都有各自定义的属性，但所有uni-app的组件，都有如下属性：

基础组件列表

基础组件分为以下十几大类：

视图容器（View Container）：

基础内容（Basic Content）：

表单组件（Form）：