前言

这篇文章开始，我们正式进入微信小程序的开发。开发具体功能前，我们先做一些准备工作。

一、开发环境安装

微信小程序开发，使用的是微信开发者工具。官网下载地址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
一般我们使用最新稳定版本即可。

二、开发工具使用

1.登录

微信开发者工具使用前，需要用微信扫码进行登录。

2.创建小程序项目

微信开发者工具可以进行小程序、公众号等应用开发，这里我们选择新建一个小程序。如果是之前已创建的项目，可以在列表里直接打开。也可以从外部导入项目。

创建一个小程序，填写项目名称、存放目录、AppID（从微信公众平台的“开发管理”获取）。由于我们自建后端服务，所以这里选择“不使用云服务”，语言选择JavaScript。

创建小程序后，应用开发的界面如下图。

3.开发工具功能介绍

• 面板视图的显示/隐藏控制
  
• 编译调试和清缓存
  
  利用开发工具中的模拟器，可以在开发中进行实时预览和调试。
  如果要在手机上预览调试，可以分别点击“预览”和“真机调试”按钮。两者区别是，真机调试会跟电脑互传监测调试信息。
  
  
  清缓存的操作，可以让测试环境清除缓存数据，恢复初始状态，这个用于反复测试登录状态相关功能还是很有帮助。不过要注意有些清除并不十分彻底，比如图片的缓存，后续我们会讲到。
  
• 项目信息
  可以查看当前项目基本信息、设置和服务配置。重点内容我们在开发涉及到再介绍。
  这里先介绍“调试基础库”，这是定义小程序调试运行时候用的基础库版本，这里设置只用于开发者工具内的调试。后边显示的百分比数字，表示当前市面上运行该版本的手机数量占比。我们可以通过切换这里的版本，进行不同版本的测试。
  
  
• 设置
  在“设置”菜单里，有一些好用的设置选项。比如在“通用设置”里，可以设置编辑器的外观、快捷键等。
  

三、开发帮助

在微信官方文档，我们可以获取开发的详细指引说明。在开发社区，可以进行开发交流和问题解决。链接地址：
https://developers.weixin.qq.com/miniprogram/dev/framework/

四、素材准备

在开发之前，我们先准备一些图片素材。

• 卡片小类的图片素材：
  
• 卡片的图片素材：
  

还有声音素材，我们会在使用时候再进行创作。

专题文章链接

最详细的【微信小程序+阿里云Web服务】开发部署指引（一）：准备开始
最详细的【微信小程序+阿里云Web服务】开发部署指引（二）：注册微信小程序
最详细的【微信小程序+阿里云Web服务】开发部署指引（三）：开通阿里云主机
最详细的【微信小程序+阿里云Web服务】开发部署指引（四）：搭建服务端数据库
最详细的【微信小程序+阿里云Web服务】开发部署指引（五）：实现服务端调用逻辑
最详细的【微信小程序+阿里云Web服务】开发部署指引（六）：开发微信小程序的准备
最详细的【微信小程序+阿里云Web服务】开发部署指引（七）：小程序项目中的文件资源
最详细的【微信小程序+阿里云Web服务】开发部署指引（八）：开发小程序卡片类型呈现功能
最详细的【微信小程序+阿里云Web服务】开发部署指引（九）：开发小程序卡片浏览功能
最详细的【微信小程序+阿里云Web服务】开发部署指引（十）：实现发音朗读
最详细的【微信小程序+阿里云Web服务】开发部署指引（十一）：开发小程序设置功能
最详细的【微信小程序+阿里云Web服务】开发部署指引（十二）：开发小程序用户反馈功能
最详细的【微信小程序+阿里云Web服务】开发部署指引（十三）：小程序底部菜单
最详细的【微信小程序+阿里云Web服务】开发部署指引（十四）：发布小程序
最详细的【微信小程序+阿里云Web服务】开发部署指引（十五）：结语