開發(fā)微信小程序入門前

2016年09月21日晚 微信發(fā)不了微信“小程序”的內測版，一時間整個互聯網都炸了鍋。個大新聞、論壇都在討論這個事情。

作為互聯網的一猿，我們怎能不緊跟時代的腳步。于是第二天上午也對微信發(fā)布的“小程序” 進一步的做了相關了解。

很多人問我這是什么？

我一般回答：這是未來。

安裝教程

關于使用教程網上已經有非常多的教程了，我在這里也不過多贅述，就簡單的介紹一下。

想要快速的學習及開發(fā)微信的“小程序”（雖然它還沒正式發(fā)布）我們首先需要一個“微信web開發(fā)著工具”這么一個軟件，windows版與Mac版都有。注意，是0.9及以上的版本，0.7版本無法運行。

Mac版下載地址：wechat_web_devtools_0.9.092100.dmg
windows下載地址：wechat_web_devtools_0.9.092100_x64.exe

Mac的安裝方式很簡單，與普通應用的安裝方式一樣。

1. 打開下載好用dmg文件

2. 把"微信web開發(fā)者工具"拖進Application就算是安裝完成了

3. 依次打開"系統(tǒng)便好設置"->"安全與隱私"->"點按鎖按鈕以進行更改"->選擇"任何來源"

4. 根據提示點"是"、"打開" 然后就可以正常的打開應用了

以下是截圖：

先用自己的開發(fā)者賬號掃一下二維碼登陸“微信開web發(fā)者工具”，登陸成功后會出現一下界面：

(我已經添加過了，所以不用在意這些細節(jié))

點擊“添加項目”

這是會提示輸入AppId、項目名稱、及項目地址, 如下圖

什么是AppID？

注意：這里的App ID不是原來開發(fā)者帳號的那個App ID。

眾所周知，騰訊只給發(fā)了200個開發(fā)者賬號，那像咱們這種沒有資格的怎么辦？

我們是猿誒，在不影響他人利益的情況下當然選擇破解。

題外話：

聽說開發(fā)者帳號已經吵到300萬了，不知道是真的還是假的！

1. 每個用戶只能有20個“小程序”

2. “小程序”不能打開第三方應用

3. 每個應用開發(fā)完后打包提交給微信進行審核

4. 應用是在微信的服務器的

5. 無法獨立出一個獨立的應用，只能在微信上使用

然后點"添加項目"就完成了一個項目的創(chuàng)建。

破解方法

windows與mac的破解方法基本相同，這里只以mac為例

先關閉開發(fā)者工具

下載這兩個JS文件，分別替換各個目錄中的文件

文件1: createstep.js
文件2: projectStores.js

替換的路徑

1. createstep.js ->/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/components/create/createstep.js

2. projectStores.js ->/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/stroes/projectStores.js

替換完后啟動應用，然后輸入App ID（隨便輸入一個就行了）然后項目名、路徑等。

這樣就可以真正進入開發(fā)界面了。

注意：按照網上的教程需要重新啟動一下“微信web開發(fā)者工具”原因可能是使用某些功能的時候會提示AppId未注冊。

網上有一個微信Demo，也不知道是不是微信官方的，里邊有大量的例子。

demo下載：demo.zip

這是一個比較全的demo，包含了大部份功能，及微信所開放的api。

點擊關閉退出到項目選擇頁面，然后選擇“添加應用”與上面方法相同，注意，“項目路徑”選擇剛剛所下載的“Demo” 讓后啟動，就可以體驗大量demo了。

寫一個hello world！

一般有三個文件：

1. .wxml 相當于html與xml的結合體

2. .js 就是js文件

3. .wxss 某種css吧

需要注意的是目前小應用暫時不支持其他插件比如jQuery啥的。

選擇"編輯"選項卡, 打開/pages/index/index.wxml

是不是很熟悉，就是html與xml的結合 先不做修改。然后打開 /pages/index/index.js

在Page函數里的 data 對象里的 motto的值改成Hello Dudulu

bindViewTap 這個方法是綁定的跳轉，如果你設置了userInfo的nickName的值，它將會顯示在頁面正中央，當你點擊"nickName"的時候，它路由跳轉到/pages/logs/logs.wxml了

改完后回到"調式"選項卡,點擊"重啟"就可以刷新剛剛所修改的文本了。

運行效果:

這里有一個錯誤，github上已經有修復改錯誤的方法了，還需要替換一個文件:

1. 文件3: asdebug.js

替換目錄:/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/app/dist/weapp/appservice/asdebug.js

就可解決以上報錯的問題。