uni-app入门（uni-app基础介绍，软件安装，微信开发者工具安装）

女爷i 2022-12-13 01:30 139阅读 0赞

## 一、什么是uni-app ##

> uni-app 是一个使用 Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

## 二、创建uni-app项目 ##

> uni-app支持通过 可视化界面、vue-cli命令行 两种方式快速创建项目。  
> 以下是通过 HBuilderX 可视化界面进行使用的（可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。）  
> *注意：如需了解其他方法，请查看uni-app的官方文档*

1.  安装 HBuilderX （官方网址：https://www.dcloud.io/hbuilderx.html）
2.  创建uni-app ：在点击工具栏里的文件 -> 新建 -> 项目  
    具体操作如下图所示：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70_pic_center]
3.  选择uni-app类型，输入工程名，选择模板，点击创建，即可成功创建  
    具体操作如下图所示：  
    ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70_pic_center 1][]
4.  运行uni-app项目

> 浏览器运行：进入创建的项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可在浏览器里面体验uni-app 的H5 版。具体操作如下图所示：

![在这里插入图片描述][20201009101504458.png_pic_center]

> 真机运行：连接手机，开启USB调试，进入hello-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。具体操作如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70_pic_center 2]

> 在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app。具体操作如下图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70_pic_center 3]  
*注意：微信开发者下载地址https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 下载第一个就可以，根据自己电脑的操作系统选择下载哪个版本，下载完成后直接安装就行，傻瓜式安装，一直下一步就可以安装成功。下载如下图所示：*  
![在这里插入图片描述][20201009102633953.png_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/004b7f23e4ea48b3a67a615b064a49ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/4dd36e6a348743809d8a28aad6b78520.png
[20201009101504458.png_pic_center]: /images/20221123/71be19660ef04b0eb3928e6c9bd5c42d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/ef94d08968f441d394a597f8025c7616.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDc4NDI0_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/ad8d29531ff848a2a5c56c2e8cbfb1a4.png
[20201009102633953.png_pic_center]: /images/20221123/622e064eb82649ffad5b74da7ed30795.png