不會程式設計也能開發微信小程式的入門教程

來源:趣味經驗館 1.05W
微信小程式怎麼開發?請看下面方法。

一、註冊小程式賬號

進入微信公眾平臺

不會程式設計也能開發微信小程式的入門教程

點選立即註冊

不會程式設計也能開發微信小程式的入門教程 第2張

選擇小程式

不會程式設計也能開發微信小程式的入門教程 第3張

填寫資訊註冊即可

不會程式設計也能開發微信小程式的入門教程 第4張

繫結開發者

不會程式設計也能開發微信小程式的入門教程 第5張

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

不會程式設計也能開發微信小程式的入門教程 第6張

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

點選小程式後的檢視詳情

不會程式設計也能開發微信小程式的入門教程 第7張

選擇開發者工具

不會程式設計也能開發微信小程式的入門教程 第8張

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

不會程式設計也能開發微信小程式的入門教程 第9張

安裝開發工具

不會程式設計也能開發微信小程式的入門教程 第10張

三、編寫小程式例項

開啟工具點選小程式專案

不會程式設計也能開發微信小程式的入門教程 第11張

填寫相應資訊,點選確定

不會程式設計也能開發微信小程式的入門教程 第12張

例項目錄結構

不會程式設計也能開發微信小程式的入門教程 第13張

app.js是小程式的指令碼程式碼(必須),可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數,呼叫框架提供的豐富的 API。

不會程式設計也能開發微信小程式的入門教程 第14張

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

不會程式設計也能開發微信小程式的入門教程 第15張

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

不會程式設計也能開發微信小程式的入門教程 第16張

index.js 是頁面的指令碼檔案(必須),在這個檔案中我們可以監聽並處理頁面的生命週期函式、獲取小程式例項,宣告並處理資料,響應頁面互動事件等。

不會程式設計也能開發微信小程式的入門教程 第17張

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

不會程式設計也能開發微信小程式的入門教程 第18張

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

不會程式設計也能開發微信小程式的入門教程 第19張

在編輯配置好後點擊真機除錯

不會程式設計也能開發微信小程式的入門教程 第20張

手機微信掃描二維碼

不會程式設計也能開發微信小程式的入門教程 第21張

自動彈出除錯視窗,通過真機除錯能夠更好的測試小程式

不會程式設計也能開發微信小程式的入門教程 第22張
熱門標籤