详解在vue使用weixin-js-sdk常见使用方法
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要介绍了 详解在vue使用weixin-js-sdk常见使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
链接:
1.导入依赖包
npm install weixin-js-sdk
2.判断是否是在微信浏览器中
env.js
<script> var ua = navigator.userAgent.toLowerCase(); 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="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css" rel="external nofollow" >'; 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); }); }}, created() { 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: res.nonceStr, // 必填,生成签名的随机串 signature: res.signature,// 必填,签名,见附录1 jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表,所有JS接口列 }); })
到此这篇关于 详解在vue使用weixin-js-sdk常见使用方法的文章就介绍到这了,更多相关vue weixin-js-sdk内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO!
上一篇:如何写出优雅的JS 代码
下一篇:JavaScript函数中this指向问题详解