當前位置:科普知識站>IT科技>

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

IT科技 閱讀(3.19W)

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

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

方法

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

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

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

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

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

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

選擇“本地小程序項目”,如下圖所示:

準備工具 微信公衆號、微信個人號; 電腦; 使用步驟 微信web開發者工具下載,並安裝。 啓動微信web開發者工具。 登入微信公衆號,進入web開發者工具,綁定個人微信號。 透過個人微信號,登入微信web開發者工具。 從微信公衆號複製連結到地址欄

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

點擊“添加項目”,如下圖所示:

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

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

添加項目對話框中,選擇“無AppID”,填寫項目名稱和項目目錄,然後點擊“添加項目”,如下圖所示:

使用工具: 電腦; web開發工具; 例子:以安卓的移動調試爲範本; 調試步驟: 選擇無線網卡地址,默認即可,工具會自動查詢無線網卡ip v4地址。 設定 - 無線局域網 - 選中網絡 - HTTP代理手動,設定好上面步驟以後,重啓微信,這可能是讓微信重

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

創建的項目主介面和項目的目錄結構如下圖所示:

微信手機端調試工具下載地址 這裏寫圖片描述 注:1.如果安裝調試工具-微信Web開發者工具需要卸載以前安裝過的微信Web開發者工具(比如小程序-微信Web開發者工具),建議使用騰訊管家之類的清理乾淨。 2.安裝好後,選擇移動調試,X5 Blink內核調

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

點擊左側的“編輯”即可預覽項目效果,關於更多開發知識,請參考微信公衆平臺上的技術文檔,如下圖所示:

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

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

擴展閱讀,以下內容您可能還感興趣。

微信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開發者工具

從微信公衆號複製連結到地址欄,大功告成

移動調試,敬請關注。