微信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 最好是当前域名下的图片，否则容易出现图片缺失状况。