零基础入门微信小程序开发
2018年07月03日 02:45:07 GitChat的博客 阅读数 54315 标签： 移动开发小程序微信
课程介绍
本课程是一个系列入门教程，目标是从 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。
- 生成小程序秘钥。
- 指定服务器域名。小程序可以访问外部网站，可以上传和下载文件。但是对象服务器不是任意的，需要在这里指定。
- 其他省略。
其他
在画面的右上角，有两个链接“文档”和“社区”分别可以进入小程序开发文档和社区。在实际的学习过程中可以积极利用。
安装开发工具
小程序账号申请成功之后的工作就是准备开发环境。
早期的版本在首页分类中有开发工具的下载链接，最近不知道为什么变成了访问次数统计画面。但是没有关系，可以直接点击这里，便可打开下面的下载地址页面。
根据操作系统选择合适的下载链接。
下载完成后打开安装程序，首先是开始画面。
按下“下一步”按钮。
按下“我接受”按钮。
指定适当的安装目录后按下“安装”按钮。
安装中……
完成！
接下来就可以开始微信小程序的开发之旅啦！
请发表评论