- 咨询:小程序嵌入H5,能否调用公众号支付(JSAPI支付)
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.htmlhttps://developers.weixin.qq.com/miniprogram/dev/component/web-view.htmlhttps://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 请问下:小程序嵌入H5,能否调用公众号支付(JSAPI支付) (我们有客户说他们在体验版的调试模式下可以调通)
2022-06-22 - H5支付报错:“商家存在未配置的参数,请联系商家解决”
可能的原因及解决方法如下: 1,当前调起H5支付的域名(微信侧从referer中获取)与申请H5支付时提交的授权域名不一致,如需添加或修改授权域名,请登陆商户号对应的商户平台--"产品中心"--"开发配置"自行配置 2,如果设置了回跳地址redirect_url,请确认设置的回跳地址的域名与申请H5支付时提交的授权域名是否一致。 更多H5支付常见问题请前前往:H5支付常见问题
2020-12-04 - app 嵌入 h5 微信支付报商家存在未配置参数,浏览器访问h5支付 却可以正常支付?
[图片][图片]
2021-08-26 - 涉及帐号无实质内容及服务,且主要目的为其他帐号进行推荐、推广、导流等行为?
微信官方你好,2月4号我们的小程序(版本号:3.2.13)突然被封,原因是“涉及帐号无实质内容及服务,且主要目的为其他帐号进行推荐、推广、导流等行为”,如图[图片] 接着我们提供证明材料进行申诉,申诉原因“微信官方您好,我们主要提供电影票售卖和安卓用户虚拟商品售卖,第三方电商只是次要业务,并非主要为第三方电商引流,请求撤销处罚”,下图为申诉证明材料 [图片] 结果申诉没有通过,原因是“你好,经核实,小程序该线上版本增设版块简单,无主营业务,实际服务仍提供电商类小程序商品价格详情展示并导流至相关小程序进行购买等纯导流、无实质内容的运营内容,请自觉遵守国家相关法律法规,不从事违法或违反《微信小程序平台运营规范》及相关规则的内容和行为,谢谢。”,如下图 [图片] 为了不影响线上业务和用户体验我们去掉全部跳转到第三方小程序的功能,只留下电影票和充值再次提交申诉,申诉证明材料如下: [图片] 得到的结果依然是“小程序该线上版本增设版块简单,无主营业务”,如下图: [图片] 接着把简介改了再次提交申诉,得到的结果是‘小程序该线上版本增设版块简单,无主营业务内容,涉嫌绕开、规避或对抗平台审核监管的行为’ [图片] 直到第7次申诉才通过,申诉理由“请问我们什么行为绕开、规避或对抗平台审核监管?电影票售卖和安卓用户会员账号购买不是我们的业务吗?我们通过了贵平台的认证,代码通过了贵平台的审核,我们真的不知道什么行为绕开、规避或对抗平台审核监管,如果有请告知,谢谢!” [图片] 反反复复两天时间,又是春节电影贺岁档,给我们的业务带来了不可估量的损失,受疫情影响生存艰难,本来是打算靠春节影票业务给员工发工资的,没想到来这么一出,心真累。 微信是一种生活方式也是一种基础设施,我们愿意为微信生态体系贡献一份力量,同时借助微信平台获取一定的收益,这是一种双赢的合作方式,但是不知道前面还有什么陷阱等着我们,每一步都是如履薄冰啊。 同样是春节我们收到“含有虚拟支付功能,属于平台不支持开放的服务范围”的警告 [图片] 但是之前我们根据人口客服的指导把付款按钮设置成“由于相关规范,iOS功能暂不可用” 并且成功审核通过了,没有任何购买、支付功能页面和按钮,如图 [图片] 真不知道是我们的语文水平不够阅读理解有误还是什么问题,iOS端只能把会员充值业务全部隐藏。 [图片] 有几个问题希望能得到微信官方明确的答复: 1、是不是所有跳转到第三方小程序的行为都是被禁止的,比如跳转美团饿了么外卖、拼多多,如果是禁止的为什么线上还有那么多平台可以跳转? 2、我们的主营业务是影票和会员充值,为何说我们没有主营业务,是不是存在误判,如果是误判能不能重新上线3.1.13版本,并且删除违规记录? 3、如果我们违规了为什么不在代码审核的时候驳回? Best Wish!
2022-02-07 - 小程序webview组件,小程序和webview交互,小程序内联h5页面,小程序webview内网页实现微信支付
小程序支持webview以后,我们开发的好多h5页面,就可以直接在小程序里使用了,比如我们开发的微信商城,文章详情页,商品详情页,就可以开发一套,多处使用了。我们今天来讲一讲。在小程序的webview里实现微信支付功能。因为微信不允许在小程序的webview里直接调起微信支付。所以我们这节课就要涉及到小程序和webview的交互了。 老规矩先看效果。 因为这里涉及的东西比较多,录gif太多,没法上传,我就录制了一段视频出来。 https://v.qq.com/x/page/t0913iprnay.html 原理 先说下实现原理吧,实现原理就是我们在webview的h5页面里实现下单功能,然后点击支付按钮,我们点击支付按钮的时候会跳转到小程序页面,把订单号,订单总金额,传递到小程序里,然后小程序里使用订单号和订单金额去调起微信支付,实现付款,付款成功或者失败时都会有回调。我们再把对应的回调传递给webview,刷新webview里的订单和支付状态。 一,定义webview显示h5页面 关于webview的使用,我就不做讲解了,官方文档里写的很清楚,用起来也很简单。https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html [图片] webview很简单,就是用一个webview组件,显示我们的网页。 二,定义h5页面 我这里启动一个本地服务器,用来展示一个简单的h5页面。 [图片] 上图是我在浏览器里显示的效果。 接下来我们在小程序的webview里显示这个页面,也很简单,只需要把我们的src定义为我们的本地网页链接就可以了。 [图片] 这里有一点需要注意 因为我们是本地链接,我们需要到开发者工具里把这一项给勾选。 [图片] 三,来看下h5页面代码 [代码]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小程序内嵌webview</title> <style> .btn { font-size: 70px; color: red; } </style> </head> <body> <h1>我是webview里的h5页面</h1> <a id="desc" class="btn" onclick="jumpPay()">点击支付</a> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script> console.log(location.href); let payOk = getQueryVariable("payOk"); console.log("payOk", payOk) if(payOk){//支付成功 document.getElementById('desc').innerText="支持成功" document.getElementById('desc').style.color="green" }else{ document.getElementById('desc').innerText="点击支付" } //获取url里携带的参数 function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i = 0; i < vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return pair[1]; } } return (false); } function jumpPay() { let orderId = Date.now();//这里用当前时间戳做订单号(后面使用你自己真实的订单号) let money = 1;//订单总金额(单位分) let payData = {orderId: orderId, money: money}; let payDataStr = JSON.stringify(payData);//因为要吧参数传递给小程序,所以这里需要转为字符串 const url = `../wePay/wePay?payDataStr=${payDataStr}`; wx.miniProgram.navigateTo({ url: url }); // console.log("点击了去支付", url) console.log("点击了去支付") } </script> </body> </html> [代码] h5代码这里不做具体讲解,只简单说下。我们就是在点击支付按钮时,用当前时间戳做为订单号(因为订单号要保证唯一),然后传一个订单金额(单位分),这里节约起见,就传1分钱吧,花的是自己的钱,心疼。。。。 关键点说一下 1, 必须引入jweixin,才可以实现h5跳转小程序。 <script type=“text/javascript” src=“https://res.wx.qq.com/open/js/jweixin-1.3.2.js”></script> 2,跳转到小程序页面的方法 [代码]const url = `../wePay/wePay?payDataStr=${payDataStr}`; wx.miniProgram.navigateTo({ url: url }); [代码] 这里要和你小程序的页面保持一致。payDataStr是我们携带的参数 [图片] 四,小程序支付页 来看下我们的小程序支付页 [图片] 小程序支付页功能很简单,就是来接收我们h5传过订单号和订单金额。然后去调起微信支付,实现支付。支付成功和支付失败都有对应的回调。 [图片] 支付我们这里实用的小程序云开发来实现的支付,核心代码只有10行。由于支付不是本节的重点,所以这里不做具体讲解。感兴趣的同学可以去看我写的文章和我录的视频 小程序支付文章:https://www.jianshu.com/p/2b391df055a9 小程序支付视频:https://edu.csdn.net/course/play/25701/310742 下面把小程序接收参数和支付的完整代码贴出来给大家 [代码]Page({ //h5传过来的参数 onLoad: function(options) { console.log("webview传过来的参数", options) //字符串转对象 let payData = JSON.parse(options.payDataStr) console.log("orderId", payData.orderId) let that = this; wx.cloud.callFunction({ name: "pay", data: { orderId: payData.orderId, money: payData.money }, success(res) { console.log("获取成功", res) that.goPay(res.result); }, fail(err) { console.log("获取失败", err) } }) }, //微信支付 goPay(payData) { wx.requestPayment({ timeStamp: payData.timeStamp, nonceStr: payData.nonceStr, package: payData.package, signType: 'MD5', paySign: payData.paySign, success(res) { console.log("支付成功", res) //你可以在这里支付成功以后,再跳会webview页,并把支付成功状态传回去 wx.navigateTo({ url: '../webview/webview?payOk=true', }) }, fail(res) { console.log("支付失败", res) } }) } }) [代码] 代码里注释很清楚,这里有一点,就是我们支付成功后,需要告诉h5我们支付成功了,通知h5去刷新订单或者支付状态。 到这里我们就完整的实现了小程序webview展示h5页面,并且做到了h5和小程序的交互,实现了小程序webview的支付功能。 是不是很简单呢。 源码地址 1,关注“编程小石头”公号,回复“webview”即可获取源码 2,也可以到我github下载源码 https://github.com/qiushi123/xiaochengxu_demos [图片]
2019-08-15 - 小程序 webview 内嵌 h5 支付、路由跳转
一.介绍允许通过特定方式在小程序内通过 webview 内嵌 h5 页面,跳转以及支付等流程。 大致流程如下: 小程序创建 webview 加载 h5 url(https://3400.retail.../shop/index),后续跳转通过 url 后拼接的参数判断是否要跳转新的 webview 页面(参数符合规则并且此跳转点击使用了 CommonRouter(见在H5页面中集成的小程序跳转路由),否则只是普通的页面跳转),支付环节需要小程序创建一个原生页面用于支付中转; 二.集成1.创建 webview 容器用于承载 h5 页面(webview 组件用法参考官方组件) 创建一个 webview page,用于加载 h5 url,路径没有要求,只需在 步骤2>参数拼接 时带上路径即可。 2.参数拼接在 webview 加载 url 之前,需要在 url 后拼接上必要的参数,否则无法在新的 webview 打开下一次页面和在H5生成支付参数,在H5页面生成支付参数,请求后端生成支付参数接口要用小程序的appid,openid。webview 完整示例如下: Page({ data: { weburl:'' //加载的 url }, onLoad: function (options) { let url = decodeURIComponent(options.url) // url 拼接参数 this.dealUrl(url) }, dealUrl(url) { /** * miniProgramWebviewPath webview 的路径, 必传 解决采用小程序路由跳转H5嵌在多个小程序webview,跳回小程序webview * miniProgramPayPath 支付中转页路径,必传 * pageStackLength 页面路由栈个数,必传 解决小程序跳转10级问题,改用redirectTo跳转, * ec_appid、ec_openid 两个参数为支付所需参数,必传 */ let miniProgramWebviewPath = encodeURIComponent(`${this.route}?weburl=`) let miniProgramPayPath = "pages/h5payment/payMiddle/index" let pageStackLength = getCurrentPages().length let ec_appid = "wxb956c83845b9c0" let ec_openid = "oOVgY4xSj-LyuFifcaF_YDcRLU" const urlParams = {} urlParams.ec_openid = ec_openid urlParams.ec_appid = ec_appid urlParams.miniProgramWebviewPath = miniProgramWebviewPath urlParams.pageStackLength = pageStackLength urlParams.miniProgramPayPath = miniProgramPayPath let weburl = this.onInsterParamsInUrl(url, urlParams) this.setData({ weburl }) }, /** * 解析 url param */ onInsterParamsInUrl(url, params) { let tempUrl = '' let hasParams = url.indexOf('?') !== -1; tempUrl = Object.keys(params).reduce(function (before, after) { return before + after + '=' + params[after] + '&' }, tempUrl) tempUrl = tempUrl.substring(0, tempUrl.length - 1) return hasParams ? (url + '&' + tempUrl) : (url + '?' + tempUrl) } }) 3.支付中转页小程序内嵌 h5 的支付无法直接使用微信环境 sdk 支付,需要借助小程序的支付能力,所以小程序需要提供一个支付页面,接收在h5 生成的小程序支付参数,支付成功失败的回调url,发起小程序支付。小程序支付完成,需要跳转到结果回调页面,此页面需要由 webview 打开,所以在下面代码 PayDoneCallback 方法里的跳转路径对应 webview 的路径。 Page({ onLoad: function(options) { /** * 解析 options, options为H5传过来的参数(支付参数,回跳H5的URL) */ this.successUrl = options.successUrl this.failUrl = options.failUrl options.package = decodeURIComponent(options.package); options.paySign = decodeURIComponent(options.paySign); delete options.successUrl delete options.failUrl const { success, fail, cancel } = this.PayDoneCallback(this.successUrl, this.failUrl) this.payment({options, success, fail, cancel}) }, payment(opts) { const data = opts.options let hasComplete = false; wx.requestPayment({ ...data, success: function(res){ typeof opts.success =='function'&&opts.success() }, fail: function(res) { if (res.errMsg == 'requestPayment:fail cancel') { typeof opts.cancel =='function'&&opts.cancel(); hasComplete = true; return; } typeof opts.fail =='function'&&opts.fail() }, complete:function(res){ console.log(res) if (hasComplete) { hasComplete = false; }else if(res.errMsg =='requestPayment:fail cancel'||res.errMsg=="requestPayment:cancel") { typeof opts.cancel =='function'&&opts.cancel() } typeof opts.complete =='function' && opts.complete(res) } }) }, PayDoneCallback(successUrl, failUrl) { return { success(){ wx.redirectTo({ url: `/pages/h5payment/webview/webview?weburl=${successUrl}` }); }, fail(){ wx.redirectTo({ url: `/pages/h5payment/webview/webview?weburl=${failUrl}` }); }, cancel(){ wx.redirectTo({ url: `/pages/h5payment/webview/webview?weburl=${failUrl}` }); } } } })
2021-08-20 - 小程序插件开发支付问题?
小程序插件使用插件功能页开发 支付的商户是否是跟插件所有者的商户主体绑定,而不是跟使用者的主体商户绑定
2019-12-11