五十四、快速上手uniapp

@Author：Runsen

uniapp可以说是前端必学的东西。uniapp项目可以一套代码运行到多端(APP端(安卓和ios)、各种小程序(微信、支付宝、头条、百度、QQ)、H5端)。

详细介绍请看官网：https://uniapp.dcloud.io/

先要下载安装编辑器Huilder X.直接从官网给的地址下载：https://www.dcloud.io/hbuilderx.html

大多数操作系统都是WIndows ，我们直接安装正式版下边的Windows版的APP开发版。

安装成功之后打开Hbuilder X,我们点击依次左上角的文件-新建-项目，然后就会出现如下图所示：

如果你想要创建一个属于自己的项目，就可以通过新建的方式，可以点击开发工具中心区域的新建项目，或者导航菜单的文件-新建项目，进行新建，选择uniapp，若需要使用云开发，直接勾选左下角的阿里云或腾讯云即可。

之后HX就会下载相应的模板，然后创建好之后就成这样了：

uni-app的运行

第一种是在各种浏览器上运行，在HBuilder X中打开要运行的项目，点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，就可以在浏览器里面体验uni-app 的 H5

访问：http://localhost:8080/

uniapp本身就是一个vue项目。

第二种是真机运行，连接手机，开启USB调试，进入要运行的项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，就可以在手机里面体验uni-app开发的项目了。

第三种是在微信开发者工具里运行。这也是在开发项目时的运行环境，在项目还没有正式上线之前，都可以在微信开发者工具里面运行。点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具。选择要运行的项目。

这里需要注意的是：需要在微信开发者中的安全设置开启服务端口

这里才能在在微信开发者工具里运行uniapp项目。

第四种就是在支付宝小程序开发者工具里运行；

第五种是在百度开发者工具里运行；

第六种是在字节跳动开发者工具里运行。都是一样的道理。

本期就分享到这里咯，希望对你有所帮助。下期Runsen将加大力度学习uniapp。