- 微信点金计划商家小票对接踩坑记录
一、前言 目前微信支付完成后的回调能力被陆续回收,由点金计划来替代。 服务商没有为特约商户开通点金计划:微信支付完成后,发起支付的H5页面将被直接关闭服务商为特约商户开通了点金计划:微信支付完成后,将会跳转到微信的点金计划页面,如果服务商没有为特约商户开通商家小票功能,则点金计划页面默认展示官方小票,反之则展示商家小票官方点金计划文档(包含商家小票对接):https://wx.gtimg.com/pay/download/goldplan/goldplan_product_description_v2.pdf [图片] 二、商家小票对接注意事项 这里对于前期服务商为特约商户所做的配置不做过多的赘述,在官方点金计划文档中都有引导。 下面针对官方提供的排查点结合我自己遇到的问题做一下分析 请检查以下几点: 1. 已打开特约商户的商家小票及点金计划开关 [图片] 此处只需要联系服务商将对应开关开启即可 2. 商家小票页面需调用父页面“onIframeReady事件”的jsapi,请查看商家小票开发指引 [图片] 在商家小票页面渲染完成后,调用父页面的‘’onIframeReady‘’事件的JSAPI,并且从加载商家小票页面开始到调用’onIframeReady‘’事件的JSAPI之间的用时不可超过3s,否则会提示无法获取订单信息。 // react useEffect(() => { const mchData = {action: 'onIframeReady', displayStyle: 'SHOW_CUSTOM_PAGE'}; const postData = JSON.stringify(mchData); parent.postMessage(postData, 'https://payapp.weixin.qq.com'); },[]) // vue mounted(){ const mchData = {action: 'onIframeReady', displayStyle: 'SHOW_CUSTOM_PAGE'}; const postData = JSON.stringify(mchData); parent.postMessage(postData, 'https://payapp.weixin.qq.com'); } // javascript const mchData = {action: 'onIframeReady', displayStyle: 'SHOW_CUSTOM_PAGE'}; const postData = JSON.stringify(mchData); parent.postMessage(postData, 'https://payapp.weixin.qq.com'); 3. 调试时,扫描二维码的微信号和支付该笔测试订单的微信号需为同一个 微信官方会提供一个商家小票调试工具,首先在微信中支付一笔订单,然后将对应的订单信息交给服务商,让他们帮忙配置后生成二维码,扫描二维码即可查看商家小票页面效果了,调试时,扫描二维码的微信号和支付该笔测试订单的微信号需为同一个。 另外还有一个点就是,如果说项目有两套环境(线上,测试环境)的话,这里的商家小票链接可以配置成测试环境的,通常测试环境通常会配置vconsole来方便在手机端查看调试信息。之前因为和服务商一些沟通上的问题,一度以为这里的商家小票链接要与最开始让服务商添加的商家小票链接保持一致,于是就导致了调试上的困难,遇到问题都无法定位,基本靠猜,每次还需要改一下发个包,太愚蠢了哈哈。后来微信开放平台里的一位老大哥提醒了我,立马联系服务商给我配置了测试链接,vconsole调试信息一看就找到问题啦。 [图片] [图片] 4. 确保访问的商家小票在调试手机的微信上能正常打开 在使用商家小票调试工具之前,可以先在手机上访问配置的小票链接,确保可以正常打开。 5. 检查商家小票请求的Response Headers中X-Frame-Options是否允许payapp.weixin.qq.com访问 这点比较重要,如果没有按照要求配置好,也会导致不能访问到商家小票页面 具体如何配置可以参考如下链接: https://cloud.tencent.com/developer/section/1190032 6. ios无法加载商家小票,商家小票链接需要https 商家小票功能需要通过https进行访问,并且该域名需要由正式的证书,不能是自己生成的不安全的证书。 7. 关于md5校验 [图片] 出于安全考虑,还是要做一下md5校验的。md5校验完之后,只需要控制页面上显示的内容,仍旧在当前页面,无需跳走。成功:显示商家小票的信息 失败:展示错误提示内容即可 8. 检查商家小票页是否有重定向oauth鉴权 项目的其他页面都是要重定向去后台做oauth鉴权的,但是如果商家小票页做了重定向的话,则可能会导致跳出微信的iframe框架从而无法响应微信提供的JSAPI或者是商家小票页面无法正常加载 9. 商家小票页面加载出来了,但是内容是空白的 这个问题是我自己遇到的一个坑,在扫描调试二维码的页面中,商家小票页面是加载出来了(如何判定是加载了页面?如果商家小票页面加载失败的话,页面上是会提示无法加载订单信息这几个字的),但是页面却是空白的,后来在vconsole里查看dom结构,发现html的font-size是0px,大写的囧啊!!! 这里说一下,因为项目里用到了px2rem去做移动端的自适应,所以需要动态的设置根节点html的font-size 原来的代码是这样的,会去动态获取clientWidth动态计算font-size document.querySelector('html').style.fontSize = `${Math.min(document.documentElement.clientWidth, 1280) / 10}px` 现在将代码改成了这样,加了个判断,如果是进入商家小票页面,则把html标签的font-size设置成36px if (location.pathname.includes('bill-back')) { document.querySelector('html').style.fontSize = '36px' } else { document.querySelector('html').style.fontSize = `${Math.min(document.documentElement.clientWidth, 1280) / 10}px` } 总结: 联调的时候可以先在页面上写一些静态的信息,然后先响应“onIframeReady事件”的jsapi,保证商家小票可以加载出来之后,再在页面上增加一些自定义的信息。然后就是仔细阅读官方的开发文档就好啦!以上的内容是我自己的一些总结,初衷是能够给后面有点金计划开发需求的小伙伴一个指引,如果有错误或者不严谨的地方,还请大家指出纠正,遗漏的地方,大家可以补上。
2021-04-22 - 公众号推广带货
该课时将为您解答,如何将小商店的带货商品链接插入微信公众号推广? 一、带货链接插入公众号文章步骤 二、带货链接插入自定义菜单步骤 如何获取带货商品链接?请先查看「小商店无货源带货」获取带货链接! [图片][图片] 更多资讯,欢迎到【交流专区】微信小商店主页发帖和寻找答案。
2022-04-13 - 微信公众号的外部链接?
为什么我的微信公众号里面没有“外部链接?是因为没有开通微信支付功能认证服务号吗?我现在急需使用”超链接“里面的”外部链接“这个功能[图片]
2020-06-18 - 关于小程序 扫描二维码跳转到体验版的尝试与成果
背景: 由于公司小程序经常有生成产品海报的功能,但是生成的小程序码微信扫码之后进的是正式版,如需要调试,就只能通过微信开发者工具,还需要源码在本地编译,对于测试来说十分麻烦,于是就开始思考,有什么方法可以解决。 [图片] 探索: 首先肯定是各种谷歌,得到的结果就是,各种不支持,但是这个需求还是有的,很多人都遇到了测试不便的问题,基本都是通过微信开发者工具来解决的, 但是,我还是不死心,既然没有轮子,那我就造一个! [图片] [图片] [图片] 造轮子: 开始分析需求,我需要扫码进入对应版本的小程序,那也不一定非要用微信的扫一扫,小程序本身也有扫一扫的api呀,既然这样需要实验一下, 小程序调用相机扫一扫是否可以扫描小程序码,能拿到什么! 搞起。。 [图片] 在原先的小程序项目里写一个单独的页面,通过调用 wx.scanCode(Object object) 方法,打开相机,扫小程序码,成功获取页面链接,激动! [图片] 下一步就是跳转一下的事了。最终的核心代码就这一段话。实现了用体验版小程序,扫生成的小程序码,进入对应页面的功能,测试小妹妹开心的不行。 这个只能打开自己所在的小程序码 // 允许从相机和相册扫码 wx.scanCode({ success (res) { console.log(res) wx.navigateTo({url: '/' +res.path}) } }) [图片]
2020-01-07