uni-app 跨平台 零基础开发 - 01（环境搭建及多端运行）

作为前端开发者而言， 实现混合app开发， 一般使用的技术就 react-native（依赖react） && nui-app（依赖vue）

什么是nui-app？

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

简单来说，uni-app可以一套代码实现多端兼容，如果你的应用不复杂，又需要节约成本，那么uni-app是一个很好的选择，在使用uni-app的时候，它属于vue和wx的共同体，如果你熟悉vue和wx，那么学习成本几乎为0。 官网地址https://uniapp.dcloud.io/README

如何学习nui-app？

最简单的方式就是： 1，先花几个小时过一遍官网介绍部分的文档，2，在b站等视频网站，找相关教程观看，跟着写一遍， 3，自己找点项目自己尝试着开发一下，  话不多说，跟着我一起学习吧！！

环境安装及搭建

先下载安装HBuilder X（对uni-app做了特别的强化，自己可以体验一下）， 官网地址https://www.dcloud.io/hbuilderx.html， 

进去下载即可， 下载完傻瓜式安装

项目创建及运行

本节以H5，wx小程序开发工具，安卓app真机为例

创建新项目： 

打开hbuilderx -> 文件 -> 新建 -> 项目

按上图进行选择

运行项目

1，H5运行

选择运行 -> 运行到浏览器 -> 选择谷歌浏览器或其他浏览器即可（推荐谷歌）

2, 微信小程序运行

下载微信小程序开发工具  ，官网地址 https://mp.weixin.qq.com/  ， 注册->找到对应的下载即可

如果是第一次运行到小程序,那么需要进行小程序路径配置

找到你小程序安装的位置， 把路径粘贴过来即可

还需要进行小程序安全设置 

设置->安全设置->开启

3，运行到安卓真机

第一步 连接手机（usb连接即可），开启USB调试（手机有个开发者选项->开启->开启下方的usb调试），进入hello-uniapp项目，点击工具栏的运行 -> 真机运行 -> 选择运行的设备，即可在该设备里面体验uni-app。

这里有个问题，就是有可能hbuilderx 检测不到你的手机，解决方案： 

1，找到HBuilderX安装目录下的D:\Archive\HBuilderX\plugins\launcher\tools\adbs

2，然后把1.0.31目录下的文件拷贝到D:\Archive\HBuilderX\plugins\launcher\tools\adbs，直接覆盖即可。

3，重启软件，重新运行项目

千山万水总是情，点个双击行不行