你最大的問(wèn)題是想得太多，而做得太少。
或者
想象力成為你前進(jìn)的最大瓶頸。
可以好好琢磨琢磨下，這兩句話(huà)。
1. 準(zhǔn)備好了嗎？
1.1 實(shí)例分（教）享（程），目的有兩個(gè)方面：
對(duì)自己：相比較給自己看的筆記，做分享筆記我會(huì)更加用心，并且我會(huì)站在可能看我筆記的朋友的角度去思考，也是一種鍛煉。
對(duì)讀者：上一篇文章《微信小程序-新手另類(lèi)上手方法-做就牛》，收到了好多讀者朋友的反饋，謝謝你們，是你們給了我更多的動(dòng)力。
今天的這篇文章是基礎(chǔ)實(shí)例教程的第一篇。在我的認(rèn)知里學(xué)習(xí)一門(mén)技能，實(shí)例教程才是最有用的，既可以在動(dòng)手實(shí)踐的過(guò)程中學(xué)習(xí)理論知識(shí)，還可以更有效地激發(fā)我無(wú)窮的想象力。
1.2 必備物料：
一臺(tái)電腦
下載并安裝好的小程序開(kāi)發(fā)者工具，如圖所示：
- 下載demo，如圖所示：
這個(gè) demo 是個(gè)壓縮包文件，需要解壓，解壓到你覺(jué)得合適的位置，比如：
- 必看：小程序文檔，分為兩大部分，小程序開(kāi)發(fā)文檔和小程序設(shè)計(jì)指南。你一定要多看看，多回顧。
2. 好的開(kāi)始，帶來(lái)更多的想象
2.1 新建空文件夾
以我為例在 F:\微信小程序 目錄下創(chuàng)建一個(gè)名字為 quickstart 的空的文件夾，如圖所示：
2.2 微信Web開(kāi)發(fā)者工具
打開(kāi)安裝好的 微信Web開(kāi)發(fā)者工具，并點(diǎn)擊 添加項(xiàng)目，如圖所示：
2.3 創(chuàng)建新項(xiàng)目
點(diǎn)擊 無(wú)AppID，填寫(xiě) 項(xiàng)目名稱(chēng) 為 quickstart（你也可以寫(xiě)其他名字），選擇 項(xiàng)目目錄， 就是剛才新建的哪個(gè)空文件夾 quickstart，然后點(diǎn)擊 添加項(xiàng)目。如圖所示：
2.4 更改標(biāo)題名字
更改標(biāo)題名字，由 WeChat 更改 自己的名字，如圖所示：
2.5 增加底部tabBar
如圖所示：
在 app.json 中所需增加的代碼：
,
"tabBar": {
"color": "#dddddd",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png",
"text": "宋鵬"
}, {
"pagePath": "pages/index/index",
"iconPath": "image/wechat.png",
"selectedIconPath": "image/wechatHL.png",
"text": "我不是宋鵬"
}]
}
其實(shí)這篇文章寫(xiě)到這里就該結(jié)束了，因?yàn)檫@篇文章最重要的目的是開(kāi)啟想象力，先在自己的內(nèi)心里種下一顆種子，所以這篇文章沒(méi)有任何技術(shù)細(xì)節(jié)的分享。
希望這顆種子可以讓你頻臨崩潰時(shí)挺過(guò)去。
2.6 尋找素材，給tabBar添加圖片
都看到這里了，估計(jì)你快按捺不住那顆好奇的心了，那顆種子估計(jì)也快發(fā)芽了。
這其實(shí)就是我與小程序?qū)υ?huà)的過(guò)程，它（or他or她）似乎蠻友好的。雖然現(xiàn)在的我對(duì)它的語(yǔ)言不是十分了解，但我知道去哪里學(xué)習(xí)，怎么學(xué)習(xí)和大概用多少時(shí)間就可以掌握這門(mén)語(yǔ)言，想一想還是很開(kāi)心的。我的朋友里又多了一類(lèi)（不是人吧！）。相信你也可以感受到！
2.7 如果你在學(xué)習(xí)過(guò)程中遇到問(wèn)題了怎么辦？
2.7.1 反復(fù)看微信小程序開(kāi)發(fā)文檔，理解什么是 框架？什么是組件？什么是API？然后多敲代碼，多看源碼；
2.7.2 如果微信小程序開(kāi)發(fā)文檔找不到答案，那么花些時(shí)間把 HTML、CSS和JavaScript搞定。強(qiáng)烈建議與微信小程序開(kāi)發(fā)同步學(xué)習(xí)。
學(xué)習(xí) HTML 和 CSS， 這兩個(gè)東西是一套的，非常容易理解， 把w3school上面的教程過(guò)一遍就會(huì)了， 記住要一個(gè)個(gè)過(guò), 千萬(wàn)不要偷懶, 一旦開(kāi)始偷懶, 你會(huì)越來(lái)越偷懶, 最后什么都沒(méi)學(xué)成。在線(xiàn)教程：HTML 教程， CSS 教程；或者 書(shū)籍（有kindle電子版）：《HTML5與CSS3基礎(chǔ)教程(第8版》) ；
一本超好入門(mén)書(shū)： 《JavaScript DOM編程藝術(shù)（第2版）》 (Jeremy Keith，Jeffrey Sambells)，書(shū)很薄，有事兒沒(méi)事兒多看幾遍，每一行代碼都敲一遍，看看效果。吃透為止。
2.7.3 搜索引擎，能用谷歌最好，不行的話(huà)百度、必應(yīng)等也可以，我們的目的是解決問(wèn)題。知乎是個(gè)好地方，也可以搜索的。
3. 把玩兒 demo
3.1 添加項(xiàng)目
3.2 隨意操作
用鼠標(biāo)在電腦上把玩它，就像平時(shí)我們用手機(jī)一樣，不用擔(dān)心誤操作或文件損毀，放心大膽的把玩吧！記得結(jié)合微信小程序開(kāi)發(fā)文檔找規(guī)律，當(dāng)你發(fā)現(xiàn)越來(lái)越多的規(guī)律時(shí)，恭喜你又進(jìn)步了。
3.3 到了這一步，我估計(jì)你的想象力都快跳出窗外了吧。
3.4 記住這個(gè)體驗(yàn)
接下來(lái)就是“打卡式”的刻意練習(xí)了，我昨天制定的打卡信息，供參考，后果自負(fù)（偷笑）：
當(dāng)我找到為之奮斗的目標(biāo)時(shí)，打卡等機(jī)械化行動(dòng)確實(shí)很節(jié)約腦力勞動(dòng)和時(shí)間成本。這也解釋了好多大牛一年四季服裝基本一樣，好像都沒(méi)有“換過(guò)”。當(dāng)然這種穿著方式純個(gè)人選擇，你喜歡就好。本人現(xiàn)在的搭配是：牛仔褲+襯衫+MA-1飛行服。如果傳統(tǒng)漢服采用新材料且款式好的話(huà)，我也會(huì)考慮的，看未來(lái)吧！
每天必做：就叫“打卡”好了。如果當(dāng)你連續(xù)學(xué)習(xí)微信小程序開(kāi)發(fā)這文檔兩個(gè)個(gè)小時(shí)以上時(shí)，就算休息一會(huì)兒還是不想繼續(xù)學(xué)習(xí)這個(gè)，那么這個(gè)時(shí)候我的做法是切換到其他平行的任務(wù)上，比如去學(xué)習(xí)HTML、CSS、GitHub使用方法、JavaScript或者其他。
3.4.1 寫(xiě)≥100行代碼；小程序代碼、HTML、CSS或JavaScript代碼都可以。遇到示例代碼，親自敲一遍，每天的這≥100行代碼千萬(wàn)不要復(fù)制粘貼，前輩們經(jīng)常說(shuō)要多敲代碼。
3.4.2 微信小程序開(kāi)發(fā)筆記：≥100字。我的建議是，寫(xiě)教程，好吧我承認(rèn)我目前就是這么干的。我的第一篇文章兩周前就開(kāi)始寫(xiě)了，過(guò)去的兩周時(shí)間每天都在查資料看文檔，遇到好的內(nèi)容就截取復(fù)制過(guò)來(lái)，用寫(xiě)筆記的方式把這些截取過(guò)來(lái)的內(nèi)容歸類(lèi)，等到把這一階段學(xué)會(huì)的時(shí)候，一篇完整的文章就出來(lái)了，當(dāng)然好多細(xì)節(jié)地方還需要更改優(yōu)化，不過(guò)整體框架是有的。
3.4.3 微信小程序新增/優(yōu)化≥1個(gè)功能；比如我在網(wǎng)上看到某個(gè)我需要的效果或者功能，我會(huì)快速的把它里面的代碼片段復(fù)制粘貼到我的文件里，試試看效果，然后微調(diào)。這個(gè)過(guò)程就像搭積木，會(huì)有快感。如果可以滿(mǎn)足要求，那么我會(huì)重新敲一遍代碼，方法論就是先模仿，再創(chuàng)造。引申出 羅子雄 《如何成為一名優(yōu)秀的設(shè)計(jì)師》
3.4.4 走路：走路總時(shí)長(zhǎng)≥60分鐘；
3.4.5 隨機(jī)輸入：微信公眾號(hào)、稀土掘金、知乎、谷歌、新生大學(xué)、得到等；
3.4.6 寫(xiě)日記：不限字?jǐn)?shù)，好多時(shí)候都是零零散散的點(diǎn)子，也可能是某篇文章或筆記內(nèi)容需要增減或修改。這個(gè)時(shí)候有道云筆記就派上用場(chǎng)了，隨時(shí)隨地同步。
3.5 因?yàn)槟愕姆椒ê湍繕?biāo)已經(jīng)清晰，深入的做下去，做就牛。
延伸：
要要對(duì)自己好一些，請(qǐng)欣賞。
程《如何成為一名優(yōu)秀的設(shè)計(jì)師：羅子雄@TEDxChongqing》，關(guān)鍵詞：基礎(chǔ)實(shí)例教
黑客題材電影《我是誰(shuí)：沒(méi)有絕對(duì)安全的系統(tǒng) Who Am I - Kein System ist sicher (2014)》
4. 下一次分享預(yù)告：
如何刻意練習(xí)微信小程序開(kāi)發(fā)，一定會(huì)涉及到用工程學(xué)思維，將要達(dá)到的目標(biāo)分解成若干個(gè)可執(zhí)行的小目標(biāo)。
參考資料：
熟練掌握小程序開(kāi)發(fā)的各個(gè)環(huán)節(jié)；由于我是零基礎(chǔ)開(kāi)始學(xué)習(xí)編程，所以跟著趨勢(shì)跑，進(jìn)步速度才會(huì)更快，就好比坐上火箭。而當(dāng)下這個(gè)時(shí)間節(jié)點(diǎn)，微信小程序開(kāi)發(fā)滿(mǎn)足我的需求，以此為切入點(diǎn)，積累我的技術(shù)棧；
一本超好入門(mén)書(shū): 《JavaScript DOM編程藝術(shù)（第2版）》 (Jeremy Keith，Jeffrey Sambells)，書(shū)很薄，有事兒沒(méi)事兒多看幾遍，每一行代碼都敲一遍，看看效果。吃透為止。
《Web全棧工程師的自我修養(yǎng)》——余果，有Kindle電子版），這本書(shū)帶給我的更多的收獲，是思路上的，作者從工作實(shí)踐中來(lái)的經(jīng)驗(yàn)，很有指導(dǎo)意義。
也可以找些非官方的，更加豐富多彩的源碼學(xué)習(xí)臨摹，比如：微信小程序之知乎日?qǐng)?bào)
飯每天都要吃，文章為啥不能再看一遍呢！
陪伴在路上的全棧工程師，
