⼩程序：web-view嵌套H5实现⽀付功能解决⽅案及填坑
污到你那里滴水的文ab7117c7d4947210c39e126a01d23ede.jpg
最近⼀个多⽉加班⽐较严重，偶尔休息⼀天也是在补睡眠+陪家⼈，⽐较长时间没有来进⾏总结记录了。今天不加班，开始为这段时间做的东西进⾏下经验总结。
科尼赛克这段时间因为公司需要，接触了⼀些.Net前后台开发，慢慢了解了⼀些WCF、H5站点、WebService、Soap、Linq 等，也了解了⼀些BLL、DAL相关内容。同时也参与了⽀付、医保⽀付相关功能的改版，以及为⼩程序增加⽀付、医保⽀付功能。
张小蒙长沙好玩的地方下⾯主要记录下⼩程序⽀付相关⽅案、实现及填坑。
⼀. 产品现状
⾸先，在接⼊⽀付功能以前，我们的产品情况是这样的：
1 有和app的h5站点及相关配套功能
2 ⼩程序已经有⼀些基础功能，这些功能没有使⽤web-view
3 ⼩程序之前的服务器是与现有h5站点不同的⼀个webapi站点
⼆. 备选⽅案
基于以上⼏点，当时提出了两套解决⽅案：
⽅案1. ⽀付相关功能使⽤⼩程序代码进⾏开发，并在webapi站点增加相应接⼝
⽅案2. 使⽤web-view嵌⼊h5站点的⽀付功能，包括订单列表、订单详情、⽀付确认、⽀付下单、⽀付结果展⽰、⽀付历史等，仅实际⽀付时使⽤⼩程序代码进⾏开发
最终我们使⽤的是第⼆套⽅案，本来以为有了现成的h5页⾯，需要解决的仅仅是h5站点与webapi站点的登录同步以及⼩程序的⽀付界⾯唤起这两个问题，结果发现，坑还是不少的。
三. ⽅案实现
潮州小吃a95c28459d78fe26efd08215dfa56642.png
基本流程如上述⽰意图，订单相关页⾯及⽀付下单过程都在h5，下单成功后通过wx.program.navigateTo跳转回⼩程序，⼩程序执⾏
⼩程序代码如下：
appid等信息不同导致需要h5站点兼容
解决⽅案：
增加⽀付相关的配置，不同的⼊⼝读取不同的配置项，包含appid, appsecret,mchid，回调地址等配置。
坑3
由于之前是在webapi进⾏登录，h5站点存在未登录的问题
解决⽅案：
我们webapi和h5使⽤的是同⼀个数据库，所以我们只是在h5站点再进⾏⼀次openid的绑定，当然，这⾥需要考虑的是⼩程序和都存在openid，我们得分开建⽴绑定关系。
这是我们产品之前设计存在的问题，其实是可以通过unionid来建⽴绑定关系（因为这个才是对⽤户⽽⾔唯⼀不变的标识），同时也可以考虑缓存不同来源的openid
fc勇者斗恶龙3攻略坑4
历史记录及退款问题
解决⽅案：
需要在⽀付记录中存储是哪个端下的订单，因为如果⼩程序⽀付的，⼀定要⽤⼩程序的appid等信息去退款，也⼀样。所以⽀付记录表中应该有payType字段，最好⽀付的订单号⽣成时前两位⽤于记录⽀付⽅式，⽐如01开头的是⽀付，02开头是⼩程序⽀付。
我们的订单号⽣成规则是 2位⽀付⽅式+1位交易订单类型（⽀付、退款等）+2位商品类型 + 时间戳 + 其他
个⼈博客: IT⽼五
：【IT⽼五（it-lao5）】，⼀起源创，⼀起学习！
ps 时间有点紧张，还有⼀些具体⽅案实现和坑没总结，后续再补充。有什么错误或者不⾜欢迎指出...
另外，使⽤web-view在体验上感觉有点坑，坑1. h5加载⽐纯使⽤⼩程序要慢很多 坑2. ⽆法准确捕获到h5页⾯加载的进度...
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论