给大家推荐一个
不写代码做小程序
工具
腾讯云微搭平台
导
语
本文是一篇纯技巧分享的文章,主要是分享使用微搭工具完成小程序微信支付的过程。
全过程使用微搭工具完成,不写任何逻辑性代码即可完成。
适合想做小程序,又不懂代码的朋友。
什么是腾讯云微搭


豆包AI回复
我这里翻译一下:
就是腾讯云把做小程序过程所有的复杂技术全部给封装起来了,包括服务器、数据库、文件存储、网络、域名、管理后台等等。
然后给我们提供了一个工具,我们只需要通过拖拉元件的方式,组装自己需要的小程序页面功能。
全程可以不写一行代码!
这里会不会有人问,腾讯云和微信小程序是什么关系的呀?
我也简单总结一下:腾讯云是微信小程序爸爸。
微搭可以把小程序做到什么效果
刚好,我用微搭做了个【贝思思家助手】的小程序,我给大家分享一下截图。本期的内容主要就是在这个小程序完成微信支付的功能。

首页

小家

商城

我的

商品搜索

商品详情
左右滑动查看更多

确认订单

确认支付

订单详情

家庭主页

小孩主页

订单列表
左右滑动查看更多
总结:
除了主流的电商商城之外,很多行业的应用也是可以实现的。
比如家政、社交、家政、社交、零售、教育、医疗、社区服务、亲子母婴、宠物服务、企业 OA、人力资源等等。
需要很有耐心去一个功能一个功能的搭建,如果再找个懂UI的朋友,效果还是相当Nice的。
使用微搭实现微信支付
AI新建页面


首页让微搭的【AI生成页面】功能帮我生成一个确认支付的页面。
当然,我其他的商城首页、列表、商品详情、确认订单的页面已经全做了的。不是只有这个确认支付的页面的。只因为我接下来的内容,都是与支付相关,才从这里开始。
工作流
需要做到逻辑处理的,都是需要使用工作流的。页面交互的增删改查,都是针对全表操作,没有其他逻辑处理的。
那么第一步,我们就需要新建工作流,点击【扩展功能-工作流-新增】

新增的时候,你可以看到很多官方提供的工作流模板,主要是微信支付的。
我们目前只需要发起支付的话,就直接选中发起支付的模板,直接使用就好了。

支付商户号配置
第一次配置工作流的时候,官方是会引导我们填写我们需要收钱的微信商户号的。

根据它官方的引导,把我们的小程序APPID和商户号等信息填进去,就好了。
如果日后需要修改,也可以通过【拓展功能-APIs连接器-微信支付APIs-基本信息】进行修改。

发起支付工作流
发起支付的工作了比较简单,使用模板,配置上对应的参数就可以了。


在微信支付这里,第一步的配置,选择微信支付APIs都是系统现成的,直接选择JSAPI下单就好。
入参这里,系统也是自动生成的,我们不用动它。之后在组件调用处,按照这个格式入参即可。
设计好工作流之后,直接发布就好了。只有发布,我们小程序才能够应用到。
小程序调用
在设计小程序界面,通过点击某一个某件来进行触发,这是正常的用户交互方式。
点击确认支付的按钮,可以看到右侧有个点击的事件。

在用户点击的时候,给它添加调用工作流事件。

然后对于入参,根据之前的工作量的入参结构,在下面弹框中的红色框,选中对应的入参信息,比如订单号,支付用户的openid,订单金额等。
PS:看到它是代码,但是它不是写出来的,是选择出来的。

调用工作流成功之后,它会输出微信支付平台返回来的支付参数信息,直接在后面执行一段支付程序代码:


这里就不得不批评一下这个平台了,明明就是可以加多一个支付组件给我用的,硬是要我去它的另外一个模板里面拷贝这段代码出来。真烦人!
对,这个红框的代码也不是我自己写的,而是从它官方提供的一个微信支付的展示模板里面拷贝出来的。(兄弟们,解决问题的思路也是很重要,不然像这种非主流的平台,你问AI,它也很难给你正确答案。)

直到这里,小程序下单支付的功能就实现了。
但是要注意的是,直接在小程序设计页面是没有办法体验到效果的,一定要先点击发布,直接在微信小程序的体验版本上面才可以体验到效果。

逻辑总结
整个流程,用一行字来总结就是:小程序点击触发——调用工作流——工作流按流程图的方式执行任务——返回结果给小程序。
把这个流程吃透了,那么接下来完善其他页面就是小菜一碟了。
订单状态更新工作流
支付成功后,只是微信商户号收到钱了。我们自己的系统的订单状态还是没有变化的。
所以我们需要多加一个工作流,就是,在加载订单详情的时候,调用查询订单详情的工作流,处理逻辑如下:
页面查询订单详情时候触发;
获取到订单状态;
判断:如果是其他状态,直接返回订单详情,如果是待支付状态,就查询微信支付平台订单支付状态;
如果获取到微信平台订单状态,就更新本地订单状态。否则,判断订单是否超过15分钟未支付;
如果订单超过15分钟未支付,取消订单;
重新查询订单详情,返回给小程序。

那么到这里,整个微信支付的流程就做完了。
当然,还有售后流程,也就是订单的审核、退款等等。只要我们掌握了方法,其他功能实现就是时间的问题。
还是那句话,做功能,需要比较有耐心才行,太过急功近利得不到好结果,还乱了心智。
总结
好啦,不写代码做小程序的微信支付功能,就到这里了。
微搭这个平台,的确可以让不会写代码的人,可以直接上手做小程序。
经过我的实践,也的确证明了它的确能够让不会写代码的人,直接上手做小程序。
但是,如果懂一点点JS(JavaScript),这个天底下最简单的编程语言,哪怕只是懂那么一点点,那真是如虎添翼。
如果你也对不写代码做小程序感兴趣,可以一起聊聊:

一
起
聊
聊


谢谢阅读

Nicall
资深产品经理、全栈开发工程师
曾任多个百万用户级别小程序应用主设计、主开发
目前已上线小程序:贝思思软件工具箱
正在开发小程序:贝思思家助手
主要分享做小程序的省钱技巧,不做外包开发。