圖解怎麼利用微信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/8dd011b680/9ecd12a788cd/8dd005/8dd005b788c17635.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開發者工具

從微信公眾號複製鏈接到地址欄，大功告成

移動調試，敬請關注。