专栏首页知晓程序开发|只需 10 分钟!让你的小程序轻松接入「微信支付」

开发|只需 10 分钟!让你的小程序轻松接入「微信支付」

在小程序开发中,微信支付的接口调用一直是一件「麻烦事」

你可能需要花半天时间看微信支付文档,再花半天调试支付签名,最后还得加两天时间搞定支付回调通知以及和自己的业务结合。

好不容易上线了,又得做各种保障措施确保支付功能不挂掉……

而这并不是「必然」现象,你同样可以选择只用 10 分钟完成微信支付的所有接入工作

今天,知晓程序(微信号 zxcx0101)将借着一款小程序的开发案例,向大家介绍史上最快完成微信支付接口调用的方法。

关注「知晓程序」微信公众号,在微信后台回复「开发」,获取小程序全套开发经验。

诞生背景

「未来社」是国内首创融合科技教育和生活美学的实验工场,其配套的小程序主要聚焦在商家入驻、会员付费两大功能。

「未来社」是第一批用上知晓云的小程序。从刚开始开发到最后成品,后端所有逻辑都交给了知晓云。

相比较于另外一款自己写后端逻辑的小程序项目,知晓云的确能够让开发者快速进行开发,免除环境安装、配置、后端代码管理的麻烦。

具体怎么使用呢?下面我就来为大家简单讲解。

构建界面

对接初期,「未来社」相关的负责人给了我一份整体页面设计稿。这份设计稿非常精美,所有元素都可以查询到具体样式。

有了这么精美的界面,小程序的界面外壳很快就搭建完成了。

这里简单地提及一下的,就是 Swiper 组件的使用。

「未来社」小程序主页有三个页面,前两个页面用来展示「未来社」介绍,并允许用户直接购买「未来社」空间使用权;第三个页面则用于展示用户资料。

用户只需要在页面上左右滑动,就可以切换前后页面。

同时,屏幕右下角也需要一个直接跳转个人资料页的按钮,用户点击之后可以直接跳过未来社介绍,直接进入个人中心填写资料。

看上去需求挺复杂,但是利用小程序的 Swiper 组件,这些功能都可以轻松完成

二话不说,上代码:

搞定!剩下的事情,就是填充 Swiper 组件的具体内容了。最后,再写写具体的样式,就是我们看到的小程序界面了。

关注「知晓程序」微信公众号,在微信后台回复「支付」,获取本项目源代码。

逻辑

界面搞定之后,我们就要搞搞数据交互的逻辑部分了。

当他们丢了一个知晓云 SDK 给我的时候,其实我是拒绝的。我不能说你让我用,我就立刻用,我必须要试一试……

刚拿到 SDK 的时候,我有点懵,因为知晓云的 SDK 将 API 请求也封装了起来,而且封装到了微信的 wx 对象中。

关注「知晓程序」微信公众号,回复「支付」,获取知晓云 SDK 下载地址。

其他同类集成式后端环境,通常也会用 RESTful 形式给接口,开发者在小程序中,调用 wx.request,完成数据交换。

当然,这种方式的好处也是显而易见:开发者不用自己封装 wx.request 写网络请求方法,也不需要在需要调用的时候,写又臭又长的网络请求参数。

开发者只需要在知晓云进行注册,同时加载知晓云体积极小的 SDK,就能直接在小程序中,使用知晓云的后端集成服务。

回到「未来社」小程序。这个小程序的具体作用就是向用户展示、介绍「未来社」业务,然后允许用户直接购买「未来社」空间使用权。

展示和介绍的任务我们之前解决了,接下来就是要让用户买买买。想要实现在小程序里直接交易,我需要实现两个功能:

  • 小程序要先让用户留下联系方式,方便客服联系用户,完成服务。
  • 客户心动的时候,应该让他直接在小程序里购买会员资格。

1. 资料补充与修改

利用知晓云的数据表功能,以及配套的读写接口,我就可以保存用户的个人资料。

这个部分的实现,用到的就是上一篇「我的书架」文章中的数据表读写功能,这里就不详细展开。有兴趣的,可以先阅读这篇文章

这里我所使用的方法比较简单粗暴:先检测当前用户是否在表中有个人资料的记录,如果没有,就新建,如果有,则拉取 / 更新个人资料

需要注意的是,在写入数据表的时候,知晓云会自动登记新建记录的用户标识,所以,不需要额外为数据表新建 user_id 这种列。

2. 支付功能

「未来社」的会员资格有使用时长,用户可以在小程序中购买时长。如果多次购买,时间可以累计。

那么,当用户购买会员资格时:

  • 小程序需要知道用户是否已经购买空间、是否还在会员资格期内。
  • 如果用户的会员尚在有效期,那么用户继续购买,则有效期会累加。
  • 如果用户的会员已过期,或是之前没有购买过,则有效期从购买时计算。

也就是说,我需要先从服务器获取用户会员资格有效期信息。用户购买后,我再根据有效期信息,计算新的到期日,最后更新数据库。

思路有了,那就动手做呗。首先,先从知晓云的数据表里抽数据:

接下来,就要正式接入微信支付接口,让用户在小程序里买买买。

我说过,知晓云最赞的地方,就是它的 SDK 将很多调用起来很麻烦的接口全部封装,这其中就包括微信支付接口

如果你很早关注过「知晓程序」微信公众号,应该知道在小程序里调用微信支付是多么痛苦的一件事,我甚至还打算找一整天来解决它。

但是,用了知晓云,十分钟我就做完了接入……

喏,就像这样:

嗯,只需要二三十行代码,传入价格和商品描述,知晓云已经帮你搞定微信支付了。

完成!其实未来社的小程序开发过程还算比较简单的。

有了知晓云,我将更多的时间花在了完善这款小程序的样式上面,在逻辑编写上,也节省了我不少精力。

本文分享自微信公众号 - 知晓程序(zxcx0101),作者:让你更知小程序的

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-09-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 小程序已失败?那你理解小程序了吗?

    知晓君
  • 晓实战 | 最实用的微信支付模板消息实战分享(内含源码)

    我们会定期邀请优秀的开发者,从实践的角度,亲自分享他们使用知晓云(cloud.minaapp.com)开发的实战经验,如果你也想分享你的小程序实战经验,欢迎加入...

    知晓君
  • 微信早报 | 西瓜足迹回应指控,有借鉴没抄袭;越南澄清禁用微信支付、支付宝

    知晓君
  • LeetCode刷题DAY 1:回文数判断

    相信很多小伙伴都感觉到行业内对模型算法工程师的要求越来越高,这种高要求不仅体现在对专业领域知识的理解应用,更体现在模型师同时要具备独立开发部署能力的用人诉求。S...

    三猫
  • 微信与星巴克合推“用星说”,微信的O2O野心不再只是支付

    去年12月8日,微信与星巴克在广州宣布启动战略合作,星巴克全国2400家门店接入微信支付。现在,常去星巴克的小伙伴应该都已习惯于微信支付,更早之前接入星巴克的A...

    罗超频道
  • 2018世界杯用户行为洞察报告

    酷鹅用户研究院联合腾讯指数,为您呈现世界杯用户的构成和看球习惯,世界杯赛前热议的内容,以及对世界杯的情怀与期待。为您带来更有看点、更具价值的世界杯球迷群体实录。

    酷鹅用户研究院
  • 微信小程序原理

    时见疏星
  • 微信小程序小店+场景居然让营业额爆增2818%

    微信小程序的热度无论是传统电商还是说资本市场热度越来越高,微信小程序自2017年1月9日上线以来已经上线了97项功能。第一批入驻微信小程序的企业无论是名企还是个...

    企鹅号小编
  • 门店老板怎么样去把握微信小程序流量红利快速打开市场?

    微信小程序甫一诞生,即引发业内外人士的高度关注和热烈讨论。“好的产品是用完即走”,小程序正是一款能够实现“用完即走”的产品,无须安装、触手可及,却能连接起许许多...

    速成应用小程序开发平台
  • 商家如何利用微信小程序分销轻松实现10万销售额?

    大多数卖货的方式都会选择分销,之所以选择分销,是因为可以实现产品直接从生产商向消费者的转移。随着电子商务发展的趋势,手机用户不断增加,移动电商越来越受到的重视,...

    速成应用小程序开发平台

扫码关注云+社区

领取腾讯云代金券