从零开始学做微信小程序，看这些就够了！

从零开始学做微信小程序，看这些就够了！

 

随着正式开放公测，微信小程序再次万众瞩目，越来越多的企业和个人涌入到小程序开发的大军中。小程序究竟是什么？适合做小程序的产品有哪些？做小程序需要提前准备什么？如何零基础学做小程序？此文，将列出OSC上优质的资源供大学了解和学习。

一、新手入门

有关小程序的入门，首选自然是官方文档。 它解释了基本概念，有简单的设计指南和开发教程，能让你很好地对小程序有初步理解。 

• 微信小程序产品定位及功能介绍
• 微信小程序设计指南
• 微信小程序简易教程
• 微信小程序运营规范

看完这些你会发现，小程序主打的是比APP更轻量的形态，简单的开发，却接近app的体验，无需下载，扫码打开。那么，一些刚需且高频的金融类、电商类、教育类等其实是不适合接入小程序的。这些对功能的要求都很重，小程序难以承载。而且小程序不能像微信公众号一样被关注、群推送消息以及转发朋友圈，这也就意味着，它没有办法获取用户更多的信息，也不便于深度营销。

小程序适用哪些产品？

• 功能很轻，用完即走的，如刚需且低频的服务类、旅游类等
• 基于社交场景的轻应用，或者说基于轻社交的应用
• 非即时、可异步的应用
• 初创型企业的MVP产品
• 开发和设计能力有限的产品
• 以及更多……

这些不错的资源你可能也会感兴趣：

• 【微信小程序开发•系列文章一】入门，这篇是 jsongo0 编写的系列文章的第一章，包含了小程序的介绍和前期准备工作。
• memda 的 5款微信小程序开发工具使用报告，可以帮助你提前选择合适的开发工具。
• 腾讯Bugly 的 聊一聊微信小程序，这篇文章里有多位开发人员对小程序的看法，以及利弊探讨等等，能更好的理解小程序理念和适用场景。
• 小程序的 API 文档 （非官方）。

二、开发实战

从9月22日凌晨微信小程序开始内测，就有不少开发者抢先进入小程序进行体验，并发表了大量的开发实战文章。这其中，有针对各个步骤、环节详细的开发教程、有针对单个项目的实践经验，有系列，有单篇……但对于初学者来说，都是极具有参考意义的资源。

1、博卡君 小程序开发系列教程：

在小程序公布内测不到10小时内即“神速”推出的开发系列教程，轰动一时。该系列内容从基础知识到项目实例都有详细表述，博主每日吐血赶稿，可歌可泣。:)

• 全球首个微信小程序（应用号）开发教程！通宵吐血赶稿 —— 序言、准备工作、项目构架
• 第二弹！全球首个微信小程序（应用号）开发教程 —— 项目实例：结构以及配置、首页面开发
• 第三弹！全球首个微信小程序（应用号）开发教程 —— 项目实例：名片夹详情页、个人页面开发
• 第四弹！全球首个微信小程序（应用号）开发教程 —— 项目实例：编辑名片页面开发
• 第五弹！全球首个微信小程序（应用号）开发教程 —— 项目实例：分组开发与左滑功能实现
• 第六弹！全球首个微信小程序（应用号）开发教程 —— 项目实例：拍照收纳开发以及删除名片等

2、 jsongo0 小程序开发系列教程：

和博卡君更偏向项目实例的讲解不同，jsongo0的系列文章更偏向从理论着手，对小程序各个特性、功能、版块进行了详细的分析与解读，并赋予独有的实践思路，内容详细全面，值得深看。（第一章在“新手入门”部分）

• 【微信小程序开发•系列文章二】视图层
• 【微信小程序开发•系列文章三】数据层
• 【微信小程序开发•系列文章四】模块化
• 【微信小程序开发•系列文章五】主界面
• 【微信小程序开发•系列文章六】生命周期和路由
• 【微信小程序开发•系列文章七】websocket

3、腾讯Bugly 小程序开发思考总结：

本文针对作者自己开发的“信用卡还款”项目，进行实践总结和思考，从创建项目，到编写代码，到运行、生成等等，整个过程都进行了详细的记录和说明，值得参考。

• 微信小程序开发思考总结——腾讯“信用卡还款”项目实践

4、秀杰 小程序开发系列教程：

同样是实战系列开发教程，针对记账应用进行了详细的讲解。作者在更新该系列的同时，还更新了开发新闻客户端、开发加法计算器应用、实现购物车页面等实战课程，实力毋庸置疑。

• 微信小程序实战课程之记账应用开发 
• 微信小程序实战课程之记账应用开发 —— 用户注册与登录
• 微信小程序实战课程之记账应用开发（续）—— 实现集成日期组件
• 微信小程序实战课程之记账应用开发（续二）—— 服务端登录篇
• 微信小程序实战课程之记账应用开发（三）—— 服务端实现账目CRUD
• 微信小程序实战课程之记账应用开发（完结）—— 对接服务端账目CRUD

这些不错的资源你可能也会感兴趣：

• EarlGrey 的 手把手教你微信小程序开发，参考Demo一步一步实现小程序开发。
• 用 cnode 社区 api 做微信小应用 实例教程，两位老司机主讲。
• andot 的 如何在微信小程序中使用 Hprose，据说是独门绝技。
• 风程序 的 微信小程序开发教程，步骤都列出来了。
• Phodal 的 使用 WebStorm 让你的「微信小程序」运行在Chrome浏览器上。

三、DEMO 源码

在实战之初，有些源码能够参考那真是极好的。目前码云上公布源码的和小程序相关的Demo已经非常非常多，各个类型的都有，在此仅列出部分，更多可在码云上搜索。

1、wmusic —— 凌晨一点写东东

微信小程序版简易情绪播放器 Demo

<iframe id="iframe_0.930121395545076" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 384px; height: 519px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22https://static.oschina.net/uploads/space/2016/1108/190405_DVaQ_2896879.gif?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.930121395545076',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

2、finance —— 黄秀杰

上文提到的实战课程之记账软件开发 Demo。该作者还发布了灵犀新闻客户端、灵动电商开源系统等等基于小程序的 Demo 源码，以及下拉菜单、单选按钮等组件源码，都可去看看。

<iframe id="iframe_0.5731792137516756" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 686px; height: 1195px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22https://static.oschina.net/uploads/img/201609/29105311_kzIA.png?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.5731792137516756',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe> <iframe id="iframe_0.36252716393977735" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 640px; height: 1118px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://static.oschina.net/uploads/img/201611/09100604_tSaK.jpg?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.36252716393977735',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

3、weixin —— zcoco

仿【微信】APP 

<iframe id="iframe_0.288903416083504" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 556px; height: 877px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://git.oschina.net/uploads/images/2016/0925/142044_0b6d30e2_102285.png?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.288903416083504',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

4、WechatSmallApps —— oopsguy

豆瓣图书+知乎日报 Demo

<iframe id="iframe_0.23149348307646567" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 332px; height: 579px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://static.oschina.net/uploads/img/201611/09100604_9qwW.jpg?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.23149348307646567',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe> <iframe id="iframe_0.4143716730099074" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 335px; height: 580px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://static.oschina.net/uploads/img/201611/09100604_UHDs.png?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.4143716730099074',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

5、weixincalculator —— Edik

计算器 Demo

<iframe id="iframe_0.5398929852075265" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 430px; height: 673px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://git.oschina.net/uploads/images/2016/0926/223341_abe83dfa_332536.png?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.5398929852075265',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

6、wxapp-Breakfast —— hayeah

小林早厨 Demo

<iframe id="iframe_0.1129131321762169" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 375px; height: 667px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22https://git.oschina.net/hayeah/wxapp-Breakfast/raw/master/design.jpg?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.1129131321762169',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

7、SmallAPP —— qieangel2013

购物 Demo

<iframe id="iframe_0.6203767291880817" style="margin: 0px; padding: 0px; border-width: initial; border-style: none; width: 527px; height: 710px;" src="data:text/html;charset=utf8,%3Cimg%20id=%22img%22%20src=%22http://git.oschina.net/uploads/images/2016/0926/180110_3f3d1108_636453.jpeg?_=6049734%22%20style=%22border:none;max-width:686px%22%3E%3Cscript%3Ewindow.onload%20=%20function%20()%20%7Bvar%20img%20=%20document.getElementById('img');%20window.parent.postMessage(%7BiframeId:'iframe_0.6203767291880817',width:img.width,height:img.height%7D,%20'http://www.cnblogs.com');%7D%3C/script%3E" frameborder="0" scrolling="no"></iframe>

四、教学视频

在参考文字的操作过程中可能会出现一些难以发现的小问题，导致最终跑起来会有点瑕疵。因此，对照视频进行操作不失为更直观的学习方式。

1、博卡君 小程序 Demo 视频

在内测期间更新完多篇开发实战教学文章后，博卡君发布了 Demo 的演示视频，并对系列教程进行了总结，发表了开发感悟。在小程序正式公测后，再次更新了项目真机实测 Demo 视频。

视频地址：

• 博卡君微信小程序 Demo
• 名片盒真机实测 Demo

2、秀杰 小程序加法计算器视频

微信小程序（应用号）零基础课程之加法计算器应用。

视频地址：

• 加法计算器应用演示视频

每天进步一点点