uni-app 高效開發技巧

使用程式碼塊直接建立元件模板

為提升開發效率，HBuilderX將 uni-app 常用程式碼封裝成了以 u 開頭的程式碼塊，如在 template 標籤內輸入 ulist 回車，會自動生成如下程式碼：

<view class="uni-list">
    <view class="uni-list-cell">
        <view class="uni-list-cell-navigate uni-navigate-right" v-for="(item,index) in list" :key="index">
            {{item.value}}
        </view>
    </view>
</view>

程式碼塊分為Tag程式碼塊、JS程式碼塊，如在 script 標籤內輸入 uShowToast 回車，會自動生成如下程式碼：

uni.showToast({   
    title: '',
    mask: false
    duration: 1500
});

uni-app已支援程式碼塊見下方列表。

Tag程式碼塊

• uButton
• uCheckbox
• uGrid：宮格，需引用uni ui
• uList：列表，需引用uni ui
• uListMedia
• uRadio
• uSwiper
• ......

幾乎各種元件不管是內建元件還是uni ui的元件，均已封裝為程式碼塊，在HBuilderX的vue程式碼template區域中敲u，程式碼助手會提示所有可見列表。也可在HBuilderX選單工具-程式碼塊設定-vue程式碼塊的左側列表查閱所有。

除元件外，其他常用程式碼塊包括：

• viewfor：生成一段帶有v-for迴圈結構的檢視程式碼塊
• vbase：生成一段基本的vue程式碼結構

JS程式碼塊

uni api程式碼塊

• uRequest
• uGetLocation
• uShowToast
• uShowLoading
• uHideLoading
• uShowModal
• uShowActionSheet
• uNavigateTo
• uNavigateBack
• uRedirectTo
• uStartPullDownRefresh
• uStopPullDownRefresh
• uLogin
• uShare
• uPay
• ......

幾乎各種常用js api，均已封裝為程式碼塊，在HBuilderX的js程式碼中敲u，程式碼助手會提示所有可見列表。也可在HBuilderX選單工具-程式碼塊設定-js程式碼塊的左側列表查閱所有。

vue js程式碼塊

• vImport：匯入檔案
• ed：export default
• vData：輸出 data(){return{}}
• vMethod：輸出 methods:{}
• vComponents：輸出 components: {}

其他常用js程式碼塊

• iff：簡單if
• forr：for迴圈結構體
• fori：for迴圈結構體幷包含i
• funn：函式
• funa：匿名函式
• rt：return true
• clog：輸出："console.log()"
• clogvar：增強的日誌輸出，可同時把變數的名字列印出來
• varcw：輸出："var currentWebview = this.$mp.page.$getAppWebview()"
• ifios：iOS的平臺判斷
• ifAndroid：Android的平臺判斷

預置程式碼塊不滿足需求的話，可以自定義程式碼塊，教程參考

使用 Chrome 除錯 H5

進入 uni-app 專案，點選工具欄的執行 -> 執行到瀏覽器 -> 選擇 Chrome，即可將 uni-app執行到 瀏覽器，可參考 執行uni-app，執行到瀏覽器後，就能和普通 web 專案一樣進行預覽和除錯了。

點 Chrome 控制檯的 Sources 欄，可以給 js 打斷點除錯。

在 Page 下找到 webpack 裡的工程目錄，可直接找到對應的vue頁面進行斷點除錯；或按 Ctrl+P搜檔名，進入頁面除錯；也可點選控制檯的 log 資訊，進入對應的頁面進行除錯。

點選HBuilderX的右上角的預覽按鈕，可以在內建瀏覽器裡開啟H5執行結果，也可以點右鍵開啟控制檯除錯，方法同上。

使用各家小程式開發工具除錯

uni-app 執行到微信web開發者工具等小程式開發工具裡，可在這些工具的控制檯檢視 console 資訊，網路請求等資訊等。

頁面樣式除錯和一般的web專案一樣，透過除錯的箭頭選中元素即可檢視相應的節點和樣式，如下圖：

除錯 js 時需要切換到 Sources 欄，根據sourcemap，找到 webpack 里正確的目錄，選中想要除錯的那個頁面的js，進行除錯（如果js程式碼是壓縮過的，點選右下角的{}可格式化程式碼），如下圖：

關於 App 的除錯debug

常規開發裡，在HBuilderX的執行選單裡執行App，手機端的錯誤或console.log日誌資訊會直接列印到控制檯。

如果需要更多功能，比如審查元素、打斷點debug，則需要啟動除錯模式。自 HBuilderX 2.0.3+ 版本起開始支援 App 端的除錯。

開啟除錯視窗

在 HBuilderX 中，正確執行專案： 執行 --> 執行到手機或模擬器 --> 選擇裝置，專案啟動後，在下方的控制檯選擇 debug 圖示。

正確開啟除錯視窗後，顯示如下：

Elements

根據上一步，啟動完成debug視窗後，可以看到Elements。Elements 主要顯示當前頁面的組織結構，目前Elements只支援nvue。 

console.log打日誌

console.log是我們日常開發最常用的除錯方法，HBuilderX中當然也不能少。

• App端提供真機執行的console.log日誌輸出，執行到真機或模擬器時，不用點debug按鈕，操作手機，會在HBuilderX的控制檯直接輸出日誌。
• 如果是比較複雜的邏輯，那就推薦使用除錯工具中的console了。根據上一步，啟動完成debug視窗後，執行console.log方法就可以看到列印的內容了。

debug視窗中看console.log的方法如下圖：

除錯頁面

在除錯視窗控制檯的 Sources （圖中指示1） 欄，可以給 js 打斷點除錯。

在 uniapp（圖中指示2）下找到需要除錯的頁面，單擊開啟 ，在右側可以看到我們需要除錯的內容（圖中指示3）。在需要除錯的程式碼行號的位置，點選打上斷點（圖中指示4）。

之後，在裝置上進行操作，進入斷點位置，可以方便我們跟蹤除錯程式碼。

同步斷點到偵錯程式

在控制檯眾多程式碼中尋找要除錯的程式碼是比較麻煩的一件事，HBuilderX的除錯還提供一個便利的功能，可直接在編輯器中打斷點，斷點會自動同步到除錯工具中。

操作步驟：在HBuilderX編輯器中對目標行的行號處點右鍵，在右鍵選單中選擇“同步斷點到偵錯程式”，然後除錯控制檯會自動開啟對應的程式碼並在指定行處標記斷點。

Tip

• debug僅支援自定義元件模式。如果是非自定義元件模式，請在manifest裡配置選為自定義元件模式。非自定義元件模式即將停止支援，詳見
• vue 和 nvue 頁面均支援斷點除錯
• 目前僅支援 nvue 頁面審查元素，vue 頁面暫不支援，以及 Android 平臺的 nvue 審查元素暫不支援檢視 style
• App端提供真機執行的console.log日誌輸出，執行到真機或模擬器時，不用點debug按鈕，執行手機App，會在HBuilderX的控制檯直接輸出日誌。
• 如果是除錯App的介面和常規API，推薦編譯到H5端，點HBuilderX右上角的預覽，在內建瀏覽器裡調Dom，儲存後立即看到結果，除錯更方便。並且H5端也支援titleNView的各種複雜設定。唯一要注意的就是css相容性，使用太新的css在pc上預覽可能正常，但低端Android上異常，具體可查詢caniuse等網站。
• 常用的開發模式就是pc上使用內建瀏覽器預覽調dom，執行到真機上看console.log。如果是很複雜的問題才使用debug。
• vue頁面也可以在微信開發者工具裡除錯，除了plus API，其他是一樣的，微信開發者工具的檢視Dom和網路和儲存等除錯工具相對而言更完善些。 注意：即使不釋出微信小程式、只發布App，也需要安裝微信開發者工具。
• uni-app的App端沒有App那種webkit remote debug，因為uni-app的js不是執行在webview裡，而是獨立的jscore裡。
• 部分manifest配置，如三方sdk配置，需要打包後生效的，可以打包一個自定義執行基座。打包自定義基座後執行這個自定義基座，同樣可以真機執行和debug。打包正式包將無法真機執行和debug。

持續整合

很多公司的開發人員提交程式碼後，需要自動打包或持續整合。

此時需要在伺服器安裝uni-app的cli版本來發布小程式和H5版。

HBuilderX版與cli版互轉指南參考：

如果是釋出App，則需要使用離線打包，配置原生環境，來實現持續整合。（目前HBuilderX還不支援命令列生成wgt資源和雲打包，歡迎到需求牆投票：https://dev.dcloud.net.cn/wish/）