Uni-App項目搭建以及準備工做

準備工做

Uni-App項目開發，須要「定製化IDE」，也就是「HBuilderX」工具，主要是由於模擬運行調試一塊，其餘IDE不具有，其餘功能和VS code、Submit Text 基本一致。

因此咱們第一步咱們下載工具：HBuilderX

下載App開發版，可開箱即用；以下載標準版，在運行或發行uni-app時，會提示安裝uni-app插件，插件下載完成後方可以使用。如使用cli方式建立項目，可直接下載標準版，由於uni-app編譯插件被安裝到項目下了。

若是須要開發小程序，固然就要成爲小程序端的開發者，因此第二步就是註冊成爲小程序端的開發者，擁有appid。

第三步，若是開發ios app，還須要去申請證書，方便後面上架App Store作準備。

建立 Uni-App

在點擊工具欄裏的文件 -> 新建 -> 項目：

選擇uni-app，輸入工程名，而且你能夠從模板裏的 你喜歡的模板 便可體驗官方示例。最後點擊建立，便可成功建立 uni-app 項目。

官方模板地址：DCloud 插件市場

建立完成後目錄結構以下

目錄結構介紹

注意：

static 目錄下的 js 文件不會被編譯，若是裏面有 es6 的代碼，不通過轉換直接運行，在手機設備上會報錯。

css、less/scss 等資源一樣不要放在 static 目錄下，建議這些公用的資源放在 common 目錄下。

HbuilderX 1.9.0+ 支持在根目錄建立 ext.json sitemap.json 文件。

運行uni-app項目

瀏覽器運行：進入項目，點擊工具欄的運行 -> 運行到瀏覽器 -> 選擇瀏覽器，便可在瀏覽器裏面體驗uni-app 的 H5 版。

同理，還能夠運行到手機模擬器，小程序模擬器等。

運行後，目錄會多一個，這裏就是各端編譯後的文件，以下圖：app-plus(ios端)，mp-toutiao(頭條小程序端)，mp-weixin(微信小程序端)

注意： 如何你「微信小程序模擬」，須要打開微信開發工具，而後 設置 -> 安全 -> 服務端口 -> 開啓。不然鏈接接不上。

頭條小程序，先模擬運行，而後打開頭條小程序開發工具，導入項目，選擇上圖的mu-toutiao目錄，後面更改文件，就好自動更新編譯過去了。

總結

項目搭建是很是快速的，和vue腳手架同樣便利。同時，須要注意上面標註的"注意"事項，這樣搭建，以至後面開發會更簡單、輕鬆一些。

最後，謝謝你們支持。

喜歡的能夠關注我哦!

原文地址：www.javanx.cn/20190826/un…