天天看點

微信小程式學習系列(3) 如何優雅的使用微信開發者工具

前言

如何優雅的使用微信開發者工具,提到優雅,我相信大家都會在自己的腦海裡腦補了很多畫面吧。當然了,根本就不能的事情了。好了~我們言歸正傳。回到我們的題面,如何才能做到“優雅”呢?孫子兵法有雲:“知彼知己,方百戰不殆”。

編輯功能

微信開發者工具的界面可以用于代碼編寫、代碼調試、項目預覽與上傳、編譯、前背景切換、緩存資料清理以及關閉項目。如圖所示:

微信小程式學習系列(3) 如何優雅的使用微信開發者工具

在項目檔案中,可以在檔案中點選滑鼠右鍵可以建立4種檔案:

.js

.json

.wxml

.wxss

檔案。可以對檔案進行重命名、删除和查找操作。在代碼編寫的過程中

js

會自動補全功能,并提供實時預覽的功能。

調試功能

調試工具有

Console

Sources

NetWork

Storage

AppData

Wxml

【1】

Console

用于顯示微信小程式的輸出出錯資訊和代碼錯誤資訊.如下圖所示:

微信小程式學習系列(3) 如何優雅的使用微信開發者工具

【2】

Sources

用于顯示目前項目的腳本檔案,同時可以看到檔案經過處理後的腳本檔案。如下圖所示:

微信小程式學習系列(3) 如何優雅的使用微信開發者工具

【3】

NetWork

用于觀察發送的請求和調試的檔案資訊。如下圖所示:

微信小程式學習系列(3) 如何優雅的使用微信開發者工具

【4】

Storage

用于顯示目前項目使用

wx.setStorage

wx.setStorageSync

後地資料存儲情況。如下圖所示:

微信小程式學習系列(3) 如何優雅的使用微信開發者工具

【5】

AppData

用于顯示目前項目、目前時刻具體資料,實時回報項目資料情況。使用者可以在此編輯資料,編輯資料後會及時地回報到界面上。如下圖所示:

微信小程式學習系列(3) 如何優雅的使用微信開發者工具

【6】

Wxml

用于幫助開發者開發

wxml

轉換後地界面。同時,這裡可以實時的看到真實的頁面結構以及結構對應的

wxss

屬性,同時可以修改對應

wxss

屬性。如下圖所示:

微信小程式學習系列(3) 如何優雅的使用微信開發者工具

編譯功能

對項目進行重新編譯。如下圖所示:

微信小程式學習系列(3) 如何優雅的使用微信開發者工具

前背景功能

背景是指微信小程式從前台進入背景。例如:操作微信小程式中,突然打進電話。如果接了電話,這個時候小程式從前台進入背景;重新通路小程式,又會從背景進前台。如下圖所示:

微信小程式學習系列(3) 如何優雅的使用微信開發者工具

緩存功能

用于清除資料存儲、清除檔案存儲以及清除使用者授權資料。如下圖所示:

微信小程式學習系列(3) 如何優雅的使用微信開發者工具

詳情功能

在詳情功能中可以看到基本資訊、本地設定、項目配置資訊。

基本資訊

包括了項目名稱、AppID、項目檔案的路徑,如果有AppID的項目,可以在微信上預覽微信小程式。如下圖所示:

微信小程式學習系列(3) 如何優雅的使用微信開發者工具

本地設定

針對代碼編寫執行中,所需要的環境。如下圖所示:

微信小程式學習系列(3) 如何優雅的使用微信開發者工具

項目配置

可以在項目配置中查詢到域名資訊以及進階配置資訊。如下圖所示:

微信小程式學習系列(3) 如何優雅的使用微信開發者工具

最後,今天是2020年02月29日。四年後,再見。你又會在哪裡呢?!