微信jssdk---h5分享封装

说到微信分享，其实挺坑的，刚对接的时候，以为可以像app端一样，通过自己写好的actionSheet来取分享，后来仔细阅读发现，调用的分享竟然是微信自己右上角更多的那个分享，如果不写的话，右上角那三个点点里是不包含微信分享的，这真是，坑到奶奶怀里去了。
而且最新官方通知，废弃了一部分接口，但是实测，你的jsApiList中要是不写那俩废弃的，还会报错，可能是半瘫痪状态吧。

QQ截图20201111152738.png

我们的代码写在上一次的wechat.js中了。只不过是加了一点点微信分享的东西，签名还是利用initJssdk方法，客官请看：

import { getWxConfig } from 'api/index/index.js';
import { wxPay } from 'api/index/index.js';
import wx from 'weixin-js-sdk'
export default {
    //判断是否在微信中  
    isWechat: function() {
        var ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/micromessenger/i) == 'micromessenger') {
            // console.log('是微信客户端')
            return true;
        } else {
            // console.log('不是微信客户端')
            return false;
        }
    },
    //初始化sdk配置  这个上篇文章有详细讲解，就不赘述了
    initJssdk: function(callback, url) {
        console.log(url)
        //服务端进行签名
        let data = {
            url: encodeURIComponent(url)
        }
        getWxConfig(data).then(res => {
            if (res.status == 1000) {
                if (res.data) {
                    wx.config({
                        debug: false,
                        appId: res.data.appId,
                        timestamp: res.data.timestamp,
                        nonceStr: res.data.nonceStr,
                        signature: res.data.signature,
                        //这里把分享的apilist里加上分享的接口名称
                        jsApiList: [
                            'checkJsApi',
                            'onMenuShareTimeline',
                            'onMenuShareAppMessage',
                            'updateAppMessageShareData',
                            'updateTimelineShareData'
                        ]
                    });
                    //配置完成后，再执行分享等功能  
                    if (callback) {
                        callback(res.data);
                    }
                }
            }
        }).catch(err => {})
    },

    //this.$wechat.share(data,url)封装后调用
    //在需要自定义分享的页面中调用  
    share: function(data, url) {
        //data是我们传递过来的需要分享的内容。
        //url是当前页面路径
        url = url ? url : window.location.href.split('#')[0];
        //每次都需要重新初始化配置，才可以进行分享  
        this.initJssdk(function(callback) {
            wx.ready(function() {
                var shareObject = {
                    title: data.title,//// 分享标题
                    desc: data.des,//// 分享描述
                    link: data.url,//分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: data.img,//// 分享图标
                    success: function(res) {
                        //业务回调
                    },
                    cancel: function(res) {
                        this.$toast({
                            icon: 'none',
                            title: '分享失败!',
                            duration: 1000
                        })
                    }
                };
                //分享给朋友及分享到QQ
                wx.updateAppMessageShareData(shareObject);
                //分享到朋友圈及分享到QQ空间  
                wx.updateTimelineShareData(shareObject);
            });
        }, url);
    },

}

我们看完代码会发现，分享其实也是那些操作，微信配置，签名。然后调用分享接口。只需要我们把握住它的api规则，这些都不是事儿。友情提示：细看代码中的注释,哈哈。
这样我们的微信分享就完成了，鉴于只能在微信环境内使用，个人觉得实在是意义不大，如果公司有条件的话，找一个实力雄厚的第三方来对接h5分享实在是再好不过了。或者你就挨个主流浏览器内对接分享，多个平台分享都对一遍，哈哈哈哈。
码文不易，望您给个赞！谢谢啦！希望对你有所帮助