这里用的是 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. python 操作xml、html文件

    简介 在一些项目中可能会使用到解析html文件,尤其是爬虫相关的,需要解析获取到的html内容,通常我们会使用lxml模块去进行html文件的解析. html文件 当前存在一个简单的html < ...

  2. YII学习总结3(session)

    session操作 <?php namespace app\controllers; use yii\web\Controller; class HelloController extends ...

  3. javascript引用奇趣

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

  4. CentOS Docker安装 && docker 基础指令

    1 # 直接从官网下载docker的安装命令包(docker已经很贴心将安装shell脚本帮我们准备好了) 2 curl -fsSL get.docker.com -o get-docker.sh 3 ...

  5. SkiaSharp 之 WPF 自绘 投篮小游戏(案例版)

    此案例主要是针对光线投影法碰撞检测功能的示例,顺便做成了一个小游戏,很简单,但是,效果却很不错. 投篮小游戏 规则,点击投篮目标点,就会有一个球沿着相关抛物线,然后,判断是否进入篮子里,其实就是一个矩 ...

  6. ToString()格式化输出

    C 货币 2.5.ToString("C") ¥2.50 D 十进制数 25.ToString("D5") 00025 E 科学型 25000.ToString ...

  7. Flutter-填平菜鸟和高手之间的沟壑

    Flutter-填平菜鸟和高手之间的沟壑 准备写作中... 1.Flutter-skia-影像,Flutter skia-图形渲染层.应用渲染层2.方法通道使用示例,用于演示如何使用方法通道实现与原生 ...

  8. 金灿灿的季节 - Apache DolphinScheduler收获5位新Committer

    在这个金灿灿的收获季节,经过 Apache DolphinScheduler PPMC 们的推荐和投票,Apache DolphinScheduler 收获了 5 位新Committer .他们是:n ...

  9. k8s vs k3s: 差异解析

    Kubernetes无疑是容器编排领域的领头羊.但目前,我们看到K3s或轻量级的Kubernetes发行版,轻巧.高效.快速,占用空间极小.鉴于目前企业对于在生产环境中使用K3s还是K8s感到纠结.我 ...

  10. fast json 乱序问题解决过程

    解决问题:保存到redis中的jsonstring在转回jsonObject的时候乱序: 解决方案:https://inlhx.iteye.com/blog/2312512 解决过程: 1 看fast ...