先来看看微信分享效果:

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

 

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

 

一、下载微信SDK开发包

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

二、设置安全域名

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

 

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

1、解压微信SDK开发包,将jssdk.PHP、access_token.php、jsapi_ticket.php复制到插件目录ThinkPHP/Library/Org/Util下,重命名jssdk.php为Jssdk.class.php(符合TP加载规则的文件名)。

 

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

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

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

四、应用

1、在PHP接口处写一函数调用,$url为angularjs访问接口时传过来的参数,保证请求地址和调用地址一致

//获取微信jssdk配置信息
public function getwxconfig(){
$url=$_GET['url'];
$jssdk = new \Org\Util\Jssdk(_APPID_, _APPSECRET_,$url);
$signPackage = $jssdk->GetSignPackage();
if(empty($signPackage)){
$this->response(array('success'=>0,'info'=>'读取错误'),'json');
}else{
$this->response(array('success'=>1,'info'=>'读取成功','appid'=>$signPackage['appId'],'timestamp'=>$signPackage['timestamp'],'nonceStr'=>$signPackage['nonceStr'],'signature'=>$signPackage['signature']),'json');
}
}

2、angularjs代码

$http.get("/h5n/games/web/getwxconfig?url="+encodeURIComponent('http://youxi919.com/h5web/'))
.success(function (response) {
if(response.success==1){
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: response.appid, // 必填,公众号的唯一标识
timestamp: response.timestamp, // 必填,生成签名的时间戳
nonceStr: response.nonceStr, // 必填,生成签名的随机串
signature: response.signature,// 必填,签名,见附录1
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo'
] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
}); }else{
};
});
wx.ready(function () {
wx.onMenuShareAppMessage({ //配置分享给朋友接口
title: '分享的标题', // 分享标题
desc: '这是一个测试分享', // 分享描述
link: location.href, // 分享链接
imgUrl: '', // 分享图标
type: '', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
})
});

以上使用场景:

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

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

Angularjs+ThinkPHP3.2.3集成微信分享JS-SDK实践的更多相关文章

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

    先来看看微信分享效果:在没有集成微信分享js-sdk前是这样的:没有摘要,缩略图任意抓取正文图片 在集成微信分享js-sdk后是这样的:标题,摘要,缩略图自定义 一.下载微信SDK开发包下载地址:ht ...

  2. 使用JSSDK集成微信分享遇到的一些坑

    h5项目中需要集成微信分享,以实现自定义标题.描述.图片等功能.结果遇到了很多坑. 准备工作 务必详细阅读微信JS-SDK说明文档 需要后端支持 强烈建议下载使用微信web开发者工具 按文档配置好公众 ...

  3. 微信分享JS接口失效说明及解决方案

    关键字:微信分享 JS 失效  分享到朋友圈 微信分享JS接口目前已失效,以前可以自定义分享的标题.描述.图片.链接地址在微信6.0.2版本中失效. 官方回复如下: 旧版的获取分享状态及设置分享内容的 ...

  4. 微信企业号JS SDK

    微信企业号JS SDK <?php define('CorpID', "wx82e2c31215d9a5a7"); define('CorpSecret', "&q ...

  5. Android集成微信分享功能应用签名生成方法及分享不生效的问题

    通过友盟sdk集成微博.微信.qq等分享功能时,微博和qq很顺利,但在做微信集成时一直不成功.主要问题还是之前在微信开放平台申请创建移动应用时,对应用签名没有填写对,走了很多弯路现总结出来,加深记忆避 ...

  6. 微信分享JS函数(原创)[已失效]

    //微信内置浏览器分享事件 //来自:http://www.cnblogs.com/cielwater //分享朋友圈事件 //UpdateWeixinJSBridge(CircleModel[Jso ...

  7. 关于MUI集成微信分享遇到的坑

    今天聊一下MUI这个框架吧! 首先,用这个框架也有很长一段时间了,项目不同,涉及到的功能也有不同,之前没有涉及到微信分享相关的内容!今天,遇到了,也解决了,分享出来. 下面是手顺: 1.分享的代码是参 ...

  8. 微信分享接口SDK简介使用

    很久没做移动端活动了,想不少人都参与过微信里面的活动,既然活动就少不了分享.那我就行一个前端的角度说说如何实现微信分享的吧. 对应微信分享,现在已有公共接口,微信的开发者文档SDK:https://m ...

  9. H5+.Net Webapi集成微信分享前后端代码 微信JS-SDK wx.onMenuShareTimeline wx.onMenuShareAppMessage

    说明: 1/因为赚麻烦这里没有使用数据库或服务器缓存来存储access_token和jsapi_ticket,为了方便这里使用了本地的xml进行持久化这两个值以及这两个值的创建时间和有限期限. 2/每 ...

随机推荐

  1. dubbo的请求、响应对

    dubbo中的请求和响应是如何关联起来的呢? 每一个请求和响应共用同一个id. public class DefaultFuture implements ResponseFuture { // in ...

  2. bat批处理文件运行时隐藏cmd窗口

    想让bat运行时隐藏cmd窗口,最好的方法是使用vbs文件实现, 1.新建一个文本文档,改名为123.vbs,编辑内容: set ws=WScript.CreateObject("WScri ...

  3. MyEclipse持续性开发教程:用JPA和Spring管理数据(五)

    MyEclipse 3.15 Style——在线购买低至75折!火爆开抢>> [MyEclipse最新版下载] 本教程介绍了MyEclipse中的一些基于JPA / Spring的功能.有 ...

  4. Jmeter BeanShell 从数据库中获取数据并创建一个requesBody

    一.前言 在测试接口的时候常常会使用到数据库中的数据,当要使用大量的数据时,仅仅使用数据库查询是不够的.还需要使用自动化让操作更简便. 下面以一个简单的例子阐述一下如何使用beanShell让代码更简 ...

  5. Python获取路径下所有文件名

    python 获取当前文件夹下所有文件名   os 模块下有两个函数: os.walk() os.listdir() 1 # -*- coding: utf-8 -*- 2 3 import os 4 ...

  6. 序列化 NSKeyedArchiver,NSPropertyListSerialization

    到目前为止,看到oc实现的序列化方式有两种:NSKeyedArchiver,NSPropertyListSerialization. 在这两种序列化方式中,NSData都是序列化的目标.两种方式的不同 ...

  7. Vue.js更改调试地址端口号

    Vue项目一般使用自带的脚手架工具vue-cli和webpack打包方式进行项目构建运行.开发中,我们在控制台输入命令行npm run dev部署项目后,默认开启的页面调试地址是8080端口.但是有时 ...

  8. 转:Canvas标签的width和height以及style.width和style.height的区别

    转自:http://www.cnblogs.com/artwl/archive/2012/02/28/2372042.html 作者:Artwl 背景 今天在博问中看到一个问题:用canvas 的 l ...

  9. Python装饰器的通俗理解

    转载:http://blog.csdn.net/u013471155 在学习Python的过程中,我相信有很多人和我一样,对Python的装饰器一直觉得很困惑,我也是困惑了好久,并通过思考和查阅才能略 ...

  10. AppStore 中的app怎么样生成二维码,来提供下载

    首先在:iTunes里面找到  AppStore模块,然后搜索你的 App 在App 下载选项有 Copy Link ,拷贝地址 在二维码生成器里直接生成二维码就,OK 如果,想要多个和安卓做一个二维 ...