1.1 微信小程序简介

小程序作为一款轻应用，具有无须安装、无须卸载、触手可及、用完即走的优势，使腾讯、阿里巴巴、华为等巨头企业争相发力。实际上，除了微信小程序之外，还有支付宝小程序、华为的快应用等产品。目前，微信小程序凭借其流量优势使用最为广泛。

微信小程序提供了一个简单高效的应用开发框架、丰富的组件及应用程序接口（Application Program Interface，API），帮助开发者在微信中开发具有原生App体验的服务。因为其可以在微信内被便捷地获取和传播、具有出色的使用体验，同时开发者可以快速地开发一个小程序，所以微信小程序生态圈已非常完善并占据了小程序的主要市场。

微信小程序支持的开发语言有JavaScript（简称JS）和TypeScript，考虑到普及性，本书以JS进行讲解。微信小程序开发涉及的技术与普通的网页开发相比有很大的相似性。对于前端开发者而言，从其他类型项目迁移到小程序的开发成本较低。

在开发微信小程序之前，应该具备基本的普通网页开发基础，具体来说，应该熟悉HTML、CSS、JS。在开发之前，应该理解小程序与普通网页在本质上的一些区别。

（1）网页开发者可以使用各种浏览器暴露出来的文档对象模型（Document Object Mode，DOM）API进行DOM操作。小程序的逻辑层运行在JSCore中，并没有一个完整浏览器对象，因而缺少相关的DOM API和浏览器对象模型（Browser Object Mode，BOM）API。这一区别导致了在前端开发中十分常用的一些库（如jQuery、Zepto等）在小程序中是无法运行的。

（2）JSCore的环境与Node.js环境也是不尽相同的，所以一些NPM的包在小程序中是无法运行的。

1.1.1 安装微信开发者工具

【演练1.1】下载并安装微信开发者工具。

（1）在搜索引擎上自行搜索“微信开发者工具”，进入微信开发者工具下载页面，如图1-1所示。可根据自己的操作系统下载对应的安装包并进行安装，这里选择的是“Windows64”稳定版。

（2）下载完成后，运行安装文件，启用安装向导，如图1-2所示，单击“下一步”按钮。

（3）进入许可证协议界面，如图1-3所示，阅读授权条款并单击“我接受”按钮。

（4）进入选定安装位置界面，如图1-4所示，保持“目标文件夹”默认位置并单击“安装”按钮。

（5）等待安装完成，需要等待几分钟，如图1-5所示，单击“完成”按钮。

（6）安装完成后，会默认运行微信开发者工具，或之后自行启动该工具。

1.1.2 使用微信开发者工具

【演练1.2】使用微信开发者工具。

（1）如图1-6所示，第一次运行微信开发者工具时需使用微信扫描二维码登录开发者工具，这说明小程序的开发是实名的。

（2）使用手机微信扫描二维码，如图1-7所示，显示“扫描成功”，在手机上单击“确认登录”按钮。

（3）登录成功后的界面如图1-8所示，界面左下角会显示开发者的微信头像，即开发测试时的微信账号，因为微信小程序运行在微信内，所以模拟的微信环境是必不可少的。