零基础入门微信小程序开发

课程介绍

本达人课是一个系列入门教程，目标是从 0 开始带领读者上手实战，课程以微信小程序的核心概念作为主线，介绍配置文件、页面样式文件、JavaScript 的基本知识并以指南针为例对基本知识进行扩展，另外加上开发工具的安装、小程序发布等内容，共 9 篇文章。

本课程共包含四个部分。

第一部分（第1-3篇）带你初步了解小程序是什么，然后进行小程序开发的准备工作，从注册账号到安装开发工具一应俱全。工欲善其事，必先利其器。

第二部分（第4-6篇）。面向入门级读者介绍小程序构成的各个部分。您不需要事前准备任何知识，需要掌握的会进行说明，需要扩展的会提供信息的出处。千里之行始于足下。

第三部分（第7-8篇）通过指南针的例子，介绍一个小程序的实现过程。通过这个实例，综合运用所学知识，使小程序开发能力进一步提高。麻雀虽小，五脏俱全。

第四部分（第9篇）只包含一篇文章，具体介绍小程序发布的过程。使读者能够对小程序开发的全过程有一个完整的了解。编筐编篓，全在收口。

哪怕您事先没有任何微信小程序相关技术的经验，认真学完该达人课之后，您会掌握基本的小程序开发方法，并具备自主扩展知识面，以及进行更高层次开发的能力。

作者介绍

薛卫国，现就职于某外企担任架构小组责任人，CSDN 博客专家，长期从事 C++ 开发，精通 UML、设计模式，创办有公众号《面向对象思考》。毕业于东北大学，曾留校在国家重点实验室工作。

课程内容

第01课：初识微信小程序

要火的节奏

最近有一则来自北京商报的新闻引起了不少人的注意，我们这里选取一部分：

争夺流量手机厂商“抱团”对抗微信小程序

3月20日，小米、中兴、华为等10家手机厂商联合对外宣布，推出基于手机硬件平台的新型应用生态“快应用”及相关标准。在微信小程序用户规模日益壮大、硬件利润微薄的背景下，本次快应用的推出被看做是手机厂商与腾讯争夺流量与利益的举动。业内人士认为，对于整个市场来说，流量竞争有促进作用，但微信已经具有较强的用户黏性，十大手机厂商要想争夺用户流量并非易事。

估计这些厂家的标准出台还需要一段时间，但是有一点可以确定的是：小程序类的开发要火。

但如果你打开轻应用的文档可以发现两点：

1.应用文档的信息量还很有限。2.轻应用的架构，采用的技术和微信小程序很相似。

处于这个目的，作者赶在这个时机制作了本课程，希望可以为潮流加一份力；作为程序员，希望各位可以通过本课程的学习，在有限的时间内为自己添一份技能！

参考资料：轻应用开发文档

什么是小程序？

最近一个小游戏“跳一跳”火得不得了，相信即使您自己没有玩过，身边的亲戚朋友也一定玩过。画面大致如下：

当然了，关于玩法等等不是本文的内容，可以参照百度百科。

这就是微信小程序的成功案例了。

微信小程序简介

微信小程序简称小程序，张小龙在微信公开课 Pro 上发布的小程序正式上线，时间是2017年1月9日。关于小程序，张小龙在他的公开课中有过很详细的说明，大家尽可以到网上去搜，这里不再赘述，只说作者自己的理解。

微信小程序这个词可以分解为“微信”和“小程序”两部分。

其中“微信”可以理解为“微信中的”，指的是小程序的执行环境；当然微信在提供执行环境的同时也延长了用户使用微信的时间。

“小程序”是说它首先是程序，然后具备轻便的特征。小程序并不像其他应用那样，它不需要安装，而是通过扫描二维码等打开后直接执行；用完以后也不需要卸载。这就是所谓用完即走的原则。

另外，微信不会提供类似于小程序商店的地方，需要小程序提供者自己通过二维码，群分享的手段来传播，这就是所谓去中心化的形态。

微信朋友圈提供了好友之间沟通信息的手段，订阅号提供了面向粉丝推送信息的手段，而小程序则是提供了用户通过自己的操作而与服务实现互动的手段。

小程序相关技术介绍

本课程的目标读者群是了解基本的 C/C++ 语法但对小程序开发完全没有经验的程序员，因此在说明微信小程序的同时，对相关技术也将进行相应的介绍。通过这种方式，可使读者能够非常顺利地学习，而无需到处寻找资料导致忘了学习微信小程序这个本来的目的。

微信小程序推出一年多一点的时间，算是一个新事物，但是利用的技术却都是已经存在的技术。如果你稍加调查就会发现，不光是微信小程序，很多类似形态的应用都采用类似的架构：

使用 JSON 技术来表现应用的配置信息。包含应用的基本信息，页面配置和路由，应用全体的信息等。

使用经过定制 CSS+XML 技术来实现视图层的描述。画面元素，例如列表、按钮、文本框、选择框等都通过 XML 语言来描述，遵从 XML 语法，对于页面的共同风格，使用 CSS 进行定义。

使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理，系统 API 的调用等。

架构在视图层和逻辑层之间提供数据和事件传输功能，从而尽量减少难度。由于类似应有都属于轻应用，所以提供的功能都比较单一。

具体的语法，用途等将会在使用的时候详细介绍，这里只提一下相关技术的基本情况，了解即可。

换一种说法就是：并不需要另外自己调查，跟着本课程走下去就好。

JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于 ECMAScript（W3C 制定的 JavaScript 规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

XML

XML（Extensible Markup Language），中文名为可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。

在电子计算机中，标记指计算机所能理解的信息符号，通过此种标记，计算机之间可以处理包含各种的信息，比如文章等。它可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。它非常适合万维网传输，提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。是 Internet 环境中跨平台的、依赖于内容的技术，也是当今处理分布式结构信息的有效工具。早在1998年，W3C 就发布了 XML1.0 规范，使用它来简化 Internet 的文档信息传输。

CSS

层叠样式表（英文全称：Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

JavaScript

JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。

在1995年时，由 Netscape 公司的 Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作，Netscape 管理层希望它外观看起来像 Java，因此取名为 JavaScript。但实际上它的语法风格与 Self 及 Scheme 较为接近。

为了取得技术优势，微软推出了 JScript，CEnvi 推出 ScriptEase，与 JavaScript 同样可在浏览器上运行。为了统一规格，再加上 JavaScript 兼容于 ECMA 标准，因此也称为 ECMAScript。

学习方法

微信小程序虽然是新事物，但学习方法却不是新方法。

我们的套路是：首先生产一个最简单的小程序实例，通过这个实例介绍微信小程序的构造和想法，这算是学习这个活动中“学”的部分。然后扩展这些知识点，通过开发一个简单的小程序的过程来运用这些知识点，这算是“习”的过程。

这是作者这些年来屡试不爽的方法。

参考资料

在学习和开发的过程中，我们主要会参考微信的开发文档。其原因是小程序太新了，相应的知识储备还不够丰富。虽然也可以找到一些开发方面的书籍，但是说实话，内容并不比微信本身的开发文档更详尽。

第02课：开发环境的准备

创建自己的小程序账号

在开发自己的微信小程序之前，首先需要注册小程序账号，接下来我们一步一步做详细说明。

打开浏览器，输入：mp.weixin.qq.com。

因为是第一次使用，所以选择画面右上角的“立即注册”。

选择左下角的“小程序”方框。

输入邮箱、密码、确认密码、验证码，之后选择同意协议和条款。当然这里的密码不是邮箱的密码，而是正在申请的小程序账号的密码。

最后按下“注册”按钮。

点击“登录邮箱”按钮。打开相应的软件后，应该可以收到下面的邮件。如果没收到的话，建议看一下垃圾邮件，没准儿那里有。

单击下半部一大片绿色的部分，就可以回到注册界面继续剩下的工作。

选择主题类型为“个人”，然后输入管理员的姓名，身份证号码。

输入手机号码并单击“获取验证码”，将手机接收到的验证码输入到短信验证码栏中。

完成上述步骤，画面下部会出现一个二维码，需要用已经绑定银行卡的微信的扫一扫功能扫描该二维码进行实名认证。

如果认证成功，画面会变成下面这个样子。

点击“继续”按钮。

意思就是现在后悔还来得及，如果不后悔今后就没法后悔了。我们按下“确定”按钮。

大功告成！

小程序管理平台

账号申请成功之后，就可以登录“微信公众平台 | 小程序”了。在目前这个时间点虽然并不需要马上做什么。本文接下来将对其中重要的菜单功能做简单介绍。

首页

内容比较简单，主要是表示小程序的实时访问次数和系统公告。

开发管理

用户在使用小程序的时候，需要扫描二维码进入。而这个二维码需要开发者将小程序上传到腾讯服务器之后从腾讯取得。上传过程便在该页面上完成。

过程也不复杂，一共分为三步：上传代码，提交审核和发布小程序。

用户身份

这个画面用来指定小程序项目的管理员和项目成员。其中项目成员又包括开发者和体验者。

数据分析

这个画面可以统计小程序的访问数量，对用户来源、性别、年龄分布等进行分析。

模板消息

这个画面可以定制微信小程序向客户发送的消息。

客服消息

通过这个画面可以指定小程序的客服人员，从而实现小程序的在线客服功能。

附近的小程序

当小程序的主体为企业、政府、媒体及其他组织时可以开通此功能。此功能有效时，小程序指定地点以后，用户可以通过微信的“附近的小程序”界面发现该小程序。

运维中心

一共有两个页面，分别用于查询小程序的错误日志和对客户端进行监控。

推广

用来自定义小程序推广关键字。

设置

设置分类中一共有五个页面，这里只介绍前两个。

基本设置

顾名思义，这里主要是用来设置小程序的基本信息。内容包括：

设定小程序名称，小程序头像；

取得小程序码；

取得认证；

设定主题信息；

其他省略。

开发设置

这个页面主要负责和小程序开发相关的设定信息，内容包括：

取得小程序 ID。每一个发布的小程序都需要唯一的 ID。

生成小程序秘钥。

指定服务器域名。小程序可以访问外部网站，可以上传和下载文件。但是对象服务器不是任意的，需要在这里指定。

其他省略。

其他

在画面的右上角，有两个链接“文档”和“社区”分别可以进入小程序开发文档和社区。在实际的学习过程中可以积极利用。

安装开发工具

小程序账号申请成功之后的工作就是准备开发环境。

早期的版本在首页分类中有开发工具的下载链接，最近不知道为什么变成了访问次数统计画面。但是没有关系，可以直接点击这里，便可打开下面的下载地址页面。

根据操作系统选择合适的下载链接。

下载完成后打开安装程序，首先是开始画面。

按下“下一步”按钮。

按下“我接受”按钮。

指定适当的安装目录后按下“安装”按钮。

安装中……

完成！

接下来就可以开始微信小程序的开发之旅啦！

第03课：微信开发者工具介绍

中国有句老话：“工欲善其事，必先利其器”，在实际介绍小程序开发之前，我们首先介绍一下微信开发者工具。可以毫不夸张的说，开发工具是否成熟很大程度上决定了一种技术能否迅速地被广大开发者所接受。

生成第一个小程序

在正式开始介绍开发工具之前，首先生成一个用于说明的小程序。

启动开发者工具后用小程序管理者的微信扫描图中的二维码。

选择“小程序项目”。

选择项目目录，输入 AppID 和项目名称。AppID 可以从小程序公众平台的“设置”分类中的“开发设置”页面取得。

我们将小程序的项目名称定义为“HelloLightApp”，按下“确定”按钮。在实际开发中，项目目录和项目名称请大家根据实际情况填写。这里选中“建立普通快速启动模板”，开发工具就会生成一个最基本的小程序。

回到项目信息画面。

这时开发工具的状态如下图

这个画面被称为开发者工具的主界面。主界面主要由五大部分组成：菜单栏、工具栏、模拟器、编辑器和调试器。

为了便于说明，我们在截图上加了几个带有颜色的矩形框。

本文写作的此时此刻，微信开发者工具的版本是 v1.02.1803210，这个画面的布局和几个月前相比已经有了很大的变化。画面的内容比较多，我们慢慢说明。

工具栏

画面的上部绿色框内的部分就是工具栏，工具栏一共被分为四个区域。

个人中心

点击用户头像可以打开个人中心，在这里可以便捷地切换用户和查看开发者工具收到的消息。

主界面模块显示/隐藏控制

这个区域位于用户头像右侧，一共有三个按钮：“模拟器”，“编辑器”和“调试器”。它们分别用于控制模拟器区域（黑色框），编辑器区域（蓝色框）和调试器区域（粉色框）的表示和非表示状态。

编译/调试控制

编译模式下拉列表框可以选择“普通编译”，也可以新建并选择自定义编译条件。

“编译”按钮用于启动编译处理，编译结束之后，小程序会自动在模拟器开始运行。

“预览”按钮按下之后，系统会自动生成一个用于小程序预览的二维码。使用开发者微信扫描这个二维码，就可以在手机上运行小程序。

按下“远程调试”按钮，系统会自动生成一个和预览相似的二位码。使用开发者微信扫描这个二维码，可以启动远程调试。小程序在手机上执行的同时可以通过开发者工具进行调试，就像本地调试一样。这个功能真的很强大。

“切后台”按钮的功能并不是切断后台，而是用于模拟小程序进入后台的情况。

工具栏上提供了“清缓存”的快速入口。可以便捷地清除工具上的文件缓存、数据缓存、还有后台的授权数据，方便开发者调试。

开发辅助

工具栏右侧是开发辅助功能的区域，在这里可以进行上传代码、申请测试、上传腾讯云、查看项目信息等操作。

模拟器

主画面中黑框内的部分就是模拟器。模拟器可以模拟小程序在微信客户端的表现。小程序的代码通过编译后可以在模拟器上直接运行。

该区域的最上面有三个下拉列表框，可以用于切换手机类型、画面的表示比例和网络模式。目前的选择结果是 iPhone5，100%和 WiFi。

最常用到的是第一个列表框，我们可以让小程序在不同分辨率执行，从而确认各种状态下的表示情况

中间是小程序的执行画面。在这个例子中，画面分为三个区间：最上面的导航栏，中间的用户信息和最下面的字符串：Hello World。

在本区域的最下面，显示的是当前页面的场景值和路径，以及页面参数。可以看到当前的页面路径是：

pages/index/index

log 画面记录了小程序每次启动的日期和时间。这时的页面路径是：

pages/logs/logs

单击画面左上角的“<”可以回到启动画面。

编辑器

主画面中蓝色框中内容属于编辑区域，画面详细如下：

目录树

目录树表示的是项目的目录构成。在目录的最上层，有 pages、utils 两个目录和若干 app 文件。

pages 目录

小程序将所有的页面文件都放到这个目录中，每个页面占有一个单独的子目录。微信小程序的页面由以下四个文件组成：

这4个文件必须具有相同的文件名。但是根据实际的情况，可以省略 WXSS 和JSON 文件。例如本例中 index 页面就没有 JSON 文件。

utils 目录

本目录用于放置公共的功能、代码等。

app 文件

app 文件作为小程序的主体，必须放置在项目的根目录下。具体的文件包括：

代码编辑区域

选择目录树中的文件，该文件的内容就会在最右面的区域，代码编辑区中显示出来，下图是 index.wxml 的内容。

代码编辑区域的最下面，会显示包含路径的文件名、文件的大小、显示比例和文件类型等信息。

调试器

主画面中粉色框中的部分为调试器。调试器的功能就是为小程序的调试提供帮助。迭代到目前的版本，它的功能已经非常强大了。

调试工具提供以下功能模块：Console、Sources、Network、Storage、Appdata、Wxml、Sensor、Trace。

Console

有两大功能：一是输出小程序的错误信息，二是允许开发者可以在此输入和调试代码。

Sources

可以显示调试中的代码，设置断点，同时可以进行变量内容、调用栈的确认，也可以修改变量内容。比较遗憾的是需要另外打开源代码窗口而不是利用编辑器中的代码窗口。

Network

用于观察和显示 Request 和 Socket 的请求情况。

Storage

当小程序使用 wx.setStorage 或者 wx.setStorageSync 存储数据时，可以使用本功能显示当前项目使用后的数据存储情况。也可以直接对数据进行删除（按 delete 键）、新增和修改。

Appdata

AppData panel 用于显示当前项目运行时小程序 AppData 具体数据，实时地反映项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。

Wxml

用于帮助开发者确认 WXML 转化后的界面。在这里可以看到真实的页面结构以及结构对应的 WXSS 属性，同时可以通过修改对应 WXSS 属性，在模拟器中实时看到修改的情况。但是目前还只是做到实时预览，无法保存到文件。

通过调试模块左上角的选择器，还可以快速定位页面中组件对应的 WXML 代码。

Sensor

有两大功能：一个是开发者可以在这里选择模拟地理位置，另一个可以模拟移动设备表现，用于调试重力感应 API。

Trace

可以用于从连接的设备上取得调试信息并进行显示。

代码片段

随着手机等移动设备的出现，菜单的作用似乎越来越小了。但是即使是这样，菜单栏中还是包含着一些不一定那么常用，但可能是非常重要的功能。这里只介绍代码片段创建、分享和导入的过程。

有一点需要注意的是，代码片段并不真正是代码的片段，而是一种迷你、可分享的小程序或小游戏项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题和 Bug 等。

新建和分享代码片段

选择“项目” -> “新建代码段”之后，首先出现创建代码片段界面，我们要做的就是输入必要的信息。

按下“创建”按钮，出现的是一个和小程序开发几乎一样的界面。

完成代码片段的开发之后，点击画面右上角的“分享”按钮，并在分享界面中输入必要的信息。

按下“生成分享链接”按钮。

复制链接后，将这个链接发送给需要的开发者即可。

导入代码片段

当开发者收到代码片段的链接以后，可以通过“项目” -> “导入代码片段”菜单导入：

管理代码片段

无论是自己开发的还是导入其他人开发的代码片段，都可以通过“项目” -> “查看所有项目”菜单打开“小程序项目”对话框，然后选择“代码片段”分类来进行管理。

参考信息

本文参考和引用了微信小程序开发文档的内容，点击访问微信小程序开发文档。

——————————————————————————————————————————————————————————————————————————————————————————————