如何从零开始一步步搭建微信小程序（前后端）并实现功能？
- 内容介绍
- 相关推荐
本文共计2146个文字，预计阅读时间需要9分钟。
前言：近期尝试做了一个微信小程序，旨在锻炼自己独立部署前后端全链路系统的能力，同时满足自己想用的小程序需求。方向：让用户可以集中获取优质内容。
前言
有段时间比较闲就尝试着做了一个微信小程序，一是为了锻炼自己独立部署一个前后端全链路系统的能力，二是想做一个自己都想用的小程序出来。方向是让用户可以集中获取优质的电影、音乐、书籍、游戏等信息的推荐，那什么是优质的信息呢？我这里假设的是排行榜里越靠前的信息就越是优质的信息，于是就做了一个这几类信息的排行榜小程序，当然排行的信息不是我随便瞎编的，数据来源主要是豆瓣以及其他一些排行网站，希望排行数据是权威和客观的，能最大化的减少用户获取优质资源的成本。
下面讲解的可能不会太详细，毕竟想呈现的是一个全过程，弄一个非常详细的图文教程反而显得有些冗长，有些详细操作过程需要读者自己去参照相关文档，有些文档链接也会给出。OK，准备好了吗？一起开始这趟快乐的旅程吧。
准备工作
工欲善其事，必先利其器。要做的事明确了，那怎么做呢？需要准备什么呢？ 下面我将我涉及到的以等式的形式罗列出来：
- 小程序账号 + 微信开发者工具 + 前端代码 + 后端数据 = 微信小程序
- 豆瓣公共API + 参数 = 实时的排行榜数据及详情数据
- PyCharm + Python + 爬虫代码 = 爬取的排行榜数据
- Idea + Java + SpringBoot = 后端接口定义
- 腾讯云服务器 + Tomcat + 后端接口定义 = 可访问的后端服务接口
- 域名 + IP + SSL证书 + 备案 = 合法后端接口访问路径
前端
1. 注册微信小程序账号
进入：微信公众平台, 选择小程序的账号类型按照流程进行注册。注意每个邮箱只能注册一个账号。
2. 下载开发工具
有了账号后，我们就可以使用这个账号进行开发了，开发用的IDE是腾讯出品的微信开发者工具，进入：小程序开发工具，下载对应的版本安装即可。
3. 开始进入小程序前端开发
打开刚下载好的微信开发者工具，扫码登录、创建小程序项目。登录微信公众号平台，在开发->开发设置->开发者ID中找到你小程序的AppID并填入到项目设置里。
接着开始真正具体页面的开发了，开发过程参考开发文档：微信小程序接入指南
4. 前端开发过程
小程序前端开发其实就是在腾讯的开发工具里，使用js语言，遵循腾讯小程序的开发文档规范进行代码编写。开发过程中可以编译、预览、真机调试等，可以使用各种插件，可以调用一些公共的api或者自己定义的后端接口，也可以使用腾讯提供的云函数。
调用的后端接口需要是localhost:8080/movie/top250?start=0&limit=10 */ @RequestMapping(value = "/top250") public CommonRespVo<List<ListCommonVo>> getMovieTop250() { try { HttpServletRequest request = this.getHttpServletRequest(); String start = request.getParameter("start"); String limit = request.getParameter("limit"); String url = String.format("api.douban.com/v2/movie/top250?start=%s&count=%s",start,limit); JSONObject jsonObject = HttpUtil.getInfoFromHttpApi(url); List<ListCommonVo> listCommonVos = this.movieListDataTrans(jsonObject); if (CollectionUtils.isNotEmpty(listCommonVos)) { return new CommonRespVo(listCommonVos, CommonRespVoCode.SUCCESS); } } catch (Exception e) { log.error("获取豆瓣top250电影信息异常",e); } return new CommonRespVo(CommonRespVoCode.FAILED.code, "未获取到数据"); } /** * 华语top100电影 * test: localhost:8080/movie/chinaTopMovie?start=0&limit=10 */ @RequestMapping(value = "/chinaTopMovie") public CommonRespVo<List<JSONObject>> getChinaTopMovie() { try { List<JSONObject> result = this.getSubList(Lists.newArrayList(ChinaTopMovieData.chinaTopMovieData)); if (CollectionUtils.isNotEmpty(result)) { return new CommonRespVo(result, CommonRespVoCode.SUCCESS); } } catch (Exception e) { log.error("获取华语Top电影信息异常",e); } return new CommonRespVo(CommonRespVoCode.FAILED.code, "未获取到数据"); } //省略后续代码 }
上面这段代码，就是其中的两个接口，一个是通过公共API获取豆瓣top250电影信息，一个是通过爬虫数据获取的华语top100电影信息。可以看到SpringBoot使用RestController注解表明此类处理localhost:8080/movie/chinaTopMovie?start=0&limit=10 就可以获取到返回的数据。
程序代码开发完成后，使用Maven构建项目并将代码打包成一个war包形式的文件，在target目录中可以找到该war包，后面会讲到这个war包的用途。
数据来源
排行榜数据是要具有一定的权威性，客观性的，所以当然不能我随便拿一些数据排列一下就成的，我自己又没有能力去统计这几类信息的相关排行，所以我就想到了拿来主义：从别人那里拿已经具备一定权威的数据。豆瓣有一些公共开源的api可以拿到我想要的部分数据，另外一些数据在其他各大排行榜网站上都有，但是没有现成的api把他们的数据提供给我，他们既然不给，那我只能自己去取了。
我使用Python写了一些爬虫软件定期的爬取特定的排行榜网站上的数据，用这些数据更新我本地的静态数据，这样我的Java程序就可以拿到相对新的数据了。这里其实我还可以做得更好，但为了快速的上线，我来不及使用数据库落地这些爬取来的数据，这样有个不好的结果就是，每次服务重启的时候，有一段时间的数据不是最新的。这在我的可接受范围内，后面有时间再去解决这个问题吧。
豆瓣的api示例： api.douban.com/v2/movie/top250?start=0&count=10 ，通过这个url可以批量分页的拿到top电影榜的数据。
python爬虫则使用的是urlopen，urllib.request.urlopen()函数是用于实现对目标url的访问，返回url对应的网页数据。再使用BeautifulSoup对网页数据进行解析，主要是遍历搜索文档树从而拿到自己想要的那部分数据。
部署后端程序
准备：
- 云服务主机： 腾讯云服务器
- Web应用服务器：Tomcat 8
- JRE：Java 8
- SSL证书：Tomcat对应的SSL证书
- FTP传输工具：FileZilla
首先登录购买的那台云服务器，部署前先安装好环境，主要是安装JRE和Tomcat，安装好后还需要对Tomcat进行一番配置。
1. 安装环境
安装JRE 点击下载Java运行时环境：Java SE Runtime Environment 8u201 ，下载后安装。
安装Tomcat 需要提前安装好Tomcat。进Tomcat官网下载对应版本的Tomcat压缩包：Apache Tomcat，将下载好的压缩包拷贝至指定的目录并解压，我这里是拷贝到 /usr/local 。
2. 配置Tomcat
配置Tomcat的环境变量，配置过程参考： Apache Tomcat User Guide
把我们之前购买并下载好的SSL证书配置在Tomcat中，具体配置过程参考:Tomcat 证书部署，或者参考官网文档： SSL/TLS Configuration HOW-TO
3. 部署应用
将我们之前用Maven打包好的war包拷贝到安装Tomcat的webapps目录下，如我这里下图的位置：
[root@VM_0_12_centos webapps]# pwd /usr/local/tomcat8/webapps [root@VM_0_12_centos webapps]# ls docs examples host-manager manager ROOT wxrank wxrank.war
这里也就是上图中wxrank.war文件，然后去Tomcat的bin文件夹下运行startup.bat启动tomcat，即可自动解压war包，并部署。
小结
为了方便，上面有些文件是在自己的电脑上下载好了，再通过FileZilla上传到云服务器上，我自己电脑和云服务器之间的其他文件传输也都是用的这个工具。
随着Tomcat的配置以及部署成功，我们的后端接口就可以通过url访问到了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。
还有很多数据没准备好，后面有时间再优化优化。另外既然云服务器买都买了，怎么着也得充分的利用下，所以又在上面搭了一个个人博客，点下面我的博客链接看一下效果吧：
本文共计2146个文字，预计阅读时间需要9分钟。
前言：近期尝试做了一个微信小程序，旨在锻炼自己独立部署前后端全链路系统的能力，同时满足自己想用的小程序需求。方向：让用户可以集中获取优质内容。
前言
有段时间比较闲就尝试着做了一个微信小程序，一是为了锻炼自己独立部署一个前后端全链路系统的能力，二是想做一个自己都想用的小程序出来。方向是让用户可以集中获取优质的电影、音乐、书籍、游戏等信息的推荐，那什么是优质的信息呢？我这里假设的是排行榜里越靠前的信息就越是优质的信息，于是就做了一个这几类信息的排行榜小程序，当然排行的信息不是我随便瞎编的，数据来源主要是豆瓣以及其他一些排行网站，希望排行数据是权威和客观的，能最大化的减少用户获取优质资源的成本。
下面讲解的可能不会太详细，毕竟想呈现的是一个全过程，弄一个非常详细的图文教程反而显得有些冗长，有些详细操作过程需要读者自己去参照相关文档，有些文档链接也会给出。OK，准备好了吗？一起开始这趟快乐的旅程吧。
准备工作
工欲善其事，必先利其器。要做的事明确了，那怎么做呢？需要准备什么呢？ 下面我将我涉及到的以等式的形式罗列出来：
- 小程序账号 + 微信开发者工具 + 前端代码 + 后端数据 = 微信小程序
- 豆瓣公共API + 参数 = 实时的排行榜数据及详情数据
- PyCharm + Python + 爬虫代码 = 爬取的排行榜数据
- Idea + Java + SpringBoot = 后端接口定义
- 腾讯云服务器 + Tomcat + 后端接口定义 = 可访问的后端服务接口
- 域名 + IP + SSL证书 + 备案 = 合法后端接口访问路径
前端
1. 注册微信小程序账号
进入：微信公众平台, 选择小程序的账号类型按照流程进行注册。注意每个邮箱只能注册一个账号。
2. 下载开发工具
有了账号后，我们就可以使用这个账号进行开发了，开发用的IDE是腾讯出品的微信开发者工具，进入：小程序开发工具，下载对应的版本安装即可。
3. 开始进入小程序前端开发
打开刚下载好的微信开发者工具，扫码登录、创建小程序项目。登录微信公众号平台，在开发->开发设置->开发者ID中找到你小程序的AppID并填入到项目设置里。
接着开始真正具体页面的开发了，开发过程参考开发文档：微信小程序接入指南
4. 前端开发过程
小程序前端开发其实就是在腾讯的开发工具里，使用js语言，遵循腾讯小程序的开发文档规范进行代码编写。开发过程中可以编译、预览、真机调试等，可以使用各种插件，可以调用一些公共的api或者自己定义的后端接口，也可以使用腾讯提供的云函数。
调用的后端接口需要是localhost:8080/movie/top250?start=0&limit=10 */ @RequestMapping(value = "/top250") public CommonRespVo<List<ListCommonVo>> getMovieTop250() { try { HttpServletRequest request = this.getHttpServletRequest(); String start = request.getParameter("start"); String limit = request.getParameter("limit"); String url = String.format("api.douban.com/v2/movie/top250?start=%s&count=%s",start,limit); JSONObject jsonObject = HttpUtil.getInfoFromHttpApi(url); List<ListCommonVo> listCommonVos = this.movieListDataTrans(jsonObject); if (CollectionUtils.isNotEmpty(listCommonVos)) { return new CommonRespVo(listCommonVos, CommonRespVoCode.SUCCESS); } } catch (Exception e) { log.error("获取豆瓣top250电影信息异常",e); } return new CommonRespVo(CommonRespVoCode.FAILED.code, "未获取到数据"); } /** * 华语top100电影 * test: localhost:8080/movie/chinaTopMovie?start=0&limit=10 */ @RequestMapping(value = "/chinaTopMovie") public CommonRespVo<List<JSONObject>> getChinaTopMovie() { try { List<JSONObject> result = this.getSubList(Lists.newArrayList(ChinaTopMovieData.chinaTopMovieData)); if (CollectionUtils.isNotEmpty(result)) { return new CommonRespVo(result, CommonRespVoCode.SUCCESS); } } catch (Exception e) { log.error("获取华语Top电影信息异常",e); } return new CommonRespVo(CommonRespVoCode.FAILED.code, "未获取到数据"); } //省略后续代码 }
上面这段代码，就是其中的两个接口，一个是通过公共API获取豆瓣top250电影信息，一个是通过爬虫数据获取的华语top100电影信息。可以看到SpringBoot使用RestController注解表明此类处理localhost:8080/movie/chinaTopMovie?start=0&limit=10 就可以获取到返回的数据。
程序代码开发完成后，使用Maven构建项目并将代码打包成一个war包形式的文件，在target目录中可以找到该war包，后面会讲到这个war包的用途。
数据来源
排行榜数据是要具有一定的权威性，客观性的，所以当然不能我随便拿一些数据排列一下就成的，我自己又没有能力去统计这几类信息的相关排行，所以我就想到了拿来主义：从别人那里拿已经具备一定权威的数据。豆瓣有一些公共开源的api可以拿到我想要的部分数据，另外一些数据在其他各大排行榜网站上都有，但是没有现成的api把他们的数据提供给我，他们既然不给，那我只能自己去取了。
我使用Python写了一些爬虫软件定期的爬取特定的排行榜网站上的数据，用这些数据更新我本地的静态数据，这样我的Java程序就可以拿到相对新的数据了。这里其实我还可以做得更好，但为了快速的上线，我来不及使用数据库落地这些爬取来的数据，这样有个不好的结果就是，每次服务重启的时候，有一段时间的数据不是最新的。这在我的可接受范围内，后面有时间再去解决这个问题吧。
豆瓣的api示例： api.douban.com/v2/movie/top250?start=0&count=10 ，通过这个url可以批量分页的拿到top电影榜的数据。
python爬虫则使用的是urlopen，urllib.request.urlopen()函数是用于实现对目标url的访问，返回url对应的网页数据。再使用BeautifulSoup对网页数据进行解析，主要是遍历搜索文档树从而拿到自己想要的那部分数据。
部署后端程序
准备：
- 云服务主机： 腾讯云服务器
- Web应用服务器：Tomcat 8
- JRE：Java 8
- SSL证书：Tomcat对应的SSL证书
- FTP传输工具：FileZilla
首先登录购买的那台云服务器，部署前先安装好环境，主要是安装JRE和Tomcat，安装好后还需要对Tomcat进行一番配置。
1. 安装环境
安装JRE 点击下载Java运行时环境：Java SE Runtime Environment 8u201 ，下载后安装。
安装Tomcat 需要提前安装好Tomcat。进Tomcat官网下载对应版本的Tomcat压缩包：Apache Tomcat，将下载好的压缩包拷贝至指定的目录并解压，我这里是拷贝到 /usr/local 。
2. 配置Tomcat
配置Tomcat的环境变量，配置过程参考： Apache Tomcat User Guide
把我们之前购买并下载好的SSL证书配置在Tomcat中，具体配置过程参考:Tomcat 证书部署，或者参考官网文档： SSL/TLS Configuration HOW-TO
3. 部署应用
将我们之前用Maven打包好的war包拷贝到安装Tomcat的webapps目录下，如我这里下图的位置：
[root@VM_0_12_centos webapps]# pwd /usr/local/tomcat8/webapps [root@VM_0_12_centos webapps]# ls docs examples host-manager manager ROOT wxrank wxrank.war
这里也就是上图中wxrank.war文件，然后去Tomcat的bin文件夹下运行startup.bat启动tomcat，即可自动解压war包，并部署。
小结
为了方便，上面有些文件是在自己的电脑上下载好了，再通过FileZilla上传到云服务器上，我自己电脑和云服务器之间的其他文件传输也都是用的这个工具。
随着Tomcat的配置以及部署成功，我们的后端接口就可以通过url访问到了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。
还有很多数据没准备好，后面有时间再优化优化。另外既然云服务器买都买了，怎么着也得充分的利用下，所以又在上面搭了一个个人博客，点下面我的博客链接看一下效果吧：