VueJs单页应用实现微信网页授权及微信分享功能示例-前端开发

下面我来为你详细讲解“VueJs单页应用实现微信网页授权及微信分享功能示例”的完整攻略。

下面我来为你详细讲解“VueJs单页应用实现微信网页授权及微信分享功能示例”的完整攻略。

简介

微信网页授权和微信分享功能是开发微信公众号和小程序时常用的功能，本文将介绍如何在VueJS单页应用中实现这两个功能。

微信网页授权

在公众平台中注册一个微信公众号，并且在公众号设置中添加JS接口安全域名，否则无法使用微信JS-SDK功能。
在网页中引入微信JS-SDK，并在获取到微信config参数后，调用微信的JS-sdk初始化函数。

例如，我们可以在VueJS的mounted生命周期中获取signature、appId等相关参数，并调用微信JS-SDK的初始化函数（代码示意）：

mounted() {
  this.$http.post('/wechat/get-jsconfig', {url: window.location.href}).then((res) => {
    wx.config({
      debug: false,
      appId: res.appId,
      timestamp: res.timestamp,
      nonceStr: res.nonceStr,
      signature: res.signature,
      jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
    });
  });
}

调用微信网页授权接口，获取用户信息。

首先，需要用户在微信客户端中打开网页，才能进行微信网页授权。当用户点击网页中的授权按钮时，需要调用微信授权接口，获取用户信息。

例如，在VueJS中，我们可以在获取微信config参数后，在需要授权的按钮点击事件中，调用微信授权接口（代码示意）：

wx.ready(function () {
  let that = this
  wx.checkJsApi({
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], 
    success: function () {
      wx.onMenuShareTimeline({
        title: '分享标题',
        link: '分享链接',
        imgUrl: '分享图标',
        success: function () { 
          // 分享成功回调
        },
        cancel: function () { 
          // 用户取消分享后执行的回调函数
        }
      });
      wx.onMenuShareAppMessage({
        title: '分享标题',
        desc: '分享描述',
        link: '分享链接',
        imgUrl: '分享图标',
        success: function () { 
          // 分享成功回调
        },
        cancel: function () { 
          // 用户取消分享后执行的回调函数
        }
      });
    }
  });
});

微信分享功能

在VueJS中实现微信分享功能，需要引入微信JS-SDK，并在获取到微信config参数后，调用微信的JS-sdk初始化函数。

首先，我们需要在VueJS的mounted生命周期中获取signature、appId等相关参数，并调用微信JS-SDK的初始化函数（代码示意）：

mounted() {
  this.$http.post('/wechat/get-jsconfig', {url: window.location.href}).then((res) => {
    wx.config({
      debug: false,
      appId: res.appId,
      timestamp: res.timestamp,
      nonceStr: res.nonceStr,
      signature: res.signature,
      jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage']
    });
  });
}

然后，在需要分享的按钮点击事件中，调用微信分享接口，设置分享标题、分享描述、分享链接、分享图标等参数（代码示意）：

wx.ready(function () {
  let that = this
  wx.checkJsApi({
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], 
    success: function () {
      wx.onMenuShareTimeline({
        title: '分享标题',
        link: '分享链接',
        imgUrl: '分享图标',
        success: function () { 
          // 分享成功回调
        },
        cancel: function () { 
          // 用户取消分享后执行的回调函数
        }
      });
      wx.onMenuShareAppMessage({
        title: '分享标题',
        desc: '分享描述',
        link: '分享链接',
        imgUrl: '分享图标',
        success: function () { 
          // 分享成功回调
        },
        cancel: function () { 
          // 用户取消分享后执行的回调函数
        }
      });
    }
  });
});

这样就完成了VueJS单页应用实现微信网页授权及微信分享功能的攻略。

示例说明：