微信小程序项目实训

226 阅读8分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

文章目录

小程序项目培训实践周记

第一周周记

  第一周实训很快就过去了,这一周是整个实训的开始,我们知道了整个实训要完成的项目—微信小程序订餐系统,于是,我们这组便开始进行项目。
我们整理项目资料,然后对各自的特长分好工,我主要负责微信小程序部分后端的任务。我觉得不管个人完成什么任务,都要对这个项目有所了解,同时还要处理好信息对等,互相需要沟通好,如有需求变化及时更改,有问题则一起探讨。出现问题要多百度多谷歌,或在网上找相关视频来学习,实训是一个学习的过程,这样会让自己学的更多。
在这一周里,我们组先是完成了数据库的设计与建立,然后是建立微信公众号和搭建云服务器。微信公众号只能建立个人公众号,在微信公众平台注册就可以了,可以关注我们没名字点餐,哈哈,不过现在还没有任何功能.
然后是搭建云服务器,我买的是腾讯云的学生套餐,只要10元一个月,linux云服务器,着实把自己坑了一把。因为从来没有用过CentOs,不过不得不说,会用之后发现比windows快捷好用多了,不愧是linux,爱了爱了。为了搭建好运行环境,上网查了很多资料,弄了一天终于是搭建好了。

  这里贴上大佬的教程: 腾讯云CentOS系统服务器搭建发布Javaweb项目

  做好这些之后,我们便开始分工完成自己的任务。对于微信小程序后台的编写,我是用springboot作为后端,我并没有学过springboot,只是了解过一些。那为了搭出这个后台,我上网查资料,找了一些视频来学习。Springboot很快就搭建好了,但是微信小程序与springboot后台之间的数据交互这是一个麻烦,小程序还没有做出来,并且根本不知道怎么数据交互,最后通过查资料,了解了数据交互的真相,并且通过postman这个软件来模拟前端进行测试,于是,我完成了后台的初步搭建。

第二周周记

  第二周实训,我们接着第一周的完成程度来继续做我们的项目。第一周我们只是基本把后台写完了,但是前端的小程序还没有怎么开始,于是,第二周,我还有负责小程序前端的人便着重开始小程序的制作。
我是写后端的,为了让小伙伴能使用我的接口,我暂时用了内网穿透,并且把我的功能接口给了小伙伴,小程序前端用的都是json格式的数据,但微信小程序的好处就是前后端格式不用特意转化,我后端只需要把数据封装进Map里,并且返回Map,前端就能直接使用我Map里面的数据。比如菜单列表,我把list封装进map里,并设置一个key,然后前端通过key直接就能使用这个list。这种前后端分离,并且不用特意转换数据格式省去了很多功夫,于是前后连接很容易就实现了。
之后就是登陆功能,登陆功能比较麻烦,如果要使用微信登录的话,后台必须用前台传来的code到微信服务器换取个人标识openid和session_key,这样才能识别不同的顾客。不过通过百度,这个问题还是解决了。
然后就是判断一个用户是否在登录状态。这个比web前端麻烦,因为小程序没有cookie,不能把登录状态存入cookie,但办法总是有的,小程序虽然没有cookie,但是有storage,可以本地存储信息,再有就是redis,竟然可以限时缓存,就是设定数据存在的时间,就像session一样。于是,我就可以把数据先存入redis里,设定一个时间限制,然后再把redis里的数据存入小程序里的storage里面,判断登录状态就是判断storage里的数据在redis里是否存在,如果还存在,那么就还在登录,如果不存在,则需要重新登录。退出登录就把storage和redis里面的对应的数据删除就好了,再判断那自然就不存在了。
登录过程我们还用了第三方短信验证接口,实现了手机号码登录功能。
这个时候的小程序已经有点东西了,相信下一周功能就能基本完善了

第三周周记

  第三周的实训,对于项目的制作,已经接近尾声了。
这周我们主要做小程序的购买,订单查询,还有评论功能,这些都不难,充其量就是数据库的增删查改,我们后端使用springboot以及mybatis架构。并且后端api已经都写好了,只需要调用就好了,但是页面的制作,还有js的编写,以及一些莫名出现的bug,还是花了三四天时间。
对于小程序的购买功能,有个传递的结构参数就是购物车里商品信息,需要传递到支付页面和订单页面,小程序的app.js里面可以存储全局变量,于是我们在里面设置了一个结构体,当加购完成后就把数据传入这个全局变量,这样需要的页面就可以调用了。
还有一个问题就是,我们数据库的评论表没有时间字段,这导致前端不能显示评论的时间,于是,我想出了一个办法,就是在评论的时候,在字符串后面加上当时的时间,然后显示评论的时候,对从数据库取出的评论字符串进行处理,这让我知道了wxs文件,之后这个问题很好的解决了。不得不说,这个办法对于这种情况实在是太妙了。
很快,这一周就过完了,而我们的小程序也全部完成了,虽然还有一些小bug,不过一个基本的雏形还是有的,想想还是有成就感的。
下面贴上一些小程序图片
在这里插入图片描述
在这里插入图片描述

第四周周记

  第四周,也就是实训最后一周,我们项目的内容基本完成了,接下来就是项目的部署了。
因为我们后台是前后端分离的,那么这两个都需要部署到云服务器上,但是,只有一个端口能使用,为了解决这个问题,我们在云服务器上安装了两个tomcat,然后把其中一个tomcat端口给换了,这样,两个项目就都可以部署了,并且两个项目可以同时使用。
这里照样贴上大佬的教程: Linux配置2个或多个Tomcat同时运行
部署没有任何问题,只用FileZilla把项目文件传到云服务器上就可以了,之后就可以运行了,然后我们把小程序上的请求地址给改了,试运行一遍没有任何问题。
至于后台上传图片,微信小程序使用图片这个也不难,先在tomcat上弄一个图片文件夹映射,使得外部能访问到文件夹中的图片,然后后台把图片上传到这个文件夹中,微信小程序直接访问这个文件夹就好了。
云服务器访问图片教程: 使用浏览器直接访问云服务器上的图片
本来我想申请域名并且让微信小程序上传审核,这样就可以使用我上面的微信公众号访问小程序了,每个人都可以访问。不过,很不幸的是,不仅域名审核没有通过,就连小程序审核都没有通过,说个人公众号不能审核餐厅类型的服务号,不得不吐槽下,又没有支付功能为什么就不能审核来给别人看看呢,或者另外一种方式让所有人都能访问呢(可能有这种方式,如果有大佬知道的话,麻烦告知下,谢谢)
至此,小程序实训终于是结束了,而我们剩下不多的暑假也终于来临了。