vue 授权获取微信openId操作


Posted in Javascript onNovember 13, 2020

1、获取url中参数code; 根据code 获取openId;调用后台接口获取openId 。

参考文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

function getUrlKey(name){//获取url 参数
 return decodeURIComponent((new RegExp('[?|&]'+name+'='+'([^&;]+?)(&|#|;|$)').exec(location.href)||[,""])[1].replace(/\+/g,'%20'))||null;
 }
 
function getCodeApi(state){//获取code 
 let urlNow=encodeURIComponent(window.location.href);
 let scope='snsapi_base'; //snsapi_userinfo //静默授权 用户无感知
 let appid='wx4cc5d5c123123123';
 let url=`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${urlNow}&response_type=code&scope=${scope}&state=${state}#wechat_redirect`;
 window.location.replace(url);
}

//注意代码放置位置
export default {
 created(){
 let code=getUrlKey("code");//获取url参数code
 if(code){ //拿到code, code传递给后台接口换取opend
 getOpenIdApi(code).then(res=>{
   console.log(res);
  }).catch(res=>{})
 }else{
 getCodeApi("123");
 }
 }
}

补充知识:vue 微信公众号支付 jssdk jsapi实现微信支付(完整版)

是自己项目里支付功能测试成功后的代码参考,希望能帮助到曾和我一样想找到有效参考借鉴的朋友们,

废话不多说,直接讲具体的操作规程及完整代码

代码部份:

一、vue的环境配置:

1. 先在当前项目的命令行工具里安装npm install weixin-jsapi

2. 在当前支付页面引用该weixin-jsapi

import wx from 'weixin-jsapi'

二、调用后台接口,正式使用jssdk:

created(){
 this.userId = JSON.parse(Cookie.get("user")).id;//这是在我页面需要获取的userid,不需要的可自行删悼,不在支付代码范围
 this.getConfig();,
},
methods: {
 getConfig(){
 console.log(window.location.href);
 var url = window.location.href;
 this.$http.post('**此处写后台提供获取jsapi相关配置的接口**',{
  encodeUrl:Encrypt(url.split("#")[0]) //直接丢弃#及后面的字符串 注意这里Encrypt因为我的项目里使用了ase加密解密,所以这么写的
 })
 .then(function(response) {
  if(response.data.flag == true){
  var data = JSON.parse(Decrypt(response.data.data));//将解密后的字符串转为对象 Decrypt这里是解密,不需要的就直接过滤悼
  console.log(data);
  //下列的data.均为后台接口返回的字段,比如我的项里里返回的是 appid,timestamp,nonceStr,signature
  wx.config({
   debug: ture,//这里一般在测试阶段先用ture,等打包给后台的时候就改回false,
   appId: data.appid,
   timestamp: data.timestamp, 
   nonceStr: data.noncestr, 
   signature: data.signature,
   jsApiList: ['chooseWXPay']
  })
  wx.ready(function(){
   wx.checkJsApi({
   jsApiList: ['chooseWXPay'],
   success:function(res){
    console.log("seccess")
    console.log(res)
   },
   fail:function(res){
    console.log("fail");
    console.log(res)
   }
   })
  })
  }else{
  Toast({
   message: response.data.detailMsg
  });
  }
 }).catch(function(error){
  Toast({//提示引用的是mint-UI里toast
  message: '获取config失败,请重试'
  });
 });
 },
 //报名缴费 ( 支付按钮绑定@click="toapply()"事件)
 toapply(id){ 
 var $this = this;
 this.$http.post('**此处写后台提供的获取支付json数据接口**',{
  encodeStr:Encrypt(id)//项目里的加密
 })
 .then(function(response) {
  if(response.data.flag == true){
  var data = JSON.parse(Decrypt(response.data.data));//将解密后的字符串转为对象
  console.log(data);
  wx.ready(function(){
   wx.chooseWXPay({
   appId:data.appId,
   timestamp: data.timeStamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
   nonceStr: data.nonceStr, // 支付签名随机串,不长于 32 
   package: data.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
   signType: data.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
   paySign: data.paySign, // 支付签名
   success: function (res) {
    //跳转到支付成功页面有这个页面
    $this.$router.push({
    path: "/success_page",
    name:"success_page"
    })
    console.log(res);
   },
   cancel: function (res) {//提示引用的是mint-UI里toast
    Toast('已取消支付');
   },
   fail: function (res) {
    Toast('支付失败,请重试');
   }
   })
  })
  }else{
  Toast({
   message: '获取支付信息失败,请重试',
  });
  }
 }).catch(function(error){
  Toast({
  message: '获取订单信息失败,请重试',
  });
  console.log(error);
 });
 },
}

这里代码部份完成后,就支付测试看看提示,如若弹出以下提示说明签名是正确的

vue 授权获取微信openId操作

二、商户和公众号后台配置

1.先去商户号后台里配置url域名:商户平台?>产品中心?>开发配置

vue 授权获取微信openId操作

然后到微信公众号后台,公众号设置/功能设置里配置url域名

ps:这里要与商户后台里的配置域名同步

vue 授权获取微信openId操作

代码和配置都完成后,测试结果如下:

vue 授权获取微信openId操作

最后,讲讲我在支付过程中遇到的问题:

因为微信支付众所周知的测试麻烦,我是直接完成代码后打包给后台发布正式环境测试的,测试过程中一直出现以下的弹窗提示信息:

vue 授权获取微信openId操作

排除法,代码里的签名没有bug的情况下,还一直出现这个提示,那就只有一个问题,url路径配置,网上查了很多说url路径中不能带# ,说是需要把把路由的hash模式改为hostry模式,如下:

vue 授权获取微信openId操作

还说让后台也需要做去悼#相应的改动,按这个方法打包给后台测试 ,结果页面就出现404了,行不通,所以我是利用处理如下:

url.split("#")[0]直接丢弃#及后面的字符串

后台没有作#处理,后面就发现我们是商户后台没有配置url域名这个问题,是这里面的域名配置不能带有#, 配置好后台之后,测试就成功了,还别说,测试成功的那一刻,倍儿有成功感了

以上这篇vue 授权获取微信openId操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript编程起步(第三课)
Feb 27 Javascript
让js弹出窗口居前显示的实现方法
Jul 10 Javascript
JavaScript判断变量是对象还是数组的方法
Aug 28 Javascript
JavaScript中利用Array和Object实现Map的方法
Jul 27 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
利用vue + koa2 + mockjs模拟数据的方法教程
Nov 22 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
vue.js实现简单的计算器功能
Feb 22 Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 #Javascript
Vue实现boradcast和dispatch的示例
Nov 13 #Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 #Javascript
Vue 3.0中jsx语法的使用
Nov 13 #Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 #Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 #Javascript
PHP 502bad gateway原因及解决方案
Nov 13 #Javascript
You might like
几种显示数据的方法的比较
2006/10/09 PHP
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
jquery $.fn $.fx是什么意思有什么用
2013/11/04 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
2014/02/13 Javascript
javascipt:filter过滤介绍及使用
2014/09/10 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
微信小程序 出现47001 data format error原因解决办法
2017/03/10 Javascript
jQuery ajax动态生成table功能示例
2017/06/14 jQuery
Bootstrap Table从零开始
2017/06/30 Javascript
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
python调用shell的方法
2013/11/20 Python
python实现计算资源图标crc值的方法
2014/10/05 Python
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
python计算时间差的方法
2015/05/20 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
python利用 keyboard 库记录键盘事件
2020/10/16 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
美国婴儿服装购物网站:Gerber Childrenswear
2020/05/06 全球购物
军训自我鉴定
2014/01/22 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
关于安全的广播稿
2014/10/23 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书