怎么使用微信JSSDK的自定义分享功能

时间 2019-11-19

标签怎么使用微信 jssdk 自定义分享功能繁體版

原文原文链接

微信在去年发布JSSDK后，把包括自定义分享在内的众多网页服务接口进行了统一。如今，若是要想自定义分享本身的网页信息给好友或朋友圈，就最好使用这个统一的网页服务接口。没有认证微信号的，可参考文章末尾的办法。php

一，首先在公众号管理后台“公众号设置”的“功能设置”里填写JS接口安全域名，域名须要经过ICP备案，没有备案域名能够用SAE、BAE等平台。此外，自定义分享功能须要经过微信认证才能使用，没有认证的能够跟关系好的朋友借用权限，在他的JS接口安全域名设置这里填上你的域名和共享同一个开发者ID。html

二，在须要调用JS接口的页面引入微信JSSDK的JS文件：http://res.wx.qq.com/open/js/jweixin-1.0.0.js，这个文件在须要分享的页面是必需要引用的，单独特别重申一下，其余方面请阅读官方文档http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 安全

引用方法：在网页title标题下面加上：<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>微信

三，下载官方示例代码：app

jssdk-php.zip函数

解压以后在例如PHP文件夹中看到如下文件：ui

四，复制以上文件到你的游戏目录，为了方便全部游戏调用同一个文件，建议在主机根目录（即一级目录）创建一个JSSDK文件夹。debug

五，在你须要自定义分享的网页源文件上（主机需支持PHP环境，网页文件名.html改为.php）引用JSSDK：调试

在网页头部加上以下代码：code

PHP

<?php
require_once "../jssdk/jssdk.php"; //表示主机根目录下jssdk文件夹内jssdk.php文件
$jssdk = new JSSDK("AppID(应用ID)", "AppSecret(应用密钥)");//填写开发者中心你的开发者ID
$signPackage = $jssdk->GetSignPackage();
?>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  //必须引用该文件  
   <script>
 wx.config({
   debug:  false,  //调式模式，设置为ture后会直接在网页上弹出调试信息，用于排查问题
   appId: '<?php echo $signPackage["appId"];?>',
   timestamp: <?php echo $signPackage["timestamp"];?>,
   nonceStr: '<?php echo $signPackage["nonceStr"];?>',
   signature: '<?php echo $signPackage["signature"];?>',
   jsApiList: [  //须要使用的网页服务接口
       'checkJsApi',  //判断当前客户端版本是否支持指定JS接口
       'onMenuShareTimeline', //分享给好友
       'onMenuShareAppMessage', //分享到朋友圈
       'onMenuShareQQ',  //分享到QQ
       'onMenuShareWeibo' //分享到微博
   ]
 });
 wx.ready(function () {   //ready函数用于调用API，若是你的网页在加载后就须要自定义分享和回调功能，须要在此调用分享函数。//若是是微信游戏结束后，须要点击按钮触发获得分值后分享，这里就不须要调用API了，能够在按钮上绑定事件直接调用。所以，微信游戏因为大多须要用户先触发获取分值，此处请不要填写以下所示的分享API
wx.onMenuShareTimeline({  //例如分享到朋友圈的API  
   title: '', // 分享标题
   link: '', // 分享连接
   imgUrl: '', // 分享图标
   success: function () {
       // 用户确认分享后执行的回调函数
   },
   cancel: function () {
       // 用户取消分享后执行的回调函数
   }
});
});	
wx.error(function (res) {
 alert(res.errMsg);  //打印错误消息。及把 debug:false,设置为debug:ture就能够直接在网页上看到弹出的错误提示
});
</script>

那么，没有认证微信号，又无法借用权限的朋友，如何分享呢？这就必须让用户点击分享按钮或游戏结束时触发来改变title标题了，至于分享的小图片，在网页源文件<body>标签后，加上<div style="display: none"> <img src="图片文件的绝对URL地址" /> </div>便可。

微信在去年发布JSSDK后，把包括自定义分享在内的众多网页服务接口进行了统一。如今，若是要想自定义分享本身的网页信息给好友或朋友圈，就最好使用这个统一的网页服务接口。没有认证微信号的，可参考文章末尾的办法。

一，首先在公众号管理后台“公众号设置”的“功能设置”里填写JS接口安全域名，域名须要经过ICP备案，没有备案域名能够用SAE、BAE等平台。此外，自定义分享功能须要经过微信认证才能使用，没有认证的能够跟关系好的朋友借用权限，在他的JS接口安全域名设置这里填上你的域名和共享同一个开发者ID。

引用方法：在网页title标题下面加上：<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

三，下载官方示例代码：

jssdk-php.zip

解压以后在例如PHP文件夹中看到如下文件：

四，复制以上文件到你的游戏目录，为了方便全部游戏调用同一个文件，建议在主机根目录（即一级目录）创建一个JSSDK文件夹。

五，在你须要自定义分享的网页源文件上（主机需支持PHP环境，网页文件名.html改为.php）引用JSSDK：

在网页头部加上以下代码：

PHP

<?php
require_once "../jssdk/jssdk.php"; //表示主机根目录下jssdk文件夹内jssdk.php文件
$jssdk = new JSSDK("AppID(应用ID)", "AppSecret(应用密钥)");//填写开发者中心你的开发者ID
$signPackage = $jssdk->GetSignPackage();
?>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  //必须引用该文件  
   <script>
 wx.config({
   debug:  false,  //调式模式，设置为ture后会直接在网页上弹出调试信息，用于排查问题
   appId: '<?php echo $signPackage["appId"];?>',
   timestamp: <?php echo $signPackage["timestamp"];?>,
   nonceStr: '<?php echo $signPackage["nonceStr"];?>',
   signature: '<?php echo $signPackage["signature"];?>',
   jsApiList: [  //须要使用的网页服务接口
       'checkJsApi',  //判断当前客户端版本是否支持指定JS接口
       'onMenuShareTimeline', //分享给好友
       'onMenuShareAppMessage', //分享到朋友圈
       'onMenuShareQQ',  //分享到QQ
       'onMenuShareWeibo' //分享到微博
   ]
 });
 wx.ready(function () {   //ready函数用于调用API，若是你的网页在加载后就须要自定义分享和回调功能，须要在此调用分享函数。//若是是微信游戏结束后，须要点击按钮触发获得分值后分享，这里就不须要调用API了，能够在按钮上绑定事件直接调用。所以，微信游戏因为大多须要用户先触发获取分值，此处请不要填写以下所示的分享API
wx.onMenuShareTimeline({  //例如分享到朋友圈的API  
   title: '', // 分享标题
   link: '', // 分享连接
   imgUrl: '', // 分享图标
   success: function () {
       // 用户确认分享后执行的回调函数
   },
   cancel: function () {
       // 用户取消分享后执行的回调函数
   }
});
});	
wx.error(function (res) {
 alert(res.errMsg);  //打印错误消息。及把 debug:false,设置为debug:ture就能够直接在网页上看到弹出的错误提示
});
</script>

方式二

设置meta

<meta itemprop="name" content="分享标题"/>
<meta itemprop="image" content="http://img.xmiles.cn/fortune/icon.png" />
<meta name="description" itemprop="description" content="分享描述" />