小程序带后端_从0开始搭建微信小程序(前后端)的全过程

更多精彩，欢迎点击上面蓝色的“随猿记”关注哦，谢谢！

前言

有段时间比较闲就尝试着做了一个微信小程序，一是为了锻炼自己独立部署一个前后端全链路系统的能力，二是想做一个自己都想用的小程序出来。方向是让用户可以集中获取优质的电影、音乐、书籍、游戏等信息的推荐，那什么是优质的信息呢？我这里假设的是排行榜里越靠前的信息就越是优质的信息，于是就做了一个这几类信息的排行榜小程序，当然排行的信息不是我随便瞎编的，数据来源主要是豆瓣以及其他一些排行网站，希望排行数据是权威和客观的，能最大化的减少用户获取优质资源的成本。

下面讲解的可能不会太详细，毕竟想呈现的是一个全过程，弄一个非常详细的图文教程反而显得有些冗长，有些详细操作过程需要读者自己去参照相关文档，有些文档链接也会给出。OK，准备好了吗？一起开始这趟快乐的旅程吧。

准备工作

工欲善其事，必先利其器。要做的事明确了，那怎么做呢？需要准备什么呢？下面我将我涉及到的以等式的形式罗列出来：

• 小程序账号 + 微信开发者工具 + 前端代码 + 后端数据 = 微信小程序

• 豆瓣公共API + 参数 = 实时的排行榜数据及详情数据

• PyCharm + Python + 爬虫代码 = 爬取的排行榜数据

• Idea + Java + SpringBoot = 后端接口定义

• 腾讯云服务器 + Tomcat + 后端接口定义 = 可访问的后端服务接口

• 域名 + IP + SSL证书 + 备案 = 合法后端接口访问路径

前端

1. 注册微信小程序账号

进入：https://mp.weixin.qq.com/ 选择小程序的账号类型按照流程进行注册。注意每个邮箱只能注册一个账号。

2. 下载开发工具

有了账号后，我们就可以使用这个账号进行开发了，开发用的IDE是腾讯出品的微信开发者工具，进入：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，下载对应的版本安装即可。

3. 开始进入小程序前端开发

打开刚下载好的微信开发者工具，扫码登录、创建小程序项目。登录微信公众号平台，在开发->开发设置->开发者ID中找到你小程序的AppID并填入到项目设置里。

接着开始真正具体页面的开发了，开发过程参考开发文档：https://developers.weixin.qq.com/miniprogram/introduction/index.html

4. 前端开发过程

小程序前端开发其实就是在腾讯的开发工具里，使用js语言，遵循腾讯小程序的开发文档规范进行代码编写。开发过程中可以编译、预览、真机调试等，可以使用各种插件，可以调用一些公共的api或者自己定义的后端接口，也可以使用腾讯提供的云函数。

调用的后端接口需要是https开头的，并且需要在微信公众平台的开发->开发设置->服务器域名里配置好。

5. 打包上线

开发完成后就可以准备上线了，首先在开发者工具里将写好的代码上传，点击上传，定义版本号和注释，再到微信公众平台的版本管理提交审核，待审核通过了就表示上线成