微信礼品卡踩坑之旅

微信礼品卡踩坑之旅

文中所描述的项目截止于2018-10,因此文章内容具有一定时效性,请大家注意。本文为博主第一篇博客,不足之处还请各位巨佬们指出:D
撰写这篇博客初衷有二:记录自己第一个正式项目的开发历程、为需要开通微信礼品卡/实现自定义礼品卡小程序的各位分享一些流程与思路,因此本文总体划为以下部分:

  • 官方礼品卡部署
  • 自定义小程序实现

项目来自于某公司甲方爸爸的两版需求:第一版为开通官方礼品卡小程序,旗下会员可在其他小程序中利用礼品卡为账户充值,第二版模仿星巴克用星说,开发新的礼品卡小程序。
本文面向具有一定经验的微信开发者,微信相关的其他功能(开发者配置、登录、支付等)不再一一赘述。
SDK用的是班纳睿大大的WxJava,在此安利一波~

官方礼品卡部署

先附上官方槽点满满充满诚意的礼品卡文档
这是目前我见过最长(所有内容挤进一篇)、最乱(没有目录,排版不统一,甚至有错别字)的微信文档了。大致讲了以下几点:

  • 小程序演示
  • 开通条件
  • 礼品卡CRUD
  • 货架CRUD
  • 绑定支付商户
  • 代码上传
  • 订单查询
  • 事件推送
  • 使用方式
  • 退款
  • 发票
  • 外链跳转
  • 压根不会鸟你的联系我们

WOWEE~看起来啥都给我们api caller准备好了,接下来调就完事了咩~LET’s GO DUDE!

首先注意

1、礼品卡亦属于卡券的一个分类,建议先查阅微信卡券文档以便了解相关字段与词汇的含义。
2、开通礼品卡的公众号门槛较高,若需开通带储值功能的礼品卡,更是要若干认证与手续,记得提前准备,个人认证的公众号无法申请礼品卡功能。
3、创建小程序不需要写代码,完全靠接口调用生成。

接入准备

  • 公众号->已认证
  • 公众号开通->卡券功能
  • 公众号开通->支付功能(微信认证)
  • 微信公众号->快速关联小程序(创建小程序账号)
  • 小程序账号->绑定 商户号(微信支付)

礼品卡创建

json数据,分礼品卡与兑换卡两种,在购买页会有区别。看过卡券文档的朋友们可能会发现,微信没有为卡券做一个完整的分类统计。在这里我可以说,会员卡和礼品卡是目前唯二可以放入“卡”中的,其余皆为票券,这也为后续的自定义礼品卡实现提供了思路。

  • 礼品卡的文档中没有对每个字段做详细图解,不过我们可以参照会员卡逐一对照:

货架创建

json数据,货架作为礼品卡的载体,可生成多个,但只能上线其中一个,每行标题对应category_list中的元素,每一小块代表theme_list中的一个元素,将创建完成的礼品卡放入theme_listitem_list字段中,其余字段可自调,创建成功后返回的page_id需要保存,后续会用到。货架包含的字段较多,文档中有详细的解释,这里就不展开了。
特别注意:创建货架的接口每天有调用次数限制,约为10次/天,调用前建议校验json格式,检查一遍字段的长度限制。

开通支付

  1. 调文档8.1中的接口,带上你公众号的商户号即可,调用成功后访问返回结果中的Url,登录商户平台,产品中心->微信礼品卡,点击开通。
  2. 8.2接口,带上小程序appid与商户号,成功即开通完成。

上传生成代码

调用8.3接口,带上对应的appid+page_id,等待片刻后即可在小程序后台看到体验版,扫码进去后看到的约莫是这样子:



emmm…..
基本功能算是都有了,只是这样式…啧啧

退款问题

首先国家法律规定,必须有退款功能。所以要做,要是礼品卡过期了、失效了,这也是能退款的,除非你设置了长期有效(不要小看,要相信你的用户是个大牛叉)

优缺点小结

  • 官方支持,从创建到部署轻松+愉快。可选字段多,扩展业务很方便。有独特的送卡消息,支持扫码消费或者线下核销。
  • 样式普通,布局简陋,颜值全靠图片衬托。

自定义小程序实现

尽管官方的礼品卡小程序不是很美观,但其他方面还是可以接受的。若要是需求方提到了星巴克用星说这玩意并且要给他个差不多样子的,那你就麻烦了。接下来你可能会一阵懵逼,陷入江局——它啥都跟官方的礼品卡小程序一样,但他娘的界面还比你好看,甚至还会有”之前太丑肯定是字段调得不对”的错觉,咱们先看看啥叫别人家的小程序:




  • 星巴克用星说是微信团队特别定制的礼品卡小程序,也是自它出现以后,官方才开放了礼品卡的相关文档,可以说是其他礼品卡小程序的始祖。

概括了一下用星说之于其他礼品卡小程序所没有的features:

  • 带阴影的块状元素,看起来更加优雅
  • 支持gif的轮播图广告
  • 星巴克风格的icon
  • 全新的购买界面
  • 节日期间首页会有活动弹窗

开始之前

先放下发麻的头皮,掏出度娘和谷哥捣腾一番后,发觉论坛上也是各种求方案求思路,最有趣的是,还有专门接这类订制礼品卡小程序的公司。
其实看到这里我就放心了,既然有人实现了,那它就是可行的,之后我提供的实现方案,不是很优雅,也不够完美,欢迎有做过这类的同好在评论区中分享自己的思路。
本节自定义小程序,我们的目标是模仿星巴克用星说,有2套思路:

  • 反编译官方小程序获得源码,在其基础上扩展(TODO)
  • 完全自定义,官方未提供的功能寻求替代方案

反编译实现

由于工期原因,也考虑到小程序没法过审的风险,没有尝试这一套方案。最近会尝试反编译,看看能否拿到原生礼品卡小程序的源码。(TODO)

完全自定义实现

咨询了相关公司(然鹅不肯说=。=),review原生小程序,以及后期的实操经历,我先把这几个无法按原礼品卡小程序实现的点放在这里:

  • 官方礼品卡不能复用(会显示为’已领取’状态但无法领卡)
  • 不能发礼品卡类型的消息给用户
  • 无法选择好友或群并返回其信息

特别是接口开放部分,只要是好友链相关,微信都不会给你开放,更不用说选择好友后返回其昵称与头像了,领卡这部分也是一大问题,查阅了JS-SDK和小程序文档,并没有发现可以向用户发送礼品卡信息的方法。所以说,要百分百模仿用星说是不可能的

Key Points

总的来说,要完成一个像样的实现,以下是关键:

  • 找到一种合适的卡券替代礼品卡
  • 选择好友的替代方案
  • 领卡的替代方案

解决方案

会员卡代替礼品卡

在上文中有提到过,礼品卡和会员卡是唯二可以放入”卡”中的卡券。会员卡拥有的字段比礼品卡丰富很多,完全可以替换。在事件推送上,会员卡遵循微信卡券的推送格式,而礼品卡有其独特类型的推送事件,比如超过24小时后未领取退回的事件,这可以做成定时任务代替,问题不大。接口方面,虽然会员卡没有核销接口,但也能用失效接口代替,其余也是应有尽有。
特别注意:用户每次购买应新建一张会员卡,即新的card_id,若发放给用户的卡id相同,当用户选择不同卡面时必会用到更新接口,而更新卡面会影响该id下的所有卡,包括其他用户已领取的会员卡,从而导致所有会员卡卡面都会变化。

使用分享功能指定发送对象

分享功能是为数不多用户间发送消息的途径,既然小程序内没法指定发送对象,那我们就直接发送分享消息,虽然不够美观,但也能引导用户点开小程序,这也意味着后续的领卡环节将在小程序里完成。

小程序内调起领卡

在小程序内做一个领取页,后台先准备好待领取卡的JsApiTicket,前段调用小程序的发卡接口调起官方领卡页面,放入卡包后跳转至领取成功的页面。整个环节最突兀的是官方领卡显示为会员卡且无法更改,这是做的不好的地方。

成品展示


  • 按需求做了单品购买

  • 增加抢红包模式




关于样式方面,可以参考liaoruochen的Starbucks,做的很全面,很漂亮。

结束语

感谢和我共事的小老弟们,在样式上花了很多功夫,也在这个项目上付出了很多时间,感谢你们。

参考文章

# 微信

Komentar

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×