h5实现 — 跳转到微信输入密码支付

1、在购买按钮函数上，点击参数传递当前点的id，并在函数里执行获取code（appid）的函数

    buy(type_id) {console.log(type_id);this.getCodeApi(type_id);}

2、写获取code函数，注意，里边的域名需要在微信公众平台里边配置，配置方法已发。

    getCodeApi(type_id) {console.log(type_id);let urlNow = encodeURIComponent(`http://xlmobi.xlteacher.cn/#/npay?para=${type_id}&token=${this.ecloudToken}`);let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx3b67851edf4a2f7d&redirect_uri=${urlNow}&response_type=code&scope=snsapi_base&connect_redirect=1&state=STATE#wechat_redirect`;window.location.href = url;},

3、到了订单页面（这里只能在微信开发者工具上测试，且必须打上在线上测试）

调用pay接口，把价格、id、code传给后台就可以

    submit() {let fd = new FormData();fd.append("type_id", this.$route.query.para);fd.append("price", this.courseType.price);fd.append("code", this.getUrlKey("code"));this.axios.post("index/mobile_pay", fd).then((res) => {this.payList = res.data;this.pay({ ...this.payList });});},// 支付pay(obj) {WeixinJSBridge.invoke("getBrandWCPayRequest",{appId: obj.appId, // 公众号名称，由商户传入timeStamp: obj.timeStamp, // 时间戳，自1970年以来的秒数nonceStr: obj.nonceStr, // 随机串package: obj.package, // 统一下单接口返回的prepay_id参数值signType: obj.signType, // 微信签名方式：paySign: obj.paySign, // 微信签名},(res) => {if (res.err_msg == "get_brand_wcpay_request:ok") {this.$router.replace("/");}if (res.err_msg == "get_brand_wcpay_request:cancel") {// 使用以上方式判断前端返回,微信团队郑重提示：//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。setTimeout(() => {// window.location.replace("/myorder");this.$router.replace("/npay");}, 1500);}if (res.err_msg == "get_brand_wcpay_request:fail") {// 使用以上方式判断前端返回,微信团队郑重提示：//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。this.$toast("支付失败,请重新支付");return false;}});},getUrlKey: function (name) {//获取url 参数上边的codereturn (decodeURIComponent((new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(location.href) || [, ""])[1].replace(/\+/g, "%20")) || null);},

4、记得在data中添加

payList: {},

code: "",

h5实现 — 跳转到微信输入密码支付相关推荐

微信URL Scheme码+长链接转短链接+短链接通过h5页面跳转到微信小程序
微信URL Scheme码+长链接转短链接+短链接通过h5页面跳转到微信小程序 --生成微信URL Scheme码-->长链接转换成短链接-->通过短信进行推广-->用户访问营销短信 ...
H5静态页面跳转微信小程序；从外部浏览器，点击H5链接跳转打开微信小程序；以及在微信内直接点击H5链接打开微信小程序；
参考链接需求:从外部浏览器,点击H5链接跳转打开微信小程序:以及在微信内直接点击H5链接打开微信小程序: 步骤1: 小程序开发需要使用云开发创建项目,使用云开发生成的项目会自带云函数文件夹: 步骤2 ...
h5页面跳转到微信小程序之利用URL Scheme接口
利用URL Scheme接口无感跳转微信小程序首先想要跳转到微信小程序得先知道AppID和secret 如果不知道的情况下是无法跳转的 urlscheme.generate 此时遇到一个问题是获取a ...
H5网页跳转至微信小程序
文档链接点击跳转版本要求: 微信版本要求为:7.0.12及以上. 系统版本要求为:iOS 10.3及以上.Android 5.0及以上. 好消息,H5网页接入公众号的JSSDK以后可以跳转到小程序 ...
H5页面跳转关注微信公众号页面
实现点击就跳转到关注公众号的页面,如下图:如果已关注,就会是发消息,如果未关注,发消息的按钮就会是关注实现步骤: 1.登录微信公众号后台,F12打开网页调试模式 2.打开Sources,搜索:uin ...
微信h5 签名错误 php,【微信jsApi 支付】微信内H5调起支付时，提示“验证签名失败”...
1) 使用微信的在线签名工具检查签名是否和程序生成的一致选择MD5,XML,然后把请求参数xml放进去,就能校验签名. 2)如果和微信的在线签名工具一致,说明程序没有错误,确定是API密钥错误(被别 ...
微信浏览器iframe嵌套h5，h5页面不能调起微信支付问题处理
微信浏览器iframe嵌套h5,h5页面不能调起微信支付问题处理第一步: 微信公众号配置网页授权域名,拿用户openid 第二步: h5页面跳转后端微信静默授权,拿到用户的openid 第三步: 微 ...
app内嵌h5支付功能，跳转支付宝微信，vue组件
一.功能梳理 app内前h5涉及到支付的功能,ios非实物商品实付需要使用ios原生支付方式,实物商品则可以三方支付,主要的实现思路为后端返回跳转支付宝或微信的支付scheme链接,前端进行跳转支付, ...
js如何调用h5的日期控价_微信公众号支付H5调用支付解析
最近项目需要微信支付,然后看了下微信公众号支付,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验. 一.配置公众号微信支付 ...

h5实现 — 跳转到微信输入密码支付

h5实现 — 跳转到微信输入密码支付相关推荐

最新文章

热门文章