前言

有一段时间，闲着没事就试着做个微信小程序。首先，我想锻炼我独立部署前端和后端全链路系统的能力。第二，我想做一个我想用的小程序。方向是让用户得到高质量的电影、音乐、书籍、游戏等信息的推荐。什么是高质量信息？我假设排名列表中的信息越高，质量信息就越高，所以我为这类信息做了一个排名小程序。当然排名信息不是我随便编的，数据来源主要是豆瓣等排名网站。希望排名数据权威客观，能最大限度降低用户获取优质资源的成本。

下面的解释可能不会太详细。毕竟你想呈现的是一个完整的过程。获得一个非常详细的图片和文本教程是相当长的。一些详细的操作流程需要读者自己查阅相关文档，也会给出一些文档链接。好的，你准备好了吗？让我们一起开始这段快乐的旅程。

准备工作/即将工作

锋利的工具很管用。做什么很清楚，那么怎么做呢？你需要准备什么？下面我将以方程式的形式列出我所涉及的内容：

小程序账号微信开发者工具前端代码后端数据=微信小程序豆瓣公共API参数=实时排行榜数据和详细数据PyCharm Python爬虫代码=已爬网排行榜数据Idea Java SpringBoot=后端接口定义腾讯云服务器Tomcat后端接口定义=可访问后端服务接口域名IP SSL证书备案=合法后端接口访问路径前端

1.注册微信小程序账号

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

2.下载开发工具

有了账号之后，我们可以用这个账号进行开发。用于开发的IDE是腾讯出品的微信开发者工具。进入小程序开发工具，下载相应版本并安装。

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

打开新下载的微信开发者工具，扫码登录，创建一个小程序项目。登录微信微信官方账号平台，在开发-开发设置-开发者ID中找到你小程序的AppID，填入项目设置。

然后我们开始开发真正的特定页面。开发流程参考开发文档：微信小程序访问指南

4.前端开发流程

其实小程序的前端开发是在腾讯的开发工具中，使用js语言，遵循腾讯小程序的开发文档规范。在开发过程中，您可以编译、预览、调试真实机器等。可以使用各种插件，调用一些公共API或者自定义后端接口，使用腾讯提供的云功能。

被调用的后端接口需要从https开始，需要在微信公众平台的开发-开发设置-服务器域名中进行配置。

5.打包并上线

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

摘要

至此，前端工作完成。事实上，如果不涉及复杂的数据处理，后端是不必要的，所有简单的数据都可以直接存储在前端。如果你的小程序是这样的，那么这篇文章就可以到此结束了。你也不需要看后面。如果需要更灵活的交互和更复杂的逻辑，后端接口是必须的。那么更复杂的后端数据接口是如何完成的呢？跟着我下去，你就知道了。

后端

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

主要过程如下：

服务器建筑

1.购买云服务器

首先，要存储后端程序代码，需要一台机器。虽然自己的电脑还可以，但是自己的电脑不能保证24小时开机，外部网络可以访问，需要购买云服务器；其次，接入外网意味着需要一个公网IP，购买的云服务器会匹配相应的IP地址。

这里我用的是腾讯云服务器，去官网买腾讯云，选择服务器的配置，付费。

基于预算和实际需求(其实是因为舍不得花钱)，我在这里选择了一款匹配度相对较低的机器：

CPU: 1核内存：1 GB公网带宽：1 Mbps操作系统：CentOS 7.5 64位系统磁盘：高性能云硬盘，总容量50 GB数据磁盘：高性能云硬盘，总容量50 GB2。购买域名

域名用于映射到IP，方便直接访问绑定IP所在的服务器。虽然我们购买的云服务器可以以IP和端口的形式直接访问，但是IP不容易记住，微信上也不允许以IP加端口的形式访问url。所以我只能大方地买一个域名。

域名可以在任何域名服务提供商处购买。为了方便，我也是直接在腾讯云上买的。购买链接：域名注册

3.域名解析

如果你已经买了域名，怎么用？与IP不匹配的域名是没有任何意义的域名。这里我们需要把这个域名或者它的addon域放在我们需要对外提供服务的服务器对应的IP上，也就是我刚刚购买的云服务器的IP。

在腾讯云后台的云解析中，点击你的域名添加记录一般主要是添加一条记录，也就是给IPv4地址添加addon域，可以添加多个条目，通过主机记录区分各级域名。@的意思是直接使用二级域名xxx.com，其他的意思是使用三级或者更多的域名，挂在自己二级域名下面的多级域名都在你的控制之下。

4.域名备案

域名为什么要备案？这一点，整个世界都不是王的土地，而一亩三分地的互联网，自然是属于国家的，所以不能随便接入服务。如果你想开垦和开拓这片土地，这不是不可能的。你只需要向国家汇报，接受监督。

在构建小程序的整个过程中，域名备案耗时最长，长达十几二十天。进入备案页面：备案管理开始备案。我不会说更多的细节。备案流程详见：网站备案主要流程包括以下内容：

(1)拍摄窗帘照片(2)核实备案信息(3)填写主体信息(4)填写网站信息(5)上传材料(6)确认备案信息，提交初审(7)审核通过并完成备案

5.购买SSL证书

为什么我需要SSL证书？因为我们可以在配置SSL证书后用https启动我们的url，这是微信小程序需要的域名访问方式，通过加密传输更安全。

说买，其实可以选择一个免费的证书“买”，可以达到同样的目的，但是不付费的加密功能强，安全性自然弱。不过，这并不能阻止我选择免费，毕竟穷字是第一位的。

进入购买页面：SSL证书，选择要购买的证书配置，下单付款，下载证书，用于后续的web服务器配置。

摘要

经过前五个步骤，我们的服务器有能力使用https协议通过域名进行访问。下一步工作是开发我们的后端接口，并将后端程序代码部署到这个服务器上，供小程序访问。

后端程序开发

环境：

开发语言：Java 8

开发集成环境：IntelliJ IDEA Ultimate 2017

网页框架：跳脚

构建工具：Maven

关于安装这些工具的细节我就不多说了。网上有很多教程，如果不了解后端开发，安装这套环境也没用。我们假设读者也知道一些后端开发知识。

下面列出了最重要的Java代码，以说明后端程序如何提供http接口：

@ rest controller @ request mapping(value='/movie ')公共类MovieListController扩展了moviebase controller { private static final Logger log=org . slf4j . Logger factory . getlogger(MovieListController . class)；/* * *豆瓣top250电影* test : http://localhost :8080/电影/top250？start=0 limit=10 */@ request mapping(value='/top 250 ')public commonresvolistcommonvo getMovieTop250(){ try { httpersvletrequest request=this . gethttpersvletrequest()；string start=request . GetParameter(' start ')；string limit=request . getparameter(' limit ')；string URL=string . format(' https://API . douban.com/v2/movie/top 250？start=%scount=%s '，start，limit)；JSONObject JSONObject=Httputil . GetinofromHttpapi(URL)；listliscommonvos listliscommonvos=this . movielistdata trans(JSON object)；if(collection utils . is notempty(listponvos)){返回新的commonresponvo(listponvos，CommonRespVoCode。成功)；}} catch(异常e) {log.error('获取豆瓣top250电影信息异常'，e)；}返回新的common resp VO(common resp vocode . failed . code，“未获得数据”)；}/* * *中国百强电影*测试： http://LocalHost 33608080/Movie/chinatomovie？start=0 limit=10 */@ request mapping(value='/chinatomovie ')public commonresvolistjsonobject getchinatomovie(){ try { ListJSONObject result=this . getsublist(list . new ArrayList(chinatomoviedata . chinatomoviedata))；if(collection utils . is notempty(result)){返回新的common response VO(result，CommonRespVoCode。成功)；}} catch(异常e) {log.error('中国Top电影信息异常获取'，e)；}返回新的common resp VO(common resp vocode . failed . code，“未获得数据”)；}//省略后续代码。}以上代码是两个界面之一，一个是通过公共API获取豆瓣top250电影信息，另一个是通过爬虫数据获取中文top100电影信息。可以看到，SpringBoot使用RestController注释来指示这个类处理http请求，并返回与RequestMapping对应的每个方法上的json格式的数据。

RequestMapping注释为每个方法映射一个url。@RequestMapping注释可以作用于控制器类或其下的方法。当在类级别添加@RequestMapping注释时，该注释将应用于控制器的所有方法。方法上的@RequestMapping注释补充了类级别的@RequestMapping声明。这就是为什么上面的最后一个url是class plus方法的路径。在本地测试中，URL在浏览器中通过：http://localhost :8080/movie/chinatomovie？Start=0limit=10可以得到返回的数据。

程序代码开发完成后，使用Maven构建项目，将代码以war包的形式打包成文件，可以在目标目录中找到。这个战争包的目的将在后面讨论。

数据源

排名数据要有一定的权威性和客观性，所以我当然不能只拿一些数据来整理，我自己也没有能力去统计这几类信息的相关排名，所以就想到了takenism:从别人那里拿具有一定权威性的数据。豆瓣有一些公开的开源API，可以得到我想要的一些数据，其他的数据在其他各大排名网站上都有，但是没有现成的API可以提供他们的数据给我。既然他们不给，我只能自己去拿。

我用Python编写了一些爬虫软件，定期抓取特定排行榜网站上的数据，并利用这些数据更新我的本地静态数据，这样我的Java程序就可以获得相对较新的数据。事实上，我在这里可以做得更好，但是为了快速上网，我没有时间使用数据库来着陆抓取的数据。这有一个不好的结果，那就是每次重新启动服务时，数据在一段时间内都不是最新的。这在我可以接受的范围内。这个问题我以后再解决。

豆瓣Api示例：https://api.douban.com/v2/movie/top250? Start=0 count=10，通过这个url，可以批量获取顶级电影榜单的数据。

python爬虫使用urlopen，使用urllib.request.urlopen()函数访问目标url并返回该url对应的网页数据。然后使用BeautifulSoup对网页数据进行分析，主要是通过遍历搜索文档树来获取自己想要的数据。

部署后端程序

准备：

云服务主机：腾讯云服务器Web应用服务器：tomcat8jre: java8ssl证书：tomcat FTP传输工具对应的ssl证书：FileZilla首先登录购买的云服务器，部署前安装环境，主要安装jre和Tomcat。安装后，需要对Tomcat进行配置。

1.安装环境

点击下载Java运行时环境：Java SE运行时环境8u201下载后安装JRE。

要安装Tomcat，需要提前安装Tomcat。去Tomcat官网下载相应版本的Tomcat压缩包：Apache Tomcat。将下载的压缩包复制到指定的目录并解压缩。我在这里复制到/usr/local。

2.配置Tomcat

配置Tomcat的环境变量。有关配置过程，请参考《Apache Tomcat用户指南》

在Tomcat中配置我们之前购买和下载的SSL证书。请参考：Tomcat证书部署或官方网站文档：SSL/TLS配置操作指南。

3.部署应用程序

将我们之前用Maven打包的war包复制到安装Tomcat的webapps目录中，如下图所示：

[[email protected]_ 0 _ 12 _ centos web apps]# pwd/usr/local/tomcat 8/web apps[[email protected]_ 0 _ 12 _ centos web apps]# Lsdocs示例host-manager管理器root wxrank.war这里是上图中的wxrank.war文件，然后在tomcat的bin文件夹下运行startup.bat启动Tomcat，然后自动提取war包并部署。

摘要

为了方便起见，上面的一些文件已经从我自己的电脑上下载下来，然后通过FileZilla上传到云服务器上。这个工具也用于我自己的电脑和云服务器之间的其他文件传输。

随着Tomcat的成功配置和部署，我们的后端界面可以通过url访问。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。

还有很多数据没有准备好，以后还有时间优化。另外云服务器既然已经买了，就要充分利用，所以我在上面设置了个人博客。点击下面我的博客链接查看效果：