ThinkPHP3.2.3集成微信分享JS-SDK实践

先来看看微信分享效果:

在没有集成微信分享js-sdk前是这样的:没有摘要,缩略图任意抓取正文图片

在集成微信分享js-sdk后是这样的:标题,摘要,缩略图自定义

一、下载微信SDK开发包

下载地址:http://demo.open.weixin.qq.com/jssdk/sample.zip

二、设置安全域名

所有的微信JS接口都只能在公众号绑定的域名下调用。登录微信公众平台,点击左边的“公众号设置”,切换到“功能设置”,在“JS接口安全域名”一栏设置安全域名,下载验证文件到网站根目录,再回到窗口点击“确定”(注:在点击“确定”前,设置的域名下都要能在浏览器下正常访问刚才下载的验证文件才能通过验证)。

三、以第三方插件形式集成到ThinkPHP

1、定义第三方类库目录(也可以放置在TP框架默认的插件目录ThinkPHP/Library/Vendor/)。

在入口文件中加入define('VENDOR_PATH' APP_PATH .'Common/Vendor/');

2、在\Application\Common\Vendor文件夹下新建文件夹Wxshare,解压微信SDK开发包,将jssdk.PHP、access_token.php、jsapi_ticket.php复制到Wxshare,重命名jssdk.php为class.jssdk.php(符合TP加载规则的文件名)。

3、修改access_token.php、jsapi_ticket.php的读写路径。打开class.jssdk.php文件,加入私有属性private $filePath;

在构造函数中设置属性为当前文件路径:$this->filePath = __DIR__.'/';

搜索access_token.php、jsapi_ticket.php,在文件名前连接上$this->filePath

四、应用

1、在公共函数库写一函数方便调用

/**

* 微信分享初始化

* @return array

* @author simon

*/

if(!function_exists('wx_share_init')){

function wx_share_init(){

$wxconfig = array();

vendor('Wxshare.class#jssdk');

$config = APP_DEBUG ? C("WECHAT_SDK_TEST"): C("WECHAT_SDK");//这里配置了微信公众号的AppId和AppSecret

$jssdk =new JSSDK($config['APPID'], $config['APPSECRET']);

$wxconfig = $jssdk->GetSignPackage();

return $wxconfig;

}

}

复制代码

2、控制器调用

在需要做微信分享的控制器方法中调用:

$wxconfig = wx_share_init();

$this->assign('wxconfig', $wxconfig);

复制代码

3、模板填充

在模板文件尾部加入:

wx.config({

debug:false,// 是否开启调试模式

appId:'',// 必填,微信号AppID

timestamp:,// 必填,生成签名的时间戳

nonceStr:'',// 必填,生成签名的随机串

signature:'',// 必填,签名,见附录1

jsApiList:['onMenuShareTimeline',//分享到朋友圈

'onMenuShareAppMessage',//分享给朋友

'onMenuShareQQ'//分享到QQ

]// 必填,需要使用的JS接口列表,所有JS接口列表见附录2

});

wx.ready(function(){

var options ={

title:'',// 分享标题

link:'http://www.xxx.com/news/detail/id/',// 分享链接,记得使用绝对路径

imgUrl:'http://www.xxx.com/',// 分享图标,记得使用绝对路径

desc:'',// 分享描述

success:function(){

console.info('分享成功!');

// 用户确认分享后执行的回调函数

},

cancel:function(){

console.info('取消分享!');

// 用户取消分享后执行的回调函数

}

}

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

wx.onMenuShareAppMessage(options);// 分享给朋友

wx.onMenuShareQQ(options);// 分享到QQ

});

复制代码

到此完成!在微信中访问网址并分享试试看效果。

五、查阅开发文档

微信JS-SDK Demo地址:http://demo.open.weixin.qq.com

常见问题及完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

-----------------------------------------------------------------------------------------------------------------

补充一个使用场景:

如果是前后台端分离的网站架构(也就是通过api接口的形式),前端必然要用到ajax请求,会出现一个问题:

被请求的网址与调用的网址不一致,微信SDK会提示签名无效。提供一个解决办法是:把调用的网址当成参数发回给服务器端,再生成微信签名。

示例代码:

1、后端代码(如请求:/api/common/wxshareinit)将获取的微信签名参数打包成一个JSON,格式如:

{

"appId":"XXXXX",

"nonceStr":"XXXXXXXX",

"timestamp":1478161661,

"url":"http:\/\/www.xxx.com\/news\/detail\/id\/54",

"signature":"aa4eeec5e1ad6f39c85cd4f3c1147329a16eb784",

"rawString":"jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VIqb--nsh20pd5ZnAlGF4nz5j33A5wpvImM6P1_QX3azn2Kca1KYOCO9NfeWEQsNng&noncestr=NJVodYffglDbM3fD×tamp=1478161661&url=http:\/

\/www.xxx.com\/news\/detail\/id\/54"

}

复制代码

2前端页面调用:

var wxconfig =[];//定义一个全局的保存微信配置的变量

$(function(){

$.ajax({

async:false,//这里设为同步请求(重要)

type:'POST',

url:'/api/common/wxshareinit',//被请求的网址

data:{url:document.URL},//将当前调用网址发回给服务器做签名用

dateType:'JSON',

cache:false,

success:function(result){

wxconfig = result.data;

},

error:function(){

alert('微信分享初始化失败!');

}

});

wx.config({

debug:false,// 是否开启调试模式

appId: wxconfig.appId,// 必填,微信号AppID

timestamp: wxconfig.timestamp,// 必填,生成签名的时间戳

nonceStr: wxconfig.nonceStr,// 必填,生成签名的随机串

signature: wxconfig.signature,// 必填,签名,见附录1

jsApiList:['onMenuShareTimeline',//分享到朋友圈

'onMenuShareAppMessage',//分享给朋友

'onMenuShareQQ'//分享到QQ

]// 必填,需要使用的JS接口列表,所有JS接口列表见附录2

});

wx.ready(function(){

var options ={

title:'【有料】3号产品神秘体验,到底爽在哪?—xxx平台',// 分享标题

link:'http://www.xxx.com/news/detail/id/52',// 分享链接

imgUrl:'http://www.xxx.com/Uploads/News/2016-11/1477995152201598.jpg',// 分享图标

desc:'年化收益9.9%,3个月到期还本付息,起购门槛20万',// 分享描述

success:function(){

console.info('分享成功!');

// 用户确认分享后执行的回调函数

},

cancel:function(){

console.info('取消分享!');

// 用户取消分享后执行的回调函数

}

}

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

wx.onMenuShareAppMessage(options);// 分享给朋友

wx.onMenuShareQQ(options);// 分享到QQ

});

});

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏james大数据架构

Eclipse快捷键大全

一、实用类快捷键 1 常用熟悉的快捷键 CTRL+C(复制)、CTRL+X(剪切)、CTRL+Z(撤销)、CTRL+F(查找)、CTRL+H(搜索文件或字符串)...

216100
来自专栏针针小站

【Skill】PageSpeed – 利用七牛云加速Gravatar

17150
来自专栏指尖下的Android

AndroidStudio无法输出日志的Bug

正常情况下我们在真机调试程序时,如图箭头所指的位置显示的应该是该应用的主包名,但是有的时候明明打开了开发者模式,但是却无法输出日志,该位置显示的也不是应用包名,...

29020
来自专栏企鹅号快讯

雅虎前端优化的35条军规

问题:我怎么才能收到你们公众号平台的推送文章呢? 内容部分 1.尽量减少HTTP请求数 80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各...

38150
来自专栏为数不多的Android技巧

mac下自动切换输入法

长久以来,输入法一直是困扰mac用户的一个问题;不过随着国内厂商的跟进,这种状况得到了极大的改善。不用自己去折腾什么鼠须管了,狼厂和企鹅都做的不错。

57010
来自专栏向治洪

github pages + Hexo + 域名绑定搭建个人博客增强版

概述 前面我们用github pages + Hexo 搭建了一个简单版的个人博客系统,但是里面的内容单调,很多功能不够完善,所以我们需要对yelle 的主题进...

31980
来自专栏君赏技术博客

团队自用的iOS CSV多语言工具今天终于发布1.0.0版本

image-20180727105818718 一般第一个为基础语言包不需要处理

22940
来自专栏PHP在线

高并发系统中的常见问题

本文一共分析了三个案例,分别介绍并发系统中的共享资源并发访问、计算型密集型任务缓存访问 、单一热点资源峰值流量问题和解决方案。 Q1:订票系统,某车次只有一张火...

36090
来自专栏社区的朋友们

爬虫实战:爬虫之 web 自动化终极杀手 ( 上)

最近写了好几个简单的爬虫,踩了好几个深坑,在这里总结一下,给大家在编写爬虫时候能给点思路。本次爬虫内容有:静态页面的爬取。动态页面的爬取。web 自动化终极爬虫...

1.8K10
来自专栏三流程序员的挣扎

Flutter 学习记1 - Mac 下的安装配置

网上搜到一篇文章安装cocoapods遇到error: RPC failed; curl 56 SSLRead() return error -36问题,不知道...

1K30

扫码关注云+社区

领取腾讯云代金券