uni-app跨平台开发

一、简介与环境搭配

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序等多个平台。是为了解决跨平台开发的问题，它因此而诞生，它的出现使得开发者可以使用同一套代码，快速地部署到多个平台，提高了开发效率和降低了开发成本。它的特点概括为：1.跨更多平台  2.一套代码，多平台运行 3.运行体验好，性能高,组件丰富,通用技术栈，学习/开发成本低

二、uni-app的安装与使用

 1.安装Node.js和HBuilderX：

Uni-app需要使用Node.js作为开发环境，因此需要先安装Node.js，下载Node.js。从Node.js官方网站（https:
odejs.org/en/download/）根据个人操作系统的不同选择合适的安装包进行下载。安装Node.js后运行下载的安装包，按照提示完成安装过程。在安装过程中，可以选择同时安装Node.js运行时和包管理工具npm。完成安装后，可以使用命令行终端来验证Node.js和npm是否正确安装，输入node -v和npm -v。如果安装正确，将看到相应的版本号。配置环境变量（可选）。将Node.js安装目录添加到系统的PATH环境变量中，以便在任何位置直接使用node和npm命令。例如，在Windows系统中，可以通过“此电脑属性”-“高级设置”-“环境变量”进行配置。验证安装成功。在命令行窗口输入node -v查看Node.js版本，输入npm -v查看npm版本，如果显示版本号则说明安装成功。修改默认模板下载位置（可选）。查看默认npm存放位置，在Node.js安装目录下创建两个文件夹node_global和node_cache，修改npm默认的存放路径，测试文件夹是否修改成功。另外，需要安装一款名为HBuilderX的开发工具，它是Uni-app官方推荐的开发工具。可以在HBuilderX官网上下载对应的安装包进行安装。

三、创建Uni-app项目

打开HBuilderX，点击菜单栏上的“文件”->“新建”->“项目”，选择“Uni-app”类型，填写项目名称和保存路径，然后点击“创建”按钮即可。注：App.vue是应用的根组件，main.js是应用的入口文件，manifest.json是应用的配置文件，pages.json是页面配置文件，uni.scss是应用的公共样式文件。

选择目标平台：创建项目后，选择你要开发的目标平台，可以是微信小程序、H5、App 等。

安装依赖：在项目根目录下，打开命令行工具（如终端或命令提示符），运行 npm install 命令安装项目所需的依赖包。安装完依赖后，在 HBuilderX 中选择「运行」菜单，然后选择你要运行的目标平台，如微信小程序。如果是在浏览器中预览 H5，可以直接点击「运行」按钮即可。

四、Uni-app的基本语法

Uni-app 是基于 Vue.js 的跨平台框架，因此其基本语法与 Vue.js 类似，但也有一些特定于 Uni-app 的语法和特性。以下是 Uni-app 的一些基本语法：

1.模块语法：

指令：如 v-if、v-for、v-on，用于控制元素的显示、循环和事件处理

<template>
  <div>
    <p v-if="isShow">这是一个...</p>
  </div>
</template>

插值表达式：使用双大括号 {{}} 进行数据绑定，例如：{{ message }}

绑定属性：使用 v-bind 或简写 : 进行属性绑定，例如：:src="imageUrl"

2.样式语法：

uni-app 是一个基于 Vue.js 的框架，可以用来开发跨平台的应用程序，包括 iOS、Android 和 Web 等平台。在 uni-app 中，样式语法主要是使用 CSS 进行样式定义，同时也支持一些特定的样式语法来适配不同平台和设备。

以下是 uni-app 中常用的样式语法介绍与内容：

1. 普通 CSS 样式：普通的 CSS 样式语法，在 uni-app 中同样适用。可以使用各种 CSS 属性来定义元素的样式，如 color、font-size、background-color 等。

   .selector {
     color: red;
     font-size: 16px;
     background-color: #ffffff;
   }
   

   2.单位适配：在 uni-app 中，可以使用 rpx 单位进行尺寸的定义。rpx 是一个可以根据屏幕宽度自适应的单位，1rpx 约等于屏幕宽度的 1/750。这样可以保证在不同屏幕尺寸上显示的效果基本一致。

   .selector {
     width: 200rpx;
     height: 100rpx;
   }
   

   3.平台特定样式：uni-app 支持在样式中使用特定于平台的样式语法，以适配不同平台的显示效果。例如，可以使用 @media 查询来针对不同平台设置不同的样式。

   /* 仅在 iOS 平台下生效 */
   @media screen and (min-width: 375px) {
     .selector {
       font-size: 18px;
     }
   }
   
   /* 仅在 Android 平台下生效 */
   @media screen and (min-width: 360px) {
     .selector {
       font-size: 16px;
     }
   }
   

   4.全局样式：uni-app 提供了 App.vue 中的 style 标签用于定义全局样式，这些样式会影响整个应用程序的页面。可以在这里定义通用的样式，如全局字体、颜色等。

   <!-- App.vue -->
   <template>
     <div>
       <router-view></router-view>
     </div>
   </template>
   
   <style>
   /* 全局样式 */
   body {
     font-family: 'Arial', sans-serif;
     color: #333333;
   }
   </style>
   

   5.组件样式隔离：uni-app 中的组件默认是具有样式隔离的，即组件内定义的样式不会影响到其他组件。这样可以有效避免样式污染和冲突

3.事件处理

在Uni-app中，可以使用v-on指令来监听DOM事件。例如，可以在组件中使用v-on:click指令来监听点击事件：

<template>
  <view>
    <!-- 点击按钮触发事件 -->
    <button @click="handleClick">点击我</button>
  </view>
</template>

<script>
export default {
  methods: {
    // 定义处理点击事件的方法
    handleClick() {
      console.log('按钮被点击了');
    }
  }
}
</script>

五、组件：

1.基础内容类组件：  

<text>：文本内容，类似于 HTML 中的 <span>。

<icon>：图标，可以使用内置图标或自定义图标。

<progress>：进度条，用于展示操作进度。

<rich-text>：富文本，支持显示包含 HTML 标签的文本内容

2.表单组件：

<input>：输入框，用于接收用户输入。

<textarea>：多行文本输入框。

<button>：按钮，用于触发操作。

<checkbox>：复选框。

<radio>：单选框。

<picker>：选择器，用于选择日期、时间、地区等

3.导航组件：  <navigator>：页面跳转链接，类似于 HTML 中的 <a>。

<navigator-bar>：导航栏，用于在页面顶部显示标题和操作按钮

4.媒体组件：  <image>：图片。 <video>：视频。

5.地图组件：  <map>：地图组件，用于显示地图和定位等功能。

6.动画组件：  <animation>：动画组件，用于实现复杂的动画效果。

7.其他组件：  <canvas>：画布，用于绘制图形和动画。<web-view>

Web ：视图，用于在小程序中显示 Web 页面。

五、Uni-app的组件库：

uni-app 平台拥有丰富的组件库，这些组件库能够帮助开发者快速构建跨平台的应用程序，提高开发效率。以下是一些常用的 uni-app 组件库：

1. uni-ui：由 uni-app 官方团队维护的组件库，包含了丰富的 UI 组件，如按钮、表单、列表、轮播图等，以及一些功能性组件，如倒计时、折叠面板等。uni-ui 的组件风格简洁大方，易于使用。

2. uView UI：一款基于 uni-app 的高质量 UI 组件库，提供了大量的组件和工具，覆盖了各种常用场景，包括但不限于表单、列表、卡片、图表等。uView UI 还提供了丰富的主题定制和组件样式修改功能，能够满足不同项目的需求。

3. ColorUI：一款轻量级的小程序 UI 库，也支持在 uni-app 中使用。ColorUI 提供了一系列简洁美观的组件，如按钮、标签、卡片等，同时提供了丰富的配色方案，能够满足不同风格的设计需求。

4. Mint UI：一个基于 Vue.js 的移动端组件库，在 uni-app 中同样可以使用。Mint UI 提供了丰富的移动端 UI 组件，如弹出层、下拉刷新、上拉加载等，能够帮助开发者快速构建优秀的移动应用。

5. Vant UI：一个轻量、可靠的移动端 Vue 组件库，在 uni-app 中也可以使用。Vant UI 提供了丰富的组件和功能，如轮播、导航、图标、弹出层等，同时支持按需引入和主题定制。

6. Element UI：一个基于 Vue.js 的桌面端 UI 组件库，也可以在 uni-app 中使用。Element UI 提供了大量的桌面端 UI 组件，如表格、表单、对话框等，适用于后台管理系统等桌面端应用的开发。