微信JS-JDK开发-链接分享、语音、图片、视频分享接口

在微信内开发链接分享、定位地理位置、语音、图片、视频分享接口,需要接入微信的JS-SDK开发。
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

JS 接口签名校验工具(http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign)

注意授权域名有的只能一个月改三次,请小心谨慎,不然就要留到下个月了啧啧。

※这个Web访问的微信AccessToken也一样要做IP访问次数限制,虽然微信官网说一天2000,可是访问次数多了一样会刷爆AccessToken值,超限就不能访问了。

<!-- 添加微信分享JS-SDK -->
{% set wxAppInternalBool = getWxAppInternalBool() %}
{% if wxAppInternalBool == 1 %}
    {% set wxJsApiDataArr = getWxJsApiShareData(type) %}
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
<script>
var jsApiListArray = ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'];
wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '{{ wxJsApiDataArr['appid'] }}', // 必填,公众号的唯一标识
    timestamp: {{ wxJsApiDataArr['timestamp'] }}, // 必填,生成签名的时间戳
    nonceStr: '{{ wxJsApiDataArr['noncestr'] }}', // 必填,生成签名的随机串
    signature: '{{ wxJsApiDataArr['signature'] }}',// 必填,签名,见附录1
    jsApiList: jsApiListArray // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function(){
    // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
    {#wx.checkJsApi({
        jsApiList: jsApiListArray, // 需要检测的JS接口列表,所有JS接口列表见附录2,
        success: function(res) {
            // 以键值对的形式返回,可用的api值true,不可用为false
            // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        }
    });#}
    wx.onMenuShareTimeline({
        title: '{{ wxJsApiDataArr['title'] }}', // 分享标题
        link: '{{ wxJsApiDataArr['url'] }}', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '{{ wxJsApiDataArr['imgUrl'] }}', // 分享图标
        success: function () {
            // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
    wx.onMenuShareAppMessage({
        title: '{{ wxJsApiDataArr['title'] }}', // 分享标题
        desc: '{{ wxJsApiDataArr['content'] }}', // 分享描述
        link: '{{ wxJsApiDataArr['url'] }}', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '{{ wxJsApiDataArr['imgUrl'] }}', // 分享图标
        type: 'link', // 分享类型,music、video或link,不填默认为link
        dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
        success: function () {
            // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
    wx.onMenuShareQQ({
        title: '{{ wxJsApiDataArr['title'] }}', // 分享标题
        desc: '{{ wxJsApiDataArr['content'] }}', // 分享描述
        link: '{{ wxJsApiDataArr['url'] }}', // 分享链接
        imgUrl: '{{ wxJsApiDataArr['imgUrl'] }}', // 分享图标
        success: function () {
           // 用户确认分享后执行的回调函数
        },
        cancel: function () {
           // 用户取消分享后执行的回调函数
        }
    });
    wx.onMenuShareWeibo({
        title: '{{ wxJsApiDataArr['title'] }}', // 分享标题
        desc: '{{ wxJsApiDataArr['content'] }}', // 分享描述
        link: '{{ wxJsApiDataArr['url'] }}', // 分享链接
        imgUrl: '{{ wxJsApiDataArr['imgUrl'] }}', // 分享图标
        success: function () {
           // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
    wx.onMenuShareQZone({
        title: '{{ wxJsApiDataArr['title'] }}', // 分享标题
        desc: '{{ wxJsApiDataArr['content'] }}', // 分享描述
        link: '{{ wxJsApiDataArr['url'] }}', // 分享链接
        imgUrl: '{{ wxJsApiDataArr['imgUrl'] }}', // 分享图标
        success: function () { 
           // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
    wx.getLocation({
        type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
        // 如果类型是'gcj02',用百度地图API则需要通过google经纬度转化为百度地图经纬度
        success: function (res) {
            var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
            var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
            var speed = res.speed; // 速度,以米/每秒计
            var accuracy = res.accuracy; // 位置精度
        }
    });
});
</script>
{% endif %}

1.※请将微信公众号官网的txt加密文件放到网站根目录下;

2.请先在config函数开启调试模式: debug: true;

3.微信分享会在自己H5页面的URL加上

from=singlemessage&isappinstalled=0

H5画面,第二次的时候加了两次,杀气重重顿时:

&amp;from=singlemessage&amp;isappinstalled=1&from=singlemessage&isappinstalled=0

==========================================================================

如果是APP发送分享到H5画面的,就会变成以下

from=singlemessage&isappinstalled=1

H5画面,第二次的时候加了两次,杀气重重顿时:

&amp;from=singlemessage&amp;isappinstalled=1&from=singlemessage&isappinstalled=0

而且代码中取得URL是被按字典序排序从低到高进行排序的, 这样导致了页面上的微信JS-SDK的config签名校验失败,导致分享的时候图标不能访问、不能显示了。

必须在自己的签名时候对URL对参数进行排序,然后又要加上微信多余的参数,真是恶心

[‘paramsKey’ , ‘paramsKey2’, ‘amp;from’, ‘amp;isappinstalled’, ‘from’, ‘isappinstalled’]

解决方法:将URL的query参数重新排序

 

Leave a comment