侧边栏壁纸
  • 累计撰写 262 篇文章
  • 累计创建 1,025 个标签
  • 累计收到 16,613 条评论
标签搜索
隐藏侧边栏

微信小程序:web-view嵌套H5实现微信支付功能解决方案及填坑

thinkin
2018-10-20 / 9 评论 / 1 点赞 / 8,788 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于2018-10-20,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
微信小程序:web-view h5支付
最近一个多月加班比较严重,偶尔休息一天也是在补睡眠+陪家人,比较长时间没有来进行总结记录了。今天不加班,开始为这段时间做的东西进行下经验总结。 这段时间因为公司需要,接触了一些.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站点的登录同步以及小程序的支付界面唤起这两个问题,结果发现,坑还是不少的。

三. 方案实现

微信小程序web-view嵌套h5接入支付功能
基本流程如上述示意图,订单相关页面及微信支付下单过程都在h5,下单成功后通过wx.program.navigateTo跳转回小程序,小程序执行wx.requestPayment唤起支付页面,获取的结果以h5展示。同时,在下单时会设置支付结果回调页(PayNotify),实际支付成功后,微信会主动调用PayNotify页面,在该页面操作订单支付表的支付状态。 小程序代码如下:
// 直接在onLoad中唤起支付页面(中间的部分参数需要用decodeURIComponent解码) 
onLoad: function(options) { 
  var payType = options.type; 
  var timeStamp = options.timeStamp; 
  var nonceStr = decodeURIComponent(options.nonceStr); 
  var package = decodeURIComponent(options.package); 
  var signType = options.signType; 
  var paySign = decodeURIComponent(options.paySign); 
  if(type == 1) { 
    // 微信支付 
    this.wxPay(timeStamp, nonceStr, package, signType, paySign); 
  }else { 
    var payAppId = options.appid; 
    var payUrl = decodeURIComponent(options.payUrl); 
    // 医保支付,需要跳转到医保小程序进行支付,需要获取医保小程序appid和payurl 
  } 
} 

// 唤起微信支付窗口
wxPay: function(timeStamp, nonceStr, package, signType, paySign) {
wx.requestPayment({
'timeStamp': timeStamp,
'nonceStr': nonceStr,
'package': package,
'signType': signType,//'MD5',
'paySign': paySign,
'success':function(res){
// 成功跳转到h5结果页面
}, 'fail':function(res){
// 失败提示并返回订单页
}, 'complete': function(res){
// 较早版本,用户取消支付,不进入fail回调,仅回调complete
// res.errMsg为requestPayment:fail cancel
if(res.errMsg=='requestPayment:fail cancel') {
// 用户取消返回订单页
}
}
})
}


注意:

  1. 在生成订单表,下单成功后,即进入支付中状态
  2. 建议区分订单表和支付表
  3. 实际支付页面的唤起只能在小程序中进行,不能使用h5唤起微信支付页面
  4. 支付结果必须以微信回调为准,不能直接使用wx.program.navigateTo返回的结果
  5. 因为公众号和小程序使用的是同一套h5代码,所以必须将appid等设置为配置项,不同的入口,使用不同的appid;而且在支付表中,必须能明确是小程序还是公众号支付的,不然会出现无法退款等情况。(退款的appid必须是支付的appid)

四. 填坑

坑1 支付商户和小程序主体不一致,而且我们的商户是特约商户,导致小程序无法进行M-A授权并开通微信支付功能
解决方案:
这里有多种解决方案,最快捷的是找腾讯内部人员提交申请,提交信息后他们会帮忙进行M-A授权(我们下午提交第二天就ok了) 坑2 appid等信息不同导致需要h5站点兼容
解决方案:
增加支付相关的配置,不同的入口读取不同的配置项,包含appid, appsecret,mchid,回调地址等配置。 坑3 由于之前是在webapi进行登录,h5站点存在未登录的问题
解决方案:
我们webapi和h5使用的是同一个数据库,所以我们只是在h5站点再进行一次openid的绑定,当然,这里需要考虑的是小程序和公众号都存在openid,我们得分开建立绑定关系。 这是我们产品之前设计存在的问题,其实是可以通过unionid来建立绑定关系(因为这个才是对微信用户而言唯一不变的标识),同时也可以考虑缓存不同来源的openid 坑4 历史记录及退款问题
解决方案:
需要在支付记录中存储是哪个端下的订单,因为如果小程序支付的,一定要用小程序的appid等信息去退款,公众号也一样。所以支付记录表中应该有payType字段,最好支付的订单号生成时前两位用于记录支付方式,比如01开头的是公众号支付,02开头是小程序支付。 我们的订单号生成规则是 2位支付方式+1位交易订单类型(支付、退款等)+2位商品类型 + 时间戳 + 其他 原文:简书ThinkinLiu 博客: IT老五
ps 时间有点紧张,还有一些具体方案实现和坑没总结,后续再补充。有什么错误或者不足欢迎指出... 另外,使用web-view在体验上感觉有点坑,坑1. h5加载比纯使用小程序要慢很多 坑2. 无法准确捕获到h5页面加载的进度...
0
并发 、80端口节点、ss、ss机场、ss节点、v2ray、v2rayng、v2ray机场、v2ray节点、v2ray节点免费2022、v2ray订阅、vmess、vmess机场、vmess节点、vpn、俄罗斯节点、免费vpn、免费节点、内地接口、台湾节点、日本节点、机场、欧洲节点、美国节点、老五节点、节点、节点免费订阅、谷歌访问助手、韩国节点 2022最新节点 小程序开发 微信公众号涨粉 φουσκωτα στρωματα υπνου shadowsocks-mod soap 微信公众号运营 หนังออนไลน์ฟรี vvpn webservice wp文章隐藏部分内容 หนังเกาหลี sr节点后台搭建 web 在线工具 หนังออนไลน์ฟรี 2019 shadowrocket订阅v2ray text 在线图片压缩 เว็บหนังออนไลน์ดูฟรี ชัดเต็มเรื่อง shadowrocket App 文本展开与收起 json格式化 nowoczesne ogrodzenia pionowe 小火箭 安全 总结 xml格式化 sztacheta drewniana allegro sr节点前端搭建 软件 当你绝望时最接近成功 http在线请求 sztachety kompozytowe pełne Navicat Premium 15 三层架构 在线接口模拟 order flowers for delivery today 数据库工具 自适应 程序员和产品的矛盾 same day flower delivery usa 软件激活 Android 平板电视开发 程序员为啥生气 flowers today delivery 国内节点 开发 虚拟按键 excel文件讀取 toys ssr订阅 进程保活 matlab c#文件读取 autism sip002订阅 框架 lib OleDB craigslist trojan订阅 性能 数据 wifi ซีรีย์เกาหลี ss订阅 list bmob 网卡驱动 nowoczesne ogrodzenia betonowe trojan节点 for循环 app升级 重装无线网卡驱动 ogrodzenia drewniane allegro sip002节点 java matlab2015b wifi连接不上解决方案 ogrodzenia betonowe szemud ios节点 Google 破解安装 华硕笔记本 simulation mobile games 免费节点订阅 PWA 异常处理 ดูหนังออนไลน์ hd vmess订阅 Chrome CopyFile 技术 ดูหนังออนไลน์ยอดนิยมปี 2020 神秘的程序员 C++ string 比特币 ดู Netflix 1024 编程语言 类型转换 区块链是什么 ดูซีรีย์ 程序员是一群什么样的人 C++17 vector转数组 去中心化 how to write a general essay 老五节点 程序员 atoi与atof 分布式数据库 paper to write on Android 12 程序员中年危机 getLine Canva college essay editor 2021Google开发者大会 strtok 在线作图工具 量桨 节点免费订阅 HTTP 时间转换 工具软件推荐 国内首个量子机器学习开源框架 免费vpn 404 Elastic Search 开源框架 v2ray机场 阿尔法狗 JSONObject合并 or操作 free essay writer vmess机场 AlphaGo json should和must when writing an essay ss机场 AI 招聘 filter essay edge 双12 人工智能 彩蛋 win10开始菜单点击无效 Log4j 谷歌 字符串 win10开始菜单不能点击 2022最新节点 谷歌访问助手 就业 微信小程序我的页面 系统更新 翻墙 HignCharts 小程序我的页面布局 换新机 反编译 图表 elasticsearch filter should 日本节点 jadx chart es索引 韩国节点 经验 分页 elasticsearch基础 80端口节点 编程 MySql java json合并 欧洲节点 小程序 数据库 json处理 美国节点 网页 百度云盘 비트카지노 俄罗斯节点 微信 json解析 슬롯 카지노 台湾节点 开源 simdjson 카지노나라 v2ray节点免费2022 互联网 Vue 授权获取手机号 รีวิวหนังใหม่ code 密码 LocalBroadcast 组件开发 รีวิวหนังออนไลน์ 内地接口 web-view 局部广播 getPhoneNumber แนะนำหนังใหม่ปี 2020 cnzz 阿里巴巴 js交互 地理位置授权 birthstone necklace 网站统计 2017 apk disabled样式不可用 name plate necklace 51la IT 签名 短网址生成 gold cross necklace 百度统计 大事件 资源 老五 how we write essay 一键安装 脚本 图片 重定向 information about essay writing 傻瓜教程 HashMap 视频 essay on bank centos8 机器学习 分享 Minimum Viable Produc 数据挖掘 敏捷开发 最小可行产品 weka Scrum 敏捷和精益开发 随机森林 AppScan buy paper IKVM 漏洞修复 mba essay IKVM.NET dotnet hints on essay writing dll OnClick tempur στρωματα wp 事件 στρωμα tempur 统计 Network Security διπλες κρεβατοκαμαρες join jar转dll autocomplete androidx .net AutoCompleteType androidx与support v4/v7冲突与共存 jdk8 密码自动填充 android低版本升级到高版本 加载动画 小萌伴 android问题解决 源码 聊天机器人 CoreDNS dieta e caminhada 自定义控件 广告过滤 DNS o que dieta enteral Annotation 迭代 前端框架 dieta whole 30 cardapio 基础 敏捷实施 Excel café com leite tem carboidrato 注解 敏捷工具 trim o leite possui carboidratos AR leangooo 浏览器兼容 qual leite não tem carboidrato 增强现实 迭代管理 字符串去空格 tim k ARCore 禅道 页面生成pdf no strings attached 免费课程 zentao html paw patrol Collections 蒙版弹窗 hosts Photoshop API 996 发送邮件 图片编辑器 深度学习 996.ICU Affinity Photo 图片压缩 加班 Blockchain GNU WebP 公众号 面试指南 Photoshop 替代品 BPG IT老五 亚马逊 GNU 图像处理程序 TNG it-lao5 视频算法 常用方法 腾讯 itlao5 DVQA 校验 投资 2048 C3DVQA 工具方法 金融 bird 视频质量评估算法 更改注册表 腾讯生态圈 小鸟 AI训练 CredSSP加密Oracle修正 蓝牙 打飞机 wp站点置灰 CredSSP加密数据库修正 BLE 目录 tiktok windows Kotlin 手电筒 抖音 安全漏洞修复 开发资源 语音识别 抖音国际版 windows server 语音合成 免vpn DHCP Client 移动开发 语音唤醒 梯子 禁用445端口 微信开发 我的页面 v2ray Message Queuing 苹果 微信授权 vpn WWDC 用户信息获取 搬瓦工 document 霍金 菜单列表布局 优惠码 js异步加载 大事记 zoom xshell cnzz统计 预言 控件缩放 复活节 百度收录 RxJava wxs skew elastic 教程 手机号/身份证号隐藏 anagram 大数据看板统计 响应式编程 周末 do a barrel roll Kibana代码 iPhone 陪伴 免费电影 破解 找手机 天堂影视 SKEP GrayKey itlao5-xmb-weapp 资源分享 情感分析 漏洞 小程序跳app 老五影视 百度 webview 说话 VIP电影 Senta h5 语言表达 заказать создание сайта визитки Github推荐 AndroidP 面试 автоматическая воронка продаж 室内定位 职场 продвижение сайта Youtobe克隆项目 组件化 日期格式化 money loans online with bad credit 前端源码 二维码 经验总结 money mart loans online React 算法 post money loan scams VINE 网络请求 premium porn portal 神经演化 CoinTiger top paid porn sites Uber ftn paid porn sites Https porn sites premium 泛域名证书 ssl best premium porn Let's Encrypt tls premium porn sites 设计模式 语言 团队管理 love flower JavaScript Java10 沟通 love flower bouquet 项目管理 区块链 薪资 best flowers of love 需求 js 按钮事件 thinking of you flowers 开发源码 代码 重复点击 romantic flower delivery bug修复 哈希 节流函数 arrangements love flower c# gradle 微信二维码识别 best flowers for love protobuf 多二维码识别 roses love 语言 & 开发 二维码长按识别 funny pillows 文章同步助手 DevOps neck pillow funny 微信同步助手 云计算 wp迁移 top rated cervical pillows 一键发布文章 敏捷技术 阿里云 payday loans montgomery alabama 多平台文章一键发布 敏捷 站点迁移 direct lender payday loans online bad credit 自媒体 Kubernetes 站点备案 payday loans online with direct lenders redis 持续集成 段子 floral arrangements funeral 网络安全 Android Studio 友链 flower arrangement for funeral service 安全等保 D8 友情链接 flower delivery for funerals 三级等保 Dex judi casino k免费节点 编译器 程序员笑话 judi casino online 免费节点 Animation 哪吒 casino sbobet 动画 华为 woman has sex with two men 影视资源 鸿蒙系统 free sex teacher 电影分享 谷歌AndroidQ milfs in porn VIP影视 苹果窃听门 coin master 天猫超市 太空互联网 앙기뮤찌 漏洞券 华为地图服务 birthday gift for wife online 白菜群 今日推荐 send birthday gift baskets 淘宝 CentOS7 移动端兼容 flower birthday 京东 BBR 科学上网 Organic cbd 拼多多 VPS google-access-helper-2.3.0 Cbd gummys 机场 JNI 谷歌访问助手2.3.0破解版 wget win101 反射 十大经典排序算法 birthday gifts best 激活 Google I/O 2018 桶排序 birthday delivery ideas 谷歌访问 Android P 排序算法 best birthday flower es 朋友圈 桶排序源码 fifa 20 DB搜索引擎 Github html转pdf birthday present for wife 搜索引擎 MaterialDesign 网页转pdf cheap birthday balloons emoji Android Things jspdf love flowers for girlfriend 哪吒重生 操作系统 html2canvas flowers from you 浴血无名川 Material Design 十大经典算法 flowers love 侍神令 SDK 堆排序 keto grocery shopping list walmart 许愿神龙 view 完全二叉树 supplements for memory 送你一朵小红花 ui 堆积 keto costco shopping list reddit VIP影视 免费电影 电影分享 资源分享 架构设计 Android 10 FQ v2ray 免费节点 机场 科学上网 谷歌访问 移动 Android Q episode choose your story 技术一号位 TensorFlow Android正式版 iphone 6s cases walmart 研发管理 TensorflowLite Android全新logo sonix iphone case WX Backup 人声识别 angel iphone 7 silicone case 微信备份 gVisor 开源项目 艾菠 微信聊天 go 腾讯开源 aiboobeauty 聊天记录备份 沙箱 全栈机器学习开源模型 艾菠手工紋繡藝術 微信聊天记录 Activity 广告插入 personal essay db、 生命周期 help with my essay db 启动模式 essay writing format 会议 Netflix 华为方舟编辑器 PORN zuul 安卓10 narrative and descriptive writing 萨尔瓦多 微服务 安卓框架推荐 what to write an essay about 法定货币 网关 童年 how to write an essay 货币 Android周报 黑猫警长 Wuhan Wild Wings T Shirt Fuchsia OS OpenStack ipone porn photo of elderly old women 鸿蒙OS Rust 浴霸三摄 softcore photo butt close-up 主题 物联网 ihone11 watch pornography video 节点 TensorFlow Lite 苹果发布会 help with writing openBI 中文教程 Nexus essay writers uk 可视化报表 bug 智能手机 how to essay 开源BI工具 游戏 插件 phone looking 职业生涯 x86 网站建设 att cell phones HarmonyOS PC 谷歌字体无法加载 gadgets christmas gifts DevEco Studio Flutter 图片延时加载 blondine sexfilme AndroidStudio MVP Grow with Google freund xxx porno 编码 架构 谷歌成长计划 amateurporno Copilot MVC 谷歌在华 nha cai casino online tinycat99.world 团建 性能优化 Manjaro Linux 18.1 tinycat99 公司 Service LibreOffice royalty 神墓 四大组件 FreeOffice ben stokes the sun 哥斯拉大战金刚 广播 Fluteer mocospace chat 悬崖之上 BroadcastReceiver ios writing sa nginx App Maker 开发者 how to write an essay step by step apache 工具 语音输入 cheap essay writing service uk 禁止ip访问 多应用同时音频输入 神州天堂网 节点分享 PDF2Word 新公式 天堂文学 端口 生物识别 WPS Office 影视动漫 最新免费节点分析 身份验证 google chrome v77 小说网站 Fuchsia 程序员段子 免费vip 图片保存 Linux 程序员动图 emergency carpet cleaning brisbane 注册表修改 os C++ 标准库(STL) express carpet cleaning brisbane 图片格式 Python 3.7 微软 angel carpet cleaning brisbane reviews vmess Python MSVC situs gaple online ss 高级编程语言 Microsoft STL kode domino gaple online 香港节点 面向对象 TencentOS tiny download gaple online apk wifi连接 微信小程序 物联网操作系统 best love letter to your girlfriend on her birthday wifi-card 下拉刷新 量子计算机 love letter for her birthday tagalog 扫码连接wifi SpeedPan 商用量子计算机 love letter menu irvine 节点连接器 速盘 IBM 성인사이트 TLS1.2 百度网盘 计算机 ดูหนังออนไลน์ ssl/tls 下载 53-Qubit ดูหนังออนไลน์เต็มเรื่อง v2ray节点订阅 Aria2 53比特量子计算机 国外版抖音 节点订阅 css OpenJDK 13 海外版抖音 自定义菜单 前端 龙芯中科 抖音点赞关注无效 服务器配置 ImageSpan OpenJDK最新版本 MuMu模拟器 v2ray错误 控件 OpenJDK qq deposit pulsa v2ray问题 CIRQ Java环境 qq online dns刷新 量子算法框架 JDK 13 judi qq online VIP影视免费电影 Lineage 老五影院 descriptive narrative essay outline 天堂影院 ROM vip视频 comparative essay 无广告白嫖电影 Pixel 免费视频 a research paper 正义联盟 Pie 无广告电影电视剧 etax 白蛇2 Android 9.0 免费无广告vip视频 lil tecca 中国医生 Android Pie 视频网站 abc Milkdown 手机使用时间统计 电影网站 assignment help 文本编辑 z 免费资源 term papers and essays Markdown ScreenToGif CentOS 8 narrative and descriptive essay 误删文件 gif Red Hat 编程规范 文件恢复 屏幕录制 .NET Core 如何写出无法维护的代码 救援模式 win10 .NET Core 3.0 如何写出好代码 误删文件恢复 服务 vs pattern of essay writing in english v2ray节点 UserManager Visual Studio how to create an essay ss节点 MvRx Visual Studio 2019 16.3 write paper for me vmess节点 Airbnb Visual Studio 2019 essay guide 工程师 芯片 law essay writing service 跳槽 RecyclerView 阿里 essay draft 工作 强化学习 AI推理芯片 best same day delivery flowers TensorBoard 全球最强性能的AI推理芯片 best place to send a flower delivery same day خرید ویپ Crash 含光800芯片 order flowers for today ویپ اسموک 支付 NPU easy online loans bad credit ssr节点 微信支付 Android 11 quick easy payday loans for bad credit ssr节点分享 优化 easy loans online win11 wp优化 服务器 payday loans albuquerque win11镜像下载 站点优化 应用程序 payday loans mn Windows 11中文版 网站提速 微信公众号 direct lender payday loans no teletrack v2ray订阅 ios兼容 微信信息流 instant payday loans v2rayn 时间戳转换 微信二维码 instant online loan approval no credit check v2rayng sql 二维码识别 instant loan online 老五节点订阅 sql优化 长按识别二维码 best sushi near me 支付宝 weka-nogui html5 luxury dark 红包 wordpress 自定义协议 car 薅羊毛 浏览次数统计 chrome自定义协议打开ie浏览器 join διπλα κρεβατια 支付宝红包口令 wp免插件 微信公众号吸粉 stromata SSPanel-Uim v2ray订阅 台湾节点 香港节点 vmess节点 Harmony OS 鸿蒙 华为 v2ray节点 免费节点 资源分享 ss节点
  1. qrcode alipay
  2. qrcode weixin

评论