admin管理员组

文章数量:1585968

文章目录

    • 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 的引擎应用,之后自动打开已经打包好的项目,成功在安卓端运行:

本文标签: 开发者工具手机Uniapp