微信小程序開發環境搭建

微信小程序可謂是今天最火的一個名詞了,一經出現真是轟炸了整個開發人員,當然很多App開發人員有了一個擔心,微信小程序的到來會不會給移動端App帶來一個寒冬,身爲一個Android開發者我是不相信的,即使有,那也是很遙遠的未來。


不管微信小程序是否能顛覆當今的開發格局,我們都要以好奇的心態去接收,去學習。不排斥新技術,所以,心動不如行動,趕緊先搭建一個微信小程序開發工具。那麼接下來就讓我們一起來開始吧。

先放一張Github上demo的動態圖

 

開發工具下載是看到GitHub上的分享。那麼你可以直接進入該GitHub,找下載鏈接即可下載。


當然我把安裝順序以及遇到的問題在此詳細介紹一下。(接下來按照此步驟安裝即可成功(windows版))


下載微信小程序開發工具0.7.0版本(下載鏈接:http://pan.baidu.com/s/1mhIfvp2)因爲0.9.0版本有登陸驗證,直接安裝一直登陸不上,一直提示please bind your wechat account to the appid first,掃碼掃了上百次也沒登錄上(是有多大的耐心),下載0.7.0版本後直接安裝,安裝過程很簡單,選擇安裝目錄下一步就可以了,安裝成功後登陸進入程序出現,需要微信掃碼。

 


 

進入後出現上面界面關閉。然後下載0.9.0版本(下載鏈接:http://pan.baidu.com/s/1mhIfvp2


下載後直接覆蓋安裝就可以了(要覆蓋安裝),安裝後先不用打開開發工具,即使你想打開也進不去。因爲程序是沒有破解的。安裝程序後需要下載三個js破解文件替換掉我們安裝程序的對於目錄的對應文件。直接進入該GitHub下載,Github鏈接https://github.com/gavinkwoe/weapp-ide-crack


下載下圖的三個文件

 


 

我將工具安裝到D盤了,分別找到下面三個目錄替換對應文件即可

D:\微信web開發者工具\package.nw\app\dist\components\create\createstep.js

D:\微信web開發者工具\package.nw\app\dist\stroes\projectStores.js

D:\微信web開發者工具\package.nw\app\dist\weapp\appservice\asdebug.js

替換文件後即可登錄成功了,登錄後界面如下

 


那麼我們直接點擊添加項目,點擊後界面

 


因爲我們沒有內測賬號,這個appid可以隨便輸入,項目名稱,及開發目錄就隨便寫了。
填好信息後點擊添加項目

 


OK,神奇的事情出現了,一個helloworld項目就出現了。

 

點擊編輯

 

選擇對應的文件即可編寫代碼了。

 

調試


點擊調試按鈕,左上有可以選擇調試的移動終端,裏面可以選擇蘋果,三星及其他不同分辨率設備。設備右邊有選擇網絡的按鈕,可以選擇wifi,2G,3G,4G網絡。在右邊的窗口,有console可以查看控制檯打印的信息,以及網絡,存儲信息等。

 


 

我們點擊最右上角按鈕,與選擇顯示console,查找文件,快捷鍵,以及傳感器,渲染設置,幫助等。在左下角有清楚緩存,重啓小程序,按鈕。

 

對了GitHub有個demo,我們可以把這個demo複製到我們的開發目錄下,看下微信小程序效果,剛纔創建的是一個helloworld,太簡單,看不出它的魅力。



 

動態圖我放到前面了。

 

好了就簡單介紹到這裏,想了解更多內容,請看開發文檔


簡易教程

http://wxopen.notedown.cn/?t=1474537660904


開發者工具文檔

http://wxopen.notedown.cn/devtools/devtools.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章