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

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

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

准备工作

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

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

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

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

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

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

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

前端

1. 注册微信小程序账号

进入:微信公众平台, 选择小程序的账号类型按照流程进行注册。注意每个邮箱只能注册一个账号。

2. 下载开发工具

有了账号后,我们就可以使用这个账号进行开发了,开发用的IDE是腾讯出品的微信开发者工具,进入:小程序开发工具,下载对应的版本安装即可。

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

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

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

接着开始真正具体页面的开发了,开发过程参考开发文档:微信小程序接入指南

4. 前端开发过程

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

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

5. 打包上线

开发完成后就可以准备上线了,首先在开发者工具里将写好的代码上传,点击上传,定义版本号和注释,再到微信公众平台的版本管理提交审核,待审核通过了就表示上线成功了,就可以在微信中搜索到你的小程序进行访问了。

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

小结

到这里,前端的工作就算是完成了,其实一般如果不涉及复杂数据处理的话,后端不是必需的,直接所有简单数据都存放在前端就行了。如果你的小程序是这样的话,那本文到这里就可以结束了。后面的你也不需要看了。如果你需要更灵活的交互,更复杂的逻辑,那后端接口则必不可少了。那更复杂的后端数据接口又是怎么完成的呢,跟着我继续往下走你就知道了。

后端

后端主要是提供给小程序数据接口,让小程序各个页面都能有排行榜数据展示,这里我提供的是http接口,返回的Json格式的字符串。使用的语言是Java,使用的框架是SpringBoot,将最终的java代码打包成war包部署在云主机上的web服务器Tomcat中,Tomcat就可以自动的将通过url过来的请求分发到我的程序代码的处理逻辑中,处理完请求拿到相应的数据则以Json字符串的格式返回。

主要流程如下图:

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

服务器搭建

1. 购买云服务器

首先要存放后端程序代码,需要一台机器,自己的电脑虽然也可以,但是自己的电脑可不能保证24小时都开机且让外网能访问到,所以需要购买一台云服务器;其次,外网能访问到意味着需要一个公网IP,购买的云服务器会配套一个对应的IP地址。

这里我使用的是腾讯云服务器,进入官网购买:腾讯云,选择服务器的配置,付款即可。

基于经费预算以及实际需要(其实还是因为舍不得花钱)的考虑,我这里选择的是比较低配的机器:

CPU:1 核

内存:1 GB

公网带宽:1 Mbps

操作系统:CentOS 7.5 64位

系统盘:高性能云硬盘,共 50 GB

数据盘:高性能云硬盘,共 50 GB

2. 购买域名

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/d5e5c468f485c66ceb744661f4fa3f78.html