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

最新推荐文章于 2024-09-23 21:20:18 发布

超周到的程序员

最新推荐文章于 2024-09-23 21:20:18 发布

阅读量2.5k

点赞数 1

文章标签：小程序 app

本文链接：https://blog.csdn.net/m0_46360532/article/details/119666326

版权

本文介绍了uni-app的开发框架特性，如何通过HBuilderX和vue-cli创建项目，详细步骤指导如何连接微信开发者工具进行小程序开发，并提供了连接安卓手机进行真机测试的方法，包括解决数据线连接问题和使用手机助手设置USB调试。

摘要由CSDN通过智能技术生成

文章目录

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连接，另外这个手机助手也会自动在手机端提示让安装它们的引擎应用。安装完后如下图：
请添加图片描述