微信小程序開(kāi)發(fā)初探：工具界面，調(diào)試區(qū)六大工具介紹
【主要內(nèi)容:】
1. 微信小程序web開(kāi)發(fā)工具下載地址
2. 創(chuàng)建項(xiàng)目
3. 開(kāi)發(fā)工具界面
4. 調(diào)試區(qū)六大工具介紹
5. 我與微信小程序的插曲
6. 微信小程序總結(jié)
一、微信小程序web開(kāi)發(fā)工具下載地址
1.1 在微信公眾平臺(tái)-小程序里邊去下載開(kāi)發(fā)工具下載地址。
1.2 下載后安裝一下就可以使用了：
二、創(chuàng)建項(xiàng)目
2.1 微信小程序web開(kāi)發(fā)工具需要掃碼登陸，所以必須先綁定開(kāi)發(fā)者才可以：
2.2 已經(jīng)綁定的開(kāi)發(fā)者可以創(chuàng)建項(xiàng)目，需要填寫(xiě)AppID、項(xiàng)目名稱、本地開(kāi)發(fā)目錄。
AppID需要去設(shè)置里邊獲取，如果不填的話官方給的提示是部分功能受限：
三、開(kāi)發(fā)工具界面介紹：
1. 編輯：開(kāi)發(fā)的時(shí)候，需要到編輯區(qū)去寫(xiě)代碼
2. 調(diào)試：開(kāi)發(fā)完需要調(diào)試程序的時(shí)候需要切換到這個(gè)區(qū)域，調(diào)試區(qū)有很多工具可供使用。
3. 項(xiàng)目：在這里可以上傳或者預(yù)覽項(xiàng)目
4. 編譯：就相當(dāng)于運(yùn)行項(xiàng)目的意思
5. 關(guān)閉：關(guān)閉當(dāng)前工程
6. 微信小程序web開(kāi)發(fā)工具提供實(shí)時(shí)預(yù)覽的功能，界面的效果會(huì)在這個(gè)區(qū)域顯示
7. 這個(gè)區(qū)域可以看到整個(gè)項(xiàng)目的文檔目錄結(jié)構(gòu)
8. 這個(gè)區(qū)域是編碼區(qū)
9. 這里是選擇屏幕尺寸的地方
10. 模擬網(wǎng)絡(luò)環(huán)境：2G/3G/4G/WiFi
四、調(diào)試區(qū)六大工具介紹：
在調(diào)試區(qū)開(kāi)發(fā)工具提供了6種調(diào)試模式：
4.1 Console
Console的意思是控制臺(tái)，做過(guò)開(kāi)發(fā)的都知道幾乎每個(gè)IDE都會(huì)有控制臺(tái)，可以顯示錯(cuò)誤信息和打印變量的信息等。
4.2 Sources
Sources顯示了當(dāng)前項(xiàng)目的所有腳本文件，微信小程序框架會(huì)對(duì)這些腳本文件進(jìn)行編譯。
Source下邊還有一個(gè)區(qū)域，做過(guò)軟件開(kāi)發(fā)的都知道，一般下邊是控制臺(tái)會(huì)顯示一些log信息、斷電調(diào)試等等。
4.3 Network
Network顧名思義：這個(gè)區(qū)域顯示的是與網(wǎng)絡(luò)相關(guān)的信息，我這里暫時(shí)沒(méi)有進(jìn)行網(wǎng)絡(luò)請(qǐng)求。
4.4 Storage
官方的解釋是顯示當(dāng)前項(xiàng)目的使用wx.setStorage或者wx.setStorageSync后的數(shù)據(jù)存儲(chǔ)情況。這個(gè)后續(xù)用到再慢慢研究
4.5 AppData
AppData是顯示當(dāng)前項(xiàng)目顯示的具體數(shù)據(jù)，可以在這里編譯，并且會(huì)在頁(yè)面實(shí)時(shí)顯示。
4.6 Wxml
Wxml調(diào)試區(qū)：把他的名字換一下的話大家就好理解了，其實(shí)他的實(shí)質(zhì)就是HTML+CSS，微信只是把HTML改成了Wxml而已。學(xué)過(guò)HTML的人一看就明白，左側(cè)的區(qū)域是HTML語(yǔ)言+CSS的一些標(biāo)簽屬性。右側(cè)可以便捷的設(shè)置CSS的屬性。
五、我與微信小程序的插曲
讓我和朋友誤以為微信出的這個(gè)小程序類似于Xcode的Storyboard功能一樣可以進(jìn)行拖拽開(kāi)發(fā)。申請(qǐng)完的第一時(shí)間我就可以找這個(gè)功能找了一下午都沒(méi)有找到，最后找到一個(gè)微信小程序設(shè)計(jì)指南，在這里邊我找到了之前看到過(guò)的圖，原來(lái)之前看到的那些圖都是一些小程序的設(shè)計(jì)規(guī)范而已，并不是我想象的那樣可視化開(kāi)發(fā)，讓那些不會(huì)代碼的人也能開(kāi)發(fā)。
雖然目前的內(nèi)側(cè)版本并沒(méi)有這個(gè)功能，但是不排除不就的將來(lái)微信會(huì)出類似Xcode的Storyboard這樣的可視化開(kāi)發(fā)功能。
六、微信小程序總結(jié)
當(dāng)然其他程序猿也不必慌張，微信小程序才剛出來(lái)，目前還是內(nèi)測(cè)階段對(duì)于我們來(lái)說(shuō)有大把大把的時(shí)間來(lái)學(xué)HTML5相關(guān)的技術(shù)。畢竟一門(mén)語(yǔ)言學(xué)會(huì)了，其實(shí)語(yǔ)言和語(yǔ)言之間的思想是相同的，只是每個(gè)語(yǔ)言的語(yǔ)法不同而已。
其次，還想聊聊前端開(kāi)發(fā)程序猿（iOS/Android/H5/WP.....）未來(lái)的發(fā)展方向。再往前四五年，當(dāng)時(shí)大家都是100% Native開(kāi)發(fā)。但是隨著HTML5的發(fā)展和性能不斷的改進(jìn)，再加上強(qiáng)大的網(wǎng)絡(luò)支持，HTML5做出來(lái)的東西非常接近原生語(yǔ)言開(kāi)發(fā)的App，而且原生app還不具備HTML5頁(yè)面的靈活性。在易到用車開(kāi)發(fā)的時(shí)候HTML5的頁(yè)面大概能占到所有頁(yè)面的10%，而且這個(gè)比例也再不斷增長(zhǎng)。因?yàn)檫\(yùn)營(yíng)可能會(huì)經(jīng)常的發(fā)布活動(dòng)，如果用Native開(kāi)發(fā)，那么每次活動(dòng)都需要重新提交審核太麻煩了，所以HTML5的優(yōu)勢(shì)就體現(xiàn)出來(lái)了。所以像iOS或者Android開(kāi)發(fā)的工程師都可以去學(xué)習(xí)web前端的開(kāi)發(fā)技術(shù)，即使不為了開(kāi)發(fā)小程序，也為了程序中日漸變多的HTML5頁(yè)面的交互和相互調(diào)用。
未來(lái)微信小程序的開(kāi)發(fā)對(duì)于中小企業(yè)的公司來(lái)說(shuō)確實(shí)不錯(cuò)，如果對(duì)業(yè)務(wù)和性能方面要求不是很高，完全可以用微信小程序開(kāi)發(fā)就可以，這樣前端的開(kāi)發(fā)工作只需要招一個(gè)web前端的程序猿即可。至少可以干掉iOS和Android兩個(gè)程序猿。但是作為iOS和Android程序猿也沒(méi)必要擔(dān)心會(huì)被web前端搶了飯碗。語(yǔ)言都是互通的只要學(xué)習(xí)誰(shuí)都可以做。而且目前只是內(nèi)測(cè)微信小程序做出來(lái)的app的性能不得而知，所以目前的任務(wù)就是先學(xué)習(xí)web前端技術(shù)，以備不時(shí)之需。
