vue实现微信授权登录,微信获取用户openid
这篇文章主要介绍了某视频剪辑软件授权获取微信信息操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1、获取全球资源定位器(统一资源定位器)中参数代码；根据密码获取信息调用后台接口获取openId。
参考文档：https://mp.weixin.qq.com/wiki？t=resource/RES _ mainid=MP 1421140842
函数getUrlKey(name){//获取全球资源定位器(统一资源定位器)参数
返回decodeURIComponent((新的RegExp([？] name = ([^；] ?)(#;$)).exec(location.href)[， ])[1].替换(/\ /g， ) null
}
函数getCodeApi(state){//获取密码
let urlNow=encodeURIComponent(window。位置。href)；
let scope= snsapi _ base//snsapi _ userinfo//静默授权用户无感知
let appid= wx 4c C5 c 123123123
让URL=` https://打开。微信。QQ。com/connect/oauth 2/authorize？appid=$ { appid } redirect _ uri=$ { urlNow } response _ type=code scope=$ { scope } state=$ { state } # we chat _ redirect `；
窗户。位置。替换(URL)；
}
//注意代码放置位置
导出默认值{
已创建(){
let code=getUrlKey( code )；//获取全球资源定位器(统一资源定位器)参数密码
如果(代码){ //拿到代码，代码传递给后台接口换取开放的
getOpenIdApi(代码)。然后(res={
控制台。日志(分辨率)；
}).catch(res={})
}否则{
getCodeApi( 123 )；
}
}
}
补充知识：vue 微信公众号支付 jssdk jsapi实现微信支付（完整版）
是自己项目里支付功能测试成功后的代码参考，希望能帮助到曾和我一样想找到有效参考借鉴的朋友们，
废话不多说，直接讲具体的操作规程及完整代码
代码部份：
一、vue的环境配置：
1.先在当前项目的命令行工具里安装新公共管理安装微信-jsapi
2.在当前支付页面引用该微信-jsapi
从微信-jsapi 导入womens extra large size 女式特大号
二、调用后台接口，正式使用jssdk：
已创建(){
这个。userid=JSON。解析(cookie。get( user )).id；//这是在我页面需要获取的用户id，不需要的可自行删悼，不在支付代码范围
这个。getconfig()；
},
方法：{
getConfig(){
控制台。日志(窗口。位置。href)；
var URL=窗口。位置。href
这个http.post(**此处写后台提供获取支付插件相关配置的接口**,{
编码URL:加密(URL。split( # )[0])//直接丢弃#及后面的字符串注意这里加密因为我的项目里使用了美国证券交易所加密解密，所以这么写的
})。然后（函数（响应){
if(response.data.flag==true){
var data=JSON。解析(解密(响应。数据。数据))；//将解密后的字符串转为对象解释这里是解密，不需要的就直接过滤悼
console.log(数据);
//下列的数据。均为后台接口返回的字段，比如我的项里里返回的是appid，时间戳，非中心，签名
wx.config({
调试：真，//这里一般在测试阶段先用真的，等打包给后台的时候就改回假的，
appId: data.appid，
时间戳：数据.时间戳，
非中心：数据。非中心，
签名：数据。签名，
jsApiList: [chooseWXPay]
})
wx.ready(function(){
wx.checkJsApi({
jsApiList: [chooseWXPay]，
成功：函数(资源){
控制台。日志(“秒访问”)
console.log(res)
},
失败：函数(资源){
console.log(fail ).
console.log(res)
}
})
})
}否则{
吐司({
消息：response.data.detailMsg
});
}
}).接住(函数（错误){
吐司({//提示引用的是薄荷用户界面里烤
消息： 获取配置失败，请重试
});
});
},
//报名缴费（支付按钮绑定@click=toapply()事件)
应用(id){
var $ this=this
这个http.post(**此处写后台提供的获取支付数据数据接口**,{
encodeStr:Encrypt(id)//项目里的加密
})。然后（函数（响应){
if(response.data.flag==true){
var data=JSON。解析(解密(响应。数据。数据))；//将解密后的字符串转为对象
console.log(数据);
wx.ready(function(){
wx.chooseWXPay({
appId:data.appId，
Timestamp: data.timeStamp，//支付签名时间戳。注意，微信jssdk中所有使用的时间戳字段都是小写的。但是，最新版本的支付后台生成签名中使用的时间戳字段名应以S字符大写。
non centr:data . non centr，//支付签名的随机字符串，长度不超过32位
Package: data.package，//统一支付接口返回的prepay_id参数值，提交格式为：prepay_id=\*\*\*)
SignType: data.signType，//签名方式，默认为‘SHA1’，新版本的支付需要导入到‘MD5’中
Pay: data.paysign，//支付签名
成功：函数(res) {
//跳转到支付成功页面。有这一页
$这个。$router.push({
路径：“/success_page”，
名称：“成功页面”
})
console . log(RES)；
},
Cancel: function (res) {//提示是指mint-UI中的toast
Toast(取消付款)；
},
失败：函数(res) {
Toast(支付失败，请重试)；
}
})
})
}否则{
吐司({
消息：“获取支付信息失败，请重试”，
});
}
}).catch(函数(错误){
吐司({
消息：“无法获取订单信息，请重试”，
});
console.log(错误)；
});
},
}
这里完成代码部分后，付费测试，看到提示。如果弹出以下提示，则签名正确。
二、商户和公众号后台配置
1.去商家号后台配置url域名：商家平台-产品中心-开发配置。
然后进入微信微信官方账号后台，在微信官方账号设置/功能设置中配置url域名。
Ps:应该和商家后台配置的域名同步。
测试结果如下：
最后说说我在支付过程中遇到的问题：
因为微信支付在测试方面是出了名的麻烦，所以我直接把代码做完，打包到后台发布正式环境测试。在测试过程中，总是出现以下弹出消息：
排除，当代码中的签名没有bug时，这个提示会一直出现。那么就只有一个问题了，url路径配置。网上很多查询都说url路径不能带#说需要把路由的hash模式改成hostry模式，如下：
还说背景也需要做相应的改动来悼念#。按照这个方法，打包做后台测试，结果页面会出现404，不行，我用它处理如下：
Url.split(#)[0]直接丢弃#后面的字符串。
后台没有#处理，后来发现我们是一个后台没有配置url域名的商家，但是这里的域名配置不能有#。配置后台后，测试成功。更不用说，在试验成功的那一刻，贝儿觉得自己成功了。
以上获得微信openId运营的vue授权为边肖分享的全部内容。希望给大家一个参考，多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。