从零搭建一个uni-app项目

第一步：准备好HbuilderX工具哦。

uni-app官网有相关的介绍，另外也可以参考我的那篇HbuilderX安装的文章。

要下载app开发版本的HbuilderX工具哦。

第二步：新建一个uni-app的项目，选择空项目。

当然，如果你是新手的话，可以去新建uni-ui项目或者Hello uni-app项目看一看。

新建项目

uni-app的默认模板项目里面文件夹结构是这样的：

默认文件夹

在项目的过程中，我目前用到最多的文件夹有：api、common、components。

其中components文件夹是用来安装组件，放组件使用的。

新建的文件夹

在api文件夹下，新建一个api.js的文件，用来存放将来要调用的接口路径。

在common文件夹下，你可以新建 util.js用来存放你常用的方法，新建request.js去存放你封装好的request方法。

在main.js中，可以去调用你的引入使用的js和配置。这个跟vue类似。

四、运行项目

打开你项目的文件夹的任何一个文件，然后点击HbuilderX上面的运行，运行到小程序模拟器即可运行， 注意，使用小程序模拟器运行，需要安装微信开发者工具。

你也可以h5运行到浏览器，也可以查看。如果您的项目是小程序项目最好使用小程序开发者工具去运行，这样能更好的看到最后的效果。

小程序在某些地方，和h5端表现不太一致，需要做样式上的调整，这一点可以去官网搜索。

五、发布项目

当您已经被加入到小程序的开发者中，拥有开发者权限之后，即可配置你的appID，然后点击发行--》小程序-微信。然后会在微信开发者工具中运行起来你的项目，点击上传即可。

配置AppID

作者笔：

在最后，希望各位朋友可以多看看uni-app的官网，最好从头到尾看一遍。然后熟悉它的api特性，了解它的缓存弹框各种工具组件的使用，不懂的时候就去官网找，都可以找到哦。

快速开发小程序，并且支持各种小程序端和app端、H5等，uni-app一定是你不会后悔的选择。