php微信分享文章怎么做的,微信开发使用 JSSDK 自定义分享内容 - 文章教程

最近做一个砍价的小程序,需要用户分享自己的砍价页面,然后让朋友帮忙砍价,默认情况下微信的分享只有标题可用,描述部分会显示当前的网址,而且还没有缩略图,据说网页中如果有超过 300X300 的图片,会自动生成缩略图,我在微信的 PC 端试过,可以实现自动添加缩略图,但是在手机上就显示一个链接的图标。

微信的分享地址默认是当前的网页,如果是使用 Web APP 开发的手机网页,由于微信浏览器对于 HTML5 中的 History API 支持并不友好,这一点在官方文档里面也有说明,最好的方式就是我们自定义分享的链接。

必备条件

并不是什么公众号都能做分享,据官方的开发文档说明,只有认证过的订阅号或者认证过的服务号,才有分享接口权限

分享网页会到微信的服务器上获取一些信息,这需要开启 SSL 安全连接访问,所以我们还必须有一台服务器,可以自己配置我们的运行环境。

最后要有一个备案的域名,没有备案的域名在天朝是没有任何用处的。

微信公众号设置

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

引入分享 JS 文档

在需要调用JS接口的页面引入微信 JSSDK 的 JS 文件:http://res.wx.qq.com/open/js/jweixin- 1.2.0.js,这个文件在需要分享的页面是必须要引用的。

部署后台代码

微信的分享不像其他的分享平台,为了数据的安全性,微信总是需要做签名验证,所以我们需要在后台去生成一些东西,然后输出给前台网页。

这里可以直接下载官方的示例代码快速开发,不过如果是大型的项目,还是要自己去再次梳理编写一遍,这里就以 PHP 语言为例:

将上面的文件下载本地,然后解压到任意的目录中,这里推荐大家直接解压到网站的根目录,这样方便引入和查找文件,解压之后看到以下文件:

590a77aaa5985cff3169fc86bf02d75e.png

前端网页

在你需要自定义分享的网页源文件上引用 JSSDK ,传入 AppID 和 yourAppSecret 并且初始化 JSSDK 类,调用 GetSignPackage() 方法获取微信分享配置信息:

require_once "jssdk.php";

$jssdk = new JSSDK("yourAppID", "yourAppSecret");

$signPackage = $jssdk->GetSignPackage();

接下来配置微信分享参数

wx.config({

debug: true,

appId: '<?php echo $signPackage["appId"];?>',

timestamp: <?php echo $signPackage["timestamp"];?>,

nonceStr: '<?php echo $signPackage["nonceStr"];?>',

signature: '<?php echo $signPackage["signature"];?>',

jsApiList: [

// 所有要调用的 API 都要加到这个列表中

'checkJsApi', //判断当前客户端版本是否支持指定JS接口

'onMenuShareTimeline', //分享给好友

'onMenuShareAppMessage', //分享到朋友圈

'onMenuShareQQ', //分享到QQ

'onMenuShareWeibo' //分享到微博

]

});

预定义要分享网页的内容

window.share_config = {

"share": {

"imgUrl": "http://www.pptg315.com/weixin/bargain/images/logo-s.png",

"desc" : "启发右脑深层次记忆,通过对右脑想象力与思维能力训练,开启大脑图像记忆功能,使受训者轻松学会无规律记忆数字,中文词语,现代文,古诗词。",

"title" : '199元让孩子成为最强大脑记忆大师!亲,帮我砍一刀',

"link": 'http://www.pptg315.com/weixin/bargain/activity.php?id=' + order_id,

"success":function(){},

'cancel': function(){ }

}

};

通过 ready 接口处理成功验证,config 信息验证后会执行 ready 方法,所有接口调用都必须在 config 接口获得结果之后,config 是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在 ready 函数中。

wx.ready(function () {

wx.onMenuShareAppMessage(share_config.share); //分享给好友

wx.onMenuShareTimeline(share_config.share); //分享到朋友圈

wx.onMenuShareQQ(share_config.share); //分享给手机QQ

});

通过 error 接口处理失败验证

wx.error(function(res){

alert(res.errMsg);

//打印错误消息。及把 debug:false,设置为debug:ture就可以直接在网页上看到弹出的错误提示

});

微信分享大致就是这样,以上是常规的在动态页面的调用方法,为了更方便的多页面调用,建议通过 AJAX 跨域请求来实现调用权限,其实在 PHP 文件夹下 sample.php 是调用 API 接口的示例文件,不明白的可以看看这个文件。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值