uni-app（优医咨询）项目实战 - 第1天

学习目标：

• 能够搭建 uni-app 基础开发环境
• 知道 uni-app 跨端开发的基本思路
• 掌握安卓真机运行环境配置步骤
• 掌握 uni-app 中关于配置、组件以及 API 的使用
• 掌到 uni-app 跨平台兼容的处理方式

一、搭建基本开发环境

在本节要求大家掌握 uni-app 项目的创建、运行、以及 Android 真机环境配置，内容侧重于动手操作，需要理解的部分较少，操作过程中遇到错误后，可以从头重新进行操作，直到环境正常运行。

1.1 创建项目

在使用 uni-app 框架进行开发时有两种方式来创建项目，一种使用 cli 方式创建，另一种是通过 HBuilder X 方式创建，这两种方式本质上并无差别，采用哪种方式取决于自已项目的定位。

1.1.1 HBuilder X 方式

• 安装 HBuilder X HBuilder X 是由 DCloud 推出的开发工具（类似于 VS Code），针对不同的操作系统安装方式也有差异：
  • Windows 系统下载的为压缩包，解压缩后找到 HBuilderX.exe 双击即可启动 HBuilder X 了，为了方便使用可以创建桌机快捷方式。注意千万不要将 HBuilder X 放到中文目录中！
  • Mac OS 系统下载的为典型的 Mac OS 的安装 .dmg 程序
  • 首次启动可根据自已的喜好设置主题和快捷键的风格，如下图所示

• HBuilder X 可视化界面创建项目 如下图所示，在【菜单栏】 => 【文件】 => 【新建】 => 【项目】

在打开的窗口中配置项目的基本属性，如项目名称、项目位置、Vue 的版本等，如下图所示

至此我们便完成了 uni-app 项目的创建，如下图所示

1.1.2 vue-cli 方式

uni-app 是基于 Vue.js 开发的框架，如果采用 Vue2 的语法可以使用 vue-cli 来创建项目：

# vue-cli 创建 uni-app 项目
vue create -p dcloudio/uni-preset-vue my-project

如果采用 Vue3 的语法可以通过 degit 从 github 仓库下载项目模板方式创建项目：

# 下载 git 仓库中的项目模板
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

以上是使用 cli 方式创建基于 Vue2 和 Vue3 项目的操作步骤，一般会使用 VS Code 做为开发工具，这种方式创建的项目在 App 运行、调试、打包方面有所欠缺，因此如果要开发 App 的话，一般不采用该种方式。

1.2 项目运行

在创建的项目中可以看到 Vue 的单文件组件，即 uni-app 创建的项目本质上就是 Vue 的项目，代码逻辑的细节我暂时先不去分析，先来看看 uni-app 的项目是如何启动的。

在 HBuilder X 菜单栏中找到【运行】或者按快捷键 Ctrl + R（Command + R）

• 运行到浏览器，即将项目打包成了 H5 版本了
• 运行到小程序模拟器，即将项目打包成小程序了
• 运行到手机或模拟器，即将项目打包成 App了

至此便不难理解何谓跨端开发了，就是通过编定一套代码，分别打包不同平台的应用。

1.2.1 H5端

H5 端运行有两种方式，一种是运行到浏览器，另一种是运行到内置浏览器，当选择内置浏览器时会提示安装【内置浏览器】插件。

1.2.2 小程序端

运行到小程序端里需要做两种事情，分别是设置小程序的【AppID】 和开启【服务端口】，以微信小程序为例：

• 设置 AppID

• 启用服务端口，目的是通过 HBuilder X 自动启动运行小程序开发者工具，启用服务端口的步骤如下：
  • 打开微信开发者工具（需要自行安装并登录）
  • 【菜单栏】 => 【设置】=> 【安全设置】

1.2.3 App 端

运行到 App 端时需要先安装【真机运行插件】，如下图所示：

等待【真机运行插件】安装完毕后，再次打开【运行】=> 运行到手机或模拟器