當前位置:生活全書館 >

IT科技

> 開發者工具怎麼使用 小程序開發者工具使用教程

開發者工具怎麼使用 小程序開發者工具使用教程

小程序開發者工具使用教程,開發者工具怎麼使用?請看下面方法。

一、註冊小程序賬號

進入微信公衆平臺

小程序開發者工具使用教程,開發者工具怎麼使用

點擊立即註冊

小程序開發者工具使用教程,開發者工具怎麼使用 第2張

選擇小程序

小程序開發者工具使用教程,開發者工具怎麼使用 第3張

填寫資訊註冊即可

小程序開發者工具使用教程,開發者工具怎麼使用 第4張

綁定開發者

小程序開發者工具使用教程,開發者工具怎麼使用 第5張

小程序開發者工具使用教程,開發者工具怎麼使用 第6張

進入“設定-開發設定”,獲取AppID資訊。

小程序開發者工具使用教程,開發者工具怎麼使用 第7張

二、下載微信web開發者工具

點擊小程序後的檢視詳情

小程序開發者工具使用教程,開發者工具怎麼使用 第8張

選擇開發者工具

小程序開發者工具使用教程,開發者工具怎麼使用 第9張

下載對應系統版本的應用程序

小程序開發者工具使用教程,開發者工具怎麼使用 第10張

安裝開發工具

小程序開發者工具使用教程,開發者工具怎麼使用 第11張

三、編寫小程序實例

開啟工具點擊小程序項目

小程序開發者工具使用教程,開發者工具怎麼使用 第12張

填寫相應資訊,點擊確定

小程序開發者工具使用教程,開發者工具怎麼使用 第13張

實例目錄結構

小程序開發者工具使用教程,開發者工具怎麼使用 第14張

app.js是小程序的腳本代碼(必須),可以在這個檔案中監聽並處理小程序的生命週期函數、聲明全局變量,調用框架提供的豐富的 API。

小程序開發者工具使用教程,開發者工具怎麼使用 第15張

app.json是對整個小程序的全局配置(必須),用來對微信小程序進行全局配置,決定頁面檔案的路徑、視窗表現、設定網絡超時時間、設定多tab等。接受一個數組,每一項都是字元串,來指定小程序由哪些頁面組成。微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在app.json的pages中,且pages中的第一個頁面是小程序的首頁。

小程序開發者工具使用教程,開發者工具怎麼使用 第16張

app.wxss是整個小程序的公共樣式表(非必須)。

小程序開發者工具使用教程,開發者工具怎麼使用 第17張

index.js 是頁面的腳本檔案(必須),在這個檔案中我們可以監聽並處理頁面的生命週期函數、獲取小程序實例,聲明並處理數據,響應頁面交互事件等。

小程序開發者工具使用教程,開發者工具怎麼使用 第18張

index.wxml是頁面結構檔案(必須)。

小程序開發者工具使用教程,開發者工具怎麼使用 第19張

index.wxss是頁面樣式表檔案(非必須),當有頁面樣式表時,頁面的樣式表中的樣式規則會層疊覆蓋app.wxss中的樣式規則。如果不指定頁面的樣式表,也可以在頁面的結構檔案中直接使用app.wxss中指定的樣式規則。

小程序開發者工具使用教程,開發者工具怎麼使用 第20張

在編輯配置好後點擊真機調試

小程序開發者工具使用教程,開發者工具怎麼使用 第21張

手機微信掃描二維碼

小程序開發者工具使用教程,開發者工具怎麼使用 第22張

自動彈出調試視窗,透過真機調試能夠更好的測試小程序

小程序開發者工具使用教程,開發者工具怎麼使用 第23張
  • 文章版權屬於文章作者所有,轉載請註明 https://shqsg.com/zh-hant/dianzi/22rx3x.html