H5微信分享接口开发JS-SDK PHP［附源码］

背景

        H5开发中几乎所有项目都要用到自定义分享，见过的分享接口有php引入和ajax调用两种，使用不方便且对代码环境有要求。故共享一版可通过javascript文件引入方式来实现自定义分享的接口（这是15年底做的接口，一直在使用，如果有更简单便捷的方法欢迎交流）。

        使用这个接口，不管你是php开发的项目还是纯前端的html项目，不管是把代码放服务器还是放到OSS CDN，都是OK的，是一件一劳永逸的事情。

实现方法

        根据微信JS-SDK开发文档，实现分享主要有几个步骤：步骤一，绑定域名。步骤二，引入JS文件。步骤三，权限验证。步骤四，设置自定义分享信息。

        首先是要有一个认证的微信公众号，进入 公众号设置／功能设置／JS接口安全域名，填入项目域名。然后就是第三步，用接口实现权限验证。

        这里不探讨具体的实现方法（实现已封装到jssdk.php文件），只说明 接口配置和项目调用方法。

        接口配置只需填写公众号AppID、AppSecret两个参数，    

require_once "jssdk.php";
$jssdk = new JSSDK("AppID", "AppSecret", $url); // 公众号AppID、AppSecret
$signPackage = $jssdk->GetSignPackage();
echo "var signPackage=";
die(json_encode($signPackage)); // 返回微信分享所需参数

        项目调用接口更方便，只需在index.html里通过javascript引入接口地址即可，

<script>
    document.write("<script src='accessToken/signPackage.php?originUrl=" + window.location.href + "' type='text/javascript'><\/script>");
</script>
<script>
    var baseUrl = "http://xxx.com/";       // 项目地址
    var wxData = {
        "imgUrl" : baseUrl + 'share.jpg',  // 分享图标
        "link"   : baseUrl,                // 分享地址
        "title"  : '微信分享接口-分享标题',   // 分享标题
        "desc"   : '分享文案'               // 分享文案
    };
    wx.config({
        debug: false,
        appId: signPackage.appId,
        timestamp: parseInt(signPackage.timestamp),
        nonceStr: signPackage.nonceStr,
        signature: signPackage.signature,
        jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ]
    });
    wx.ready(function () {
        wx.onMenuShareTimeline({
            title: wxData.title,
            link: wxData.link,
            imgUrl: wxData.imgUrl,
            success: function () {
            }
        });
        wx.onMenuShareAppMessage({
            title: wxData.title,
            desc: wxData.desc,
            link: wxData.link,
            imgUrl: wxData.imgUrl,
            type: 'link',
            dataUrl: '',
            success: function () {
            }
        });
    });
</script>

Demo二维码

        

源码下载地址

        https://download.csdn.net/download/gaofei880219/10383643

参考链接

        微信JS-SDK说明文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

        微信JS SDK PHP Demo：http://www.cnblogs.com/txw1958/p/weixin-js-sdk-php-demo.html