谈谈微信分享遇到的小坑

调用微信浏览器自带分享功能

前端代码：

    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '${appId}', // 必填，公众号的唯一标识
        timestamp: ${timestamp}, // 必填，生成签名的时间戳
        nonceStr: '${nonceStr}', // 必填，生成签名的随机串
        signature:'${signature}' ,// 必填，签名
        jsApiList: [
            'updateAppMessageShareData', //  分享到朋友接口
            'updateTimelineShareData',   // 分享到朋友圈接口
        ] // 必填，需要使用的JS接口列表
    });
    wx.ready (function () {
        wx.updateAppMessageShareData({
            title: title, // 分享标题
            link: wechatLink, // 分享链接，该链接域
            imgUrl:url, // 分享图标名或路径必须与当前页面对应的公众号JS安全域名一致
            desc:desc, // 分享描述
            success: function () {
                // 用户点击了分享后执行的回调函数
            }
        });
        wx.updateTimelineShareData({
            title: title, // 分享标题
            link: wechatLink, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: url, // 分享图标
            success: function () {
                // 用户点击了分享后执行的回调函数
            }
        });
        // wx.onMenuShareQQ (shareData);
        // wx.onMenuShareWeibo (shareData);
    });
    wx.error(function(res){
        // config信息验证失败会执行error函数，如签名过期导致验证失败，
        // 具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，
        //对于SPA可以在这里更新签名。
        alert("好像出错了！！");
    });

坑来了！！

坑一：外部浏览器不能将网页分享至微信

解决思路：设置一个分享图标，点击图标复制当前要分享的网页地址到剪切板，用户自行跳转至微信进行分享。

实现复制url到剪切板的思路：设置一个隐藏的标签，先获取url，再将url写入input的输入框，再从输入框进行复制。
代码：
html:

<input type="text" style="position: absolute; top: -100rem;" id="copyValue" value="测试粘贴板功能内容">

js:

function share(){
	var url=window.location;
	var copyValue=document.getElementById("copyValue");//一个隐藏的input，作为复制的中转站，先将url写入input，再从input中复制内容到剪切板
	var newUrl = funcUrlDel(url,"inviterId");//删除url上指定参数
	copyText(copyValue.value);//复制url至粘贴板
}

    //删除url指定参数
    function funcUrlDel(url,names) {
        if(typeof(names)=='string'){
            names = [names];
        }
        var obj = {};
        var arr = url.search.substr(1).split("&");
        //获取参数转换为object
        for(var i = 0; i < arr.length; i++) {
            arr[i] = arr[i].split("=");
            obj[arr[i][0]] = arr[i][1];
        };
        //删除指定参数
        for(var i = 0; i < names.length; i++) {
            delete obj[names[i]];
        }
        //重新拼接url
        var newUrl = url.origin + url.pathname + "?" + JSON.stringify(obj).replace(/[\"\{\}]/g, "").replace(/\:/g, "=").replace(/\,/g, "&");
        return newUrl;
    }


    //复制内容至剪切板
    function copyText(text) {
        // 数字没有 .length 不能执行selectText 需要转化成字符串
        const textString = text.toString();
        let input = document.querySelector('#copy-input');
        if (!input) {
            input = document.createElement('input');
            input.id = "copy-input";
            input.readOnly = "readOnly";        // 防止ios聚焦触发键盘事件
            input.style.position = "absolute";
            input.style.left = "-1000px";
            input.style.zIndex = "-1000";
            document.body.appendChild(input)
        }

        input.value = textString;
        // ios必须先选中文字且不支持 input.select();
        selectText(input, 0, textString.length);
        console.log(document.execCommand('copy'), 'execCommand');
        if (document.execCommand('copy')) {
            document.execCommand('copy');
            alert('已复制到粘贴板');
        }
        input.blur();

        // input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
        // 选择文本。createTextRange(setSelectionRange)是input方法
        function selectText(textbox, startIndex, stopIndex) {
            if (textbox.createTextRange) {//ie
                const range = textbox.createTextRange();
                range.collapse(true);
                range.moveStart('character', startIndex);//起始光标
                range.moveEnd('character', stopIndex - startIndex);//结束光标
                range.select();//不兼容苹果
            } else {//firefox/chrome
                textbox.setSelectionRange(startIndex, stopIndex);
                textbox.focus();
            }
        }
    }

坑二：在微信内部自带浏览器中也不能自定义分享图标

这简直是太恶心了，要想用它的分享功能只能点击它那三个点点点

我的曲线救国方法：
点击自定义分享图标，显示引导指向微信分享按钮的箭头
代码：
html:

<div id="arrow" style="z-index: 10;position: absolute;top:-25px; right: 5px;display:none">
    <img src='${rctx }/image/mobile/supply/arrow.png' style="width: 180px;height: 180px;">
    <h4>点击"..."分享至好友，<br>朋友圈</h4>
</div>

js:

    //点击分享图标，显示指引点击微信自带分享按钮的箭头
    function showArrow(){
        document.getElementById('arrow').style.display='block';
        setTimeout(function () {
            $('#arrow').fadeOut(2000);
            },2000);
    }

效果：