欢乐颂第二季,完美的世界 1993 电影,我欲封天耳根小说零

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

創(chuàng)新互聯(lián)UNI-APP教程：uni-app高效開發(fā)技巧

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

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

湞江網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),湞江網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為湞江上千多家提供企業(yè)網(wǎng)站建設(shè)服務。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務好的湞江做網(wǎng)站的公司定做！


    
        
            {{item.value}}

代碼塊分為Tag代碼塊、JS代碼塊，如在 script 標簽內(nèi)輸入 uShowToast 回車，會自動生成如下代碼：

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

uni-app已支持代碼塊見下方列表。

Tag代碼塊

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

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

vue js代碼塊

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

其他常用js代碼塊

iff：簡單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：增強的日志輸出，可同時把變量的名字打印出來
varcw：輸出："var currentWebview = this.$mp.page.$getAppWebview()"
ifios：iOS的平臺判斷
ifAndroid：Android的平臺判斷

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

使用 Chrome 調(diào)試 H5

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

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

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

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

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

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

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

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

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

常規(guī)開發(fā)里，在HBuilderX的運行菜單里運行App，手機端的錯誤或console.log日志信息會直接打印到控制臺。

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

打開調(diào)試窗口

在 HBuilderX 中，正確運行項目：運行 --> 運行到手機或模擬器 --> 選擇設(shè)備，項目啟動后，在下方的控制臺選擇 debug 圖標。

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

Elements

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

console.log打日志

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

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

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

調(diào)試頁面

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

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

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

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

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

操作步驟：在HBuilderX編輯器中對目標行的行號處點右鍵，在右鍵菜單中選擇“同步斷點到調(diào)試器”，然后調(diào)試控制臺會自動打開對應的代碼并在指定行處標記斷點。演示如下：

Tip

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

持續(xù)集成

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

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

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

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

分享標題：創(chuàng)新互聯(lián)UNI-APP教程：uni-app高效開發(fā)技巧
轉(zhuǎn)載注明：http://fisionsoft.com.cn/article/cdddphd.html