这里用的是 vue项目;

首先在mounted中判断是否有openId,如果没有,则去获取

let openid = localStorage.getItem('openid');
if (!openid || openid == 'null' || openid == 'undefined') {
this.getWechatOauth();
}
 //获取微信openId
async getWechatOauth() {
const code = this.GetQueryString('code') //获取code
let local = window.location.href; //获取当前路由 ----------- 这个路由需要至少在test的环境,并且被添加在appId对应的公众号中
if(!code) { //在当前路由中获取不到code
const APPID = process.env.VUE_APP_BASE_WECHAT_APPID
//scope=snsapi_base snsapi_base-不弹出授权页面,直接跳转,只能获取用户openid; snsapi_userinfo-弹出授权页面,可通过openid拿到昵称、性别、所在地
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_base#wechat_redirect'
}else { //获取到code,继续获取openId
this.wechatOauth(code)
}
},
//微信授权
async wechatOauth(code){
// 通过后端提供的接口,获取openId,
wechatOauth({code:code}).then(res => {
localStorage.setItem('openid', res.id);
})
}
//从路由中获取code
GetQueryString (name) {
const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
const r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]);
return null;
},

以上内容最好在进入页面是获取到,也可以在调起支付前完成,看心情,推荐进入页面获取

//  获取到openId之后,调起支付时调用该方法
onBridge() {
let { appid, nonce_str, sign, prepay_id, timestamp } = this.charge; //这里面的参数是调用支付的必要参数,如果可以的话可以让后端统一返回
let _this = this;
WeixinJSBridge.invoke(
"getBrandWCPayRequest", _this.charge,
wxResponse => {
if (wxResponse.err_msg == "get_brand_wcpay_request:ok") {
Toast('支付成功');
this.$router.replace({path:'成功后跳转的页面',query:{'参数'}})
}
if (wxResponse.err_msg == "get_brand_wcpay_request:fail") {
Toast.fail('支付失败');
}
if (wxResponse.err_msg == "get_brand_wcpay_request:cancel") {
Toast.fail('支付取消');
}
}
); },

H5调用微信支付的更多相关文章

  1. 微信公众号内H5调用微信支付国内服务商模式

    最近在折微信公众号内H5用JSAPI调用微信支付,境内服务商版支付,微信支付给出的官方文档以及SDK不够详细,导至我们走了一些弯路,把他分享出来,我这边主要是用PHP开发,所以未加说的话示例都是PHP ...

  2. h5调用微信支付功能

    支付按钮的点击事件 $(´.Save_Patient_Msg´).click(function(){ $(´.Save_Patient_Msg´).off(´click´); var hrdfId = ...

  3. 前端如何在h5页面调用微信支付?

    在微信服务号开发的时候经常会遇到微信支付的功能实现,通过实际经验自己总结了一下,前端在H5页面调起微信支付有两种办法,一是利用内置对象,二是通过引用微信的js sdk,亲测都能支付成功,从写法上来看用 ...

  4. h5内嵌微信小程序,调用微信支付功能

    在小程序中不能使用之前在浏览器中配置的支付功能,只能调用小程序专属的api进行支付. 因为需要在现在实现的基础上,再添加在小程序中调用微信支付功能,所以我的思路是这样的 1.在点击支付按钮时,判断是不 ...

  5. 基于H5的微信支付开发详解

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  6. ****基于H5的微信支付开发详解[转]

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  7. ***PHP基于H5的微信支付开发详解(CI框架)

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  8. WAP调用微信支付https://pay.weixin.qq.com/wiki/doc/api/wap.php?chapter=15_1

    公司做的一个购物网站 之前微信版的网站要搬在webView上   可是微信支付是个问题 , 在外部浏览器怎么都发不起微信请求 , 原因是因为页面调用的微信浏览器自带JSAPI 在外部浏览器无法调用,但 ...

  9. 微信公众号支付(三):页面调用微信支付JS并完成支付

    一.调用微信的JS文件 1.首先要绑定[JS接口安全域名],“公众号设置”的“功能设置”中 2.引入JS文件 备注:支持使用 AMD/CMD 标准模块加载方法加载 <script type=&q ...

随机推荐

  1. GitHub中Fork来的仓库如何进行双向更新

    一.做点贡献 想对别人的某个仓库"做点贡献"怎么办? 1. Fork该仓库 首先Fork该仓库,本文以git-learn这个仓库为例 这样自己的账号下就会出现这样一个仓库 2. C ...

  2. 使用fit-content撑开子元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Nuget打包并上传教程

    一.准备 1 . 下载 Download NuGet.exe 2 . windows 系统下设置环境变量 path中 或者 在dos 命令窗口下cd转到 nuget.exe 所在目录,这里为了每次使用 ...

  4. YII http缓存

    http禁止缓存原理 header('Expires: 0'); header('Last-Modified: '. gmdate('D, d M Y H:i:s') . ' GMT'); heade ...

  5. GreatSQL特性介绍及前景展望 | 数据技术嘉年华2021分享PPT发布

    欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. 全 ...

  6. [GYCTF2020]Ezsqli-1|SQL注入

    1.打开界面之后在输入框进行输入测试,分别输入1.2.3.'等字符,结果如下: 2.看到bool(false)这里我想到了bool注入,因为之前做过这道题:https://www.cnblogs.co ...

  7. synchronized原理剖析

    synchronized原理剖析 并发编程存在什么问题? 1️⃣ 可见性 可见性:是指当一个线程对共享变量进行了修改,那么另外的线程可以立即看到修改后的最新值. 案例演示:一个线程A根据 boolea ...

  8. 【Django】DRF开发中的一些技巧记录

    问题记录 问题1:信号没有按预期触发 描述 编写了信号函数后,并没有如预期一般在必要时候触发,函数如下: @receiver(signals.post_save, sender=Prometheus) ...

  9. 058_末晨曦Vue技术_过渡 & 动画之过渡的类名

    进入/离开 & 列表过渡 点击打开视频讲解更加详细 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class ...

  10. KingbaseES 数据库参数优化

    一.数据库应用类型 针对不同的应用模型,需要对数据库配置进行优化: 1.网络应用程序(WEB) ​通常受 CPU 限制 DB比RAM小得多 90% 或更多的简单查询 2.在线事务处理 (OLTP) ​ ...