微信H5页面自定义分享

微信H5页面自定义分享

第一:引入 微信jssdk文件
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
第二:通过ajax获取appid等鉴权信息
$.ajax({
    url: url + '/wap/wapApi/GetWxConfig',
    data: 'uri=' + window.location.href,
    dataType: 'json',
    success: function(res) {
        console.log(res.data.appId)
        alert(JSON.stringify(res.data))
        wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
            appId: res.data.appId, // 必填,公众号的唯一标识
            timestamp: res.data.stamp, // 必填,生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
            signature: res.data.signature, // 必填,签名
            jsApiList: ["checkJsApi", "onMenuShareTimeline", "onMenuShareAppMessage"], // 必填,需要使用的JS接口列表                          

        });
        wx.ready(function() {
            // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
            wx.onMenuShareAppMessage({
                title: '分享标题', // 分享标题
                desc: '分享描述', // 分享描述
                link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://taoqikid-cms.shenliangzhu.bevateachers.com/share_video/images/beva.png', // 分享图标
                type: 'link',
                dataUrl: '',
                success: function(res) {
                    console.log(res)
                },
                cancel: function(res) {
                    console.log(res)
                }
            })

        });
    }
});
第三:问题说明

【问题 01】:config 配置错误

原因:在通过 ajax 获取config 等信息的时候,没有对 data 参数做处理,需要添加键值 { uri = window.location.href }

【问题 02】:配置完成后,微信开发者工具调试成功,但是真机调试失败

原因:在分享的 “配置” 中,link 需要配置在获取 config 信息时候的传入的 uri (即,当前页面的url),

imgUrl 最好是当前域名下的图片,否则容易出现图片缺失状况。