uni-app 快速入門

1.透過HBuilderX視覺化介面

視覺化的方式比較簡單，HBuilderX內建相關環境，開箱即用，無需配置nodejs。

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

     HBuilderX

HBuilderX是通用的前端開發工具，但為uni-app製成特別強化。

下載App開發版，可開箱即用；如下載標準版，在執行或發行uni-app時，會提示安裝uni-app外掛，外掛下載完成後方可使用。

如使用cli方式建立專案，可直接下載標準版，因為uni-app編譯外掛被安裝到專案下了。

建立uni-app

在點選工具欄裡的檔案->新建->專案：

選擇uni-app型別，輸入工程名，選擇模板，點選建立，即可成功建立。

uni-app自帶的模板有。Hello uni-app，是官方的元件和API示例。還有一個重要模板是uni ui專案模板，日常開發推薦使用該模板，已內建大量常用元件。

執行uni-app

1. 瀏覽器執行：進入hello-uniapp專案，點選工具欄的執行->執行到瀏覽器->選擇瀏覽器，即可在瀏覽器裡面體驗uni-app的H5版。

1. 真機執行：連線手機，開啟USB除錯，進入hello-uniapp專案，點選工具欄的執行->真機執行->選擇執行的裝置，即可在該裝置裡面體驗uni-app。

    如手機無法識別，請點選選單執行-執行到手機或模擬器-真機執行常見故障排查指南。注意當前開發App也需要安裝微信開發者工具。

    2. 在微信開發者工具裡執行：進入hello-uniapp專案，點選工具欄的執行->執行到小程式模擬器->微信開發者工具，即可在微信開發者工具裡面體驗uni-app。

     注意：如果是第一次使用，需要先配置小程式ide的相關路徑，才能執行成功。  

如下圖，需在輸入框輸入微信開發者工具的安裝路徑。若HBuilderX不能正常啟動微信開發者工具，需要開發者手動啟動，然後將uni-app生成小程式工程的路徑複製到微信開發者工具裡面，在HBuilderX裡面開發，在微信開發者工具裡面就可以看到實時的效果。uni-app或將專案編譯到根目錄的unpackage目錄。

    3. 在支付寶小程式開發者工具裡執行：進入hello-uniapp專案，點選工具欄的執行->執行到小程式模擬器->支付寶小程式開發者工具，即可在支付寶小程式開發者工具裡面體驗uni -app。  

    4.在百度開發者工具裡執行：進入hello-uniapp專案，點選工具欄的執行->執行到小程式模擬器->百度開發者工具，即可在百度開發者工具裡面體驗uni-app。

    5.在位元組跳動開發者工具裡執行：進入hello-uniapp專案，點選工具欄的執行->執行到小程式模擬器->位元組跳動開發者工具，即可在位元組跳動開發者工具裡面體驗uni -app。

提示

• 如果是第一次使用，需要配置開發工具的相關路徑。請點選工具欄的執行->執行到小程式模擬器->執行設定，配置相應的小程式開發者工具的路徑。
• 支付寶/百度/位元組跳動小程式工具，不支援直接指定專案啟動並執行。因此開發工具啟動後，替換HBuilderX控制檯中提示的專案路徑，在相應的小程式開發者工具中開啟。
• 如果自動啟動小程式開發工具失敗，請手動啟動小程式開發工具放入HBuilderX控制檯提示的專案路徑，開啟專案。

執行的快捷鍵是Ctrl+r。HBuilderX還提供了快捷執行選單，可以按數字快速選擇要執行的裝置：

釋出uni-app

打包為原生App（雲端）

在HBuilderX工具欄，點選發行，選擇原生app-雲端打包，如下圖：

出現如下介面，點選打包即可。

打包為原生App（離線）

uni-app支援離線打包，在HBuilderX生成離線打包資源，然後參考 （或參考其他使用者寫的 ），即可進行離線打包。

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

釋出為H5

1. 在manifest.json的視覺化介面，進行如下配置（釋出在網站根目錄可不配置應用基本路徑），此時發行網站路徑是，如：  ://uniapp.dcloud.io/h5 。

   
   

2.     2. 在HBuilderX工具欄，單擊發行，選擇網站-H5手機版，如下圖，單擊即可生成H5的相關資原始檔，儲存於解壓目錄。

注意

• history模式發行需要後臺配置支援.
• 打包部署後，在伺服器上開啟gzip可以進一步壓縮檔案。具體的配置，可以參考網上的分享：  : 

釋出為小程式

釋出為微信小程式：

1. 申請微信小程式AppID，參考：微信教程。

2. 在HBuilderX中頂部選單上依次單擊“發行” =>“小程式-微信”，輸入小程式名稱和appid單擊發行即可在unpackage/dist/build/mp-weixin生成微信小程式專案程式碼。

   
   

3. 在微信小程式開發者工具中，匯入生成的微信小程式專案，測試專案程式碼執行正常後，點選“上傳”按鈕，然後按照“提交稽核” =>“釋出”小程式標準流程，逐步操作即可，詳細檢視：微信官方教程。
   

釋出為百度小程式：

1. 入駐小程式並申請百度小程式AppID，參考：百度小程式教程。

2. 在HBuilderX中頂部選單上依次單擊“發行” =>“小程式-百度”，輸入小程式名稱和appid單擊發行即可在/unpackage/dist/build/mp-baidu生成百度小程式專案程式碼。

   
   

3. 在百度小程式開發者工具中，匯入生成的百度小程式專案，測試專案程式碼執行正常後，點選“上傳”按鈕上傳程式碼，然後在百度小程式的 管理中心 選擇建立的應用點選訪問釋出，選擇對應的版本然後提交稽核。

 釋出為支付寶小程式：

1. 入駐支付寶小程式，參考：支付寶小程式教程。

2. 在HBuilderX中頂部選單上依次單擊“發行” =>“小程式-支付寶”，即可在/unpackage/dist/build/mp-alipay生成支付寶小程式專案程式碼。

   
   

3. 在支付寶小程式開發者工具中，匯入生成的支付寶小程式專案，測試專案程式碼執行正常後，點選“上傳”按鈕上傳程式碼，在支付寶小程式後臺，選擇剛提交的版本點選提交稽核，詳見：支付寶小程式文件。

釋出為位元組跳動小程式：

1. 入駐位元組跳動小程式，參考：位元組跳動小程式教程。

2. 在HBuilderX中頂部選單上依次單擊“發行” =>“小程式-位元組跳動”，即可在/unpackage/dist/build/mp-alipay生成位元組跳動小程式專案程式碼。

   
   

3. 在位元組跳動小程式開發者工具中，匯入生成的位元組跳動小程式專案，測試專案程式碼執行正常後，點選“上傳”按鈕上傳程式碼，在位元組跳動小程式後臺，選擇剛提交的版本點選提交稽核，詳見：位元組跳動小程式文件。

釋出為QQ小程式： 內容同上，不再重複。

釋出的快捷鍵是Ctrl+u。同樣可拉下快速釋出選單並按數字鍵選擇。

2.透過vue-cli命令列

除了HBuilderX視覺化介面，也可以使用cli腳手架，可以透過vue-cli建立uni-app專案。

環境安裝

整體安裝vue-cli

npm install -g @vue/cli

建立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

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

%PLATFORM% 可取值如下：

值	平臺
5天	H5
支付寶	支付寶小程式
mp-百度	百度小程式
mp-微信	微信小程式
頭條	位元組跳動小程式
mp-qq	qq小程式

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

其他：

• dev模式編譯出的各平臺程式碼存放於根目錄下的/dist/dev/目錄，開啟各平臺開發工具選擇對應的平臺目錄即可進行預覽（h5平臺不會在此目錄，存在於快取中）；
• build模式編譯出的各平臺程式碼存放於根目錄下的/dist/build/目錄，釋出時選擇此目錄進行釋出；
• dev和build模式的區別：dev模式有SourceMap可以方便的進行斷點除錯；build模式進行程式碼進行壓縮，體積更小更適合釋出為正式版應用；進行環境判斷時，dev模式process.env.NODE_ENV的轉換開發，構建模式process.env.NODE_ENV的轉換生產。

使用cli建立專案和使用HBuilderX視覺化介面建立專案有什麼區別

編譯器的區別

• cli建立的專案，編譯器安裝在專案下。並且不會跟隨HBuilderX升級。如需升級編譯器，執行npm update。
• HBuilderX視覺化介面建立的專案，編譯器在HBuilderX的安裝目錄下的外掛目錄，轉換為HBuilderX的升級會自動升級編譯器。
• 已經使用了cli建立的專案，如果想繼續在HBuilderX裡使用，可以把工程拖到HBuilderX中。注意如果是把整個專案拖入HBuilderX，則編譯時走的是專案下的編譯器。如果是把src目錄拖入到HBuilderX中，則走的是HBuilderX安裝目錄下plugin目錄下的編譯器。
• cli在HBuilderX的外掛管理介面安裝無效的情況下，那個只作用於HBuilderX建立的專案。

開發工具的區別

• cli建立的專案，內建了d.ts，與其他常規npm庫一樣，可在vscode，webstorm等支援d.ts的開發工具里正常開發並有語法提示。
• 使用HBuilderX建立的專案不帶d.ts，HBuilderX內建了uni-app語法提示庫。如需把HBuilderX建立的專案在其他編輯器開啟並補充d.ts，可以在專案下先執行npm init，然後npm i @types/uni-app -D，來補充d.ts。
• 但vscode等其他開發工具，在vue或Uni-app領域，開發效率比不過HBuilderX。
• 其他開發工具無法釋出App，但可以釋出H5，各種小程式。如需開發App，可以先在HBuilderX裡執行起來，然後在其他編輯器裡修改儲存程式碼，程式碼修改後會自動同步到手機附件。
• 如果使用cli新建專案，那下載HBuilderX時只需下載10M的標準版即可。因為編譯器已經安裝到專案下了。

注意：HBuilderX建立的專案，一樣可以使用npm.