你最大的问题是想得太多，而做得太少。
或者
想象力成为你前进的最大瓶颈。
可以好好琢磨琢磨下，这两句话。
1. 准备好了吗？
1.1 实例分（教）享（程），目的有两个方面：
对自己：相比较给自己看的笔记，做分享笔记我会更加用心，并且我会站在可能看我笔记的朋友的角度去思考，也是一种锻炼。
对读者：上一篇文章《微信小程序-新手另类上手方法-做就牛》，收到了好多读者朋友的反馈，谢谢你们，是你们给了我更多的动力。
今天的这篇文章是基础实例教程的第一篇。在我的认知里学习一门技能，实例教程才是最有用的，既可以在动手实践的过程中学习理论知识，还可以更有效地激发我无穷的想象力。
1.2 必备物料：
一台电脑
下载并安装好的小程序开发者工具，如图所示：
- 下载demo，如图所示：
这个 demo 是个压缩包文件，需要解压，解压到你觉得合适的位置，比如：
- 必看：小程序文档，分为两大部分，小程序开发文档和小程序设计指南。你一定要多看看，多回顾。
2. 好的开始，带来更多的想象
2.1 新建空文件夹
以我为例在 F:\微信小程序 目录下创建一个名字为 quickstart 的空的文件夹，如图所示：
2.2 微信Web开发者工具
打开安装好的 微信Web开发者工具，并点击 添加项目，如图所示：
2.3 创建新项目
点击 无AppID，填写 项目名称 为 quickstart（你也可以写其他名字），选择 项目目录， 就是刚才新建的哪个空文件夹 quickstart，然后点击 添加项目。如图所示：
2.4 更改标题名字
更改标题名字，由 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": "我不是宋鹏"
}]
}
其实这篇文章写到这里就该结束了，因为这篇文章最重要的目的是开启想象力，先在自己的内心里种下一颗种子，所以这篇文章没有任何技术细节的分享。
希望这颗种子可以让你频临崩溃时挺过去。
2.6 寻找素材，给tabBar添加图片
都看到这里了，估计你快按捺不住那颗好奇的心了，那颗种子估计也快发芽了。
这其实就是我与小程序对话的过程，它（or他or她）似乎蛮友好的。虽然现在的我对它的语言不是十分了解，但我知道去哪里学习，怎么学习和大概用多少时间就可以掌握这门语言，想一想还是很开心的。我的朋友里又多了一类（不是人吧！）。相信你也可以感受到！
2.7 如果你在学习过程中遇到问题了怎么办？
2.7.1 反复看微信小程序开发文档，理解什么是 框架？什么是组件？什么是API？然后多敲代码，多看源码；
2.7.2 如果微信小程序开发文档找不到答案，那么花些时间把 HTML、CSS和JavaScript搞定。强烈建议与微信小程序开发同步学习。
学习 HTML 和 CSS， 这两个东西是一套的，非常容易理解， 把w3school上面的教程过一遍就会了， 记住要一个个过, 千万不要偷懒, 一旦开始偷懒, 你会越来越偷懒, 最后什么都没学成。在线教程：HTML 教程， CSS 教程；或者 书籍（有kindle电子版）：《HTML5与CSS3基础教程(第8版》) ；
一本超好入门书： 《JavaScript DOM编程艺术（第2版）》 (Jeremy Keith，Jeffrey Sambells)，书很薄，有事儿没事儿多看几遍，每一行代码都敲一遍，看看效果。吃透为止。
2.7.3 搜索引擎，能用谷歌最好，不行的话百度、必应等也可以，我们的目的是解决问题。知乎是个好地方，也可以搜索的。
3. 把玩儿 demo
3.1 添加项目
3.2 随意操作
用鼠标在电脑上把玩它，就像平时我们用手机一样，不用担心误操作或文件损毁，放心大胆的把玩吧！记得结合微信小程序开发文档找规律，当你发现越来越多的规律时，恭喜你又进步了。
3.3 到了这一步，我估计你的想象力都快跳出窗外了吧。
3.4 记住这个体验
接下来就是“打卡式”的刻意练习了，我昨天制定的打卡信息，供参考，后果自负（偷笑）：
当我找到为之奋斗的目标时，打卡等机械化行动确实很节约脑力劳动和时间成本。这也解释了好多大牛一年四季服装基本一样，好像都没有“换过”。当然这种穿着方式纯个人选择，你喜欢就好。本人现在的搭配是：牛仔裤+衬衫+MA-1飞行服。如果传统汉服采用新材料且款式好的话，我也会考虑的，看未来吧！
每天必做：就叫“打卡”好了。如果当你连续学习微信小程序开发这文档两个个小时以上时，就算休息一会儿还是不想继续学习这个，那么这个时候我的做法是切换到其他平行的任务上，比如去学习HTML、CSS、GitHub使用方法、JavaScript或者其他。
3.4.1 写≥100行代码；小程序代码、HTML、CSS或JavaScript代码都可以。遇到示例代码，亲自敲一遍，每天的这≥100行代码千万不要复制粘贴，前辈们经常说要多敲代码。
3.4.2 微信小程序开发笔记：≥100字。我的建议是，写教程，好吧我承认我目前就是这么干的。我的第一篇文章两周前就开始写了，过去的两周时间每天都在查资料看文档，遇到好的内容就截取复制过来，用写笔记的方式把这些截取过来的内容归类，等到把这一阶段学会的时候，一篇完整的文章就出来了，当然好多细节地方还需要更改优化，不过整体框架是有的。
3.4.3 微信小程序新增/优化≥1个功能；比如我在网上看到某个我需要的效果或者功能，我会快速的把它里面的代码片段复制粘贴到我的文件里，试试看效果，然后微调。这个过程就像搭积木，会有快感。如果可以满足要求，那么我会重新敲一遍代码，方法论就是先模仿，再创造。引申出 罗子雄 《如何成为一名优秀的设计师》
3.4.4 走路：走路总时长≥60分钟；
3.4.5 随机输入：微信公众号、稀土掘金、知乎、谷歌、新生大学、得到等；
3.4.6 写日记：不限字数，好多时候都是零零散散的点子，也可能是某篇文章或笔记内容需要增减或修改。这个时候有道云笔记就派上用场了，随时随地同步。
3.5 因为你的方法和目标已经清晰，深入的做下去，做就牛。
延伸：
要要对自己好一些，请欣赏。
程《如何成为一名优秀的设计师：罗子雄@TEDxChongqing》，关键词：基础实例教
黑客题材电影《我是谁：没有绝对安全的系统 Who Am I - Kein System ist sicher (2014)》
4. 下一次分享预告：
如何刻意练习微信小程序开发，一定会涉及到用工程学思维，将要达到的目标分解成若干个可执行的小目标。
参考资料：
熟练掌握小程序开发的各个环节；由于我是零基础开始学习编程，所以跟着趋势跑，进步速度才会更快，就好比坐上火箭。而当下这个时间节点，微信小程序开发满足我的需求，以此为切入点，积累我的技术栈；
一本超好入门书: 《JavaScript DOM编程艺术（第2版）》 (Jeremy Keith，Jeffrey Sambells)，书很薄，有事儿没事儿多看几遍，每一行代码都敲一遍，看看效果。吃透为止。
《Web全栈工程师的自我修养》——余果，有Kindle电子版），这本书带给我的更多的收获，是思路上的，作者从工作实践中来的经验，很有指导意义。
也可以找些非官方的，更加丰富多彩的源码学习临摹，比如：微信小程序之知乎日报
《文档与源码编写风格》 ——腾讯
饭每天都要吃，文章为啥不能再看一遍呢！
陪伴在路上的全栈工程师，
