如何搭建一个uni-app项目并运行

前言：

因项目需求，需要开发移动端项目，其中包含微信小程序和APP。而前端人员有限，所以需要一个人开发移动端，为了更好的提供用户体验，且有vue和微信小程序开发经验，所以准备上手用uni-app，咨询了小伙伴们，听说上手很快，而之前也只是了解阶段，所以，这次准备用这个项目来试试。

前期准备工作：

1.下载HBuildX   HBuildX下载地址

微信开发者工具   微信开发者工具下载地址

2.安装IDE，并且IDE的安装不能放在如Program Files (x86)中带有特殊符号的目录下

3.安装微信开发者工具，先授权登录，然后打开设置，进入安全设置，开启服务端口。如下图所示

        

正式开工，创建uni-app项目：

1.打开IDE，点击文件---》新建---》项目---》uni-app---》填写项目名称、存放路径---》默认模板---》创建

2.创建好的项目路径如下图，主要的业务界面放在pages里

manifest.json是用来配置小程序appid，AppSDK等的文件

3.在pages中的index.vue文件中写入如下代码，则可在小程序和app端分别展示不同的数据

4.点击导航栏的运行，或者ctrl+r打开运行，选择微信开发者工具，运行小程序，下图是运行界面

点击运行---》运行到手机或模拟器，下图是运行界面

以上证明代码可以正常执行，并且能个实现小程序和APP展示不同的数据

5.发行

A.打包App，选择发行---》App云打包---》选择DCloud证书(或者选择自有证书，输入相应数据)

B.微信小程序，打开manifest.json文件---》选择微信小程序配置---》输入微信小程序AppID---》点击控制台右上角重新运行按钮---》然后就可以在微信开发者工具上面进行小程序的预览和发布

总结

大概走了一遍流程，uni-app上手蛮快的，操作起来也比较简单，后续可以写几个demo测试一下，或者选用uni-app的模板直接运行浏览查看