详解在vue使用weixin-js-sdk常见使用方法

 更新时间:2021年05月07日 10:04:08   作者:小三_  
这篇文章主要介绍了 详解在vue使用weixin-js-sdk常见使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

链接:https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E5.BC.95.E5.85.A5JS.E6.96.87.E4.BB.B6

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))

    Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))

    今天小编就为大家分享一篇Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML)),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • Vue3中埋点指令封装详解

    Vue3中埋点指令封装详解

    对于Vue项目来说,如果遇到一个埋点的需求,我们最好的解决方案就是封装一个指令,所以本文就来和大家详细讲讲具体是如何封装埋点指令的吧
    2023-08-08
  • vue封装tree组件实现搜索功能

    vue封装tree组件实现搜索功能

    本文主要介绍了vue封装tree组件实现搜索功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue使用swiper插件实现垂直轮播图

    vue使用swiper插件实现垂直轮播图

    这篇文章主要介绍了vue使用swiper插件实现垂直轮播图,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue.js3.2的vnode部分优化升级使用示例详解

    Vue.js3.2的vnode部分优化升级使用示例详解

    这篇文章主要为大家介绍了Vue.js3.2的vnode部分优化升级使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue前端框架—Mint UI详解(更适用于移动端)

    vue前端框架—Mint UI详解(更适用于移动端)

    这篇文章主要介绍了vue前端框架—Mint UI的详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Element-Plus的ClickOutside指令导致内存泄漏的解决办法

    Element-Plus的ClickOutside指令导致内存泄漏的解决办法

    这篇文章给大家介绍了Element-Plus的ClickOutside指令导致内存泄漏的解决办法,文中给出了详细的解决办法,遇到同样问题的小伙伴可以参考阅读一下本文
    2024-01-01
  • Vue组件之间的数据共享详解

    Vue组件之间的数据共享详解

    这篇文章主要为大家介绍了Vue组件之间的数据共享,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • 通过vue写一个瀑布流插件代码实例

    通过vue写一个瀑布流插件代码实例

    这篇文章主要介绍了通过vue写一个瀑布流插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • 浅谈Vue.nextTick 的实现方法

    浅谈Vue.nextTick 的实现方法

    本篇文章主要介绍了Vue.nextTick 的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论