首先,在公众号后台配置h5页面地址

开发流程

1.通过配置h5地址,获取code。再通过code,获取openid

getOpenid(){
  let url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx697881XXXXXXXX&redirect_uri=https://XXXXX.com&response_type=code&scope=snsapi_userinfo&state=access#wechat_redirect'
  let self = this;   
  let access_code=this.GetQueryString('code');   
  let local = window.location.href;   
  if (access_code == null) {     
    window.location.href = url;   
  } else {     
    self.curCode = access_code;     
    self.$axios.get(self.baseUrl+'/api/weixin/openid/'+ self.curCode).then(res =>{       
      if(res.data.data.openid == ''){         
        window.location.href = url;
      }       
      self.openid = res.data.data.openid;
      self.token = res.data.data.token;
      localStorage.setItem('openid',self.openid);
      self.getCerList();     
    })   
  }
},
GetQueryString(name){
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg)
if(r!=null)return unescape(r[2]); return null;
}
 

将获取到的openid和token保存起来(有时获取的openid为空,可以重新再获取一遍)

2.提交支付,获取 prepay_id 和 appid

   saveForm: function () {
var self = this;
if(!self.checkForm()){
self.$toast.center('输入有误,请检查');
return false;
}
var data = {
cert_id:self.curCertId,
cert_name:self.curCertName,
cert_type:0,
wechat_id: localStorage.openid
}
self.$axios({
method:"post",
url:self.baseUrl+'/api/v1/weixin/applicants/users',
headers:{
'Content-Type': 'application/json'
},
data:data,
}).then((res)=>{
if(res.data.success){
self.getOrderMsg();
}else{
self.$toast.center(res.data.msg);
}
})
},
getOrderMsg(){
let self = this;
let openid = localStorage.getItem('openid');
self.$axios({
method:"get",
url:self.baseUrl+'/api/v1/weixin/wxorder/'+ openid +'/'+ self.curCertId,
}).then((res)=>{
if(res.data.success){
let data = res.data.data;
let price = data.price;
if(price == 0){//免费
this.$router.push({path:'/Wait'});
}else{
let appid = data.appid;
let prepayid = data.prepay_id;
let name = data.name;
let apikey = data.apikey;
let orderid = data.orderid; this.$router.push({path:'/Order',query:{appid:appid,prepayid:prepayid,price:price,name:name,orderid:orderid,apikey:apikey}});
} }else{
self.$toast.center(res.data.msg);
}
}) },

3.参见 微信开发文档,逐一获得相关参数

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

data() {
return {
prepayid:'',
price:'',
name:'',
orderid:'',
apikey:'', timestamp:'',
time:0,
orderData:{
appId:'',
nonceStr:'',
package:'',
signType:'MD5',
timeStamp:'',
},
paySign:'',
}
}
  getParams: function(){
var self = this;
self.orderData.appId = self.$route.query.appid;
self.orderData.package = 'prepay_id=' + self.$route.query.prepayid;
self.price = Number(self.$route.query.price)/100;
self.name = self.$route.query.name;
self.orderid = self.$route.query.orderid;
self.apikey = self.$route.query.apikey; self.getOrderData();
},
getOrderData(){
this.getTimeStamp();//获取时间戳
this.orderData.nonceStr = this.getNonceStr(32);//获取32位随机数
this.getPaySign(this.orderData);//生成签名
},

获取时间戳参数

getTimeStamp(){
const DATE = new Date();
this.orderData.timeStamp = Date.parse(DATE)/1000 + '';//秒数 例如:1414561699
this.time = this.formatDate();
}
    formatDate() {//时间格式
let date = new Date();
let y = date.getFullYear();
let MM = date.getMonth() + 1;
MM = MM < 10 ? ('0' + MM) : MM;
let d = date.getDate();
d = d < 10 ? ('0' + d) : d;
let h = date.getHours();
h = h < 10 ? ('0' + h) : h;
let m = date.getMinutes();
m = m < 10 ? ('0' + m) : m;
let s = date.getSeconds();
s = s < 10 ? ('0' + s) : s;
return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
}

获取随机数参数

  getNonceStr(n){//生成 n 位随机数
let chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
let res = "";
for(let i = 0; i < n; i++) {
let id = Math.ceil(Math.random() * 35);
res += chars[id];
}
return res; }

生成签名

    getPaySign(obj){
let self = this;
const params = [];
Object.keys(obj).forEach((key) => {
let value = obj[key]
// 如果值为undefined我们将其置空
if (typeof value === 'undefined') {
value = ''
}
// 对于需要编码的文本(比如说中文)我们要进行编码
// params.push([key, encodeURIComponent(value)].join('='))
params.push([key, value].join('='))
})
let stringA = params.join('&');
let stringSingTemp = stringA + '&key='+self.apikey;
let sign = md5(stringSingTemp).toUpperCase();
self.paySign = sign;
var testparams = {
"appId":self.orderData.appId, //公众号名称,由商户传入
"timeStamp":self.orderData.timeStamp, //时间戳,自1970年以来的秒数
"nonceStr":self.orderData.nonceStr, //随机串
"package": self.orderData.package,
"signType":self.orderData.signType, //微信签名方式:
"paySign":self.paySign, //微信签名
'key':self.apikey
} }

可以通过 签名校验工具 进行验证

4.调起微信支付接口

    pay(){
let self = this;
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady',self.onBridgeReady,false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', self.onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', self.onBridgeReady);
}
}else{
self.onBridgeReady();
} },
   onBridgeReady(){
let self = this;
var params = {
"appId":self.orderData.appId,//公众号名称,由商户传入
"timeStamp":self.orderData.timeStamp,//时间戳,自1970年以来的秒数
"nonceStr":self.orderData.nonceStr,//随机串
"package": self.orderData.package,
"signType":self.orderData.signType,//微信签名方式:MD5
"paySign":self.paySign,//微信签名
};
WeixinJSBridge.invoke('getBrandWCPayRequest',params ,function(res){
if(res.err_msg == "get_brand_wcpay_request:ok"){
self.$router.push('/Wait');
}else if(res.err_msg == "get_brand_wcpay_request:cancel"){
self.$toast.center('取消支付!');
}else{
alert(JSON.stringify(res));
}
});
},

这是调起支付密码页面

支付成功后跳转到wait等待页面

Vue — 微信公众号内置h5支付相关的更多相关文章

  1. 微信公众号内唤起h5支付详解

    1.调用统一下单的接口URL地址:https://api.mch.weixin.qq.com/pay/unifiedorder 2.调用统一下单必传参数: appid:需要进行支付功能的公众号的app ...

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

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

  3. vue微信公众号、H5微信支付

    1.H5微信支付 后台会返回一个URL,前端直接跳转就OK(需要你传给后台一个ip,必须保证在同一域名下) 使用window.location.href =res.data;进行页面跳转到支付界面(r ...

  4. 微信公众号中的支付宝支付与微信支付 &amp;&amp; 支付宝支付问题(微信bug)

    一般,在微信公众号中的商城都是需要支持微信支付和支付宝支付的,当然,较大的公司对于鹅厂和阿里的站队就不说了,所以这里简单记录一下支付宝支付和微信支付的主要流程.说是简单介绍,这是因为确实不难,因为前端 ...

  5. asp.net mvc下实现微信公众号(JsApi)支付介绍

    本文主要讲解asp.net mvc框架下公众号支付如何实现,公众号支付主要包括三个核心代码,前台调起支付js代码.对应js调用参数参数生成代码.支付成功处理代码. 一.微信支付方式介绍 微信提供了各种 ...

  6. 关于微信公众号内嵌网页的几个meta标签

    最近在做微信公众平台内嵌app,其实也就是web app="=,不过就是基于微信内置浏览器(safari加了一个WeixinJS对象),稍微记一下几个html的meta标签(web app通 ...

  7. nodejs vue 微信公众号开发(二)申请微信测试号

    1.打开微信测试公众号开发平台http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 扫码登陆

  8. vue 微信公众号分享后支付失效页面URL不变的坑

    微信分享后支付页面还是初始页面,这个问题解决了, created(){ //判断是否是IOS设备 // IOS分享时的页面是首页,也就是进入页而不是当前页.所有可以采用刷新当前页,让进入页的链接改成当 ...

  9. node vue 微信公众号(四)配置环境 本地测试

    1.去natap 配置端口号 //本地项目是8080端口,natapp就配置8080端口 2.ngrok配合vue-cli实现外网访问 1.去 https://ngrok.com/download 下 ...

随机推荐

  1. Windows Server 2008配置服务器证书[转载]

    备忘 http://wangchunhai.blog.51cto.com/225186/139451

  2. python基础(三)序列

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 谢谢thunder424纠错 sequence 序列 sequence(序列)是一 ...

  3. .Net Core 自定义序列化格式

    序列化对大家来说应该都不陌生,特别是现在大量使用WEBAPI,JSON满天飞,序列化操作应该经常出现在我们的代码上. 而我们最常用的序列化工具应该就是Newtonsoft.Json,当然你用其它工具类 ...

  4. 使用linux perf工具生成java程序火焰图

    pre.cjk { font-family: "Nimbus Mono L", monospace } p { margin-bottom: 0.1in; line-height: ...

  5. Oracle启动操作

    转自:https://www.cnblogs.com/mellowsmile/p/4610942.html 1.启动oracle数据库: 从root切换到oracle用户进入:su - oracle ...

  6. pip使用豆瓣的镜像源

    豆瓣镜像地址:https://pypi.douban.com/simple/ 虽然用easy_install和pip来安装第三方库很方便 它们的原理其实就是从Python的官方源pypi.python ...

  7. Vue 项目架构设计与工程化实践

    来源 文中会讲述我从0~1搭建一个前后端分离的vue项目详细过程 Feature: 一套很实用的架构设计 通过 cli 工具生成新项目 通过 cli 工具初始化配置文件 编译源码与自动上传CDN Mo ...

  8. k8s中新建一个namespace和harborsecret的yaml文件

    注意哟, 不同的harborsecret,在不同的namespace中,是不共用的. 也就是说,如果在default名字空间中,创建了一个docker login secret, 在其它名字空间中,是 ...

  9. leetcode453

    public class Solution { public int MinMoves(int[] nums) { var list = nums.OrderBy(x => x).ToList( ...

  10. EcmaScript对象克隆之谜

    先谈谈深拷贝 如何在js中获得一个克隆对象,可以说是喜闻乐见的话题了.相信大家都了解引用类型与基本类型,也都知道有种叫做深拷贝的东西,传说深拷贝可以获得一个克隆对象!那么像我这样的萌新自然就去学习了一 ...