在本节要求大家掌握 uni-app 项目的创建、运行、以及 Android 真机环境配置,内容侧重于动手操作,需要理解的部分较少,操作过程中遇到错误后,可以从头重新进行操作,直到环境正常运行。
在使用 uni-app 框架进行开发时有两种方式来创建项目,一种使用 cli 方式创建,另一种是通过 HBuilder X 方式创建,这两种方式本质上并无差别,采用哪种方式取决于自已项目的定位。
HBuilderX.exe
双击即可启动 HBuilder X 了,为了方便使用可以创建桌机快捷方式。注意千万不要将 HBuilder X 放到中文目录中!
.dmg
程序
在打开的窗口中配置项目的基本属性,如项目名称、项目位置、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 的话,一般不采用该种方式。
在创建的项目中可以看到 Vue 的单文件组件,即 uni-app 创建的项目本质上就是 Vue 的项目,代码逻辑的细节我暂时先不去分析,先来看看 uni-app 的项目是如何启动的。
在 HBuilder X 菜单栏中找到【运行】或者按快捷键 Ctrl + R(Command + R)
至此便不难理解何谓跨端开发了,就是通过编定一套代码,分别打包不同平台的应用。
H5 端运行有两种方式,一种是运行到浏览器,另一种是运行到内置浏览器,当选择内置浏览器时会提示安装【内置浏览器】插件。
运行到小程序端里需要做两种事情,分别是设置小程序的【AppID】 和开启【服务端口】,以微信小程序为例:
运行到 App 端时需要先安装【真机运行插件】,如下图所示:
等待【真机运行插件】安装完毕后,再次打开【运行】=> 运行到手机或模拟器