/wechat-share

微信分享JS模块

Primary LanguageTypeScript

微信分享JS模块

简单,不依赖第三方库,支持jsonp跨域。

使用

  1. 引入
//页面引入
<script src="dist/wechat.share.js"></script>

//npm引入
npm i @mayupai/wechat-share -S  
  1. 初始化对象
const params = {
  config: {
    apiURL: '服务器端返回配置参数的地址'
  },
  data: {
    title: '分享标题',
    desc: '分享文案',
    imgUrl: '分享图片地址'
  }
}
const ws = new WechatShare(params)

//如需单独设置发送给朋友数据
ws.shareToFriend({
  title: '朋友分享标题',
  desc: '朋友分享文案',
  imgUrl: '朋友分享图片地址'
})

//如需单独设置朋友圈数据
ws.shareToTimeline({
  title: '朋友圈分享标题',
  desc: '朋友圈分享文案',
  imgUrl: '朋友圈分享图片地址'
})

服务器端apiURL返回数据说明,以PHP脚本为例

require_once "jssdk.php";
$callback = $_REQUEST['callback'];
$url = $_REQUEST['url'];
$jssdk = new JSSDK(APP_ID, APP_SECRET);
$signPackage = $jssdk->GetSignPackage($url);
print $callback.'({"appId":"'.$signPackage["appId"].'", "timestamp":"'.$signPackage["timestamp"].'","nonceStr":"'.$signPackage["nonceStr"].'","signature":"'.$signPackage["signature"].'"})';

params参数详细说明

config对象参数 描述
apiURL 服务器端返回配置参数的地址
wxURL (可选)JSAPI地址, 会自动在当前页面引入
debug (可选)是否开启调试
jsApiList (可选)jsApi列表,需要用到的sdk在这里引入
data对象参数 描述
link (可选)分享地址,默认为当前页
title (可选)分享标题
desc (可选)分享标题
imgUrl (可选)分享图片地址
success (可选)成功回调
cancel (可选)取消回调
const params = {
  config?: {
    apiURL: '', // 服务器端返回配置参数的地址
    wxURL?: '//res.wx.qq.com/open/js/jweixin-1.6.0.js', //JSAPI地址, 自动在当前页面引入
    debug?: false, //是否开启调试
    jsApiList?: [
      'updateAppMessageShareData',
      'updateTimelineShareData',
      'onMenuShareWeibo'
    ]
  },
  data?: {
    link?: location.href, //分享链接,默认为当前页面
    title?: '', //分享标题
    desc?: '', //分享文案
    imgUrl?: '', //分享图片地址
    success?: null, //成功回调
    cancel?: null, //取消回调
  }
}  

公有方法

ws.shareToFriend(data) //单独设置分享朋友数据
ws.shareToTimeline(data) //单独设置分享朋友圈数据
ws.shareToWeibo(data) //单独设置分享微博数据