- 【开箱即用】分享几个好看的波浪动画css效果!
以下代码不一定都是本人原创,很多都是借鉴参考的(模仿是第一生产力嘛),有些已忘记出处了。以下分享给大家,供学习参考!欢迎收藏补充,说不定哪天你就用上了! 一、第一种效果 [图片] [代码]//index.wxml <view class="zr"> <view class='user_box'> <view class='userInfo'> <open-data type="userAvatarUrl"></open-data> </view> <view class='userInfo_name'> <open-data type="userNickName"></open-data> , 欢迎您 </view> </view> <view class="water"> <view class="water-c"> <view class="water-1"> </view> <view class="water-2"> </view> </view> </view> </view> //index.wxss .zr { color: white; background: #4cb4e7; /*#0396FF*/ width: 100%; height: 100px; position: relative; } .water { position: absolute; left: 0; bottom: -10px; height: 30px; width: 100%; z-index: 1; } .water-c { position: relative; } .water-1 { background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0xPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMTMzLjAwMDAwMCkiIGZpbGwtb3BhY2l0eT0iMC4zIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPGcgaWQ9IndhdGVyLTEiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyMS4wMDAwMDAsIDEzMy4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDcuNjk4NTczOTUgTDQuNjcwNzE5NjJlLTE1LDYwIEw2MDAsNjAgTDYwMCw3LjM1MjMwNDYxIEM2MDAsNy4zNTIzMDQ2MSA0MzIuNzIxMDUyLDI0LjEwNjUxMzggMjkwLjQ4NDA0LDcuMzU2NzQxODcgQzE0OC4yNDcwMjcsLTkuMzkzMDMwMDggMCw3LjY5ODU3Mzk1IDAsNy42OTg1NzM5NSBaIiBpZD0iUGF0aC0xIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat-x; background-size: 600px; -webkit-animation: wave-animation-1 3.5s infinite linear; animation: wave-animation-1 3.5s infinite linear; } .water-2 { top: 5px; background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjYwMHB4IiBoZWlnaHQ9IjYwcHgiIHZpZXdCb3g9IjAgMCA2MDAgNjAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzLjQgKDE1NTc1KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT53YXRlci0yPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IuaIkSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc2tldGNoOnR5cGU9Ik1TUGFnZSI+CiAgICAgICAgPGcgaWQ9Ii0iIHNrZXRjaDp0eXBlPSJNU0FydGJvYXJkR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjEuMDAwMDAwLCAtMjQ2LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0id2F0ZXItMiIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIxLjAwMDAwMCwgMjQ2LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTAsNy42OTg1NzM5NSBMNC42NzA3MTk2MmUtMTUsNjAgTDYwMCw2MCBMNjAwLDcuMzUyMzA0NjEgQzYwMCw3LjM1MjMwNDYxIDQzMi43MjEwNTIsMjQuMTA2NTEzOCAyOTAuNDg0MDQsNy4zNTY3NDE4NyBDMTQ4LjI0NzAyNywtOS4zOTMwMzAwOCAwLDcuNjk4NTczOTUgMCw3LjY5ODU3Mzk1IFoiIGlkPSJQYXRoLTIiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMwMC4wMDAwMDAsIDMwLjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMzAwLjAwMDAwMCwgLTMwLjAwMDAwMCkgIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==") repeat-x; background-size: 600px; -webkit-animation: wave-animation-2 6s infinite linear; animation: wave-animation-2 6s infinite linear; } .water-1, .water-2 { position: absolute; width: 100%; height: 60px; } .back-white { background: #fff; } @keyframes wave-animation-1 { 0% { background-position: 0 top; } 100% { background-position: 600px top; } } @keyframes wave-animation-2 { 0% { background-position: 0 top; } 100% { background-position: 600px top; } } .user_box { display: flex; z-index: 10000 !important; opacity: 0; /* 透明度*/ animation: love 1.5s ease-in-out; animation-fill-mode: forwards; } .userInfo_name { flex: 1; vertical-align: middle; width: 100%; margin-left: 5%; margin-top: 5%; font-size: 42rpx; } .userInfo { flex: 1; width: 100%; border-radius: 50%; overflow: hidden; max-height: 50px; max-width: 50px; margin-left: 5%; margin-top: 5%; border: 2px solid #fff; } [代码] 二、第二种效果 [图片] [代码]//index.wxml <view class="waveWrapper waveAnimation"> <view class="waveWrapperInner bgTop"> <view class="wave waveTop" style="background-image: url('https://s2.ax1x.com/2019/09/26/um8g7n.png')"></view> </view> <view class="waveWrapperInner bgMiddle"> <view class="wave waveMiddle" style="background-image: url('https://s2.ax1x.com/2019/09/26/umGZ38.png')"></view> </view> <view class="waveWrapperInner bgBottom"> <view class="wave waveBottom" style="background-image: url('https://s2.ax1x.com/2019/09/26/umGuuQ.png')"></view> </view> </view> //index.wxss .waveWrapper { overflow: hidden; position: absolute; left: 0; right: 0; height: 300px; top: 0; margin: auto; } .waveWrapperInner { position: absolute; width: 100%; overflow: hidden; height: 100%; bottom: -1px; background-image: linear-gradient(to top, #86377b 20%, #27273c 80%); } .bgTop { z-index: 15; opacity: 0.5; } .bgMiddle { z-index: 10; opacity: 0.75; } .bgBottom { z-index: 5; } .wave { position: absolute; left: 0; width: 500%; height: 100%; background-repeat: repeat no-repeat; background-position: 0 bottom; transform-origin: center bottom; } .waveTop { background-size: 50% 100px; } .waveAnimation .waveTop { animation: move-wave 3s; -webkit-animation: move-wave 3s; -webkit-animation-delay: 1s; animation-delay: 1s; } .waveMiddle { background-size: 50% 120px; } .waveAnimation .waveMiddle { animation: move_wave 10s linear infinite; } .waveBottom { background-size: 50% 100px; } .waveAnimation .waveBottom { animation: move_wave 15s linear infinite; } @keyframes move_wave { 0% { transform: translateX(0) translateZ(0) scaleY(1) } 50% { transform: translateX(-25%) translateZ(0) scaleY(0.55) } 100% { transform: translateX(-50%) translateZ(0) scaleY(1) } } [代码] 三、第三种效果 [图片] [代码]//index.wxml <view class="container"> <image class="title" src="https://ftp.bmp.ovh/imgs/2019/09/74bada9c4143786a.png"></image> <view class="content"> <view class="hd" style="transform:rotateZ({{angle}}deg);"> <image class="logo" src="https://ftp.bmp.ovh/imgs/2019/09/d31b8fcf19ee48dc.png"></image> <image class="wave" src="wave.png" mode="aspectFill"></image> <image class="wave wave-bg" src="wave.png" mode="aspectFill"></image> </view> <view class="bd" style="height: 100rpx;"> </view> </view> </view> //index.wxss image{ max-width:none; } .container { background: #7acfa6; align-items: stretch; padding: 0; height: 100%; overflow: hidden; } .content{ flex: 1; display: flex; position: relative; z-index: 10; flex-direction: column; align-items: stretch; justify-content: center; width: 100%; height: 100%; padding-bottom: 450rpx; background: -webkit-gradient(linear, left top, left bottom, from(rgba(244,244,244,0)), color-stop(0.1, #f4f4f4), to(#f4f4f4)); opacity: 0; transform: translate3d(0,100%,0); animation: rise 3s cubic-bezier(0.19, 1, 0.22, 1) .25s forwards; } @keyframes rise{ 0% {opacity: 0;transform: translate3d(0,100%,0);} 50% {opacity: 1;} 100% {opacity: 1;transform: translate3d(0,450rpx,0);} } .title{ position: absolute; top: 30rpx; left: 50%; width: 600rpx; height: 200rpx; margin-left: -300rpx; opacity: 0; animation: show 2.5s cubic-bezier(0.19, 1, 0.22, 1) .5s forwards; } @keyframes show{ 0% {opacity: 0;} 100% {opacity: .95;} } .hd { position: absolute; top: 0; left: 50%; width: 1000rpx; margin-left: -500rpx; height: 200rpx; transition: all .35s ease; } .logo { position: absolute; z-index: 2; left: 50%; bottom: 200rpx; width: 160rpx; height: 160rpx; margin-left: -80rpx; border-radius: 160rpx; animation: sway 10s ease-in-out infinite; opacity: .95; } @keyframes sway{ 0% {transform: translate3d(0,20rpx,0) rotate(-15deg); } 17% {transform: translate3d(0,0rpx,0) rotate(25deg); } 34% {transform: translate3d(0,-20rpx,0) rotate(-20deg); } 50% {transform: translate3d(0,-10rpx,0) rotate(15deg); } 67% {transform: translate3d(0,10rpx,0) rotate(-25deg); } 84% {transform: translate3d(0,15rpx,0) rotate(15deg); } 100% {transform: translate3d(0,20rpx,0) rotate(-15deg); } } .wave { position: absolute; z-index: 3; right: 0; bottom: 0; opacity: 0.725; height: 260rpx; width: 2250rpx; animation: wave 10s linear infinite; } .wave-bg { z-index: 1; animation: wave-bg 10.25s linear infinite; } @keyframes wave{ from {transform: translate3d(125rpx,0,0);} to {transform: translate3d(1125rpx,0,0);} } @keyframes wave-bg{ from {transform: translate3d(375rpx,0,0);} to {transform: translate3d(1375rpx,0,0);} } .bd { position: relative; flex: 1; display: flex; flex-direction: column; align-items: stretch; animation: bd-rise 2s cubic-bezier(0.23,1,0.32,1) .75s forwards; opacity: 0; } @keyframes bd-rise{ from {opacity: 0; transform: translate3d(0,60rpx,0); } to {opacity: 1; transform: translate3d(0,0,0); } } [代码] wave.png(可下载到本地) [图片] 在这个基础上,再加上js的代码,即可实现根据手机倾向,水波晃动的效果 wx.onAccelerometerChange(function callback) 监听加速度数据事件。 [图片] [代码]//index.js Page({ onReady: function () { var _this = this; wx.onAccelerometerChange(function (res) { var angle = -(res.x * 30).toFixed(1); if (angle > 14) { angle = 14; } else if (angle < -14) { angle = -14; } if (_this.data.angle !== angle) { _this.setData({ angle: angle }); } }); }, }); [代码] 四、第四种效果 [图片] [代码]//index.wxml <view class='page__bd'> <view class="bg-img padding-tb-xl" style="background-image:url('http://wx4.sinaimg.cn/mw690/006UdlVNgy1g2v2t1ih8jj31hc0p0qej.jpg');background-size:cover;"> <view class="cu-bar"> <view class="content text-bold text-white"> 悦拍屋 </view> </view> </view> <view class="shadow-blur"> <image src="https://raw.githubusercontent.com/weilanwl/ColorUI/master/demo/images/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx;margin-top:-100rpx;"></image> </view> </view> //index.wxss @import "colorui.wxss"; .gif-black { display: block; border: none; mix-blend-mode: screen; } [代码] 本效果需要引入ColorUI组件库
2019-09-26 - 小程序服务商必须教会商户哪些操作?(支付篇)
作为一个职称的小程序服务商,必须给商户普及微信支付商家版的7个操作。 一、开通支付 1、进入管理后台的“申请支付”菜单,按向导完成账号注册。 2、完成商户号、密钥和证书配置。 3、手机端微信支付后台登录。 一般在开通微信支付商家版的过程,手机端微信支付后台都已经绑定。进入方法:微信搜索“微信支付商家助手”,进入公众号右下角菜单 我的账号 > 我是商家 。 [图片] 手机端商家版微信支付,除了能收到顾客的收款通知外,还有收款记录、经营分析、员工管理。尤其是经营分析里的用户画像功能,值得重点研究一下。 二、退款 1、退款功能开通 点击管理后台的“申请退款”菜单。 通知工作人员后,会在1个工作日内完成审核并指引完成操作。 商户登录自己的微信支付后台接受退款功能开通邀请。 2、退款操作 [图片] 当退款事件产生后,可以到酒店管理后台 订房订单>小程序订单 点 退款 按钮。输入退款金额点确定即可。金额返回时间根据支付方式而定,微信零钱支付的是即时返回。 3、退款查询 [图片] 商家版微信支付后台的交易中心 > 退款查询。 三、员工账号管理 1、账号权限。 [图片] 默认情况下,有基本账户、财务、管理员、客服、技术操作员5个角色。也可以自定义新的角色。新角色可以自行配置权限!操作权限可以详细到菜单下某个功能。 2、如何开通员工账号。 [图片] 进入商家微信支付后台,账户中心>员工账号管理 > 员工列表 > 新增账号。 四、交易订单查询 [图片] 商家微信支付后台,交易中心 > 交易订单。可以根据时间查询、订单号查询。高级查询还可以根据场景查询,支付方式查询、金额范围查询、交易状态查询等。 五、提现说明 提现分为自动提现和手动提现,默认情况下为自动提现。也就是在每天早上9:00会把前一天的资金自动提现到绑定的对公账号。 这是最快捷的提现方案,但有个场景需要注意。就是提现完成后没有足够金额的情况下,有退款发生,就会产生退款失败。 提供两种解决方案: 1、关闭自动提现功能。 [图片] 关闭方法:产品中心 > 我的产品 > 资金解决方案 > 自动提现。 2、自动提现的情况下,设置预留退款金额。 根据商家自己的实际经营情况,预估一天最多的退款金额。在设置自动提现时设置预留金额。预留金额仍然不够的情况下,还可以通过充值解决。充值方面微信支付还很贴心地做了一个指定微信充值。设置完成后在第二天零点生效。 [图片] 提现的官方详细说明: https://kf.qq.com/faq/161223NJBr2u161223Mfeqei.html 六、收款通知 [图片] 顾客支付成功后,除了总管理员能收到收款通知。授权的店员也会收到微信收款商业版的通知。 七、财务对账 在商家微信支付后台里的交易中心,有交易、退款、充值、提现等数据汇总报表。并提供excel格式下载和强大的类目选择功能。 [图片]
2019-09-26 - 小程序内用户帐号登录规范调整和优化建议
为更好地保护用户隐私信息,优化用户体验,平台将会对小程序内的帐号登录功能进行规范。本公告所称“帐号登录功能”是指开发者在小程序内提供帐号登录功能,包括但不限于进行的手机号登录,getuserinfo形式登录、邮箱登录等形式。具体规范要求如下: 1.服务范围开放的小程序 对于用户注册流程是对外开放、无需验证特定范围用户,且注册后即可提供线上服务的小程序,不得在用户清楚知悉、了解小程序的功能之前,要求用户进行帐号登录。 包括但不限于打开小程序后立即跳转提示登录或打开小程序后立即强制弹窗要求登录,都属于违反上述要求的情况; 以下反面示例,在用户打开小程序后立刻弹出授权登录页; [图片] 建议修改为如下正面示例形式:在体验小程序功能后,用户主动点击登录按钮后触发登录流程,且为用户提供暂不登录选项。 [图片] 2.服务范围特定的小程序 对于客观上服务范围特定、未完全开放用户注册,需通过更多方式完成身份验证后才能提供服务的小程序,可以直接引导用户进行帐号登录。例如为学校系统、员工系统、社保卡信息系统等提供服务的小程序; 下图案例为正面示例:校友管理系统,符合规范要求。 [图片] 3.仅提供注册功能小程序 对于线上仅提供注册功能,其他服务均需以其他方式提供的小程序,可在说明要求使用帐号登录功能的原因后,引导用户进行帐号注册或帐号登录。如ETC注册申请、信用卡申请; 如下反面示例,用户在进入时未获取任何信息,首页直接强制弹框要求登录注册ETC,这是不符合规范的。 [图片] 建议修改为如下正面示例所示形式:允许在首页说明注册功能后,提供登录或注册按钮供用户主动选择点击登录。 [图片] 4.提供可取消或拒绝登录选项 任何小程序调用帐号登录功能,应当为用户清晰提供可取消或拒绝的选项按钮,不得以任何方式强制用户进行帐号登录。 如下图所示反面示例,到需要登录环节直接跳转登录页面,用户只能选择点击登录或退出小程序,这不符合登录规范要求。 [图片] 建议修改为下图正面示例形式,在需帐号登录的环节,为用户主动点击登录,并提供可取消按钮,不强制登录。 [图片] 针对以上登录规范要求,平台希望开发者们能相应地调整小程序的帐号登录功能。如未满足登录规范要求,从2019年9月1日开始,平台将会在后续的代码审核环节进行规则提示和修改要求反馈。
2019-07-20 - 微信支付分通用化常见技术问题
商户小程序跳转支付分小程序问题: 1, Q:商户小程序跳转支付分小程序确认订单页报错“商户请求错误,错误码:4190”怎么解决? A:1)错误码271314190的原因:商户package中的服务订单号非法 2, Q:商户小程序跳转支付分小程序确认订单页报错“商户请求错误,错误码:4185”怎么解决? A:1)错误码271314185的原因:商户package为空,如果调的是调起支付分小程序-确认订单接口,请检查传入businessType或path是否按照文档要求规范传入 3, Q:商户小程序跳转支付分小程序确认订单页报错“商户请求错误,错误码:4186”怎么解决? A:1)错误码271314186的原因:商户package非法 4, Q:商户小程序跳转支付分小程序确认订单页报错“商户请求错误,错误码:4108”怎么解决? A:1)错误码271314108的原因:商户package中appid非法 2) 错误码271314108的原因:获取package中的appid与实际拉起支付分小程序时的appid不一致 5, Q:商户小程序跳转支付分小程序确认订单页报错报错“商户请求错误,错误码:4189”怎么解决? A:1)错误码271314189的原因:商户package中serverid非法 6, Q:商户小程序跳转支付分小程序报错“商户请求错误,错误码:4188”怎么解决? A:1)错误码271314188的原因:商户账号信息不匹配,或appid没有开通权限(传入的mchid、appid与实际service_id(服务ID)里配置不一致) 7, Q:商户小程序跳转支付分小程序报错“商户请求错误,错误码:3961”怎么解决? A:1)错误码271313961的原因:服务ID不正确或单号不存在 8, Q:商户小程序跳转支付分小程序(确认页、详情页,授权页)报错“体验版小程序无体验权限,请联系小程序管理员”怎么解决? A:1)检查下envVersion参数用的是否是release,目前只支持打开支付分小程序正式版 9, Q:商户小程序跳转支付分小程序确认订单页后,怎样确认用户点击的是确认按钮,而不是返回按钮? A:1)因为只有用户点击微信侧小程序页面内确认按钮或者返回按钮时,才会带上返回参数;如果用户点击页面左上角的返回图标按钮,则不会带上返回参数 ,所以如果用户点击了确认订单按钮,商户会在app.js中的onshow的res中收到query_id,商户可以使用query_id去查询订单状态,如果订单状态是USER_ACCEPTED:用户成功使用服务,表示用户点击的是确认按钮 10, Q:用户点击确认按钮后,支付分小程序返回商户小程序,商户没有收到返回参数,怎么处理? A:1)onshow的代码是定义在全局app.js中的,不能定义在页面中的js 11,Q:假如用户拉起支付分确认页面之后,没有点击确认,还可以再次请求吗 A:1)不可以,进入确认页面就已经绑定用户了,拉起支付分package只能使用一次 12,Q:商户小程序navigator组件点击后就直接跳转微信支付分小程序了,商户怎样实现在点击的时候商户先调用商户的接口创建支付分订单呢? A:1)这里的跳转小程序有两个方式:1. navigator组件2. api调用(wx.navigateToMiniProgram),如果商户有以上诉求,可以用api调用这种方式 13,Q:用户确认订单页授权不了支付分,点击返回,回到商户小程序产品页,然后商户支付系统调微信查询接口进行轮询查状态,比如10秒或者15秒,再跳到押金页进行押金支付,造成了用户体验不好,这里可以怎么优化? A:1)这里分为两种情况,一种点击左上角返回,这时没有extraData参数返回,商户可以让用户进行押金支付,一种点击页面下的返回,这时有extraData参数返回,商户需要调用查询接口判断下,因为用户没有点击确认使用服务按钮返回商户小程序,微信侧订单状态不会更新为USER_ACCEPTED,这里商户一直轮询来查询微信侧的订单状态并不会改变,所以只要返回商户小程序,用户就没有入口确认使用服务,商户查到订单状态不为USER_ACCEPTED时直接进行押金支付即可 14,Q:支付分小程序返回商户小程序后,场景值1038,appid也可以获取到,但是到我们的小程序后无论哪个页面,从后台切到前台,场景值1038,appid都不会变 ,这就会造成前端无法准确识别是从后台来的还是支付分小程序来的。 A:1)原因请参看文档链接https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html,这里建议商户通过返回值1038+appid+extradata值主动查询的方式,如果没有用户确认订单状态,就出押金入口 15,Q:商户小程序跳转支付分小程序(确认页、详情页,授权页)报错“未通过申请,当前服务未上线? A:1)检查测试微信是否开通白名单,提供服务id和微信号联系运营开通白名单 [图片] 16, Q:商户小程序跳转支付分小程序(详情页)报错“无法查看他人的服务订单”怎么解决? A:1)商户跳转的订单号不属于这个微信用户的订单号,商户内部订单号关联可能混乱了,请商户自行检查 17, Q:商户小程序、jsapi、APP跳转支付分小程序(确认页、详情页、授权页)报错“系统繁忙,请重新尝试”怎么解决? A:1)检查下商户号和appid是否入驻支付分(必须和申请支付分服务权限时提供的信息保持一致) 2)检查下extraData参数的子参数是否少了字段 3)检查下签名是否正确,这里的sign是前端自己的,不能用后台的sign,可以让后台按前端的参数协助生成下,商户key要参与签名,并且key用的是api秘钥,不是apiv3秘钥,请注意api秘钥是32位的。签名方式和api秘钥设置路径参看文档指引https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=4_3,商户可以用在线工具自行校验,工具地址https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=20_1 4)跳转支付分小程序的appid要和创建订单请求的appid保持一致 5)检查下timestamp是否是string类型 18,Q:开启服务支付分小程序android返回了openid,ios不返回,sdk能力没有对齐吗? A:1)目前android确实是会返回,但建议商户自己可以维护一个唯一字段来维护。 19,Q:开启服务支付分小程序返回errcode为-2是什么意思? A:1)-2表示用户是通过左上角返回按钮返回的 20,Q:商户小程序跳转支付分小程序报错“非法的参数,请返回商户重新发起”怎么解决? A:1)检查下extraData参数的子参数里是不是少了mch_id参数 2)检查下timestamp是否是string类型 21,Q:调起支付分小程序授权页后展示解除授权页的原因是什么? A:同一用户微信号在商户同一服务ID下重复签约会直接拉起支付分解除授权页。 商户h5跳转支付分小程序问题: 1, Q:商户小程序跳转支付分小程序确认订单页后,怎样确认用户点击的是确认按钮,而不是返回按钮? A:1)因为只有用户点击微信侧小程序页面内确认按钮或者返回按钮时,才会带上返回参数;如果用户点击页面左上角的返回图标按钮,则不会带上返回参数 ,所以如果用户点击了确认订单按钮,商户会在app.js中的onshow的res中收到query_id,商户可以使用query_id去查询订单状态,如果订单状态是USER_ACCEPTED:用户成功使用服务,表示用户点击的是确认按钮 2,Q:假如用户拉起支付分确认页面之后,没有点击确认,还可以再次请求吗 A:1)不可以,进入确认页面就已经绑定用户了,拉起支付分package只能使用一次 3,Q:用户确认订单页授权不了支付分,点击返回,回到商户小程序产品页,然后商户支付系统调微信查询接口进行轮询查状态,比如10秒或者15秒,再跳到押金页进行押金支付,造成了用户体验不好,这里可以怎么优化? A:1)这里分为两种情况,一种点击左上角返回,这时没有extraData参数返回,商户可以让用户进行押金支付,一种点击页面下的返回,这时有extraData参数返回,商户需要调用查询接口判断下,因为用户没有点击确认使用服务按钮返回商户小程序,微信侧订单状态不会更新为USER_ACCEPTED,这里商户一直轮询来查询微信侧的订单状态并不会改变,所以只要返回商户小程序,用户就没有入口确认使用服务,商户查到订单状态不为USER_ACCEPTED时直接进行押金支付即可 4,Q:商户H5跳转支付分小程序(开启页)报错“请在合法渠道打开页面”? A:1)检查下调错接口没,小程序,app,h5应调对应场景的接口 2)检查下queryString是对值做urlencode编码,不是对整个url编码 5,Q:开启服务支付分小程序返回errcode为-2是什么意思? A:1)-2表示用户是通过左上角返回按钮返回的 6, Q:商户h5跳转支付分小程序(确认页、详情页、授权页)报错“商户请求错误,错误码:4188”怎么解决? A:1)错误码271314188的原因:商户账号信息不匹配,或appid没有开通权限 7,Q:调起支付分小程序授权页后展示解除授权页的原因是什么? A:同一用户微信号在商户同一服务ID下重复签约会直接拉起支付分解除授权页。 商户app跳转支付分小程序问题: 1, Q:商户小程序跳转支付分小程序确认订单页后,怎样确认用户点击的是确认按钮,而不是返回按钮? A:1)因为只有用户点击微信侧小程序页面内确认按钮或者返回按钮时,才会带上返回参数;如果用户点击页面左上角的返回图标按钮,则不会带上返回参数 ,所以如果用户点击了确认订单按钮,商户会在app.js中的onshow的res中收到query_id,商户可以使用query_id去查询订单状态,如果订单状态是USER_ACCEPTED:用户成功使用服务,表示用户点击的是确认按钮 2,Q:假如用户拉起支付分确认页面之后,没有点击确认,还可以再次请求吗 A:1)不可以,进入确认页面就已经绑定用户了,拉起支付分package只能使用一次 3,Q:用户确认订单页授权不了支付分,点击返回,回到商户小程序产品页,然后商户支付系统调微信查询接口进行轮询查状态,比如10秒或者15秒,再跳到押金页进行押金支付,造成了用户体验不好,这里可以怎么优化? A:1)这里分为两种情况,一种点击左上角返回,这时没有extraData参数返回,商户可以让用户进行押金支付,一种点击页面下的返回,这时有extraData参数返回,商户需要调用查询接口判断下,因为用户没有点击确认使用服务按钮返回商户小程序,微信侧订单状态不会更新为USER_ACCEPTED,这里商户一直轮询来查询微信侧的订单状态并不会改变,所以只要返回商户小程序,用户就没有入口确认使用服务,商户查到订单状态不为USER_ACCEPTED时直接进行押金支付即可 4,Q:商户app、小程序、公众号跳转支付分小程序(授权页、确认订单页、订单详情页)报错“暂无法使用此服务,微信支付分逐步开放中”? A:1)没在微信白名单内,配置微信白名单指引参考:https://pay.weixin.qq.com/wiki/doc/apiv3/open/pay/chapter3_1_5.shtml 2)在白名单内仍然不行,请换个实名了的并绑银行卡了的账号来申请白名单再测试,这账号要经常使用微信支付并且无违规记录,以免综合评估不通过 [图片] 5,Q:开启服务支付分小程序返回errcode为-2是什么意思? A:1)-2表示用户是通过左上角返回按钮返回的 6,Q:商户app调用openBusinessView接口返回errcode为0是什么意思? A:1)商户app调用openBusinessView接口返回errcode为0只代表调用接口成功,支付分申请是否成功和这里无关 7,Q:商户app跳转支付分小程序报错“非法的参数,请返回商户重新发起”怎么解决? A:1)检查下query参数的子参数是不是少了mch_id参数 2)检查下timestamp是否是string类型 8, Q:商户app跳转支付分小程序(确认页、详情页、授权页)报错“商户请求错误,错误码:4188”怎么解决? A:1)错误码271314188的原因:商户账号信息不匹配,或appid没有开通权限 9,Q:调起支付分小程序授权页后展示解除授权页的原因是什么? A:同一用户微信号在商户同一服务ID下重复签约会直接拉起支付分解除授权页。 10,Q:调用跳转微信支付分小程序接口调不起来微信客户端,手动切换到微信客户端才能正常跳转到支付分小程序是什么原因? A:请检查当前使用的opensdk版本,建议使用最新的opensdk版本后再进行重试。opensdk资源下载地址:https://developers.weixin.qq.com/doc/oplatform/Downloads/iOS_Resource.html 查询用户是否可使用服务问题: 1,Q:app怎么获取用户openid? A:1)可以使用微信OAuth2.0登陆方式,参看app获取openid文档指引https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419317851&token=&lang=zh_CN 2,Q:公众号h5怎么获取用户openid? A:1)参看文档指引https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 3,Q:小程序怎么获取用户openid? A:1)参看文档指引https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 支付分接口问题: 1,Q:创建支付分订单返回{"code":"NO_AUTH","message":"商户暂无权限使用此服务"}? A:1)检查商户号和appid是否和申请支付分权限时填写的appid和商户号一致(必须和申请支付分服务权限时提供的信息保持一致) 2)如果商户开通的是免确认订单权限,创建订单时need_user_confirm只能传false,如果商户开通的是含确认订单权限,创建订单时need_user_confirm只能传true 3)如果商户开通的是免确认订单权限,创建订单时风险金名称name只能用先享模式,如果商户开通的是需确认订单权限,创建订单时风险金名称name只能用先免模式 2,Q:创建支付分订单返回{"code":"PARAM_ERROR","message":"订单风险金额不符合要求"}? A:1)检查商户号开通的是哪种模式的权限,目前只有需确认模式和免确认模式,可以联系微信侧运营确认和配置 2)免确认模式只能传:“ESTIMATE_ORDER_COST:预估订单费用” 3)需确认模式可传先免模式中的:“DEPOSIT:押金,ADVANCE:预付款,CASH_DEPOSIT:保证金”任意一个 3,Q:创建支付分订单返回{"code":"INVALID_REQUEST","message":"非支付分通用场景的订单"}? A:1)检查订单是否用的通用化文档接口创建的订单,order_id为100000开头是通用化订单,order_id为000开头是非通用化订单 4,Q:支付分开启/解除授权服务回调通知、确认订单回调通知、支付成功回调通知一直收不到该怎么处理? A:1)没设置apiv3秘钥是不发送回调的,需要在商户平台设置APIv3密钥,服务商模式下需要用服务商商户号登录服务商平台设置apiv3密钥,详情参考文档指引。http://kf.qq.com/faq/180830E36vyQ180830AZFZvu.html 5,Q:需确认订单模式,同一个用户可以下多少笔免押订单,如果该用户有未完结的支付分订单,会不会影响用户下一笔订单免押 A:1)同一个用户可以确认免押订单进行中的笔数是3笔,待支付的笔数是1笔(未完结&未支付的订单笔数,产品策略,可能会调整);如超过限制则需交押金使用 6,Q:免确认订单模式创建支付分订单报错{"code":"INVALID_REQUEST","message":"综合评估不通过"}是什么原因? A:1)免确认流程创单用户被不对外风控拦截 7,Q:商户调用完结支付分订单接口,金额传0元会有支付成功回调吗? A:1)有收款成功回调 8,Q:商户调用修改订单金额接口,金额传0元会有支付成功回调吗? A:1)有收款成功回调 9,Q:商户调用同步服务订单信息接口,会有支付成功回调吗? A:1)没有收款成功回调 10,Q:商户调用完结支付分订单返回{"code":"INVALID_REQUEST","message":"付费项目size不在1,100之间"}? A:1)可检查下post_payments后付费项目参数是否符合文档要求规范传参 11,Q:apiV3签名失败,报错{"code":"SIGN_ERROR","message":"错误的签名,验签失败"} A:签名要注意: 1) 签名与生成Authorization用的同一个时间戳跟随机串 2) 构造签名串时,里面的url不需要ToLowCase(),不用UrlEncode(),商户请求的url后缀是什么,签名用的url后缀就是什么 3) 查询订单使用的是GET,构建签名串时,里面用的请求报文为空(但是那个换行符还是要有哈) 4)检查证书和商户号是否正确,这里用申请的商户号和此商户号的证书(特约商户别用错成服务商的证书了) 5) 具体可参考该文档:https://pay.weixin.qq.com/wiki/doc/apiv3/wechatpay/wechatpay7_1.shtml 12,Q:创建支付分订单,报错{"code":"INVALID_REQUEST","message":"存在未完结订单\n"}是什么原因? A:1)是否待完结的订单超过限制(3条),待支付的订单超过限制(1条),用户可进入微信点击【我->钱包->支付分->全部订单类型->进行中】,进行查询。 13,Q:查询支付分订单报错{"code":"PARAM_ERROR","message":"参数或字段"商户服务订单号"不接受设置多次值,但是被设置了多次。请检查请求数据包中(包括但不限于URL/QueryString/Header/Cookie/包体)中是否多次设置了此字段"}是什么原因? A:1)商户服务订单号(out_order_no)传参有误,该参数只需在请求URL中传参,无需再次在body中的json传参 14,Q:支付分的订单是否支持退款?用哪个接口发起退款? A:1)支持,需用V2或者V3版本的申请退款接口发起。 15,Q:支付分的订单能否用商户服务单号发起退款 A:1)不支持,需要用支付分微信支付交易单号( transaction_id)发起退款, 只有单据状态为USER_PAID,且收款成功渠道为支付分渠道,收款金额大于0,才会返回微信支付交易单号。 16,Q:调用支付分创单接口报错返回“mch_id和appid未绑定”如何处理? A:1)请商户自行检查mch_id和appid是否有对应的绑定关系。绑定步骤参考:https://kf.qq.com/faq/1801116VJfua1801113QVNVz.html 17,Q:完结支付分报错返回“实际结束时间不能晚于使用完结接口的时间”如何处理? A:1)请保证接口传入的服务结束时间<调用接口时间。 2)请确认调用方本地时间或服务器是否准确。 18,Q:创建支付分订单返回:{"code":"INVALID_REQUEST","message":"待支付订单过多"} A:用户待支付订单超出限制,需用户完成待支付订单后才可创建新的支付分订单。默认限制待支付1笔,但策略可能会有调整,请以实际情况为准 19,Q:为什么对账单中以及商户平台看到的商户订单号与创建订单时传入的商户服务单号不一致? A:商户订单号是微信支付分在轮询扣款时主动生成,商户服务单号是商户在调用创建支付分订单时传入,所以不一样是正常的。具体可下载支付分对账单详情了解 20,Q:为什么商户后台看到很多订单的交易状态都是已撤销? A:支付分在轮询扣款失败时产生,商户侧应以交易对账单的交易成功数据或支付分查单接口查询到的状态为准,商户平台展示撤销的订单商户侧可不用关注。 [图片] 21:Q:对账单中没有商户服务单号,商户应该如何对账? A:可通过对账单中的微信订单号及商户号关联对账单文件中商户数据包里的第三个数据,第三个数据就是创单时传入的商户服务单号。 [图片] 22:Q:支付分的账单示例可以在哪里下载? A:1)支付分账单示例 23:Q:支付分查询用户授权记录接口返回{"code":"ORDER_NOT_EXIST","message":"请求操作的授权记录不存在"}是什么原因? A:这个是正常的返回,用户从未产生授权记录:返回状态码 404,错误码为ORDER_NOT_EXIST,用户授权过后解除授权,当前未授权时:返回状态码200,返回参数中”授权状态 authorization_state“为【UNAVAILABLE】。 24:Q:调用支付分完结接口报错返回"{"code":"PARAM_ERROR","message":"订单重入参数校验失败"} "如何处理? A:当前这次请求改变了第一次调用完结成功传入的参数,也就是首次成功调用这个接口后,后续再次请求时改变了首次请求成功的入参,请商户自行确认下订单状态,如果是已完结待支付的状态,建议商户等待微信侧轮询扣款或定时查单即可,扣款失败后微信侧会按照一定频率进行重试扣款,直到成功。重复调用完结订单接口并不会起到催收作用,所以重复完结并没有任何意义。 25;Q:调用支付分创单或创单结单合并API报错返回{"code":"APPID_MCHID_NOT_MATCH","message":"总金额超过此服务的服务风险金额"} A:创单或创单结单合并传入的总金额(total_amount)超过了服务风险金额。 26;Q:用户微信被封了,导致微信支付分订单无法收款成功,需要怎么处理。 A:商户侧可通过非支付分渠道进行收款,收款成功之后可调同步订单接口来结束该订单。 27;Q调用完结订单接口报错返回”服务真实结束时间非法“如何解决? A:请检查完结时传入的结束时间格式是否与创单传入预计的结束时间格式一致。 28;用户微信上显示有进行中的支付分订单,点击进去没有查看到任何订单信息需要怎么处理? A: 用户实名下有多个微信号,订单在用户的另一个微信号上,可让用户自行核实 29;Q:{"code":"INVALID_REQUEST","message":"非支付分通用接口创建的订单,请使用对应的行业化接口"} A:老接口创建的订单只能用老的支付分接口完结、取消等操作。 30;Q:用户微信被封了,导致微信支付分订单无法收款成功,需要怎么处理。 A:商户侧可通过非支付分渠道进行收款,收款成功之后可调同步订单接口来结束该订单。 31;Q:跳转支付分小程序-授权返回页面停留时间过长,请重试该如何解决? A:传入的apply_permissions_token 失效了,预授权获取到的apply_permissions_token 有效期只有一个小时。 32;Q:用户开通支付分返回暂无法查看微信支付分,当前未满足查看条件,请保持稳定的实名信息,多使用微信支付进行消费是什么原因? A: 用户不满足使用支付分的条件,请保持稳定的实名信息,多使用微信支付进行消费 33;Q:支付分查询订单接口返回{"code":"INVALID_REQUEST","message":"与现有记录冲突,且service_id与已存在记录不同"}是什么原因? A:同一商户创建和查询支付分订单时的service_id不一致导致,查询时的service_id需和创单时保持一致 34;Q:用户在微信内解约支付分协议或商户主动调解约接口解约,接收解约回调地址在哪里配置? A:1)解约回调地址目前默认取的是用户授权成功的回调地址,即请求预授权时传入的notify_url 35;Q:微信支付分是否支持使用代金券? A:1)目前完结接口的goods_tag 只支持全场券 36;Q:调用完结订单接口报错:实际服务开始时间不得早于或等于创建订单填写的服务开始时间 A:1)完结时传的实际服务开始时间不能<=创单传入的服务开始时间,如与创建订单填写的“服务开始时间”一致时,不填写。请调整时间后重试。 37;Q:调用完结接口报错返回:创单时填写了服务开始地点,结单才能传入服务结束地点。 A:1)只有创单时传了start_location(服务开始地点),完结的时候才可以传入end_location(服务结束位置) 38;Q:调用同步接口报错返回:用户实际付款成功时间不能早于商户“完结订单"时间 A:1)请求传入的收款成功时间paid_time 需要>完结订单时间 配置及其他问题: 1,Q:模版消息的内容是怎么生成的? A:1)模版消息的内容是商户入驻的时候指定的。 2,Q:联系公众号在哪里设置? A:1)请联系微信支付的运营同学填写入驻申请表配置。 3,Q:如果支付分订单扣款失败,微信支付会重试扣款吗? A:1)微信支付会按照一定频率持续扣款直到成功 4,Q:apiv3秘钥怎么设置? A:1)请联系微信侧运营帮忙开通商户后台设置入口,然后参照指引文档设置http://kf.qq.com/faq/180830E36vyQ180830AZFZvu.html 5,Q:开通支付分输入密码时有超时时长吗? A:1)输入密码有15分钟有效期,超时后会让用户重新开通,重新输入密码 6,Q:押金什么时候退回? A:1)零钱支付10min以内到账,银行卡支付3天内到账 7,Q:后台没看到apiv3秘钥设置按钮,怎么解决? A:1)需要联系微信侧开通白名单才会出现apiv3秘钥设置按钮 8,Q:安卓手机有个物理返回键,点击这个物理返回键,支付分小程序会有extraData参数返回吗? A:1)不会 9,Q:appid-mchid在哪里设置? A:1)请联系微信支付的运营同学填写入驻申请表配置。 10,Q:服务名称在哪里设置? A:1)请联系微信支付的运营同学填写入驻申请表配置。 11,Q:服务logo在哪里设置? A:1)请联系微信支付的运营同学填写入驻申请表配置。 12,Q:行业归属在哪里设置? A:1)请联系微信支付的运营同学填写入驻申请表配置。 13,Q:分数标准在哪里设置? A:1)请联系微信支付的运营同学填写入驻申请表配置。 14,Q:权益说明在哪里设置? A:1)请联系微信支付的运营同学填写入驻申请表配置。 15,Q:用户开启服务成功通知的回调地址在哪里设置? A:1)请联系微信支付的运营同学填写入驻申请表配置。 16,Q:service_id怎么获得? A:1)请联系微信侧运营协助配置获取 17,Q:商户登录微信商户管理后台,为什么看不见“证书升级”的按钮? A:1)权威CA证书目前在灰度中,如果商户看不见证书升级按钮,可以把商户号发给微信侧运营配置升级入口白名单。 18,Q:调用支付分接口是否必须要升级证书,证书升级会影响交易吗? A:1)调用支付分接口必须升级证书,只影响原来调用接口的时候使用了API证书的接口,证书升级之后,需要在14天内替换原来旧的API证书,详情参看文档指引http://kf.qq.com/faq/180824BrQnQB180824m6v2yA.html 19,Q:哪里可以查询到商户私钥证书序列号? A:1)管理员帐号登录微信商户管理后台,在API安全里面点击“查看证书” 20,Q:支付分支持使用分账吗? A:1)支持,商户需要在完结订单时传入分账标识profit_sharing,然后再调用分账的接口进行分账 21,Q:支付分商户后台上的商户订单号是商户传的out_order_no字段吗 A:1)不是,微信商户平台上支付分订单中的商户订单号是由微信侧生成的,与商户创单时的商户服务订单号无关 22,Q:支付分支持下载对账单接口吗? A:1)支持 23,Q:退款金额有包括企业打款吗? A:不包含,企业打款不算退款 24,Q:小程序BUG怎么上传日志给微信侧定位问题? A:客户端上传日志步骤: 1)ios:“通讯录”--右上角“添加好友”按钮--在输入框里输入“:up”--“上传日志” 2)Android:“我”--“设置”--“帮助与反馈”--右上角“工具”按钮--“上传日志” 25,Q:怎样调用支付分小程序、h5的wx.openBusinessView和wx.navigateToMiniProgram,wx.openBusinessView接口不成功,报错devchongdianviph5.winbons.com“err_msg":"openBusinessView:fail_the permission value is offline verifying"怎么解决? A:1)按步骤引入,具体参数文档指引https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#3 [图片] 26,Q:用户微信零钱里有钱,但扣款失败是什么原因? A:这个case是支付分轮询到银行卡上了,银行还在处理中未明确结果,暂时无法轮询零钱,辛苦指引一下用户,在微信-我-支付-右上角...-扣费服务-微信支付分免密支付-扣款方式,修改为零钱优先,然后再到,微信-我-支付-钱包-支付分-订单列表里找到这笔待支付订单,重试扣款 27,Q:你好,请问支付分相关接口,每个接口大概时间响应是多长,建议的超时时间是多少? A:大部分API请求会在500ms内返回,商户可以参考该数值,并考虑网络耗时配置超时时间。 28, Q:android手机上商户app跳转支付分小程序不能原路返回,apple手机可以,怎么解决? A:1)检查下是不是少配置了android:taskAffinity,android:launchMode等参数,请参看文档https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=1417751808&token=&lang=zh_CN [图片] 29,Q:商户跳转支付分小程序报“当前服务未上线”,怎么解决? A:1)检查是否更换了serviceid 2)是否使用的测试白名单中的微信号,请联系微信侧运营开通白名单 30,Q:商户如果有3个端:h5、app、小程序,对应的openid是不同的,怎么实现相同微信号,在某个端已经授权,在其他端可以共同享有授权的方案? A:1)方案一:用户微信授权是绑定在唯一的服务id下的,每个商户的服务id不同,商户需要将商户号和appid配置在同个服务id下,即可享受不同场景的共同授权 31:Q:如果用户零钱余额不足的情况下,支付分是否会尝试从客户绑定的其它卡种扣费? 如果用户默认的扣款方式扣款失败,微信会依次按以下顺序扣费:零钱、信用卡、借记卡。 32:Q:订单风险金额该怎么传比较好? A:1)、订单风险金额不宜比服务订单结算总金额高过多:订单风险金额越高,可获得权益的用户将越少,用户可享受权益的通过率将越低。 2)、订单风险金额不宜比服务订单结算总金额低过多:对于用户是否能享受权益,是基于订单风险金额来评估的,因此,订单风险金额预估比服务订单结算总金额越低,收款成功率可能会越低。因此,尽量准确、合理预估订单风险金额,以保证通过率和收款成功率 3)、完结订单金额小于或等于风险金额,但必须小于此服务风险金额的最大值 4)、风险金额必须小于此服务风险金额的最大值
2022-03-30 - 微信朋友圈选图效果
中秋快乐,帮社区里的小伙伴写的选图效果,仿造的微信朋友圈选图,长按拖动排序主要是用交互监听来实现的。还有几个需要处理的地方。另外在真机上的动画速度总感觉快那么一丢丢。没做预览图,详情见代码片段咯。安卓机效果没试过。。 今天是9月23,这两天接受定制改动~ 第一次发经验分享。。轻点喷。。 哦,对了,这里 wx.createSelectorQuery 有个bug。。如果选择的基础库版本在2.0.9以上,第一次打开开发者工具,要先直接点一次编译,不然会出错。。真机上没问题 代码片段:wechatide://minicode/RFLmzDmL7I2a 有小伙伴反馈,在片段上面增加内容会乱位,是因为没计算顶部偏移量,方便懒人,完善了下 新的片段:wechatide://minicode/fOTEM3mI7l3B 终于拿到安卓机器试了,果然卡得很。。要控制频率。这很尴尬,太频繁的话,安卓会卡,太不频繁呢,刚开始移动那阵子会卡。。有同学反馈,说点快了会出问题,于是又加了点击频率的限制 现在的代码片段:wechatide://minicode/xBDdCom17R3c(要重新拿安卓机测试了再看看。。) 附上gif: [图片]
2018-10-24 - 适配刘海屏和全面屏的一些小心得
今年开始各路刘海和全面屏手势的手机已经开始霸占市场,全面屏和刘海屏的适配也必须提上日程。 相信大家也一定会有第一次将未适配的小程序放到全面屏或刘海屏手机上的尴尬体验。 尤其是在导航栏设置为custom时,标题与胶囊对不齐简直逼死强迫症。。 微信官方也没有出一个官方的指导贴帮助开发者。 这里仅总结一下个人关于这个问题的一些处理方式,如有疏漏烦请指正补充。 适配的关键在两个位置即额头和下巴,头不用说自然是关于刘海的。 小程序的头的高度主要分为2个部分 1.statusBarHeight 该值可以在app onLaunch 调用wx.getSystemInfoSync() 获取到 a)刘海 高度44 [图片] b)无刘海 ios高度20 安卓各不相同 [图片] 2.胶囊高度 即下图高度 [图片] 在查阅社区问答后了解到小程序给到的策略是ios在模拟器下统一是44px,ios在真机下统一是40px(感谢指正@bug之所措 ),而安卓下统一是48px,因此我们又可以在wx.getSystemInfoSync() 中获取到系统之后得到胶囊高度。 总的导航栏高度即这两个高度之合。本人项目中是将导航做成组件并给到slot,方便各个页面配置。 开发者工具 1.02.1810190 及以上版本支持在 app.json 中声明 usingComponents 字段,在此处声明的自定义组件视为全局自定义组件,在小程序内的页面或自定义组件中可以直接使用而无需再声明。 目前小程序还支持在单个页面配置custom,也可以配合使用~ 另一个需要关注的则是底部,参考的文章是 https://www.jianshu.com/p/a1e8c7cf8821 重点是在于在全面屏的手机的底部需要流出34px的空白给到全面屏返回手势操作,此外由于全面屏屏幕圆边还可能使一些按钮或功能无法正常使用。 那么首先如何判断是否是全面屏呢?个人的做法是判断屏幕高度是否大于750,iphone的plus系列高度在736,正好在这个范围之内,当然750不一定准确,如果出现疏漏烦请补充。 涉及到底部的主要是弹出的操作菜单、tabBar和底部定位的按钮等。这里做了一个简单的代码片段。 https://developers.weixin.qq.com/s/fnU0n8mv7o5M 希望能够帮助到大家,也欢迎交流~
2019-01-03 - 微信小程序自定义导航栏组件(完美适配所有手机),可自定义实现任何你想要的功能
背景 在做小程序时,关于默认导航栏,我们遇到了以下的问题: Android、IOS手机对于页面title的展示不一致,安卓title的显示不居中 页面的title只支持纯文本级别的样式控制,不能够做更丰富的title效果 左上角的事件无法监听、定制 路由导航单一,只能够返回上一页,深层级页面的返回不够友好 探索 小程序自定义导航栏已开放许久>>了解一下,相信不少小伙伴已使用过这个功能,同时不少小伙伴也会发现一些坑: 机型多如牛毛:自定义导航栏高度在不同机型始终无法达到视觉上的统一 调皮的胶囊按钮:导航栏元素(文字,图标等)怎么也对不齐那该死的胶囊按钮 各种尺寸的全面屏,奇怪的刘海屏,简直要抓狂 一探究竟 为了搞明白原理,我先去翻了官方文档,>>飞机,点过去是不是很惊喜,很意外,通篇大文尽然只有最下方的一张图片与这个问题有关,并且啥也看不清,汗汗汗… 我特意找了一张图片来 [图片] 分析上图,我得到如下信息: Android跟iOS有差异,表现在顶部到胶囊按钮之间的距离差了6pt 胶囊按钮高度为32pt, iOS和Android一致 动手分析 我们写一个状态栏,通过wx.getSystemInfoSync().statusBarHeight设置高度 Android: [图片] iOS:[图片] 可以看出,iOS胶囊按钮与状态栏之间距离为:4px, Android为8px,是不是所有手机都是这种情况呢? 答案是:苹果手机确实都是4px,安卓大部分都是7和8 也会有其他的情况(可以自己打印getSystemInfo验证)如何快速便捷算出这个高度,请接着往下看 如何计算 导航栏分为状态栏和标题栏,只要能算出每台手机的导航栏高度问题就迎刃而解 导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2 + 状态栏高度 注:由于胶囊按钮是原生组件,为表现一致,其单位在各种手机中都为px,所以我们自定义导航栏的单位都必需是px(切记不能用rpx),才能完美适配。 解决问题 现在我们明白了原理,可以利用胶囊按钮的位置信息和statusBarHeight高度动态计算导航栏的高度,贴一个实现此功能最重要的方法 [代码]let systemInfo = wx.getSystemInfoSync(); let rect = wx.getMenuButtonBoundingClientRect ? wx.getMenuButtonBoundingClientRect() : null; //胶囊按钮位置信息 wx.getMenuButtonBoundingClientRect(); let navBarHeight = (function() { //导航栏高度 let gap = rect.top - systemInfo.statusBarHeight; //动态计算每台手机状态栏到胶囊按钮间距 return 2 * gap + rect.height; })(); [代码] gap信息就是不同的手机其状态栏到胶囊按钮间距,具体更多代码实现和使用demo请移步下方代码仓库,代码中还会有输入框文字跳动解决办法,安卓手机输入框文字飞出解决办法,左侧按钮边框太粗解决办法等等 胶囊信息报错和获取不到 问题就在于 getMenuButtonBoundingClientRect 这个方法,在某些机子和环境下会报错或者获取不到,对于此种情况完美可以模拟一个胶囊位置出来 [代码]try { rect = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null; if (rect === null) { throw 'getMenuButtonBoundingClientRect error'; } //取值为0的情况 if (!rect.width) { throw 'getMenuButtonBoundingClientRect error'; } } catch (error) { let gap = ''; //胶囊按钮上下间距 使导航内容居中 let width = 96; //胶囊的宽度,android大部分96,ios为88 if (systemInfo.platform === 'android') { gap = 8; width = 96; } else if (systemInfo.platform === 'devtools') { if (ios) { gap = 5.5; //开发工具中ios手机 } else { gap = 7.5; //开发工具中android和其他手机 } } else { gap = 4; width = 88; } if (!systemInfo.statusBarHeight) { //开启wifi的情况下修复statusBarHeight值获取不到 systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20; } rect = { //获取不到胶囊信息就自定义重置一个 bottom: systemInfo.statusBarHeight + gap + 32, height: 32, left: systemInfo.windowWidth - width - 10, right: systemInfo.windowWidth - 10, top: systemInfo.statusBarHeight + gap, width: width }; console.log('error', error); console.log('rect', rect); } [代码] 以上代码主要是借鉴了拼多多的默认值写法,android 机子中 gap 值大部分为 8,ios 都为 4,开发工具中 ios 为 5.5,android 为 7.5,这样处理之后自己模拟一个胶囊按钮的位置,这样在获取不到胶囊信息的情况下,可保证绝大多数机子完美显示导航头 吐槽 这么重要的问题,官方尽然没有提供解决方案…竟然提供了一张看不清的图片??? 网上有很多ios设置44,android设置48,还有根据不同的手机型号设置不同高度,通过长时间的开发和尝试,本人发现以上方案并不完美,并且bug很多 代码库 Taro组件gitHub地址详细用法请参考README 原生组件npm构建版本gitHub地址详细用法请参考README 原生组件简易版gitHub地址详细用法请参考README 由于本人精力有限,目前只计划发布维护好这2种组件,其他组件请自行修改代码,有问题请联系 备注 上方2种组件在最下方30多款手机测试情况表现良好 iPhone手机打电话和开热点导致导航栏样式错乱,问题已经解决啦,请去demo里测试,这里特别感谢moments网友提出的问题 本文章并无任何商业性质,如有侵权请联系本人修改或删除 文章少量部分内容是本人查询搜集而来 如有问题可以下方留言讨论,微信zhijunxh 比较 斗鱼: [图片] 虎牙: [图片] 微博: [图片] 酷狗: [图片] 知乎: [图片] [图片] 知乎是这里边做的最好的,但是我个人认为有几个可以优化的小问题 打电话或者开启热点导致样式错落,这也是大部门小程序的问题 导航栏下边距太小,看起来不舒服 搜索框距离2侧按钮组距离不对等 自定义返回和home按钮中的竖线颜色重了,并且感觉太粗 如果您看到了此篇文章,请赶快修改自己的代码,并运用在实践中吧 扫码体验我的小程序: [图片] 创作不易,如果对你有帮助,请移步Taro组件gitHub原生组件gitHub给个星星 star✨✨ 谢谢 测试信息 手机型号 胶囊位置信息 statusBarHeight 测试情况 iPhoneX 80 32 281 369 48 88 44 通过 iPhone8 plus 56 32 320 408 24 88 20 通过 iphone7 56 32 281 368 24 87 20 通过 iPhone6 plus 56 32 320 408 24 88 20 通过 iPhone6 56 32 281 368 24 87 20 通过 HUAWEI SLA-AL00 64 32 254 350 32 96 24 通过 HUAWEI VTR-AL00 64 32 254 350 32 96 24 通过 HUAWEI EVA-AL00 64 32 254 350 32 96 24 通过 HUAWEI EML-AL00 68 32 254 350 36 96 29 通过 HUAWEI VOG-AL00 65 32 254 350 33 96 25 通过 HUAWEI ATU-TL10 64 32 254 350 32 96 24 通过 HUAWEI SMARTISAN OS105 64 32 326 422 32 96 24 通过 XIAOMI MI6 59 28 265 352 31 87 23 通过 XIAOMI MI4LTE 60 32 254 350 28 96 20 通过 XIAOMI MIX3 74 32 287 383 42 96 35 通过 REDMI NOTE3 64 32 254 350 32 96 24 通过 REDMI NOTE4 64 32 254 350 32 96 24 通过 REDMI NOTE3 55 28 255 351 27 96 20 通过 REDMI 5plus 67 32 287 383 35 96 28 通过 MEIZU M571C 65 32 254 350 33 96 25 通过 MEIZU M6 NOTE 62 32 254 350 30 96 22 通过 MEIZU MX4 PRO 62 32 278 374 30 96 22 通过 OPPO A33 65 32 254 350 33 96 26 通过 OPPO R11 58 32 254 350 26 96 18 通过 VIVO Y55 64 32 254 350 32 96 24 通过 HONOR BLN-AL20 64 32 254 350 32 96 24 通过 HONOR NEM-AL10 59 28 265 352 31 87 24 通过 HONOR BND-AL10 64 32 254 350 32 96 24 通过 HONOR duk-al20 64 32 254 350 32 96 24 通过 SAMSUNG SM-G9550 64 32 305 401 32 96 24 通过 360 1801-A01 64 32 254 350 32 96 24 通过
2019-11-17