小程序开发文档地址：https://mp.weixin.qq.com/。

　　1.2.1　小程序开发文档

　　文档共分6类，如图1-1所示。

　　图1-1

　　简易教程提供了一个Hello World微信小程序教程，从获取微信小程序的AppID、用微信Web开发者工具创建项目、编写代码到手机预览，一步一步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语和当前用户的微信头像、点击头像，可以在新打开的页面中查看当前小程序的启动日志。该分类下体验小程序页面提供组件和接口体验的方法，更新日志显示基础库和开发工具最近的更新历史。

　　框架讲解小程序MINA框架的知识，包括目录结构、配置、逻辑层和视图层。

　　组件介绍小程序的一系列基础组件，包括视图容器、基础内容、表单组件、导航、媒体组件、地图、画布、客服会话等。

　　API介绍框架提供的微信原生API，包括网络、媒体、文件、数据缓存、位置、设置、界面和开放接口等。

　　工具介绍微信Web开发者工具的使用方法，包括模拟器使用、代码编辑、调试工具、项目预览等。

　　Q&A列举常见问题的解答，读者遇到一些莫名其妙的问题可以先在这里找答案。此分类下还有开发者社区的入口。

　　1.2.2　微信Web开发者工具

　　1.下载

　　在浏览器中打开网址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html，即可进入开发工具下载页。或者单击导航栏的“工具”→“下载”进入下载页，如图1-2所示。

　　一般情况下，Windows XP系统选择Windows 32版本，Windows 7\8\10及以上选择Windows 64版本，Mac电脑选择Mac版本。

　　安装之后，用微信扫码即可进入。

　　.添加/打开项目

　　微信扫码后，即可进入项目选择界面，如图1-3所示。

　　这时可以选择添加项目，或者选择已经创建的项目。这里我们选择添加项目，如图1-4所示。

图1-3

　　登录https://mp.weixin.qq.com，可以在网站的“设置”→“开发者设置”中查看微信小程序的AppID，如图1-5所示。

　　图1-5

　　开发阶段可以不填AppID，所以这里选择“无AppID”。选择后，AppID文本框会显示“无AppID部分功能受限”。不过不影响后续开发。

　　单击“添加项目”，进入开发界面，如图1-6所示。

　　图1-6

　　这是小程序的默认DEMO：Hello World。

　　我们需要通过开发者工具完成小程序创建和代码编辑。

　　1.2.3　开发工具Tips

　　官方文档给出了完整的开发工具介绍，文档地址为：

　　https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html

　　文档包含调试、代码编辑及程序发布等功能的介绍。本节不再赘述，仅以问答的形式对文档缺失的部分进行补充。

　　(1)如何保存文件?

　　编辑文件后，未保存的文件Tab后会有圆点。Windows用户按Ctrl+S，Mac用户按Command+S保存。保存成功后圆点消失，如图1-7所示

　　图1-7

　　(2)程序修改后如何刷新页面?

　　可以在“项目”页设置自动刷新，如图1-8所示。

　　图1-8

　　在“编辑”模式下，也可以单击“编译”手动刷新。

　　(3)AppData有什么用?开发工具提供查看页面data数据的功能。在1.4节的例子中，页面data有一个属性为result。游戏未开始时，result的数据如图1-9所示。

　　图1-9

　　游戏结束后，result的数据如图1-10所示。

　　图1-10

　　AppData是调试程序的利器，在此处编辑数据能及时反馈到界面上，而且界面上的内容能够实时更新到调试信息里。读者可以充分利用此功能调试程序。

　　(4)“前台”“后台”操作有什么作用?

　　微信首先是一个聊天工具，消息具有最高的优先级。当新消息到来时，用户返回聊天页面，这时小程序优先级会下降，处于后台执行中。点击“前台”可切换到前台模式。比如小程序正在播放音乐或视频，进入后台就会中断;返回前台后，播放进度会保留，但需要重新点击播放按钮才能继续播放，如图1-11所示。

　　图1-11

　　(5)“调试”页面的Sensor Tab有什么作用?

　　“调试”页面的Sensor Tab用来模拟地理位置调试重力感应API，如图1-12所示。

　　图1-12

　　(6)调试工具的Wxml Pannel和Sources Pannel有什么区别?

　　Wxml Pannel展示的是源代码中的wxml文件，可以在此处写样式表调试页面，如图1-13所示。

　　图1-13

　　Sources Pannel展示的是编译后的HTML代码，可以在此处打断点调试js程序，如图1-14所示。

延伸阅读

• 微信小程序开发文档？

  微信小程序开发文档提供了关于如何开发微信小程序的详细信息和指南。以下是微信小程序开发文档的主要内容：快速开始：介绍了如何设置开发环境、创建小程序、运行和调试小程序的基本步骤。开...

• 小程序开发文档有什么用？包含哪些内容？

  一、小程序开发文档是什么?小程序开发文档是一系列文档，它们提供了有关小程序开发的所有信息，包括小程序的开发流程，开发要求，开发工具，技术框架和技术支持等。开发文档的目的是帮助开...

• 小程序开发文档总结

  注意事项：小程序的头像、介绍每月仅可修改5次服务范围每月仅可修改1次小程序发布前，小程序名称仅可以修改2次开发前准备1.登录微信公众平台，进入用户身份-->开发者，进行开...

• 大家都能读懂的微信小程序开发文档

  如果你想开发小程序，就得先学会一套微信特制的「开发语言」。为了让大家上手这门开发语言，微信官方提供了一份十分详细的开发文档。只要看完这篇文章，你就能快速上手小程序开发。一、语言...

• 小程序开发文档与开发工具

  小程序开发文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/。1.2.1小程序开发文档文档共分6类，如图1-1所示。图1-1简易教程...