微信H5自定义分享接口,jssdk分享到朋友圈demo

现阶段中微信应用H5开发中,无论是何种开发语言,几乎90%的开发项目都会使用到微信的jssdk自定义分享,比较常见的分享接口主要由php引入和ajax调用这两种,使用php作为后端语言时,前端js使用ajax传送经常会出错误,所以进行写一个可通过javascript文件引入方式来实现微信自定义分享的接口。

使用这个接口,无论你是属于php开发的项目还是纯前端的html项目,无论是把代码托管到服务器还是放到OSS、CDN,都是可以的,使用这个接口是一件一劳永逸的事情。

根据微信JS-SDK的开发文档,实现微信端自定义分享主要应用到这几个步骤:

  1. 绑定域名;
  2. 引入JS文件;
  3. 权限验证;
  4. 设置自定义分享信息。

首先是要有一个通过认证的微信公众号,进入 公众号设置/功能设置/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/"; // 分享Js接口安全域名URL
    var wxData = {
    "imgUrl" : baseUrl + 'share.jpg',  // 分享图标
    "link" : baseUrl,                // 分享地址
    "title" : '分享标题Title',   // 分享标题
    "desc" : '分享描述description'               // 分享描述
    };
    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二维码

Demo

附源码下载地址

https://cdn.zzzdc.com/code/WechatShareDemo.zip