基于vue实现h5页面分享微信以及朋友圈功能（以及兼容iOS）

记录一下，分享真的有好多坑（本篇文章只讲述前端遇到的问题，不提供后端数据）

每行代码以及每行字都有用，要静下心看完（不要和任何人去攀比，每个人都是独一无二的）

如果看技术问题总结，请滑动到页面底部（实现过程也有问题的解决方法）

微信分享给朋友（新接口api也支持qq，这里不展示效果图了）

image.png

微信分享到朋友圈

image.png

微信开放api文档地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

    第一步：安装JSSDK（并引入）

    第二步：通过config接口注入权限验证配置

    第三步：通过ready接口处理成功验证

    第四步：通过error接口处理失败验证

不说这些废话了，直接上代码（这里简单封装了一下，傻瓜式教程）

第一步：

安装 jssdk npm install weixin-js-sdk --save

第二步：

在vue里创建js文件，我的是在 assets----common---utils.js 代码如下：

import wx from "weixin-js-sdk"

/*
 * 微信分享
 * 获取微信加签信息
 * @param{data}:获取的微信加签
 * @param{shareData}:分享配置参数
 */
export const wexinShare = (data, shareData) => {
    // var wx = require('weixin-js-sdk') || window['wx'];
    let appId = data.appId;
    let timestamp = data.timestamp;
    let nonceStr = data.nonceStr;
    let signature = data.signature;
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉）
        appId: appId, // 必填，公众号的唯一标识
        timestamp: timestamp, // 必填，生成签名的时间戳
        nonceStr: nonceStr, // 必填，生成签名的随机串
        signature: signature, // 必填，签名，见附录1
        jsApiList: [
                'updateAppMessageShareData',
                'updateTimelineShareData'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
    });
    wx.checkJsApi({
        jsApiList: ['chooseImage', 'updateAppMessageShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
        success: function(res) {
            // 以键值对的形式返回，可用的api值true，不可用为false
            // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
            console.log(res, 'checkJsApi')
        }
    });
    wx.ready(function() {
        // //分享到朋友圈”及“分享到QQ空间”
        wx.updateTimelineShareData({
            title: shareData.title, // 分享标题
            link: shareData.link + '&t=' + timestamp + '&Content=1', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: shareData.imgUrl, // 分享图标
            success: function(res) {
                // 设置成功
                console.log("分享朋友圈成功返回的信息为:", res);
            }
        })

        //“分享给朋友”及“分享到QQ”
        wx.updateAppMessageShareData({
            title: shareData.title, // 分享标题
            desc: shareData.desc, // 分享描述
            link: shareData.link + '&t=' + timestamp + '&Content=1', // 分享链接 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: shareData.imgUrl, // 分享图标
            success: function(res) {
                console.log("分享朋友成功返回的信息为:", res);;
            }
        })

    });
    wx.error(function(res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        console.log('验证失败返回的信息:', res);
    });
}

第三步：

在分享页面引入刚刚封装暴露出来的方法

import { wexinShare } from '@/assets/common/utils.js';

调用后端接口获取签名等数据(传参根据后端接口查看)

把获取的微信加签和要分享的数据进行获取，传入方法

        weixin() {
            //请求微信配置参数接口（获取签名），由后台给接口给
            var urls = window.location.href.split('#')[0];
            console.log(urls, 22222333);
            //看后台请求接口是get/post
            http.post(config.shareResume, {
                jdId: this.jdId,
                recommendId: this.$route.query.recommendId,
                url: urls
            }).then(res => {
                console.log(res, '内容');
                console.log(this.allPositionDetailList, '111');
                if (res.code == 200) {
                    //微信加签
                    var obj = {
                        appId: res.data.appId,
                        nonceStr: res.data.nonceStr,
                        signature: res.data.signature,
                        timestamp: res.data.timestamp,
                        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
                    };
                    //分享数据，这段主要是为了在hash模式下分享出去的链接不被浏览器截取，保证完全把链接分享出去
                    var url = window.location.href.split('#')[0];
                    // var shareWxLink = encodeURIComponent(url);加密
                    let shareData = {
                        title: this.allPositionDetailList.jdName, // 分享标题
                        desc:
                            '公司名称：' +
                            this.allPositionDetailList.merchantName +
                            ' 招聘人数：' +
                            this.allPositionDetailList.jdNumber +
                            ' 工作经验：' +
                            this.experienceInfo[this.allPositionDetailList.experience],
                        link: res.data.linkUrl,
                        // link: window.location.href,
                        imgUrl: res.data.imgUrl // 分享图标
                    };
                    //引用
                    wexinShare(obj, shareData);
                } else {
                    this.$toast.warn('获取sdk参数失败！');
                }
            });
        },

(目的是为了兼容ios,苹果每次要去重定向页面，安卓不需要，不这样跳转会导致安卓没问题，但是苹果不成功或者不显示标题或者图片)

到这步如果都没有问题基本就可以分享了（注意h5分享是使用微信浏览器右上角的三个点进行分享的，在点击右上角之前要先注入config/ready,官网已说明）

image.png

分享的时候要去判断是否是微信浏览器打开，如果不是要提示不能分享

  var broser = window.navigator.userAgent.toLowerCase();
            //通过正则表达式匹配broser 中是否含有MicroMessenger字符串
            if (broser.match(/MicroMessenger/i) == 'micromessenger') {
                console.log('微信浏览器');
                // this.weixin();
                this.showContent = true;
            } else {
                this.$toast.warn('请使用微信浏览器打开');
            }

image.png

说到这里就需要分享的时候做个引导页了（效果如下）

两张透明图片拼接而成（图片放下面，需要自己保存，遮罩层自己来写）

image.png

因为是透明的所以可能看不太清（右箭头的透明图片）

3.png
我知道了透明图片
idont.png

接下来总结一下分享可能会遇到的问题

1.分享的内容一直是地址而不是一个链接
看link和后端配置的js安全域名一致不一致
2.安卓分享没有任何问题但是ios分享就不显示标题和描述以及图片
跳转分享页时要使用 window.location.replace(url) 用于重定向地址（微信社区也说了）

image.png
3.以上都没有问题了但是ios分享还是链接
需要扫描进入，不要直接点击分享链接进入（或者清除微信缓存，退出重新登录就ok了）
4.如果还是分享不成功还是地址
查看官方文档（上面分享过）看你调用的是新接口还是即将废弃的接口（本文章是新接口api）
image.png
基本这些就解决了分享问题，还有尝试过其他解决方法但是都没有生效，这里不太过多阐述，又什么问题，欢迎在评论区留言。