基于vue 的h5微信分享

之前一直都是使用的html，jquery，js等做的微信分享，现在项目都改用vue做了，但是微信分享还是要接入的，这里简单分享一下移动端vue如何接入微信分享。

1.首先安装微信分享依赖

 npm install weixin-js-sdk --save

2.一般我会在src/utils目录下新建weixinSDK.js(可凭个人习惯自行创建到相应位置)。weixinSDK.js用来封装我们的分享接口。

import wx from 'weixin-js-sdk' // 引入微信SDK
import {commFunc} from "./util";引入工具函数

3.权限验证 接入微信接口的最主要也是最重要一步步就是填写下面这些信息，填完这些信息之后，基本就好了。

/**
 * @param {data} 后端返回的基本配置数据
 * @param {param} 页面传过来的数据
 */
function initAPIs(data,param) {
  wx.config({
        debug: false ,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId:response.app_id, // 必填，公众号的唯一标识
        timestamp:response.timestamp, // 必填，生成签名的时间戳
        nonceStr:response.nonce_str, // 必填，生成签名的随机串
        signature:response.signature,// 必填，签名，见附录1
        jsApiList: [
            // 必填，所有要调用的 API 都要加到这个列表中
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQZone',
            'onMenuShareQQ',
            'onMenuShareWeibo'
        ]
    });
    wx.ready(function () { // 在这里调用 API
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title:shareInfo.name, // 分享标题
            desc:shareInfo.desc, // 分享描述
            link: shareInfo.url, // 分享链接
            imgUrl: shareInfo.img, // 分享图标
            success: function (){ // 用户确认分享后执行的回调函数
                //alert('分享成功');
            },
            cancel: function (){ // 用户取消分享后执行的回调函数
                //alert('取消分享');
            },
            fail: function(){ // 用户分享失败后执行的回调函数
                //alert('分享失败');
            }
        });
        //分享给朋友
        wx.onMenuShareAppMessage({
            title:shareInfo.name, // 分享标题
            desc:shareInfo.desc, // 分享描述
            link: shareInfo.url, // 分享链接
            imgUrl: shareInfo.img, // 分享图标
            success: function (){ // 用户确认分享后执行的回调函数
                // alert('分享朋友成功');
            },
            cancel: function (){ // 用户取消分享后执行的回调函数
                // alert('取消分享朋友');
            },
            fail: function(){ // 用户分享失败后执行的回调函数
                // alert('分享朋友失败');
            }
        });
        //分享到qq
        wx.onMenuShareQQ({
            title:shareInfo.name, // 分享标题
            desc:shareInfo.desc, // 分享描述
            link: shareInfo.url, // 分享链接
            imgUrl: shareInfo.img, // 分享图标
            success: function (){ // 用户确认分享后执行的回调函数
                //alert('分享qq成功');
            },
            cancel: function (){ // 用户取消分享后执行的回调函数
                //alert('取消分享qq');
            },
            fail: function(){ // 用户分享失败后执行的回调函数
                //alert('分享qq失败');
            }
        });
        //分享到qq空间
        wx.onMenuShareQZone({
            title:shareInfo.name, // 分享标题
            desc:shareInfo.desc, // 分享描述
            link: shareInfo.url, // 分享链接
            imgUrl: shareInfo.img, // 分享图标
            success: function (){ // 用户确认分享后执行的回调函数
                //alert('分享qq空间成功');
            },
            cancel: function (){ // 用户取消分享后执行的回调函数
                //alert('取消分享qq空间');
            },
            fail: function(){ // 用户分享失败后执行的回调函数
                //alert('分享qq空间失败');
            }
        });
        wx.onMenuShareWeibo({
            title:shareInfo.name, // 分享标题
            desc:shareInfo.desc, // 分享描述
            link: shareInfo.url, // 分享链接
            imgUrl: shareInfo.img, // 分享图标
            success: function (){ // 用户确认分享后执行的回调函数
                //alert('分享微博成功');
            },
            cancel: function (){ // 用户取消分享后执行的回调函数
                //alert('取消微博空间');
            },
            fail: function(){ // 用户分享失败后执行的回调函数
                //alert('分享微博失败');
            }
        });
    })
} 

上面这些信息通常是通过后端接口来获取的，向后端请求数据的方法如下。

/**
 * @param {param} 页面传过来的数据
 * 注意address.weChatSignCheck是封装在apiAdd.js中的url, httpGet是api.js中的axios封装。
 */
 
function sign(param) {
  var pageUrl = window.location.href
  httpGet(address.weChatSignCheck + '?pageUrl=' +pageUrl).then((res) => {
  param.downloadUrl = res.data.downloadUrl
  initAPIs(res.data,param)
  })
}

这里要注意的就是url的问题，如果url没有正确传递，后端也会返回信息，但是签名信息会是错误的。完整url指的是：‘http(s)😕/’ 部分，以及’？‘后面的GET参数部分,但不包括’#'hash后面的部分。可以通过location.href来获取。

注意： 如果你的vue项目，路由没有开启history模式,也就是你的url上面包含“#”，这个时候要从后端正确获取签名，就需要去掉url上#后面的字符。（url去掉’#‘hash部分，可用location.href.split(’#’)[0]）

基于vue的微信分享其实很简单 大家有不理解的地方欢迎在留言