记一次基于mpvue的小程序开发及上线实战

作者:jrainlau

https://segmentfault.com/a/1190000014506757

小程序名称:一起打车吧

项目地址:

客户端:https://github.com/jrainlau/taxi-together-client

服务端:https://github.com/jrainlau/taxi-together-server

小程序二维码:

经过为期两个晚上下班时间的努力,终于把我第一个小程序开发完成并发布上线了。整个过程还算顺利,由于使用了 方案进行开发,故可以享受和 一致的流畅开发体验;后台系统使用了 + 框架进行,使用最少的代码完成了小程序的后台逻辑。

除了开发之外,还实实在在地体验了一把微信小程序的开发流程,包括开发者工具的使用、体验版的发布、上线的申请等等。这些开发体验都非常值得被记录下来,于是便趁热打铁,写下这篇文章。

一、需求&功能

由于公司里有相当多的同事都住在同一个小区,所以上下班的时候经常会在公司群里组织拼车。但是由于完全依赖聊天记录,且上下班拼车的同事也很多,依赖群聊很容易把消息刷走,而且容易造成信息错乱。既然如此,那么完全可以开发一个小工具把这些问题解决。

发起拼车的人把出发地点、目的地点、打车信息以卡片的形式分享出来,参与拼车的人点击卡片就能选择参加拼车,并且能看到同车拼友是谁,拼单的信息等等内容。

交互流程如下:

可以看到,逻辑是非常简单的,我们只需要保证生成拼单、分享拼单、进入拼单和退出拼单这四个功能就好。

需求和功能已经确定好,首先按照小程序官网的介绍,注册好小程序并拿到 ,接下来可以开始进行后台逻辑的开发。

二、后台逻辑开发

由于时间仓促,功能又简单,所以并没有考虑任何高并发等复杂场景,仅仅考虑功能的实现。从需求的逻辑可以知道,其实后台只需要维护两个列表,分别存储当前所有拼车单以及当前所有参与了拼车的用户即可,其数据结构如下:

当前所有拼单列表

当前所有参与了拼车的用户列表

当用户确定并分享了一个拼单之后,会直接新建一个拼单,同时把该用户添加到当前所有参与了拼车的用户列表列表里面,并且添加到该拼单的成员列表当中:

只要维护好这两个列表,接下来就是具体的业务逻辑了。

为了快速开发,这里我使用了 + 框架的方案。不懂 的读者看到这里也不用紧张,代码非常简单且直白,看看也无妨。

首先新建一个 类:

接下来会在这个类的内部添加创建拼单获取拼单参与拼单退出拼单判断用户是否在某一拼单中图片上传的功能。

1、获取拼单

该方法接收客户端传来的拼单ID,然后拿这个ID去检索是否存在对应的拼单。若存在则返回对应的拼单,否则报错给客户端。

2、创建拼单

该方法会接收来自客户端的用户信息拼单信息,分别添加到 和 当中。

创建完成后,会返回当前的 和 到客户端。

3、参与拼单

接收客户端传来的用户信息拼单ID,把用户添加到拼单和 列表中。

4、退出拼单

接收客户端传来的用户ID拼单ID,然后删除掉两个列表里面的该用户。

这个函数还有一个功能,如果判断到这个拼单ID所对应的拼单成员为空,会认为该拼单已经作废,会直接删除掉这个拼单以及所对应的车辆信息图片。

5、判断用户是否在某一拼单中

接收客户端传来的用户ID,接下来会根据这个用户ID去 里面去检索该用户所对应的拼单,如果能检索到,会返回其所在的拼单。

6、图片上传

接收客户端传来的拼单ID图片资源,先存储图片,然后把该图片的路径写入对应拼单ID的拼单当中。

完成了业务逻辑的功能,接下来就是把它们分发给不同的路由了:

完整的代码可以直接到仓库查看,这里仅展示关键的内容。

三、前端业务开发

前端借助 直接使用了mpvue的mpvue-quickstart来初始化项目,具体过程不再细述,直接进入业务开发部分。

1、注册全局Store

由于开发习惯,我喜欢把所有接口请求都放在store里面的 当中,所以这个小程序也是需要用到 。但由于小程序每一个Page都是一个新的Vue实例,所以按照Vue的方式,用全局 是不会把 注册到实例当中的,这一步要手动来。

在 目录下新建一个 文件,然后在里面进行使用注册:

接下来在 当中,手动在Vue的原型里注册一个 :

这样,以后在任何的Page里都可以通过 来操作这个全局Store了。

2、构建好请求的API接口

和后台系统的逻辑对应,前端也要构造好各个请求的API接口,这样的做法能够避免把API逻辑分散到页面四处,具有清晰、易维护的优势。

3、填写拼单并实现分享功能实现

新建一个 目录,作为小程序的首页。

该首页的业务逻辑如下:

进入首页的时候先获取用户信息,得到userId

然后用userId去请求判断是否已经处于拼单

若是,则跳转到对应拼单Id的详情页

若否,才允许新建拼单

在 的生命周期钩子中实现上述逻辑:

当用户填写完拼单后,会点击一个带有 属性的button,然后会触发 生命周期钩子的逻辑把拼单构造成卡片分享出去。当分享成功后会跳转到对应拼单ID的参加拼单页。

4、参与拼单&退出拼单功能实现

新建一个 目录,作为小程序的“参加拼单页”。

该页面的运行逻辑如下:

首先会获取从url里面带来的billId

其次会请求一次userInfo,获取userId

然后拿这个userId去检查该用户是否已经处于拼单

如果已经处于拼单,那么就会获取一个新的billId代替从url获取的

拿当前的billId去查询对应的拼单信息

如果billId都无效,则redirect到首页

由于要获取url携带的内容,亲测 是不行的,只能在 里面获取:

此外,当用户点击“参与拼车”后,需要重新请求拼单信息,以刷新视图拼车人员列表;当用户点击“退出拼车”后,要重定向到首页。

经过上面几个步骤,客户端的逻辑已经完成,可以进行预发布了。

四、预发布&申请上线

如果要发布预发布版本,需要运行 命令,打包出一个生产版本的包,然后通过小程序开发者工具的上传按钮上传代码,并填写测试版本号:

接下来可以在小程序管理后台开发管理开发版本当中看到体验版小程序的信息,然后选择发布体验版即可:

当确定预发布测试无误之后,就可以点击“提交审核”,正式把小程序提交给微信团队进行审核。审核的时间非常快,在3小时内基本都能够有答复。

值得注意的是,小程序所有请求的API,都必须经过域名备案使用https证书,同时要在设置开发设置服务器域名里面把API添加到白名单才可以正常使用。

五、后记

这个小程序现在已经发布上线了,算是完整体验了一把小程序的开发乐趣。小程序得到了微信团队的大力支持,以后的生态只会越来越繁荣。当初小程序上线的时候我也对它有一些抵触,但后来想了想,这只不过是前端工程师所需面对的又一个“端“而已,没有必要为它戴上有色眼镜,多掌握一些总是好的。

“一起打车吧”微信小程序依然是一个玩具般的存在,仅供自己学习和探索,当然也欢迎各位读者能够贡献代码,参与开发~

其它功能正在完善,不定期更新....

觉得本文对你有帮助?请分享给更多人

关注「前端大学」,提升前端技能

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180427A0D95L00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券