详解在vue使⽤weixin-js-sdk常见使⽤⽅法
1.导⼊依赖包
npm install weixin-js-sdk
2.判断是否是在浏览器中
env.js
<script>
var ua = LowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
var isAndroid = ua.indexOf('android') != -1;
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if(!isWeixin) {
document.head.innerHTML = '<title>抱歉，出错了</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="res.wx.qq/open/libs/weui/0.4.1/weu  document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title">请在客户端打开链接</h4></div></div>';
}
在main.js中引⽤:
import env from "./env";//运⾏环境
登录，通过code换取openid，在起始页使⽤该⽅法:
<script>
methods:{
// 登陆
wxLogin() {
var that = this;
axios
.get("/common/loginAuth")
.then(function(res) {
console.log("后台返回的链接地址", res.data);
window.location.href = res.data;//跳转后台返回的链接地址
})
.catch(function(error) {});
},
//换取⽤户信息
postCode(res) {
var that = this;
axios
.post("/common/getUserInfo", {
code: res
})
.then(function(res) {
cookie.set("openid", res.data.openid);//code像后台换取openid并存⼊
})
.catch(function(error) {
console.log(error);
});
}},
sdkcreated() {
var r = window.location.href;//获取当前链接，拆分当前链接
//当前链接地址为后台返回的参数，有拆分得到链接中的code，通过postCode()⽅法获取openid，没有则通过wxLogin()⽅法开始登录
if (r.indexOf("?") != -1) {
r = r.split("?");
r = r[1].split("&");
r = r[0].split("=");
r = r[1];
} else {
this.wxLogin();
}
if (r) {
this.postCode(r);
} else {
this.wxLogin();
}
},
</script>
3.前端页⾯使⽤
import wx from 'weixin-js-sdk'
this.axios({
  method: 'post',
  url: 'url',
  data:{ url:location.href.split('#')[0] } //向服务端提供授权url参数，并且不需要#后⾯的部分
}).then((res)=>{
  wx.config({
    debug: true, // 开启调试模式,
    appId: res.appId, // 必填，企业号的唯⼀标识，此处填写企业号corpid
    timestamp: res.timestamp, // 必填，⽣成签名的时间戳
    nonceStr: Str, // 必填，⽣成签名的随机串
    signature: res.signature,// 必填，签名，见附录1
    jsApiList: ['scanQRCode'] // 必填，需要使⽤的JS接⼝列表，所有JS接⼝列
  });
})
到此这篇关于详解在vue使⽤weixin-js-sdk常见使⽤⽅法的⽂章就介绍到这了，更多相关vue weixin-js-sdk内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。