uniapp 前端基础知识

是海棠呀
8 阅读8分钟

Uniapp 前端基础知识详解

**

一、Uniapp 概述

Uniapp 是 DCloud（数字天堂）公司推出的一个使用 Vue.js 开发所有前端应用的框架。它的核心优势在于 “一次开发，多端部署”，开发者仅需编写一套代码，就能发布到 iOS、Android、H5、小程序（微信 / 支付宝 / 百度 / 字节跳动等）等多个平台。这一特性极大地减少了开发成本和时间，尤其适合对多端适配有需求的项目，比如电商 APP、企业服务平台等。

从技术原理来看，Uniapp 在编译阶段会将 Vue.js 代码转换为各平台对应的原生代码或 JavaScript 代码。在小程序端，它会把代码编译成符合小程序规范的文件结构；在 H5 端，直接生成可在浏览器运行的 JavaScript、CSS 和 HTML 代码；在 APP 端，则通过与原生容器结合，调用原生 API 实现功能。这种编译机制让 Uniapp 既保留了 Vue.js 简单易用的开发体验，又能充分利用各平台的原生能力。

二、开发环境搭建

2.1 安装 Node.js

Uniapp 基于 Node.js 运行环境，所以首先需要安装 Node.js。访问 Node.js 官方网站（nodejs.org/），根据操作系统下载对应的安装包，安装过程中保持默认设置即可。安装完成后，在命令行输入 node -v 和 npm -v，若能显示出版本号，说明安装成功。Node.js 自带的 npm（Node Package Manager）是后续安装依赖和工具的重要工具。

2.2 安装 HBuilderX

HBuilderX 是 DCloud 官方推荐的 Uniapp 开发工具，它针对 Uniapp 进行了深度优化，提供了丰富的功能和良好的开发体验。在 DCloud 官网（www.dcloud.io/hbuilderx.h…）下载 HBuilderX 的安装包，安装完成后打开软件。HBuilderX 内置了 Uniapp 的开发插件，无需额外安装，直接可以创建 Uniapp 项目。

2.3 创建 Uniapp 项目

在 HBuilderX 中，点击 “文件” -> “新建” -> “项目”，在弹出的新建项目窗口中，选择 “uni-app” 模板。填写项目名称、选择项目路径，然后点击 “创建”。创建完成后，项目目录结构如下：

  • components：存放自定义组件的目录。
  • pages：存放页面组件的目录，每个页面是一个独立的 Vue 组件。
  • static：存放静态资源，如图片、字体文件等。
  • main.js：项目的入口文件，用于初始化 Vue 实例和全局配置。
  • App.vue：应用的根组件，可定义全局的样式和生命周期函数。
  • manifest.json：项目的配置文件，用于配置应用的名称、图标、权限、各平台的特有设置等。
  • pages.json：页面路由配置文件，定义了应用的页面路径、窗口样式等。

三、Uniapp 语法特性

3.1 Vue.js 语法基础

Uniapp 基于 Vue.js 开发，所以掌握 Vue.js 的基本语法是关键。Vue.js 使用模板语法来描述视图与数据的映射关系，例如：

<template>
  <view>{{ message }}</view>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Uniapp!'
    };
  }
};
</script>

上述代码中，template 标签定义了视图结构，{{ message }} 是插值表达式，用于将 data 中的 message 数据渲染到页面上。此外，Vue.js 的指令（如 v-bind、v-on、v-if、v-for 等）在 Uniapp 中同样适用。例如，使用 v-bind 绑定属性：

<image :src="imageUrl"></image>

使用 v-on 绑定事件：

<button @click="handleClick">点击我</button>

3.2 条件渲染与列表渲染

在 Uniapp 中，v-if 和 v-show 用于条件渲染。v-if 是真正的条件渲染，它会根据表达式的值动态添加或移除 DOM 元素；v-show 则是通过 CSS 的 display 属性来控制元素的显示与隐藏。例如：

<view v-if="isShow">条件为真时显示</view>
<view v-show="isShow">也可以这样控制显示</view>

列表渲染使用 v-for 指令，它可以遍历数组或对象并渲染对应的视图。例如，遍历一个数组展示列表：

<view v-for="(item, index) in list" :key="index">
  {{ item }}
</view>
<script>
export default {
  data() {
    return {
      list: ['苹果', '香蕉', '橘子']
    };
  }
};
</script>

3.3 组件化开发

Uniapp 中组件化开发是提高代码复用性和可维护性的重要方式。可以在 components 目录下创建自定义组件，每个组件是一个独立的 Vue 单文件组件（.vue 文件）。例如，创建一个简单的 HelloWorld 组件：

<template>
  <view class="hello-world">
    <text>{{ msg }}</text>
  </view>
</template>
<script>
export default {
  props: {
    msg: {
      type: String,
      default: '默认消息'
    }
  }
};
</script>
<style>
.hello-world {
  color: red;
}
</style>

在页面中使用该组件：

<template>
  <view>
    <HelloWorld msg="来自页面的消息"></HelloWorld>
  </view>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue';
export default {
  components: {
    HelloWorld
  }
};
</script>

四、Uniapp 组件与 API

4.1 基础组件

Uniapp 提供了丰富的基础组件，涵盖了视图容器、基础内容、表单组件、导航组件等。例如：

  • 视图容器组件：view 类似于 HTML 中的 div，用于布局和包裹其他组件；scroll-view 是可滚动的视图区域，常用于展示大量内容。
  • 基础内容组件：text 用于显示文本，支持部分文本样式设置；image 用于展示图片，支持网络图片和本地图片。
  • 表单组件：input 是输入框，checkbox 是复选框，radio 是单选框，select 是下拉选择框等，用于收集用户输入信息。
  • 导航组件：navigator 用于页面跳转，支持跳转到本应用内的页面或其他应用；tabbar 是底部导航栏，可配置多个页面切换。

4.2 生命周期函数

Uniapp 中的页面和应用都有各自的生命周期函数。

  • 应用生命周期函数：在 App.vue 中定义，包括 onLaunch（应用初始化完成时触发）、onShow（应用启动或从后台切换到前台时触发）、onHide（应用从前台切换到后台时触发）。
export default {
  onLaunch: function() {
    console.log('App Launch');
  },
  onShow: function() {
    console.log('App Show');
  },
  onHide: function() {
    console.log('App Hide');
  }
};
  • 页面生命周期函数：在页面组件中定义，如 onLoad（页面加载时触发，可获取页面参数）、onShow（页面显示时触发）、onReady（页面初次渲染完成时触发）、onHide（页面隐藏时触发）、onUnload（页面卸载时触发）。
export default {
  data() {
    return {};
  },
  onLoad: function(option) {
    console.log('页面加载', option);
  },
  onShow: function() {
    console.log('页面显示');
  }
  // 其他生命周期函数类似定义
};

4.3 API 调用

Uniapp 提供了大量的 API 用于调用各平台的原生功能，例如：

  • 网络请求：使用 uni.request 方法发送 HTTP 请求。
uni.request({
  url: 'https://example.com/api/data',
  method: 'GET',
  success: function(res) {
    console.log(res.data);
  },
  fail: function(err) {
    console.error(err);
  }
});
  • 文件操作：uni.saveFile 用于保存文件到本地，uni.getFileSystemManager 可获取文件系统管理器，进行文件的读写、删除等操作。
  • 设备信息获取：uni.getSystemInfo 可以获取设备的系统信息，如设备型号、屏幕尺寸、操作系统版本等。

五、样式与布局

5.1 样式语法

Uniapp 支持 CSS 样式，同时也有一些扩展。例如，可以使用 rpx（responsive pixel）作为单位，它是一种响应式的像素单位，在不同尺寸的屏幕上会自动进行适配。1rpx 在 iPhone6 上等于 1px，在其他设备上会根据屏幕宽度进行等比缩放。此外，还支持 px、% 等传统单位。

样式可以通过内联样式、class 样式和全局样式来设置。内联样式直接在组件标签中使用 style 属性设置；class 样式在 style 标签中定义，然后在组件标签中使用 class 属性引用；全局样式可以在 App.vue 的 style 标签中定义，会应用到所有页面。

5.2 布局方式

Uniapp 常用的布局方式有 Flex 布局和 Grid 布局。Flex 布局是一种弹性布局，通过设置容器的 display: flex 属性，然后使用 flex-direction（主轴方向）、justify-content（主轴对齐方式）、align-items（交叉轴对齐方式）等属性来控制子元素的排列和对齐。例如：

<view style="display: flex; justify-content: center; align-items: center; height: 200rpx;">
  <text>居中显示的文本</text>
</view>

Grid 布局是网格布局，通过定义行和列来划分区域，适用于更复杂的布局场景。设置容器的 display: grid 属性，然后使用 grid-template-rows（定义行）、grid-template-columns（定义列）等属性来配置网格结构。

六、项目发布与调试

6.1 调试

HBuilderX 提供了强大的调试功能。可以在编辑器中设置断点，然后在运行项目时，通过调试面板查看变量值、调用栈等信息。在模拟器中运行项目时，可以实时查看页面的渲染效果和日志输出。此外，还可以使用真机调试，将项目运行到手机上，更真实地测试应用在实际设备上的表现。连接手机到电脑，开启手机的开发者模式，在 HBuilderX 中选择真机调试，即可将项目安装到手机并进行调试。

6.2 发布

发布到不同平台的操作略有不同。以发布到微信小程序为例，首先需要在微信公众平台注册小程序账号，获取小程序的 AppID。在 HBuilderX 中，点击 “发行” -> “微信小程序”，填写相关信息，如小程序名称、AppID 等，然后点击 “发行”，HBuilderX 会自动将项目编译成符合微信小程序规范的代码，并打包上传到微信公众平台。在微信公众平台进行审核，审核通过后即可发布上线。发布到其他平台（如 APP、H5、支付宝小程序等）的流程也类似，需要在对应平台进行注册和配置，然后通过 HBuilderX 进行打包和发布操作。

以上就是 Uniapp 前端开发的基础知识。如果你在学习过程中有任何疑问，或是想深入了解某个方面，比如实战项目、性能优化，都能随时和我说。

avatar
文章
阅读
粉丝