微信分享和H5页面分享

微信分享

需求：H5页面运行在手机浏览器内执行分享,运行在微信内分享引导调用微信JS-SDK执行

微信端实现分享需要使用微信提供的JS-SDK

首先需要引入微信开发JS文件,支持AMD,CMD加载的方式

1
2
3

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  
npm install weixin-js-sdk
var wx = require('weixin-js-sdk'); || import wx from 'weixin-js-sdk';

请求凭证信息

我们需要获取一下配置对象，在getWxConfig()自定义方法内执行判断，判断weixinJSConfig是否存在，如果存在不用请求后台，直接使用。如果不存在，我们向后台发送请求获取wx.config({})内的参数，执行wx.ready()方法调用分享


getWxConfig: function() {
    let t = this;
    if(weixinJSConfig){
        setTimeout(function(){
            t.shareContent();
        },500);
    }else{
        $.ajax({
            url:'/mcall/wx/api/getJSConfig/',
            type:'POST',
            data:{
                paramJson: $.toJSON({
                    url: window.location.href
                })
            },
            dataType: 'json',
            async: true,
            success: function(res) {
                data = res.responseObject.responseData;
                weixinJSConfig = data;
                t.shareContent();
            }
        });
    }
}

验证凭证是否有效

上面ajax请求的内容后台返给我们需要配置的参数，我们拿到数据执行wx.config验证凭证

shareContent(){
    wx.config({
        debug: false,
        appId: data.appId,
        timestamp: data.timestamp,
        nonceStr: data.noncestr,
        signature: data.signature,
        jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareQZone',
            'onMenuShareWeibo'
        ]
    })
}

准备调用分享

执行wx.config之后我们继续调用wx.ready()方法进行分享

shareContent:function(){
    wx.ready(function(){
        //分享到朋友圈
        wx.onMenuShareTimeline({
            title: '分享到朋友圈的标题title',
            desc: '分享到朋友圈的描述信息description',
            link: window.location.href,
            imgUrl: 'http://orthophoto.allinmd.cn/static/images/wap/shareImg.png',
            success: function() {
                alert('分享成功')
            },
            cancel: function() {
                alert('分享失败')
            }
        });
        //获取"分享到朋友"
        wx.onMenuShareAppMessage({

        });	
        //获取"分享到QQ"        
        wx.onMenuShareQQ({

        });
        //获取"分享到腾讯微博"
        wx.onMenuShareWeibo({

        });
        //获取"分享到QQ空间"
        wx.onMenuShareQZone({

        });
    })
}

使用详情参见

shareAll-demo