小程序开发
uniapp多端开发
快速入门

环境搭建和介绍

# 环境搭建和介绍

# 一、介绍

对于刚接触小程序开发的人来说，可能会有一些疑惑，比如：

什么是 Uniapp？它与原生微信小程序有什么异同之处？
为什么要推荐使用 Uniapp 开发？

官方文档：https://uniapp.dcloud.net.cn/ (opens new window)

# 1.1 Uniapp 是什么？

Uniapp 是一个基于 Vue.js 的前端框架，支持一次性开发多端应用。使用 Uniapp 开发的应用不仅可以在微信小程序中运行，还可以发布到 H5、App、支付宝小程序、钉钉小程序等多个平台。

相比于原生微信小程序，Uniapp 有以下显著优点：

跨平台开发：你只需要编写一套代码，Uniapp 就能够生成适配不同平台的代码，减少开发工作量。
基于 Vue.js：Uniapp 使用 Vue.js 语法开发，开发体验和生态支持更完善，适合 Web 前端开发者。
丰富的插件支持：Uniapp 提供大量的内置 API 和插件，可以快速集成丰富的功能。
官方开发工具支持：Uniapp 推荐使用 HBuilderX 作为开发工具，支持代码高亮、智能提示等，极大提升开发效率。

详细对比 Uniapp 和原生小程序的优缺点，建议观看此视频：

开发微信小程序使用原生开发还是uniapp开发，详细介绍原生小程序与uni-app开发的优缺点_哔哩哔哩 (opens new window)

# 1.2 多端开发使用uni调用

在 Uniapp 中，所有跨平台相关的 API 都是以 uni 开头的，这是因为 Uniapp 的核心目标是实现一次开发，多端运行，即通过一个统一的代码框架，能够在多端（如微信小程序、支付宝小程序、百度小程序、H5、App 等）运行。uni 前缀正是 Uniapp 提供的统一接口，确保开发者使用相同的代码逻辑来兼容各个平台。

为什么使用 uni 开头？

uni 开头的 API 是 Uniapp 提供的一组跨平台 API，统一了不同平台的 API 接口。这样开发者只需要学习和使用一套 API，就可以让项目兼容多端，而不用分别学习和适配各个平台特定的 API。例如，微信小程序中的 wx.request、支付宝小程序中的 my.request，都可以在 Uniapp 中通过 uni.request 来统一使用。

uni 前缀的 API 封装了平台差异，开发者调用 uni 提供的 API 时，Uniapp 会在底层进行平台适配，确保在不同的平台上运行相同的逻辑。

# 什么时候使用 `uni`提供的API？

跨平台开发：如果你希望你的应用能够在多个平台上运行（例如微信小程序、支付宝小程序、H5、App等），那么使用 uni API 能确保代码的跨平台兼容性。
需要调用原生功能时：Uniapp 提供了大量原生功能的封装，例如网络请求、文件操作、媒体操作等。使用 uni API 可以轻松调用这些功能，而无需关心平台差异。
跨平台 API 的替代：许多原生小程序的 API 都是特定平台的，例如微信小程序的 wx. 系列 API，支付宝小程序的 my. 系列 API 等。如果你想在多个平台上运行这些功能，就需要用 uni API 来替代这些平台特定的 API。

# 常见的 `uni` API 使用案例

1. 网络请求（uni.request）

不同平台的原生请求 API 各不相同，例如微信小程序的 wx.request 和支付宝小程序的 my.request，而 Uniapp 使用 uni.request 来统一网络请求：

uni.request({
  url: 'https://example.com/api',
  method: 'GET',
  success: (res) => {
    console.log(res.data);
  }
});

1
2
3
4
5
6
7

2. 获取设备信息（uni.getSystemInfo）

在微信小程序中，获取设备信息使用 wx.getSystemInfo，而在 Uniapp 中可以使用 uni.getSystemInfo，它能够兼容多个平台：

uni.getSystemInfo({
  success: (res) => {
    console.log(res);
  }
});

1
2
3
4
5

3. 文件上传（uni.uploadFile）

Uniapp 提供了 uni.uploadFile 来实现跨平台的文件上传，无需分别调用各个平台的文件上传 API。

uni.uploadFile({
  url: 'https://example.com/upload',
  filePath: file,
  name: 'file',
  success: (res) => {
    console.log('Upload success:', res);
  }
});

1
2
3
4
5
6
7
8

# 二、环境搭建（hello world）

# 2.1 下载HBuilderX

HBuilderX-高效极客技巧 (opens new window)

当然你可以选择其他IDE，但是官网推荐HBuilderX，天然整合uniapp。

# 2.2 下载微信开发者工具

我们要最终打包成微信小程序就必须在微信开发者工具去预览，那么需要下载微信开发者工具了。

微信开发者工具下载地址与更新日志 | 微信开放文档 (opens new window)

# 2.3 创建uniapp项目

HBuilderX下载下来后，直接双击运行HBuilderX.exe文件即可，它是免安装的。

然后我们新建一个uniapp项目，按照下图操作即可。

然后它会默认生成项目的基本结构。

# 2.4 在浏览器运行

然后第一次运行时，控制台会提示自动去下载相关的插件，下载完成后需要你再次重新运行。

# 2.5 在微信开发者工具运行

然后启动测试一下，发现失败了。经过检查它报错的这两项，也没问题啊。

那么问题可能是出在微信开发者，我们需要进入微信开发者工具->设置->安全，然后把服务的端口号打开。

接着重新运行即可。

# 2.6 在手机上运行

安卓、ios同理，不过需要用数据线连接上。

操作类似，感兴趣的可以去试试，这里不再演示了。不过要注意的是ios端麻烦点，好像现在不支持直接运行了。

# 三、项目基本目录结构

当你创建一个 Uniapp 项目时，HBuilderX 会自动生成一个标准的项目目录结构。每个文件和文件夹都有特定的用途，以支持跨平台开发。下图展示了 Uniapp 项目的基本目录结构：

项目基本目录结构

目录结构说明：

pages 文件夹：存放应用的各个页面。每个页面都由 .vue 文件组成，可以使用 Vue.js 的语法进行开发。
components 文件夹：用于存放可复用的 Vue 组件。你可以将一些通用的组件放在这里，以便在多个页面中使用。
static 文件夹：静态资源文件夹，用于存放图片、字体、样式等不会动态变化的资源。所有静态资源在打包时会原样保留。
unpackage 文件夹：这是 HBuilderX 的输出文件夹，存放的是编译后的文件。当你运行项目或打包时，生成的文件会存放在这个文件夹中。
App.vue 文件：项目的根组件。这里可以定义全局的页面布局、样式以及应用入口的基本结构。
main.js 文件：项目的入口文件，负责初始化应用和绑定页面的根组件。
manifest.json 文件：全局配置文件，用于配置应用的名称、图标、版本号、平台兼容性等。
pages.json 文件：用于配置应用的页面路径、导航栏样式等，是页面路由的核心配置文件。
uni.scss 文件：用于存放全局的样式文件，可以在这里定义全局的样式变量和通用样式。

# 四、开发规范概述

为了确保项目在多个平台上都能流畅运行，并且在编译速度和性能上达到最佳，Uniapp 规定了一些开发规范。了解这些规范有助于更好地进行开发，特别是在需要兼容多个平台时。

1. 页面文件遵循 Vue 单文件组件规范

每个页面文件都遵循 Vue 的单文件组件结构，包含 template（模板）、script（逻辑）和 style（样式）三部分。这种结构让页面代码模块化，便于维护。

2. 组件标签靠近小程序规范

Uniapp 的组件标签语法和微信小程序非常相似，但有一些特定的约定。Uniapp 提供了多种内置组件，这些组件在不同平台上会自动进行适配。有关具体组件标签的使用方式可以参考 Uniapp 组件规范 (opens new window)。

3. 接口能力（JS API）靠近微信小程序规范

Uniapp 的接口（即 JS API）与微信小程序的接口非常相似，最大的区别在于，Uniapp 的接口前缀是 uni，而不是微信小程序的 wx。例如，调用微信小程序中的 wx.request 在 Uniapp 中写作 uni.request。其他 API 调用方式基本保持一致，详情可查看 Uniapp 接口规范 (opens new window)。

4. 数据绑定及事件处理遵循 Vue.js 规范

Uniapp 在数据绑定和事件处理上与 Vue.js 完全一致，支持双向数据绑定、事件监听等 Vue 的常规功能。同时，Uniapp 还增加了 App 和页面的生命周期钩子，以便你可以控制应用在不同阶段的行为。

5. 建议使用 Flex 布局

为了确保应用在不同设备上的兼容性，建议在开发中使用 CSS 的 Flex 布局。Flex 布局能够适应多种屏幕尺寸，尤其适合响应式设计。Uniapp 在 H5、App、小程序等多平台上都支持 Flex 布局，这样可以保证应用在不同设备上的布局一致性。

# 五、uniapp的生命周期

# 应用的生命周期

App.vue/App.uvue | uni-app官网 (opens new window)

生命周期的概念

一个对象从创建、运行、销毁的整个过程。

生命周期函数

在生命周期中每个阶段会伴随着函数的触发，这些函数被称为生命周期函数。

uni-app支持如下应用生命周期函数

函数名	说明
onLauch	当uni-app初始化完成时触发（全局只触发一次）
onShow	当uni-app启动，或从后台进入前台显示
onHide	当uni-app从前台进入后台
onError	当uni-app报错时触发

# 页面的生命周期

页面简介 | uni-app官网 (opens new window)

uni-app 支持如下页面生命周期函数：

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例 (opens new window)
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例 (opens new window)
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为Object，具体见下方注意事项	微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序