在DZ论坛引入微信JSSDK与分享功能的方法(简单)

游子最近在一个项目中需要在微信分享给好友时显示自定义描述,网上查询了很多资料终于折腾好了,在此分享给有需要的朋友。在DZ论坛引入微信JSSDK与分享功能的方法,微信分享不显示网址,显示自定义描述的方法。

1、前期准备

微信在去年发布JSSDK后,把包括自定义分享在内的众多网页服务接口进行了统一。现在,如果要想自定义分享自己的网页信息给好友或朋友圈,就最好使用这个统一的网页服务接口。需要有已经认证过的微信公众号,订阅号,服务号都可以。

首先在公众号管理后台“公众号设置”的“功能设置”里填写JS接口安全域名域名需要通过ICP备案,没有备案域名可以用SAE、BAE等平台。自定义分享功能需要通过微信认证才能使用,没有认证的可以跟关系好的朋友借用权限,在他的JS接口安全域名设置这里填上你的域名和共享同一个开发者ID。没有认证微信号的,可参考文章末尾的办法。

2、下载官方示例代码:jssdk-php.zip

下载后解压,然后在DZ根目录新建一个文件夹命名为jssdk 把解压得到的jssdk.php直接上传到刚建设好的文件夹中。

3、修改header.htm模板文件

在DZ模板文件header.htm中添加如下代码

<!--{eval 
require_once "./jssdk/jssdk.php";
$jssdk = new JSSDK("你的AppID", "你的AppSecret");
$signPackage = $jssdk->GetSignPackage();
}-->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
	// 自定义微信分享内容
	wx.config({
		debug: false, // 关闭或者打开调试
		appId: '<!--{eval echo $signPackage["appId"]}-->',
		timestamp: '<!--{eval echo $signPackage["timestamp"]}-->',
		nonceStr: '<!--{eval echo $signPackage["nonceStr"]}-->',
		signature: '<!--{eval echo $signPackage["signature"]}-->',			
		jsApiList: [
			'onMenuShareTimeline',
			'onMenuShareAppMessage',
			'onMenuShareQQ',
			'onMenuShareWeibo',
			]
			});
   wx.ready(function(){
    // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
    wx.onMenuShareTimeline({
        title: '', // 分享标题
        link:"",   // 分享链接
        imgUrl: "" // 分享图标
    });

    // 获取“分享给朋友”按钮点击状态及自定义分享内容接口
    wx.onMenuShareAppMessage({
        title: '', // 分享标题
        desc: "", // 分享描述
        link:"", // 分享标题
        imgUrl: "", // 分享图标
        type: 'link', // 分享类型,music、video或link,不填默认为link
    });
});
</script>

然后上传覆盖 header.htm 后台清理一次缓存即可。看似简单,但这是经过很多折腾测试才得出的一个可以使用的教程。有什么不懂的或者是出错的可以在本文下方留言,游子在时间允许的情况下会逐一回复。

4、获取当前URL链接的方法

<!--{eval echo 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];}-->

分享链接可以使用这段代码,在DZ模板文件中实现获取当前URL链接。

PHP中获取当前页面的完整URL的方法

没有认证微信号,又没法借用权限的朋友,如何分享呢?这就必须让用户点击分享按钮或游戏结束时触发来改变title标题了,至于分享的小图片,在网页源文件标签后,加上

即可,注意图片大小必须大于300x300。

最后编辑于:2016/6/14作者: 游子

热爱一切美好的新事物,搞网站也被网站搞,剁手折腾。关注与学习Web相关技术与UI\UE\UED\UCD\Server相关知识,服务器运维、前端、后端、非专业程序猿、非高级前端后端攻城师!

6 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

  1. crll说道:
    3#

    :grin: 谢谢 成功了~~

  2. kevin说道:
    2#

    你好,游子,有几个小问题请教一下。
    1. 添加代码是在安装的手机模板目录下,还是default 目录下的 header.htm文件
    2. 以上代码只要把AppID和AppSecret修改成自己的,其他的不需要再进行修改了对吗?
    3. AppID和AppSecret能使用微信开放平台的吗?因为之前有创建过一个移动应用。所以有一个AppID和AppSecret 码
    另外特别感谢您的教程。因为这方面资料是在太少了。

    • 游子说道:

      QQ上已经解决了吧

  3. 心晴说道:
    1#

    请问游子,这个分享标题、链接、图标,都要自己填写上去吗?

    • 游子说道:

      是的,都是自己填上去的。