圖解怎麼利用微信web開發者工具開發第一個程式

首先登陸微信公佈的簡易教程網頁，登陸上去後，點選導航欄上方的“工具”按鈕。然後點選左側邊的導航欄“下載”按鈕。 微信小程式開發工具有windows 64,windows 32和mac版本，根據自己的電腦情況，下載適合自己的版本。 把微信小程式開發工具下載回

本篇經驗將和大家介紹利用利用微信web開發者工具開發第一個程式，希望對大家的工作和學習有所幫助！

方法

開啟已經安裝的微信web開發者工具，如下圖所示：

跟風體驗了下微信小程式的開發流程，發現官方的微信 web 開發者工具並不支援在程式碼中打斷點。 用了一陣子 console.log 之後覺得好麻煩，突然想起還有一招： debugger; debugger 語句可以在 Chrome 和 Firefox 下打斷點，微信 web 開發者工具應該

使用微信掃描二維碼登入“微信web開發者工具”，點選“確認登入”，如下圖所示：

常見的有 sublime webstorm 其實工具都大同小異，會熟練使用一個就可以了

選擇“本地小程式專案”，如下圖所示：

準備工具 微信公眾號、微信個人號； 電腦； 使用步驟 微信web開發者工具下載，並安裝。 啟動微信web開發者工具。 登入微信公眾號，進入web開發者工具，繫結個人微訊號。 通過個人微訊號，登入微信web開發者工具。 從微信公眾號複製連結到位址列

點選“新增專案”，如下圖所示：

為了幫助開發者簡單和高效地開發和除錯微信小程式，在原有的公眾號網頁除錯工具的基礎上，推出了全新的 微信開發者工具，集成了公眾號網頁除錯和小程式除錯兩種開發模式。 使用公眾號網頁除錯，開發者可以除錯微信網頁授權和微信JS-SDK 詳情 使

新增專案對話方塊中，選擇“無AppID”，填寫專案名稱和專案目錄，然後點選“新增專案”，如下圖所示：

使用工具： 電腦； web開發工具； 例子：以安卓的移動除錯為範本； 除錯步驟： 選擇無線網絡卡地址，預設即可，工具會自動查詢無線網絡卡ip v4地址。 設定 - 無線區域網 - 選中網路 - HTTP代理手動，設定好上面步驟以後，重啟微信，這可能是讓微信重

建立的專案主介面和專案的目錄結構如下圖所示：

微信手機端除錯工具下載地址 這裡寫圖片描述 注：1.如果安裝除錯工具-微信Web開發者工具需要解除安裝以前安裝過的微信Web開發者工具（比如小程式-微信Web開發者工具），建議使用騰訊管家之類的清理乾淨。 2.安裝好後，選擇移動除錯，X5 Blink核心調

點選左側的“編輯”即可預覽專案效果，關於更多開發知識，請參考微信公眾平臺上的技術文件，如下圖所示：

有個曲線救國的方式 微信web開發者工具有beta版，這個不會覆蓋正式版，可以共存，也就達到了雙開目的。 beta版下載地址 https://mp.weixin.qq.com/b3e7062c96/a0fa053d9ece/b3e712/b3e7122d9ec2e3c1.beta.html

擴充套件閱讀，以下內容您可能還感興趣。

微信web開發者工具 ios怎麼使用

微信web開發者工具主要功能：

使用自己的微訊號來除錯微信網頁授權；

除錯、檢驗頁面的 JS-SDK 相關功能與許可權，模擬大部分 SDK 的輸入和輸出；

使用基於 weinre 的移動除錯功能；

利用整合的 Chrome DevTools 協助開發。

工具頂部選單欄是重新整理、後退、選中位址列等動作的統一入口，以及微信客戶端版本的模擬設定頁。左側是微信的 webview 模擬器，可以直接操作網

頁，模擬使用者真實行為。右側上方是位址列，用於輸入待除錯的頁面連結，以及清除快取按鈕。右側下方是相關的請求和返回結果，以及除錯介面和登入按鈕。本回答被提問者採納

微信web開發者工具用什麼登入

用微信登入，你可以到微信公眾平臺上找到小程式註冊入口，（注意，一定要在這個入口註冊賬號，如果你在公眾平臺註冊公眾號的話就不行了。）註冊的時候需要你個微信掃描二維碼，這個微信就是管理小程式的管理賬號，並且用它登入小程式開發工具。

微信web開發者工具是用什麼寫的

微信Web開發工具有很多，包括比如說Liveweave、JS Bin、Codepen、Dabblet等等。但是，Web開發人員沒必要全部精通，找到適合自己使用的就可以了，然後學到真正的開發技術，成為網際網路大型企業都在高薪招聘的web開發人才。

第一種微信Web開發工具——Liveweave

它還有一個吸引我眼球的地方，就是它的協作功能。如果你過去曾經使用過Teamviewer，你會發現它們是相似的。你需要做的事只是點選協作連結，你就可以分享來自於你到weave的連結了。

第二種微信Web開發工具——JS Bin

JS Bin和以前開發平臺的區別在於它允許你把檔案下載到你的電腦上，這對於開發者，尤其是在離線狀態下除錯程式碼的程式設計師來說，是一個很不錯的特點。你還可以建立私人的Bin空間，不過你需要對此付費。另外，JS Bin不支援協作功能。

第三種微信Web開發工具——Codepen

Codepen用於CSS的前處理器包括SCSS、SASS，LESS和Stylus，用於JS的有CoffeeScript和LiveScript，用於HTML的包括Haml、Markdown、Slim和Jade。

第四種微信Web開發工具——Dabblet

現在，Dabblet最棒的地方在於它允許使用者以5個不同的視角進行預覽，分別是CSS編輯器和效果，HTML編輯器和效果，CSS和HTML的編輯器和效果，JavaScript及執行結果，全部綜合效果。這些功能在絕大部分的開發環境中都沒有。

第五種微信Web開發工具——JSFiddle

如果你在與其他開發者合作，我強烈建議你使用JSFiddle。在所有的開發環境中，JSFiddle的協作特性是同類型應用中最好的，而且區別於Codepen的是，它的這個特性是操作簡單並且免費的。

第六種微信Web開發工具—— CSSDeck C

SSDeck雖然很簡潔，但它有一個讓我很吃驚的特性，就是它支援使用者改變字型大小，這是一個簡單卻實用的功能。所以說，如果你在尋找有很多很炫的功能的開發平臺，CSSDeck可能不適合你。它的簡潔性讓你更專注於最重要的事情，這也是它最大的特點。本回答被提問者採納

小白怎麼開發者工具開發微信小程式語言

1、首先要下載微信官方的微信Web開發者工具。開啟微信公眾平臺，找到右下方的小程式模組，點選「開發」按鈕

2、點選頂部導航欄的「工具」按鈕，在新頁面的左側欄中找到「下載」。可以看到，開發工具提供 Windows 32 位、Windows 64 位和 Mac 三個版本。可根據實際情況，選擇適合自己電腦的開發工具。

3、安裝後，就可以直接啟動開發者工具。如果是首次啟動開發者工具，需要使用開發者的微訊號掃碼登入。登陸後，點選「新增專案」按鈕，填寫 AppID(如果沒有，則點選無 AppID)和專案名稱。接著，在專案目錄中點選「選擇」，新建一個資料夾作為新的專案目錄。然後再次點選「新增專案」，就可以新建出一個微信小程式專案了本回答被提問者採納

微信web開發者工具 普通除錯怎麼開啟

方法/步驟

微信web開發者工具下載，並安裝

下載連結：

啟動微信web開發者工具

登入微信公眾號，進入web開發者工具，繫結個人微訊號

通過個人微訊號，登入微信web開發者工具

從微信公眾號複製連結到位址列，大功告成

移動除錯，敬請關注。