建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
使用代碼塊直接創(chuàng)建組件模板
為提升開(kāi)發(fā)效率，HBuilderX將 uni-app 常用代碼封裝成了以 u 開(kāi)頭的代碼塊，如在 template 標(biāo)簽內(nèi)輸入 ulist 回車(chē)，會(huì)自動(dòng)生成如下代碼：
湞江網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),湞江網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為湞江上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的湞江做網(wǎng)站的公司定做！
{{item.value}}
代碼塊分為T(mén)ag代碼塊、JS代碼塊，如在 script 標(biāo)簽內(nèi)輸入 uShowToast 回車(chē)，會(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ù)置代碼塊不滿(mǎn)足需求的話(huà)，可以自定義代碼塊，教程參考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上異常，具體可查詢(xún)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，則需要使用離線(xiàn)打包，配置原生環(huán)境，來(lái)實(shí)現(xiàn)持續(xù)集成。（目前HBuilderX還不支持命令行生成wgt資源和云打包，歡迎到需求墻投票：https://dev.dcloud.net.cn/wish/）
新聞名稱(chēng)：創(chuàng)新互聯(lián)UNI-APP教程：uni-app高效開(kāi)發(fā)技巧
本文地址：http://www.dlmjj.cn/article/cdddphd.html
