前言
这篇文章开始,我们正式进入微信小程序的开发。开发具体功能前,我们先做一些准备工作。
一、开发环境安装
微信小程序开发,使用的是微信开发者工具。官网下载地址:
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服务】开发部署指引(十五):结语