uni-app 高效開發(fā)技巧

2020-04-02 15:16 更新

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

為提升開發(fā)效率，HBuilderX將 uni-app 常用代碼封裝成了以 u 開頭的代碼塊，如在 template 標簽內(nèi)輸入 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 標簽內(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：導(dǎo)入文件
  • 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的平臺判斷

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

使用 Chrome 調(diào)試 H5

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

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

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

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

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

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

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

uni-app

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

uni-app

關(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 圖標。

debug

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

Elements

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

console.log打日志

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

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

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

debug

調(diào)試頁面

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

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

debug

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

debug

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

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

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

debug

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右上角的預(yù)覽，在內(nèi)置瀏覽器里調(diào)Dom，保存后立即看到結(jié)果，調(diào)試更方便。并且H5端也支持titleNView的各種復(fù)雜設(shè)置。唯一要注意的就是css兼容性，使用太新的css在pc上預(yù)覽可能正常，但低端Android上異常，具體可查詢caniuse等網(wǎng)站。
  • 常用的開發(fā)模式就是pc上使用內(nèi)置瀏覽器預(yù)覽調(diào)dom，運行到真機上看console.log。如果是很復(fù)雜的問題才使用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ù)集成。

此時需要在服務(wù)器安裝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/）


以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號