微信開發入門（二）微信小程式開發工具使用與設計規範

本篇你可以學習到：

1. 如何使用小程式開發工具寫一個Hello World

2. 微信小程序設計規格

3. 微信小程式專案結構

」》微信小程式開發工具使用

• 下載安裝小程式 
  下載：微信web開發者工具

  下載：官方DEMO原始碼

  本系列教學使用的是mac版的開發者工具。

• 安裝完成後，開啟微信web開發者工具

#1.掃碼登錄，綁定個人微信 

#2.掃碼登入後，新建或匯入已有專案（這裡使用官方提供的DEMO原始碼quickstart） 

3.新建專案,匯入剛下載的quickstart專案 
 

由於只有接收到內測邀請的企業或個人，才有AppID,所以一定記得選『無AppID』

4.新建成功,看看開發工具的廬山真面目 
 

是不是非常像chrome開發者模式。 。 。

5.開發工具【偵錯】介紹 
 

『偵錯』模組主要包括選擇偵錯機型、選擇網路類型、控制台輸出、網路資源、檢視定位、斷點等

6.開發工具【編輯】介紹 
 

#左邊紅色框為專案結構目錄，右邊為程式碼編輯區，每次改動儲存後，點選‘編譯’就可以瀏覽到修改後的頁面效果。

7.新資料夾或檔案 
 

滑鼠放置到資料夾上，右邊會出現『+』圖標，點選新增資料夾或檔案

 

》》小程式設計規格(摘自微信小程式設計指南)

1. 友善禮貌 
   為了避免使用者在微信中使用小程式服務時，注意力被周圍複雜環境幹擾，小程式在設計時應該注意減少無關的設計元素對用戶目標的干擾，禮貌地向用戶展示程式提供的服務，友好地引導用戶進行操作。

2. 重點突出
   每個頁面都應有明確的重點，以便於用戶每進入一個新頁面的時候都能快速地理解頁面內容，在確定了重點的前提下，應盡量避免頁面上出現其他幹擾項影響使用者的決策和操作。

3. 清楚明確 
   一旦使用者進入我們的小程式頁面，我們就有責任和義務清楚明確地告知使用者身在何處、又可以往何處去，確保使用者在頁面中游刃有餘地穿梭而不迷路，這樣才能提供使用者安全的愉悅的使用體驗。

」》》微信小程式專案結構

# 

1. 
   
   

## 

檔案結構 

###############框架程式包含一個描述整體程式的app 和多個描述各自頁面的page。一個框架程式主體部分由三個檔案組成，必須放在專案的根目錄。 ############ ######小程式(全域)邏輯app.小程式(全域)公共設置，決定頁面檔案的路徑、視窗表現、設定網路逾時時間、設定多tab 等app.#小程式公用(全域)樣式表

檔	作用
#app.js
json
wxss

 

1. 一個框架頁面由四個檔案組成：

檔案類型作用js#頁面邏輯wxml#頁面結構，框架設計的一套標籤語言，結合基礎元件、事件系統，可以建構出頁面的結構。 wxss是一套樣式語言，用來描述 WXML 的元件樣式。用來決定 WXML 的元件該怎麼顯示。 json頁面配置#依照『約定優於設定』的原則，一個框架頁面至少包含js、wxml、wxss三個檔案類型，檔案名稱要一樣，例如首頁index.js、index.wxml、index.wxss,並且要放在同一資料夾下。頁面註冊時，檔案名稱不需要寫入檔案後綴，因為框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個檔案進行整合。

》》》

總結

以上從開發工具、設計規格、專案目錄三個面向介紹微信小程式開發準備工作，後續也將更新；同時透過導入官方DEMO，展示了Hello World小程式頁面。整體來說，小程式開發工具精簡，專案結構清晰，文件齊全，入門門檻不算高；微信團隊已經對不同作業系統不同機型封裝好了，開發者只需呼叫對應的

API即可。當然如果要弄清楚整個框架，你需要深入學習Redux工作原理、狀態模式、資料單雙向綁定、JS呼叫Android/IOS原生UI元件等內容。

如果有疑問，你也可以關注我的微信公眾號‘ITNotes’， 一起交流學習 。

【相關推薦】

1.

微信公眾號平台原始碼下載

2. 

微信投票原始碼

######3.### 微信啦啦外送2.2.4解密開源版微信魔術方塊原始碼#######

以上是微信開發入門（二）微信小程式開發工具使用與設計規範的詳細內容。更多資訊請關注PHP中文網其他相關文章！