小程序已经成为国内前端的一个重要业务，跟Web和手机App有着同等的重要性。小程序开发者供不应求，市场招聘需求极其旺盛，企业都抢着要。
尽管如此，小程序的教程却很缺，要么是不够系统，要么就是跳跃性太大，很多关键的地方寥寥数语，初学者摸不着头脑。我自己学的时候，就苦于找不到好一点的教程。
本文就是我的小程序学习笔记，整理成教程的形式，希望对于初学者有用。需要学会的主要知识点，我都会讲到，我的目标是你读完这个教程，就能学会怎么写小程序。
考虑到很多同学并没有开发经验，小程序是他们接触的第一个开发领域。我会讲得比较细，希望新人也能没有困难地阅读这个教程。由于内容比较多，这个教程将分成四次连载。
学习小程序之前，先简单说一下，它到底是什么。
由于小程序基于网页技术，所以学习之前，最好懂一点网页开发。具体来说，下面两方面的知识是必需的。
（1）JavaScript语言：懂基本语法，会写简单的JS脚本程序。
（2）CSS样式：理解如何使用CSS控制网页元素的外观。
此外，虽然HTML标签和浏览器API不是必备知识，但是了解浏览器怎么渲染网页，对于理解小程序模型有很大的帮助。
总的来说，先学网页开发，再学小程序，是比较合理的学习途径，而且网页开发的资料比较多，遇到问题容易查到解决方法。但是，网页开发要学的东西太多，不是短期能掌握的，如果想快速上手，先学小程序，遇到不懂的地方再去查资料，也未尝不可。
申请完成以后，你会得到一个AppID（小程序编号）和AppSecret（小程序密钥），后面都会用到。
开发者工具支持Windows和MacOS两个平台。我装的是Windows（64位）的版本，这个教程的内容也是基于该版本的，但是MacOS版本的操作应该是完全一样的。
点击右侧的+号，就跳出了新建小程序的页面。
如果直接新建小程序，会生成一个完整的项目脚手架。对于初学者来说，这样反而不利于掌握各个文件的作用。更好的学习方法是，自己从头手写每一行代码，然后切换到"导入项目"的选项，将其导入到开发者工具。
导入时，需要给小程序起一个名字，并且填写项目代码所在的目录，以及前面申请的AppID。
下面，就请大家动手，跟着写一个最简单的小程序，只要五分钟就能完成。
第一步，新建一个小程序的项目目录。名字可以随便起，这里称为wechat-miniprogram-demo。
你可以在资源管理器里面，新建目录。如果熟悉命令行操作，也可以打开WindowsTerminal（没有的话，需要安装），在里面执行下面的命令，新建并进入该目录。
>mkdirwechat-miniprogram-demo>cdwechat-miniprogram-demo第二步，在该目录里面，新建一个脚本文件app.js。这个脚本用于对整个小程序进行初始化。
app.js内容只有一行代码。
App({});上面代码中，App()由小程序原生提供，它是一个函数，表示新建一个小程序实例。它的参数是一个配置对象，用于设置小程序实例的行为属性。这个例子不需要任何配置，所以使用空对象即可。
第三步，新建一个配置文件app.json，记录项目的一些静态配置。
app.json文件的内容，至少必须有一个pages属性，指明小程序包含哪些页面。
{"pages":["pages/home/home"]}上面代码中，pages属性是一个数组，数组的每一项就是一个页面。这个示例中，小程序只有一个页面，所以数组只有一项pages/home/home。
pages/home/home是一个三层的文件路径。
第四步，新建pages/home子目录。
$mkdir-ppages/home然后，在这个目录里面新建一个脚本文件home.js。该文件的内容如下。
Page({});上面代码中，Page()由小程序原生提供，它是一个函数，用于初始化一个页面实例。它的参数是一个配置对象，用于设置当前页面的行为属性。这里是一个空对象，表示不设置任何属性。
home.wxml的内容很简单，就写一行helloworld。
helloworld到这一步，就算基本完成了。现在，打开小程序开发工具，导入项目目录wechat-miniprogram-demo。如果一切正常，就可以在开发者工具里面，看到运行结果了。
点击工具栏的"预览"或"真机调试"按钮，还可以在你的手机上面，查看真机运行结果。
上一节的home.wxml文件，只写了最简单的一行helloworld。实际开发中，不会这样写，而是要加上各种标签，以便后面添加样式和效果。
小程序的WXML语言提供各种页面标签。下面，对home.wxml改造一下，加上两个最常用的标签。
注意，每个标签都是成对使用，需要有闭合标记，即标签名前加斜杠表示闭合，比如 由于我们还没有为页面添加任何样式，所以页面的渲染效果跟上一节是一样的。后面添加样式时，大家就可以看到标签的巨大作用。 总结一下，这个示例一共有4个文件，项目结构如下。 |-app.json|-app.js|-pages|-home|-home.wxml|-home.js这就是最简单、最基本的小程序结构。所有的小程序项目都是这个结构，在上面不断添加其他内容。 这个结构分成两层：描述整体程序的顶层app脚本，以及描述各个页面的page脚本。 顶层的app.json文件用于整个项目的配置，对于所有页面都有效。 下面，改一下前面的app.json，加入window属性。 {"pages":["pages/home/home"],"window":{"navigationBarBackgroundColor":"#ff0000","navigationBarTextStyle":"white","navigationBarTitleText":"小程序Demo"}}上面代码中，window属性设置导航栏的背景颜色为红色（#ff0000），文本颜色为白色（white），标题文字为"小程序Demo"。 开发者工具导入项目代码，就可以看到导航栏变掉了。 除了窗口的样式，很多小程序的顶部或尾部，还有选项栏，可以切换到不同的选项卡。 （完） 业余草说： 迫不及待的想看后面的连载内容了！ Spongecaptain说： 对我来说知道小程序源码如何编写的大致逻辑就足够了 希月说： shanquan说： 微慕说： 不错的入门教程，期待连载 Wh0am!说： 前两天也写了个demo试试，确实上手挺简单的，再加上免费云API，数据库调用也足够一般开发使用。希望可以多讲讲原理，跟当前的Vue、react之类的对比看。 RickeyGong说： 期待连载 Three-uncle说： thosefree说： 阮一峰老师做的“小程序入门教程之一---初次上手”那张图片有点辣眼睛啊囧 Jerrychung说： 期待后续 .neter菜猪说： 通俗易懂，支持一下！！！ KlausJ说： neko说： 太棒啦 wonpn说： 赞，很有用的入门教程，期待后续。 恩珠说： 期待连载嘎嘎 kaba说： UncaughtReferenceError:defineisnotdefinedathome.js:1 对不起，之前我提出的在macOS下编译报错的问题，是我自己的问题。不要意思，打扰了。 Anne说： 什么时候更新下一期教程 山前说： 对于腾讯这样一个企业，维护和发展一个巨大的行业标准，实在是令人不信任。不管是技术还是非技术层面 Rivalsa说： 小程序还是挺不错的，省去了很多麻烦，但也有不好的地方，就是自己的业务受制于第三方。 Thinker说： 对于从入门就学小程序的我来说，阮一峰的教程让我看到了不一样的一个角度，不管怎么说吧，学东西其实方式只是一个途径，过程才是需要自己不断地去体会 jiaonilulu说： 肖说： 又到周五了，我是刷周刊过来的，意外收获，期待连载 landius说： 在标题七，九中间少了个八？ 阮一峰说： @landius： 谢谢指出，标错了，改过来了。 ew说： 现在大部分都是用框架开发小程序，react用tarovue用uni-app 节点说： 初学者一开始就从完整的项目脚手架学习，的确会头大！拆分开从头创建每个文件、手写每行代码是很有必要的 菊部说： 最好是设立个专栏吧大佬 Can说： 兔子说： 好详细通俗易懂继续往下看 ranel说： Mac更新系统后的bug luseike说： 多个text会产生换行 王军伟说： 谢谢阮老师。写的非常好，小白入门必要的信息不多不少。特别是对基础的这几个文件说明的非常容易理解。 玛蒂蒂说： UncaughtReferenceError:defineisnotdefinedathome.js:1 我也是，请问怎么解决这个问题 吴杭说： 引用王军伟的发言：谢谢阮老师。写的非常好，小白入门必要的信息不多不少。特别是对基础的这几个文件说明的非常容易理解。 良心教程，入门必备！！ Lucy说： 谢阮老师。写的非常好，小白入门必要的信息不多不少。特别是对基础的这几个文件说明的非常容