使用代碼塊直接創(chuàng)建組件模板

為提升開(kāi)發(fā)效率，HBuilderX將 uni-app 常用代碼封裝成了以 u 開(kāi)頭的代碼塊，如在 template 標(biāo)簽內(nèi)輸入 ulist 回車，會(huì)自動(dòng)生成如下代碼：

<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 標(biāo)簽內(nèi)輸入 uShowToast 回車，會(huì)自動(dòng)生成如下代碼：

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

uni-app已支持代碼塊見(jiàn)下方列表。

Tag代碼塊

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

幾乎各種組件不管是內(nèi)置組件還是uni ui的組件，均已封裝為代碼塊，在HBuilderX的vue代碼template區(qū)域中敲u，代碼助手會(huì)提示所有可見(jiàn)列表。也可在HBuilderX菜單工具-代碼塊設(shè)置-vue代碼塊的左側(cè)列表查閱所有。

除組件外，其他常用代碼塊包括：

• viewfor：生成一段帶有v-for循環(huán)結(jié)構(gòu)的視圖代碼塊
• vbase：生成一段基本的vue代碼結(jié)構(gòu)

JS代碼塊

uni api代碼塊

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

幾乎各種常用js api，均已封裝為代碼塊，在HBuilderX的js代碼中敲u，代碼助手會(huì)提示所有可見(jiàn)列表。也可在HBuilderX菜單工具-代碼塊設(shè)置-js代碼塊的左側(cè)列表查閱所有。

vue js代碼塊

• vImport：導(dǎo)入文件
• ed：export default
• vData：輸出 data(){return{}}
• vMethod：輸出 methods:{}
• vComponents：輸出 components: {}

其他常用js代碼塊

• iff：簡(jiǎn)單if
• forr：for循環(huán)結(jié)構(gòu)體
• fori：for循環(huán)結(jié)構(gòu)體并包含i
• funn：函數(shù)
• funa：匿名函數(shù)
• rt：return true
• clog：輸出："console.log()"
• clogvar：增強(qiáng)的日志輸出，可同時(shí)把變量的名字打印出來(lái)
• varcw：輸出："var currentWebview = this.$mp.page.$getAppWebview()"
• ifios：iOS的平臺(tái)判斷
• ifAndroid：Android的平臺(tái)判斷

預(yù)置代碼塊不滿足需求的話，可以自定義代碼塊，教程參考https://ask.dcloud.net.cn/article/35924

使用 Chrome 調(diào)試 H5

進(jìn)入 uni-app 項(xiàng)目，點(diǎn)擊工具欄的運(yùn)行 -> 運(yùn)行到瀏覽器 -> 選擇 Chrome，即可將 uni-app運(yùn)行到 瀏覽器，可參考 運(yùn)行uni-app，運(yùn)行到瀏覽器后，就能和普通 web 項(xiàng)目一樣進(jìn)行預(yù)覽和調(diào)試了。

點(diǎn) Chrome 控制臺(tái)的 Sources 欄，可以給 js 打斷點(diǎn)調(diào)試。

在 Page 下找到 webpack 里的工程目錄，可直接找到對(duì)應(yīng)的vue頁(yè)面進(jìn)行斷點(diǎn)調(diào)試；或按 Ctrl+P搜文件名，進(jìn)入頁(yè)面調(diào)試；也可點(diǎn)擊控制臺(tái)的 log 信息，進(jìn)入對(duì)應(yīng)的頁(yè)面進(jìn)行調(diào)試。

點(diǎn)擊HBuilderX的右上角的預(yù)覽按鈕，可以在內(nèi)置瀏覽器里打開(kāi)H5運(yùn)行結(jié)果，也可以點(diǎn)右鍵打開(kāi)控制臺(tái)調(diào)試，方法同上。

使用各家小程序開(kāi)發(fā)工具調(diào)試

uni-app 運(yùn)行到微信web開(kāi)發(fā)者工具等小程序開(kāi)發(fā)工具里，可在這些工具的控制臺(tái)查看 console 信息，網(wǎng)絡(luò)請(qǐng)求等信息等。

頁(yè)面樣式調(diào)試和一般的web項(xiàng)目一樣，通過(guò)調(diào)試的箭頭選中元素即可查看相應(yīng)的節(jié)點(diǎn)和樣式，如下圖：

調(diào)試 js 時(shí)需要切換到 Sources 欄，根據(jù)sourcemap，找到 webpack 里正確的目錄，選中想要調(diào)試的那個(gè)頁(yè)面的js，進(jìn)行調(diào)試（如果js代碼是壓縮過(guò)的，點(diǎn)擊右下角的{}可格式化代碼），如下圖：

關(guān)于 App 的調(diào)試debug

常規(guī)開(kāi)發(fā)里，在HBuilderX的運(yùn)行菜單里運(yùn)行App，手機(jī)端的錯(cuò)誤或console.log日志信息會(huì)直接打印到控制臺(tái)。

如果需要更多功能，比如審查元素、打斷點(diǎn)debug，則需要啟動(dòng)調(diào)試模式。自 HBuilderX 2.0.3+ 版本起開(kāi)始支持 App 端的調(diào)試。

打開(kāi)調(diào)試窗口

在 HBuilderX 中，正確運(yùn)行項(xiàng)目： 運(yùn)行 --> 運(yùn)行到手機(jī)或模擬器 --> 選擇設(shè)備，項(xiàng)目啟動(dòng)后，在下方的控制臺(tái)選擇 debug 圖標(biāo)。

正確打開(kāi)調(diào)試窗口后，顯示如下： 

Elements

根據(jù)上一步，啟動(dòng)完成debug窗口后，可以看到Elements。Elements 主要顯示當(dāng)前頁(yè)面的組織結(jié)構(gòu)，目前Elements只支持nvue。 

console.log打日志

console.log是我們?nèi)粘ｉ_(kāi)發(fā)最常用的調(diào)試方法，HBuilderX中當(dāng)然也不能少。

• App端提供真機(jī)運(yùn)行的console.log日志輸出，運(yùn)行到真機(jī)或模擬器時(shí)，不用點(diǎn)debug按鈕，操作手機(jī)，會(huì)在HBuilderX的控制臺(tái)直接輸出日志。
• 如果是比較復(fù)雜的邏輯，那就推薦使用調(diào)試工具中的console了。根據(jù)上一步，啟動(dòng)完成debug窗口后，執(zhí)行console.log方法就可以看到打印的內(nèi)容了。

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

調(diào)試頁(yè)面

在調(diào)試窗口控制臺(tái)的 Sources （圖中指示1） 欄，可以給 js 打斷點(diǎn)調(diào)試。

在 uniapp（圖中指示2）下找到需要調(diào)試的頁(yè)面，單擊打開(kāi) ，在右側(cè)可以看到我們需要調(diào)試的內(nèi)容（圖中指示3）。在需要調(diào)試的代碼行號(hào)的位置，點(diǎn)擊打上斷點(diǎn)（圖中指示4）。

之后，在設(shè)備上進(jìn)行操作，進(jìn)入斷點(diǎn)位置，可以方便我們跟蹤調(diào)試代碼。

同步斷點(diǎn)到調(diào)試器

在控制臺(tái)眾多代碼中尋找要調(diào)試的代碼是比較麻煩的一件事，HBuilderX的調(diào)試還提供一個(gè)便利的功能，可直接在編輯器中打斷點(diǎn)，斷點(diǎn)會(huì)自動(dòng)同步到調(diào)試工具中。

操作步驟：在HBuilderX編輯器中對(duì)目標(biāo)行的行號(hào)處點(diǎn)右鍵，在右鍵菜單中選擇“同步斷點(diǎn)到調(diào)試器”，然后調(diào)試控制臺(tái)會(huì)自動(dòng)打開(kāi)對(duì)應(yīng)的代碼并在指定行處標(biāo)記斷點(diǎn)。演示如下：

Tip

• debug僅支持自定義組件模式。如果是非自定義組件模式，請(qǐng)?jiān)趍anifest里配置選為自定義組件模式。非自定義組件模式即將停止支持，詳見(jiàn)
• vue 和 nvue 頁(yè)面均支持?jǐn)帱c(diǎn)調(diào)試
• 目前僅支持 nvue 頁(yè)面審查元素，vue 頁(yè)面暫不支持，以及 Android 平臺(tái)的 nvue 審查元素暫不支持查看 style
• App端提供真機(jī)運(yùn)行的console.log日志輸出，運(yùn)行到真機(jī)或模擬器時(shí)，不用點(diǎn)debug按鈕，運(yùn)行手機(jī)App，會(huì)在HBuilderX的控制臺(tái)直接輸出日志。
• 如果是調(diào)試App的界面和常規(guī)API，推薦編譯到H5端，點(diǎn)HBuilderX右上角的預(yù)覽，在內(nèi)置瀏覽器里調(diào)Dom，保存后立即看到結(jié)果，調(diào)試更方便。并且H5端也支持titleNView的各種復(fù)雜設(shè)置。唯一要注意的就是css兼容性，使用太新的css在pc上預(yù)覽可能正常，但低端Android上異常，具體可查詢caniuse等網(wǎng)站。
• 常用的開(kāi)發(fā)模式就是pc上使用內(nèi)置瀏覽器預(yù)覽調(diào)dom，運(yùn)行到真機(jī)上看console.log。如果是很復(fù)雜的問(wèn)題才使用debug。
• vue頁(yè)面也可以在微信開(kāi)發(fā)者工具里調(diào)試，除了plus API，其他是一樣的，微信開(kāi)發(fā)者工具的查看Dom和網(wǎng)絡(luò)和存儲(chǔ)等調(diào)試工具相對(duì)而言更完善些。 注意：即使不發(fā)布微信小程序、只發(fā)布App，也需要安裝微信開(kāi)發(fā)者工具。
• uni-app的App端沒(méi)有App那種webkit remote debug，因?yàn)閡ni-app的js不是運(yùn)行在webview里，而是獨(dú)立的jscore里。
• 部分manifest配置，如三方sdk配置，需要打包后生效的，可以打包一個(gè)自定義運(yùn)行基座。打包自定義基座后運(yùn)行這個(gè)自定義基座，同樣可以真機(jī)運(yùn)行和debug。打包正式包將無(wú)法真機(jī)運(yùn)行和debug。

持續(xù)集成

很多公司的開(kāi)發(fā)人員提交代碼后，需要自動(dòng)打包或持續(xù)集成。

此時(shí)需要在服務(wù)器安裝uni-app的cli版本來(lái)發(fā)布小程序和H5版。

HBuilderX版與cli版互轉(zhuǎn)指南參考：https://ask.dcloud.net.cn/article/35750

如果是發(fā)布App，則需要使用離線打包，配置原生環(huán)境，來(lái)實(shí)現(xiàn)持續(xù)集成。（目前HBuilderX還不支持命令行生成wgt資源和云打包，歡迎到需求墻投票：https://dev.dcloud.net.cn/wish/）