第一步：準備好HbuilderX工具哦。

uni-app官網(wǎng)有相關(guān)的介紹，另外也可以參考我的那篇HbuilderX安裝的文章。

要下載app開發(fā)版本的HbuilderX工具哦。

第二步：新建一個uni-app的項目，選擇空項目。

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

新建項目

uni-app的默認模板項目里面文件夾結(jié)構(gòu)是這樣的：

默認文件夾

在項目的過程中，我目前用到最多的文件夾有：api、common、components。

其中components文件夾是用來安裝組件，放組件使用的。

新建的文件夾

在api文件夾下，新建一個api.js的文件，用來存放將來要調(diào)用的接口路徑。

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

在main.js中，可以去調(diào)用你的引入使用的js和配置。這個跟vue類似。

四、運行項目

打開你項目的文件夾的任何一個文件，然后點擊HbuilderX上面的運行，運行到小程序模擬器即可運行， 注意，使用小程序模擬器運行，需要安裝微信開發(fā)者工具。

你也可以h5運行到瀏覽器，也可以查看。如果您的項目是小程序項目最好使用小程序開發(fā)者工具去運行，這樣能更好的看到最后的效果。

小程序在某些地方，和h5端表現(xiàn)不太一致，需要做樣式上的調(diào)整，這一點可以去官網(wǎng)搜索。

五、發(fā)布項目

當您已經(jīng)被加入到小程序的開發(fā)者中，擁有開發(fā)者權(quán)限之后，即可配置你的appID，然后點擊發(fā)行--》小程序-微信。然后會在微信開發(fā)者工具中運行起來你的項目，點擊上傳即可。

配置AppID

作者筆：

在最后，希望各位朋友可以多看看uni-app的官網(wǎng)，最好從頭到尾看一遍。然后熟悉它的api特性，了解它的緩存彈框各種工具組件的使用，不懂的時候就去官網(wǎng)找，都可以找到哦。

快速開發(fā)小程序，并且支持各種小程序端和app端、H5等，uni-app一定是你不會后悔的選擇。