【uni-app】什么是uni-app？如何进行开发？如何连接微信开发者工具与安卓手机端？

文章目录

1 什么是 uni-app
2 如何使用与开发
3 用 HBuilderX 创建项目
4 如何连接微信开发者工具
5 如何连接安卓手机端

1 什么是 uni-app

（此部分内容出自 uni-app 官方文档的介绍）

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

一套代码编到11个平台，这不是梦想。

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等8大关键指标上拥有更强的优势。

2 如何使用与开发

uni-app支持通过两种方式快速创建项目：

可视化界面：可视化的方式比较简单，可使用 HBuilderX（官方IDE下载地址），HBuilderX内置相关环境，开箱即用，无需配置nodejs。HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。下载App开发版，可开箱即用；如下载标准版，在运行或发行uni-app时，会提示安装uni-app插件，插件下载完成后方可使用。
vue-cli命令行：如使用cli方式创建项目，可直接下载标准版，因为uni-app编译插件被安装到项目下了。

3 用 HBuilderX 创建项目

新建一个项目，之后按个人需求选择，来进行创建，初学可先用默认方式创建

4 如何连接微信开发者工具

首先当然要安装 微信开发者工具

在运行中选择小程序模拟器，点击微信开发者工具

如果是第一次使用，那么它会提示您先指定微信开发者工具这个软件的路径。

之后 HBuilderX 便可以自动使用微信开发者工具打开此项目

5 如何连接安卓手机端

首先要用一条数据线来连接手机和电脑。

（这期间有一个小插曲：我当时用了一条三合一的数据线来连手机和电脑，但是在电脑上却发现不了这个移动磁盘，手机上却能选传入文件的选项，但是之后用一条一根线的数据线电脑端就可以显示出这个磁盘了）

数据线连成功后，我当时测试，它显示并没有检测到手机

这样是需要去下载一个手机助手的，随便一搜就一堆（如果电脑上有360的话那能直接用它们的）

下完之后，需要在手机的开发者选项中，打开USB调试模式，之后手机端也会提示是否同意这台电脑的USB连接，另外这个手机助手也会自动在手机端提示让安装它们的引擎应用。安装完后如下图：

上述操作之后，电脑端的手机助手就可以看到这样的界面

这样就连接成功了

之后再重启 HBuilderX，就看到，可以找到手机设备了

之后点击图中第一个，运行完成后，手机端就会提示安装 HBuilderX 的引擎应用，之后自动打开已经打包好的项目，成功在安卓端运行：