微信開發者工具提供小程序以及小游戲開發功能，用戶可以在軟件上開發新的游戲，將其提交到微信上使用，經過審核以后就可以將你的小程序或者是小游戲部署到微信，從而在微信使用這些工具，本軟件作還是很簡單的，直接在軟件界面編輯你的項目，成功加載項目就可以開始編輯代碼，使用內容的編輯器就可以編輯代碼，可以完畢可以在手機預覽效果，您也可以通過這款軟件設計網頁公眾號，直接編輯自己的網頁界面，設計新的公眾號頁面效果，所有設計項目都可以在手機預覽，對于需要開發微信小程序的朋友很有幫助！
微信開發者工具軟件功能
1、菜單欄
微信web開發者工具
切換：快速切換登錄用戶
關于：關于開發者工具
更新：版本更新
開發者論壇：前往開發者論壇
開發者文檔：前往開發者文檔
調試：調試開發者工具、調試編輯器；如果遇到疑似開發者工具或者編輯器的 bug，可以打開調試工具查看是否有出錯志，歡迎在論壇上反饋相關問題
更換開發模式：快速切換公眾號網頁調試和小程序調試
退出：退出開發者工具
2、項目
新建項目：快速新建項目
打開最近：可以查看最近打開的項目列表，并選擇是否進入對應項目
查看所有項目：新窗口打開啟動頁的項目列表頁
關閉當前項目：關閉當前項目，回到啟動頁的項目列表頁
3、文件
新建文件
4、保存
保存所有
5、關閉文件
編輯：可以查看編輯相關的作和快捷鍵
6、工具
編譯：編譯當前小程序項目
刷新：與編譯的功能一致，由于歷史原因保留對應的快捷鍵 ctrl(?) + R
編譯配置：可以選擇普通編譯或自定義編譯條件
前后臺切換：模擬客戶端小程序進入后臺運行和返回前臺的作
清除緩存：清除文件緩存、數據緩存、以及授權數據
界面：控制主界面窗口模塊的顯示與隱藏
7、設置：
外觀設置：控制編輯器的配色主題、字體、字號、行距
編輯設置：控制文件保存的行為，編輯器的表現
代理設置：選擇直連網絡、系統代理和手動設置代理
設置：設置是否接受某種類型的
8、工具欄
點擊用戶頭像可以打開個人中心，在這里可以便捷的切換用戶和查看開發者工具收到的消息。
用戶頭像右側是控制主界面模塊顯示/隱藏的按鈕。至少需要有一個模塊顯示。
工具欄中間，可以選擇普通編譯，也可以新建并選擇自定義條件進行編譯和預覽。
通過切后臺按鈕，可以模擬小程序進入后臺的情況
工具欄上提供了清緩存的快速入口。可以便捷的清除工具上的文件緩存、數據緩存、還有后臺的授權數據，方便開發者調試。
工具欄右側是開發輔助功能的區域，在這里可以上傳代碼、版本管理、查看項目詳情
9、工具欄管理
在工具欄上點擊鼠標右鍵，可以打開工具欄管理
10、模擬器
模擬器可以模擬小程序在微信客戶端的表現。小程序的代碼通過編譯后可以在模擬器上直接運行。
開發者可以選擇不同的設備，也可以添加自定義設備來調試小程序在不同尺寸機型上的適配問題。
在模擬器底部的狀態欄，可以直觀地看到當前運行小程序的場景值，頁面路徑及頁面參數
11、窗口
點擊 模擬器/調試器 右上角的按鈕可以使用窗口顯示 模擬器/調試器
微信開發者工具軟件特色
1、微信開發者工具可以幫助用戶設計自己需要的小程序
2、用戶可以通過這款軟件開發新的軟件，將其部署到微信上使用
3、這款軟件提供編輯器，新建項目就可以打開編輯器
4、可以在軟件開發游戲，為微信添加小游戲
5、可以制作網頁，在軟件新建公眾號網頁
6、軟件功能還是很多的，編輯器滿足大部分用戶開發需求
7、設計的程序可以在手機預覽，自動生成二維碼預覽鏈接
8、通過這款軟件可以更好開發自己需要的軟件
9、可以使用自己的微信號來調試微信網頁授權
10、可以調試、檢驗頁面的-SDK相關功能與權限,模擬大部分SDK的輸入和輸出
11、你可以利用集成的 Chme DevTools協助開發。
微信開發者工具安裝方法
1、打開wechat_devtools32_v1.02.2004020.exe軟件直接啟動，點擊下一步
2、提示軟件的安裝協議，點擊接受
3、軟件的安裝地址C:Pgram Files (x86)Tencent微信web開發者工具
4、軟件的安裝進度，等待安裝結束吧
5、提示軟件已經安裝結束，點擊完成立即啟動
微信開發者工具使用說明
1、打開微信web開發者工具提示使用微信登錄，直接在軟件界面掃描登錄
2、如圖所示，提示小程序設置，點擊添加按鈕進入程序項目新建界面
3、項目名字minipgram-1，設置目錄，設置ID，開發模式可以選擇小程序和插件
4、小程序云開發為開發者提供數據庫、存儲和云函數等完整的云端支持。無需搭建,使用平臺提供的API進行核心業務開發,即可實現小程序快速上線和迭代。
5、導入項目功能，在軟件界面填寫APPID，隨后點擊導入按鈕
6、這里是公眾號網頁編輯界面，如果你會設計網頁就可以在軟件下方開始編輯
7、軟件設置：打開最后一次修改項目、使用U加速模式、使用新版文件監聽模塊、啟動手機端自動預覽、啟動PC端自動預覽
8、外觀設置界面，在這里可以選擇新的顏色，可以設置模擬器位置
9、端口安全，工具的服務端口已關閉。命令行和HTTP都無法調用工具。
10、清除開發者工具 cookie、清除開發者工具緩存、清除地址欄歷史記錄、清除文件緩存
11、預覽功能，如果你需要在手機上查看公眾號網頁就掃描這里的二維碼
微信開發者工具教程
快速上手
本文將會使用小游戲提供的能力制作一個簡單的飛機躲避掉落方塊小游戲，旨在從零開始介紹小游戲的開發流程。
注冊一個小游戲
進入 小程序注冊頁 根據指引填寫和提交相應的資料，服務類目應選擇“游戲”，子類目可以先選擇“休閑游戲”，就可以擁有自己的小游戲。
安裝并啟動開發者工具
注冊小游戲后，應下載 開發者工具 并安裝到計算機中。
打開已安裝的開發者工具客戶端，使用剛剛注冊小游戲登記的微信“掃一掃”掃碼即可進入小游戲開發環境。
選擇左側“小程序項目”中的“小游戲 Tab”，點擊右側“+”號，開始創建小游戲項目。
填寫合適的項目名稱，選擇合適的本機空目錄后，登錄 剛剛注冊的小程序管理平臺，如下圖找到小程序的 AppID，填入表單的“AppId”文本框中。
填寫完整后點擊右下角“新建”按鈕，即可完成創建小游戲。
在開發者工具可以看到，小游戲只有兩個必要文件：
|–game.js
|–game.json
game.js 小游戲入口文件
game.json 配置文件
雙擊目錄樹中的“game.js”文件，可以開始編輯代碼。
（若無法找到目錄樹，請留意先選中左上角“編輯器”開關）
開始編輯代碼
小游戲中，只能使用 JavaScpt 來編寫小游戲。但不同于瀏覽器環境，小游戲環境沒有 BOM 和 DOM API，只有 wx API. 接下來我們將使用 wx API 來完成創建畫布、繪制圖形、顯示圖片以及響應用戶交互等基功能。
創建畫布
const canvas = wx.Canvas()
在 game.js 中輸入以上代碼并保存，可以立即創建一個上屏 canvas。后續我們的代碼都會基于這個 canvas 對象。
繪制一個矩形
const context = canvas.getContext(‘2d’) // 創建一個 2d context
context.fillStyle = ‘#1aad19’ // 矩形顏色
context.fillRect(0, 0, 100, 100) // 矩形左上角頂點為(0, 0)，右下角頂點為(100, 100)
繼續輸入以上代碼后保存，可以看到模擬器左上角出現一個綠色的正方形。
接下來我們把矩形經過簡單計算使之橫向居中，將 context.fillRect(0, 0, 100, 100) 修改為：
context.fillRect(canvas.width / 2 – 50, 0, 100, 100)
保存后，可以看到矩形已經橫向居中：
為了方便矩形移動邏輯的繪制，將 context.fillRect 所在代碼封裝到 drawRect 函數中，并調用該函數：
const { windowWidth, windowHeight } = wx.getInfoSync()
function drawRect(x, y) {
context.clearRect(0, 0, windowWidth, windowHeight)
context.fillRect(x, y, 100, 100)
}
drawRect(canvas.width / 2 – 50, 0)
此處多添加 context.clearRect 所在行，作用是每次繪制前都先清除整個畫布，方便后文調用以創建“讓矩形下落移動”效果；保存后模擬器的效果應與上一步一致，即有一個橫向居中的綠色矩形。
讓矩形下落移動
將 drawRect(canvas.width / 2 – 50, 0) 修改為如下代碼：
const rectX = canvas.width / 2 – 50
let rectY = 0
setInterval(function(){
drawRect(rectX, rectY++)
}, 16)
這里我們添加了一個每 16ms 執行一次的定時器函數，并且每次繪制都使矩形左上角 y 坐標在原有基上增加 1，添加上述代碼后保存，可以看到模擬器上出現一個自上而下下落的綠色矩形。
添加一個飛機圖片
在創建項目的目錄下，新建一個 img 目錄，并在其中添加一張 plane.png 的圖片素材。實際上這里可以是任何你喜歡的圖片素材，建議圖片大小為 100px*100px，后文默認該圖片大小也為 100px*100px。
添加成功后在目錄樹中可以找到 img 目錄和 plane.png 素材。
在代碼中添加以下代碼，將飛機圖片添加到 canvas 中。
const image = wx.Image()
const imgX = canvas.width / 2 – 50
let imgY = 500
image.onload = function () {
context.drawImage(image, imgX, imgY)
}
image.src = ‘img/plane.png’
保存后可看到模擬器下方出現一個飛機圖形，圖片加載成功。
使飛機圖片跟隨觸摸移動
添加以下代碼，使飛機跟隨手指觸摸移動
// 存儲當前飛機左上角坐標
let touchX = imgX
let touchY = imgY
wx.onTouchMove(function (res) {
context.clearRect(touchX, touchY, 100, 100); // 清除畫布上原有的飛機
touchX = res.changedTouches[0].clientX // 重新判斷當前觸摸點x坐標
touchY = res.changedTouches[0].clientY // 重新判斷當前觸摸點y坐標
context.drawImage(image, touchX, touchY);
})
其中，wx.onTouchMove 是小游戲用于監聽觸點移動事件的 API，監聽該事件獲得手指觸摸點坐標 touchX 和 touchY 并使用該坐標重繪飛機圖片，即可使飛機圖片跟隨觸摸移動。
保存后使用鼠標在模擬器上拖動，可以看到飛機跟隨鼠標移動。
判斷飛機是否碰撞到下落中的矩形
在 wx.onTouchMove 回調函數的最后添加以下代碼：
if (touchX >= rectX – 100 && touchX <= rectX + 100 && touchY >= rectY – 100 && touchY <= rectY + 100) { // 飛機與矩形發生碰撞
wx.showModal({
title: ‘提示’,
content: ‘發生碰撞，游戲結束！’
})
}
保存后在模擬器中拖動飛機，只要飛機與矩形發生碰撞，則會出現彈窗提示游戲結束。
在手機上預覽
點擊開發者工具中的“預覽”按鈕，用手機掃描二維碼，即可在手機上預覽到剛剛創建的小游戲效果。
上傳至體驗版
在小游戲開發到一定階段、希望給項目團隊其他伙伴體驗時，可提交一個體驗版本。具體作方式為，先點擊工具右上角“上傳”。
在彈出窗口中填寫版本號和項目備注后，點擊“上傳”按鈕。
上傳成功后，需 登錄 小程序管理平臺，點擊“版本管理”。在右側頁面中，選擇剛剛提交的版本，點擊“選為體驗版本”。
選為體驗版本后，可點擊版本號下方二維碼圖標，獲得體驗版本小游戲二維碼。
需要注意的是，除了管理員與項目成員之外，其他人員如需體驗“體驗版”小游戲，則需先將這些人員的微信號添加到管理平臺“成員管理”的“體驗成員”列表中。具體作方式請見小程序成員管理 詳細說明。
上述“上傳至體驗版”的流程，在開發過程中可多次上傳，不同開發者上傳的體驗版本相互，生效的體驗版本以管理平臺中“選為體驗版本”的為準。相同開發者每次上傳新版本后會覆蓋自己上傳過的舊版本。掃碼或從手機端已有體驗版入口進入均會自動更新到最近版本的體驗版。
提交審核
小游戲開發完成后，需要提交審核才可對外發布。
在小程序管理系統“版本管理”中，點擊希望發布的體驗版本右側“提交審核”按鈕，填寫相關表單后即可提交審核。
確認發布
在提交審核的版本通過審核后，可點擊“審核版本”中的“提交發布”，即可將小游戲對外發布。
漢字內碼查看器 v1.0綠色版
288MB
Wakanda v2.7.0
136.85 MB
VMware Thin v5.2.7
35.85 MB
Visual Studio Express v2019
2.05 MB
