uni-app 快速入門

uni-app支持通過可視化界面，vue-cli命令行兩種方式快速創(chuàng)建項目。

1.通過HBuilderX可視化界面

可視化的方式比較簡單，HBuilderX內置相關環(huán)境，開箱即用，無需配置nodejs。

開始之前，開發(fā)者需先下載安裝如下工具：

• HBuilderX：官方IDE下載地址

HBuilderX是通用的前端開發(fā)工具，但為uni-app制成特別強化。

下載App開發(fā)版，可開箱即用；如下載標準版，在運行或發(fā)行uni-app時，會提示安裝uni-app插件，插件下載完成后方可使用。

如使用cli方式創(chuàng)建項目，可直接下載標準版，因為uni-app編譯插件被安裝到項目下了。

創(chuàng)建uni-app

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

選擇uni-app類型，輸入工程名，選擇模板，點擊創(chuàng)建，即可成功創(chuàng)建。

uni-app自帶的模板有。Hello uni-app，是官方的組件和API示例。還有一個重要模板是uni ui項目模板，日常開發(fā)推薦使用該模板，已內置大量常用組件。

運行uni-app

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

1. 真機運行：連接手機，開啟USB調試，進入hello-uniapp項目，點擊工具欄的運行->真機運行->選擇運行的設備，即可在該設備里面體驗uni-app。



如手機無法識別，請點擊菜單運行-運行到手機或模擬器-真機運行常見故障排查指南。注意當前開發(fā)App也需要安裝微信開發(fā)者工具。
2. 在微信開發(fā)者工具里運行：進入hello-uniapp項目，點擊工具欄的運行->運行到小程序模擬器->微信開發(fā)者工具，即可在微信開發(fā)者工具里面體驗uni-app。

注意：如果是第一次使用，需要先配置小程序ide的相關路徑，才能運行成功。如下圖，需在輸入框輸入微信開發(fā)者工具的安裝路徑。若HBuilderX不能正常啟動微信開發(fā)者工具，需要開發(fā)者手動啟動，然后將uni-app生成小程序工程的路徑復制到微信開發(fā)者工具里面，在HBuilderX里面開發(fā)，在微信開發(fā)者工具里面就可以看到實時的效果。uni-app或將項目編譯到根目錄的unpackage目錄。            
3. 在支付寶小程序開發(fā)者工具里運行：進入hello-uniapp項目，點擊工具欄的運行->運行到小程序模擬器->支付寶小程序開發(fā)者工具，即可在支付寶小程序開發(fā)者工具里面體驗uni -app。

4. 在百度開發(fā)者工具里運行：進入hello-uniapp項目，點擊工具欄的運行->運行到小程序模擬器->百度開發(fā)者工具，即可在百度開發(fā)者工具里面體驗uni-app。

5. 在字節(jié)跳動開發(fā)者工具里運行：進入hello-uniapp項目，點擊工具欄的運行->運行到小程序模擬器->字節(jié)跳動開發(fā)者工具，即可在字節(jié)跳動開發(fā)者工具里面體驗uni -app。

提示

• 如果是第一次使用，需要配置開發(fā)工具的相關路徑。請點擊工具欄的運行->運行到小程序模擬器->運行設置，配置相應的小程序開發(fā)者工具的路徑。
• 支付寶/百度/字節(jié)跳動小程序工具，不支持直接指定項目啟動并運行。因此開發(fā)工具啟動后，替換HBuilderX控制臺中提示的項目路徑，在相應的小程序開發(fā)者工具中打開。
• 如果自動啟動小程序開發(fā)工具失敗，請手動啟動小程序開發(fā)工具放入HBuilderX控制臺提示的項目路徑，打開項目。

運行的快捷鍵是Ctrl+r。HBuilderX還提供了快捷運行菜單，可以按數(shù)字快速選擇要運行的設備：

發(fā)布uni-app

打包為原生App（云端）

在HBuilderX工具欄，點擊發(fā)行，選擇原生app-云端打包，如下圖：

出現(xiàn)如下界面，點擊打包即可。

打包為原生App（離線）

uni-app支持離線打包，在HBuilderX生成離線打包資源，然后參考離線打包（或參考其他用戶寫的離線打包日記），即可進行離線打包。

在HBuilderX工具欄，點擊發(fā)行，選擇本地打包，如下圖，點擊立即生成離線打包資源。

發(fā)布為H5

1. 在manifest.json的可視化界面，進行如下配置（發(fā)布在網(wǎng)站根目錄可不配置應用基本路徑），此時發(fā)行網(wǎng)站路徑是www.xxx.com/h5，如：https ://uniapp.dcloud.io/h5 。



2. 在HBuilderX工具欄，單擊發(fā)行，選擇網(wǎng)站-H5手機版，如下圖，單擊即可生成H5的相關資源文件，保存于解壓目錄。

注意

• history模式發(fā)行需要后臺配置支持，詳見：歷史模式的預定配置
• 打包部署后，在服務器上開啟gzip可以進一步壓縮文件。具體的配置，可以參考網(wǎng)上的分享：https : //juejin.im/post/5af003286fb9a07aac24611b

發(fā)布為小程序

發(fā)布為微信小程序：

1. 申請微信小程序AppID，參考：微信教程。
2. 在HBuilderX中頂部菜單上依次單擊“發(fā)行” =>“小程序-微信”，輸入小程序名稱和appid單擊發(fā)行即可在unpackage/dist/build/mp-weixin生成微信小程序項目代碼。

3. 在微信小程序開發(fā)者工具中，導入生成的微信小程序項目，測試項目代碼運行正常后，點擊“上傳”按鈕，然后按照“提交審核” =>“發(fā)布”小程序標準流程，逐步操作即可，詳細查看：微信官方教程。

發(fā)布為百度小程序：

1. 入駐小程序并申請百度小程序AppID，參考：百度小程序教程。
2. 在HBuilderX中頂部菜單上依次單擊“發(fā)行” =>“小程序-百度”，輸入小程序名稱和appid單擊發(fā)行即可在/unpackage/dist/build/mp-baidu生成百度小程序項目代碼。
           
3. 在百度小程序開發(fā)者工具中，導入生成的百度小程序項目，測試項目代碼運行正常后，點擊“上傳”按鈕上傳代碼，然后在百度小程序的管理中心選擇創(chuàng)建的應用點擊訪問發(fā)布，選擇對應的版本然后提交審核。

  發(fā)布為支付寶小程序：

1. 入駐支付寶小程序，參考：支付寶小程序教程。
2. 在HBuilderX中頂部菜單上依次單擊“發(fā)行” =>“小程序-支付寶”，即可在/unpackage/dist/build/mp-alipay生成支付寶小程序項目代碼。

3. 在支付寶小程序開發(fā)者工具中，導入生成的支付寶小程序項目，測試項目代碼運行正常后，點擊“上傳”按鈕上傳代碼，在支付寶小程序后臺，選擇剛提交的版本點擊提交審核，詳見：支付寶小程序文檔。

發(fā)布為字節(jié)跳動小程序：

1. 入駐字節(jié)跳動小程序，參考：字節(jié)跳動小程序教程。
2. 在HBuilderX中頂部菜單上依次單擊“發(fā)行” =>“小程序-字節(jié)跳動”，即可在/unpackage/dist/build/mp-alipay生成字節(jié)跳動小程序項目代碼。

3. 在字節(jié)跳動小程序開發(fā)者工具中，導入生成的字節(jié)跳動小程序項目，測試項目代碼運行正常后，點擊“上傳”按鈕上傳代碼，在字節(jié)跳動小程序后臺，選擇剛提交的版本點擊提交審核，詳見：字節(jié)跳動小程序文檔。

發(fā)布為QQ小程序： 內容同上，不再重復。

發(fā)布的快捷鍵是Ctrl+u。同樣可拉下快速發(fā)布菜單并按數(shù)字鍵選擇。

2.通過vue-cli命令行

除了HBuilderX可視化界面，也可以使用cli腳手架，可以通過vue-cli創(chuàng)建uni-app項目。

環(huán)境安裝

整體安裝vue-cli

npm install -g @vue/cli

創(chuàng)建uni-app

使用正式版（對應HBuilderX最新正式版）

vue create -p dcloudio/uni-preset-vue my-project

使用alpha版（對應HBuilderX最新alpha版）

vue create -p dcloudio/uni-preset-vue#alpha my-alpha-project

此時，會提示選擇項目模板，初次體驗建議選擇hello uni-app項目模板，如下所示：

自定義模板

選擇自定義模板時，需要填寫uni-app模板地址，這個地址其實就是托管在云端的倉庫地址。以GitHub上，地址格式為userName/repositoryName，如dcloudio/uni-template-picture就是下載圖片模板。

更多支持的下載方式，請參考這個插件的說明：download-git-repo

運行并發(fā)布uni-app

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

可以自定義更多條件編譯平臺，插入釘釘小程序，參考package.json文檔。

其他：

• dev模式編譯出的各平臺代碼存放于根目錄下的/dist/dev/目錄，打開各平臺開發(fā)工具選擇對應的平臺目錄即可進行預覽（h5平臺不會在此目錄，存在于緩存中）；
• build模式編譯出的各平臺代碼存放于根目錄下的/dist/build/目錄，發(fā)布時選擇此目錄進行發(fā)布；
• dev和build模式的區(qū)別：dev模式有SourceMap可以方便的進行斷點調試；build模式進行代碼進行壓縮，體積更小更適合發(fā)布為正式版應用；進行環(huán)境判斷時，dev模式process.env.NODE_ENV的轉換開發(fā)，構建模式process.env.NODE_ENV的轉換生產。

使用cli創(chuàng)建項目和使用HBuilderX可視化界面創(chuàng)建項目有什么區(qū)別

編譯器的區(qū)別

• cli創(chuàng)建的項目，編譯器安裝在項目下。并且不會跟隨HBuilderX升級。如需升級編譯器，執(zhí)行npm update。
• HBuilderX可視化界面創(chuàng)建的項目，編譯器在HBuilderX的安裝目錄下的插件目錄，轉換為HBuilderX的升級會自動升級編譯器。
• 已經(jīng)使用了cli創(chuàng)建的項目，如果想繼續(xù)在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整個項目拖入HBuilderX，則編譯時走的是項目下的編譯器。如果是把src目錄拖入到HBuilderX中，則走的是HBuilderX安裝目錄下plugin目錄下的編譯器。
• cli在HBuilderX的插件管理界面安裝無效的情況下，那個只作用于HBuilderX創(chuàng)建的項目。

開發(fā)工具的區(qū)別

• cli創(chuàng)建的項目，內置了d.ts，與其他常規(guī)npm庫一樣，可在vscode，webstorm等支持d.ts的開發(fā)工具里正常開發(fā)并有語法提示。
• 使用HBuilderX創(chuàng)建的項目不帶d.ts，HBuilderX內置了uni-app語法提示庫。如需把HBuilderX創(chuàng)建的項目在其他編輯器打開并補充d.ts，可以在項目下先執(zhí)行npm init，然后npm i @types/uni-app -D，來補充d.ts。
• 但vscode等其他開發(fā)工具，在vue或Uni-app領域，開發(fā)效率比不過HBuilderX。詳見：https ://ask.dcloud.net.cn/article/35451
• 其他開發(fā)工具無法發(fā)布App，但可以發(fā)布H5，各種小程序。如需開發(fā)App，可以先在HBuilderX里運行起來，然后在其他編輯器里修改保存代碼，代碼修改后會自動同步到手機附件。
• 如果使用cli新建項目，那下載HBuilderX時只需下載10M的標準版即可。因為編譯器已經(jīng)安裝到項目下了。

注意：HBuilderX創(chuàng)建的項目，一樣可以使用npm，參考：https ://uniapp.dcloud.io/frame?id = npm%e6%94%af%e6%8c%81