微信小程序開放公測(cè)以來(lái)，一夜之間在各種技術(shù)社區(qū)中就火起來(lái)啦。對(duì)于它 估計(jì)大家都不陌生了，對(duì)于它未來(lái)的價(jià)值就不再贅述，簡(jiǎn)單一句話：可以把小程序簡(jiǎn)單理解為一個(gè)新的操作系統(tǒng)、新的生態(tài)，未來(lái)大部分應(yīng)用場(chǎng)景都將給予微信小程序進(jìn)行研發(fā)?；趯?duì)它的敬畏以及便于大家快速上手，特整理微信小程序商城開發(fā)系列，未來(lái)將持續(xù)增加微信小程序技術(shù)文章，讓大家可全面了解如何快速開發(fā)微信小程序商城。

本篇文章主要介紹微信小程序官方提供的開發(fā)工具，俗話說(shuō)：欲工善其身，必先利其器。

小程序開發(fā)文檔地址https://mp.weixin.qq.com/debug/wxadoc/dev/index.html

首先我們需要獲取一下微信小程序提供給我們的代碼編輯器

工具獲取地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html?t=20161107
下載地址我們可以根據(jù)我們電腦系統(tǒng)下載對(duì)應(yīng)的版本

下載安裝包后直接雙擊打開按照流程完成安裝

安裝好后在桌面會(huì)有一個(gè)<微信web開發(fā)者工具> 這個(gè)就是微信小程序所提供的編輯器

下面我們就一步一步的來(lái)創(chuàng)建一個(gè)微信小程序
打開工具你會(huì)發(fā)現(xiàn)工具的使用需要通過(guò)微信掃描登錄才可使用
掃碼登錄之后我們就可以選擇我們需要建立的項(xiàng)目類型

這個(gè)我們選擇新建一個(gè)本地的小程序項(xiàng)目

點(diǎn)擊添加項(xiàng)目

這邊依次填寫你的APPID，項(xiàng)目名稱以及你所建的項(xiàng)目的目錄

目前已經(jīng)開始公測(cè) 小程序的注冊(cè)范圍為企業(yè)，政府，媒體，和其他組織，也就是說(shuō)個(gè)人是沒(méi)有辦法注冊(cè)的，所以這個(gè)不在注冊(cè)范圍之內(nèi)的可以選擇無(wú)APPID來(lái)進(jìn)行開發(fā)

已經(jīng)有的可以登錄https://mp.weixin.qq.com 后臺(tái)，在設(shè)置中查看到小程序的APPID
完成上面步驟添加完項(xiàng)目后，我們就可以進(jìn)入到編輯器的界面

編輯器主要分為三個(gè)模塊，編輯，調(diào)試，項(xiàng)目。

編輯：主要功能相當(dāng)于我們代碼編輯器的功能。

調(diào)試：這個(gè)類型于我們Goole瀏覽器的控制臺(tái)一樣

項(xiàng)目：這個(gè)地方主要執(zhí)行的是發(fā)布代碼和預(yù)覽的地方

做前端的同行們應(yīng)該都很容易上手這個(gè)就相當(dāng)于，將我們以前web開發(fā)的編輯器，調(diào)試工具集成到一個(gè)環(huán)境中來(lái)。還是比較好理解的。

在調(diào)試界面可以看到這個(gè)就類似于我們使用Goole瀏覽器開發(fā)H5網(wǎng)站時(shí)差不多。是不是找回點(diǎn)熟悉的味道啦!

在調(diào)試界面我們可以手動(dòng)進(jìn)行編譯。（這邊我們也可以在項(xiàng)目模塊設(shè)置自動(dòng)監(jiān)聽(tīng)文件變化編譯文件的）

手動(dòng)清除緩存，查看控制臺(tái)日志，網(wǎng)絡(luò)請(qǐng)求…..等等。
接下來(lái)就是我們的項(xiàng)目模塊，項(xiàng)目模塊比較簡(jiǎn)潔。

這邊可以執(zhí)行項(xiàng)目的上傳，和預(yù)覽，以及整個(gè)IDE一些簡(jiǎn)單的配置。

這邊需要注意的是這個(gè)上傳代碼需要管理員才能進(jìn)行上傳，當(dāng)然沒(méi)有沒(méi)有AppID是上傳不了的啦。由于現(xiàn)在是公測(cè)階段，我們上傳的代碼也不能真正的讓用戶看到只有開發(fā)者可以看到。

另外下面這個(gè)預(yù)覽功能可能是我覺(jué)得是整個(gè)IDE的唯一亮點(diǎn)。大家知道我們以前在做H5網(wǎng)站最頭疼的就是在瀏覽器的模擬器上，一切正?？墒堑秸媸堑氖謾C(jī)上看就有各種兼容性問(wèn)題。這個(gè)功能可以你在做完一個(gè)頁(yè)面可以馬上上傳上去通過(guò)掃碼來(lái)進(jìn)行預(yù)覽。

這邊需要注意的預(yù)覽只能是在登錄了和當(dāng)前IDE相同微信號(hào)的手機(jī)上。其他手機(jī)通過(guò)微信掃碼將不能進(jìn)行預(yù)覽。

好啦今天先介紹微信IDE，下一章節(jié)我們會(huì)一步步的來(lái)實(shí)現(xiàn)我們的小程序

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論