微信小程序開放公測以來，一夜之間在各種技術(shù)社區(qū)中就火起來啦。對于它 估計大家都不陌生了，對于它未來的價值就不再贅述，簡單一句話：可以把小程序簡單理解為一個新的操作系統(tǒng)、新的生態(tài)，未來大部分應(yīng)用場景都將給予微信小程序進行研發(fā)?；趯λ木次芬约氨阌诖蠹铱焖偕鲜郑卣砦⑿判〕绦蛏坛情_發(fā)系列，未來將持續(xù)增加微信小程序技術(shù)文章，讓大家可全面了解如何快速開發(fā)微信小程序商城。

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

小程序開發(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)下載對應(yīng)的版本

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

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

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

這個我們選擇新建一個本地的小程序項目

點擊添加項目

這邊依次填寫你的APPID，項目名稱以及你所建的項目的目錄

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

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

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

編輯：主要功能相當于我們代碼編輯器的功能。

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

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

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

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

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

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

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

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

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

這邊需要注意的預(yù)覽只能是在登錄了和當前IDE相同微信號的手機上。其他手機通過微信掃碼將不能進行預(yù)覽。

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論