微信小程式開發系列（一）開發準備的詳解

本文帶來微信小程式開發系列（一）開發準備的詳解

一：開發準備

一  註冊微信開發者帳號

登錄：https://mp.weixin.qq.com/  進行註冊.

目前僅支援企業和組織等非個人註冊微信小程式帳號，註冊詳細情況可參考以下連結：

#http://kf.qq.com/faq/140806zARbmm161103r6vmiA.html

註：如果只是為了學習開發微信小程序，可以參考這個地址註冊測試號：

二  微信開發者工具下載

由於微信公眾平台改版，導致原來可以在https://mp.weixin.qq.com/wiki下面可以免費下載微信小程式開發工具這種可能沒有了。

必須擁有微信小程式的開發帳號，並在以下網址下載掃描二維碼下載開發工具。

https://mp.weixin.qq.com/debug/wxadoc/introduction/#登入

另外如果只是學習開發而已，可以在百度搜尋微信小程式開發工具隨意下載網友分享的工具也可以。

二：開發工具使用簡介

1：PC桌面開啟微信小程式開發工具（微信web開發者工具），如圖1所示：

圖1

2: 用微信掃描圖1中的二維碼，如圖2所示，並選擇第一項“本地小程式項目”，如圖3所示。 （現在如果開發工具版本太低，掃描時會報錯，請先升級開發工具，開發工具會自動檢查版本並自動升級。）

圖2

圖3

3: 圖3中如果第一次建立項目，請選擇“新增項目”，否則選擇已經新增的項目。選擇“新增項目”，如圖4所示。

圖4

4: 圖4如果只是為了學習開發請選擇“無AppID”，然後填寫專案名稱，選擇專案目錄，並且點解「新增項目」按鈕。如圖5所示，進入微信小程式開發工具主介面。

圖5

5: 圖5點擊工具左上角的“編輯”，工具進入編輯模式介面，如圖6所示

圖6

6: 圖5點擊工具左上角的“調試”，工具進入調試模式介面，如圖7所示

圖7

7: 圖7點擊工具左下角的“後台”，此時程式模擬當電話打來時，微信小程式進入後台的狀態，如圖8所示

圖8
三：工程目錄結構

1：開啟微信小程式開發工具，進入編輯模式，如下圖1所示

圖9

1：這個項目主要由pages/firstPage，pages/index，pages/ logs，這幾個資料夾組成，這幾個資料夾主要描述整個小程式的介面資訊。

每個檔案下基本可分為：.js，.wxml，.wxss，.json等檔案組成。

例如：

index.js：描述index頁面的邏輯資訊（類比：js程式碼）

index.wxml：描述index頁面的佈局資訊（類比：HTML頁面佈局）

index.wxss：描述index頁面的佈局的樣式資訊（類比：CSS資訊）

##2：專案整體配置資訊：

由app.js，app.json，app.wxss三個檔案組成

app.json：由圖1所示，描述整個工程的頁面資訊（由"pages"描述），"window"主要描述該項目整體背景，導航欄等樣式，如果某個資料夾中某個.json檔案中有相同的描述，則會覆寫"window"中所描述的訊息。

app.wxss：主要描述該項目整體的樣式，如圖2所示

圖10

app .js：主要描述此項目入口邏輯，主要描述一些使用者登入後的信息，如圖3所示

圖11

################################# ###

以上是微信小程式開發系列（一）開發準備的詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！