入门uniapp

# 1 基础部分总结

# 什么是UniApp？它有哪些特点和优势？

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

uni-app简单来说是 vue的语法 + 小程序的api，它遵循Vue.js语法规范，组件和API遵循微信小程序命名，这些都属于通用技术栈，学习它们是前端必备技能，uni-app没有太多额外学习成本

uni-app 支持的手机版本最低到多少

• Web端：uni-app没有限制，同vue2和vue3自身能支持的浏览器版本
• 小程序端：uni-app没有限制，同该小程序自身能支持的最低平台
• App端：
  • Vue2: Android4.4+、iOS9+。Android4.4已经是2013年发布的手机了。
  • Vue3: 支持的范围是：Android >=5 （使用nvue和vue有区别。某些老国产Android5的rom无法动态升级Android system webview，此时如果使用vue页面需搭配x5内核） , iOS >= 10

uniapp特点

• 跨平台更多
  • 真正做到一套代码、多端发行
  • 条件编译：优雅的在一个项目里调用不同平台的特色功能
• 运行体验更好
  • 组件、api与微信小程序一致
  • 兼容weex原生渲染
• 通用技术栈，学习成本更低
  • vue的语法、微信小程序的api
  • 内嵌mpvue
• 开发生态，拥抱社区
  • 支持通过npm安装第三方包
  • 支持微信小程序自定义组件及SDK
  • 兼容mpvue组件及项目
  • app端支持和原生混合编码
  • dcloud插件市场

uniapp平台功能示意图

# Uniapp的目录结构组成

一个 uni-app 工程，就是一个 Vue 项目，你可以通过 HBuilderX 或 cli 方式快速创建 uni-app 工程

一个uni-app工程，默认包含如下目录及文件

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─utssdk                存放uts文件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)。
├─platforms             存放各平台专用页面的目录，详见
├─nativeplugins         App原生语言插件 详见
├─nativeResources       App端原生资源目录
│  └─android            Android原生资源目录 详见
├─hybrid                App端存放本地html文件的目录，详见
├─wxcomponents          存放小程序组件的目录，详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量

static目录 使用注意

• 编译到任意平台时，static 目录下除不满足条件编译的文件，会直接复制到最终的打包目录，不会打包编译。非 static 目录下的文件（vue、js、css 等）只有被引用时，才会被打包编译。
• css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下

# Vue.js和UniApp有什么关系？它们之间有什么区别？

Vue.js是一种用于构建用户界面的渐进式JavaScript框架，而UniApp是基于Vue.js的跨平台应用开发框架。UniApp在Vue.js的基础上进行了扩展，使得开发者可以使用Vue.js的开发方式和语法来编写跨平台应用。与Vue.js相比，UniApp具有以下区别：

• 平台适配性：Vue.js主要用于构建Web应用，而UniApp能够生成多个平台的应用，包括小程序、H5和App等。
• 原生能力访问：UniApp提供了对原生平台的API和能力的访问，使得开发者可以更方便地使用平台的特性和功能。
• 组件库和UI样式：UniApp提供了一套基于Vue.js的组件库和UI样式，方便开发者快速构建应用的界面和交互。

# 如何在UniApp中进行网络请求？

UniApp中可以使用uni.request方法进行网络请求。以下是一个基本的网络请求示