## 知识点：
1、微信JS-SDK说明文档
2、JSSDK使用步骤
3、Jssdk类库
4、后台处理
5、事件响应
[TOC]
## 一、微信JS-SDK说明文档
最近开发一个项目，需要将链接分享给好友时能够自定义标题、简介和logo，现将ThinkPHP5集成JS-SDK实现微信自定义分享功能的过程整理成文。
### 相关文章
微信JS-SDK说明文档
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
ThinkPHP5集成JS-SDK实现微信自定义分享功能
https://www.cnblogs.com/sunshineliulu/p/8034286.html
thinkphp5.x中集成微信JS-SDK
https://blog.csdn.net/yi_an/article/details/54973020
最新微信公众平台js sdk整合PHP版
https://www.cnblogs.com/x3d/p/4240556.html
thinkphp项目如何自定义微信分享描述内容
http://www.php.cn/weixin-kaifa-353000.html
### 视频资料
微信公众号之JS-SDK开发【php实战】
https://ke.qq.com/course/306636
### 视频代码
后盾人视频教程代码
https://gitee.com/houdunwang/video
## 二、JSSDK使用步骤
1.1.1 步骤一：绑定域名
1.1.2 步骤二：引入JS文件
1.1.3 步骤三：通过config接口注入权限验证配置
1.1.4 步骤四：通过ready接口处理成功验证
1.1.5 步骤五：通过error接口处理失败验证
## Jssdk类库
### 1、文件名及位置
名字：Jssdk.php
位置：extend\util\Jssdk.php
### 2、代码
~~~
<?php
namespace util;
/**
+------------------------------------------------
* ThinkPHP5集成JS-SDK实现微信自定义分享功能
+------------------------------------------------
* @修改人 后盾网
+------------------------------------------------
* @date 2018年8月15
+------------------------------------------------
*/
class Jssdk {
protected $appid = 'xxxx';
protected $secret = 'xxxx';
/**
* 获取access_token方法
*/
public function getAccessToken(){
//定义文件名称
$name = 'token_' . md5($this->appid . $this->secret);
//定义存储文件路径
// $filename = __DIR__ . '/cache/' . $name . '.php';
$filename = '../runtime/temp/' . $name . '.php';
//判断文件是否存在,如果存在,就取出文件中的数据值,如果不存在,就向微信端请求
if (is_file($filename) && filemtime($filename) + 7100 > time()){
$result = include $filename;
//定义需要返回的内容$data
$data = $result['access_token'];
}else{
// https请求方式: GET
// https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
// 调用curl方法完成请求
$url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$this->appid.'&secret=' . $this->secret;
$result = $this->curl($url);
//将返回得到的json数据转成php数组
$result = json_decode($result,true);
//将内容写入文件中
file_put_contents($filename,"<?php\nreturn " . var_export($result,true) . ";\n?>");
//定义需要返回的内容
$data = $result['access_token'];
}
//将得到的access_token的值返回
return $data;
}
/**
*
* 获取临时票据方法
*
* @return mixed
*/
public function getJsapiTicket(){
//存入文件中,定义文件的名称和路径
$name = 'ticket_' . md5($this->appid . $this->secret);
//定义存储文件路径
//$filename = __DIR__ . '/cache/' . $name . '.php';
$filename = '../runtime/temp/' . $name . '.php';
//判断是否存在临时票据的文件,如果存在,就直接取值,如果不存在,就发送请求获取并保存
if (is_file($filename) && filemtime($filename) + 7100 > time()){
$result = include $filename;
}else{
//定义请求地址
$url = 'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='.$this
->getAccessToken().'&type=jsapi';
//使用curl方法发送请求,获取临时票据
$result = $this->curl($url);
//转换成php数组
$result = json_decode($result,true);
//将获取到的值存入文件中
file_put_contents($filename,"<?php\nreturn " . var_export($result,true) . ";\n?>");
}
//定义返回的数据
$data = $result['ticket'];
//将得到的临时票据结果返回
return $data;
}
/**
* 获取签名方法
*/
public function sign(){
//需要定义4个参数,分别包括随机数,临时票据,时间戳和当前url地址
$nonceStr = $this->makeStr();
$ticket = $this->getJsapiTicket();
$time = time();
//组合url
//$url = $_SERVER['REQUEST_SCHEME'] . '://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
$url = 'http://' . $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI'];
//将4个参数放入一个数组中
$arr = [
'noncestr=' . $nonceStr,
'jsapi_ticket=' . $ticket,
'timestamp=' . $time,
'url=' . $url
];
//对数组进行字段化排序
sort($arr,SORT_STRING);
//对数组进行组合成字符串
$string = implode('&',$arr);
//将字符串加密生成签名
$sign = sha1($string);
//由于调用签名方法的时候不只需要签名,还需要生成签名的时候的随机数,时间戳,所以我们应该返回由这些内容组成的一个数组
$reArr = [
'appId' => $this->appid,
'timestamp' => $time,
'nonceStr' => $nonceStr,
'signature' => $sign,
'url' => $url
];
//将数组返回
return $reArr;
}
/**
*
* 生成随机数
*
* @return string
*/
protected function makeStr(){
//定义字符串组成的种子
$seed = 'www512wayanbao1qasxianrendong5tgblaochaguan8ik9500net';
//通过循环来组成一个16位的随机字符串
//定义一个空字符串 用来接收组合成的字符串内容
$str = '';
for ($i = 0;$i < 16; $i++){
//定义一个随机数
$num = rand(0,strlen($seed) - 1);
//循环连接随机生成的字符串
$str .= $seed[$num];
}
//将随机数返回
return $str;
}
/**
*
* 服务器之间请求的curl方法
*
* @param $url 请求地址
* @param array $field post参数
* @return string
*/
public function curl($url,$field = []){
//初始化curl
$ch = curl_init();
//设置请求的地址
curl_setopt($ch,CURLOPT_URL,$url);
//设置接收返回的数据,不直接展示在页面
curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
//设置禁止证书校验
curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,false);
curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,false);
//判断是否为post请求方式,如果传递了第二个参数,就代表是post请求,如果么有传递,第二个参数为空,就是get请求
if (!empty($field)){
//设置请求超时时间
curl_setopt($ch,CURLOPT_TIMEOUT,30);
//设置开启post
curl_setopt($ch,CURLOPT_POST,1);
//传递post数据
curl_setopt($ch,CURLOPT_POSTFIELDS,$field);
}
//定义一个空字符串,用来接收请求的结果
$data = '';
if (curl_exec($ch)){
$data = curl_multi_getcontent($ch);
}
//关闭curl
curl_close($ch);
//将得到的结果返回
return $data;
}
}
//测试获取access_token值的方法
//$obj = new Wx();
//$data = $obj->getAccessToken();
//echo $data;
//测试获取jsapiticket方法
//$obj = new Wx();
//$data = $obj->getJsapiTicket();
//echo $data;
//测试生成签名方法
//$obj = new Wx();
//$data = $obj->sign();
//echo '<pre>';
//print_r($data);
?>
~~~
## 四、后台处理
~~~
<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
use app\admin\model\Menu;
use util\Jssdk;
class Index extends Controller {
public function demo(){
$id = input('id',0);//ID
$catid = input('catid',0);//分类ID
$modelInfo = getModInfoById($catid);
$info = Db::name($modelInfo['tablename'])->where('id',$id)->find();
$catinfo = getCatInfoById($catid);
$p_catname = getCatInfoById($catinfo['parentid'],'catname');
$obj = new Jssdk();
$data = $obj->sign();
$this->assign('infos',$info);
$this->assign('catids',$catid);
$this->assign('catnames',$catinfo['catname']);
$this->assign('p_catnames',$p_catname);
$this->assign('data',$data);
return view('../application/index/view/default/index/' . $modelInfo['show_template']);
}
}
?>
~~~
## 五、事件响应
~~~
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
// 通过config接口注入权限验证配置
wx.config({
debug: false,
appId: '{$data.appId}',
timestamp: '{$data.timestamp}',
nonceStr: '{$data.nonceStr}',
signature: '{$data.signature}',
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage'
]
});
// 通过ready接口处理成功验证
wx.ready(function(){
// 分享到朋友圈
wx.onMenuShareTimeline({
title: '{$info.title}',
link: '{$data.url}',
imgUrl: 'http://m.psnav.com/uploads/image/{$info.thumb}',
success: function () {
// 用户点击了分享后执行的回调函数
}
});
// 分享给朋友
wx.onMenuShareAppMessage({
title: '{$info.title}',
desc: '{$info.description}',
link: '{$data.url}',
imgUrl: 'http://m.psnav.com/uploads/image/{$info.thumb}',
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户点击了分享后执行的回调函数
}
});
});
</script>
~~~
全部分享接口
~~~
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
// 通过config接口注入权限验证配置
wx.config({
debug: true,
appId: '{$data.appId}',
timestamp: '{$data.timestamp}',
nonceStr: '{$data.nonceStr}',
signature: '{$data.signature}',
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
]
});
// 通过ready接口处理成功验证
wx.ready(function(){
// 分享到朋友圈
wx.onMenuShareTimeline({
title: '{$info.title}',
link: '{$data.url}',
imgUrl: 'http://m.psnav.com/uploads/image/{$info.thumb}',
success: function () {
// 用户点击了分享后执行的回调函数
}
});
// 分享给朋友
wx.onMenuShareAppMessage({
title: '{$info.title}',
desc: '{$info.description}',
link: '{$data.url}',
imgUrl: 'http://m.psnav.com/uploads/image/{$info.thumb}',
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户点击了分享后执行的回调函数
}
});
// 分享到QQ
wx.onMenuShareQQ({
title: '{$info.title}',
desc: '{$info.description}',
link: '{$data.url}',
imgUrl: 'http://m.psnav.com/uploads/image/{$info.thumb}',
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
// 分享到腾讯微博
wx.onMenuShareWeibo({
title: '{$info.title}',
desc: '{$info.description}',
link: '{$data.url}',
imgUrl: 'http://m.psnav.com/uploads/image/{$info.thumb}',
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
// 分享到QQ空间
wx.onMenuShareQZone({
title: '{$info.title}',
desc: '{$info.description}',
link: '{$data.url}',
imgUrl: 'http://m.psnav.com/uploads/image/{$info.thumb}',
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});
</script>
~~~
- Layer无刷新不跳转弹框提示信息
- 整合ThinkPHP+实用代码
- TP整合Layer插件实现无刷新
- 自定义助手函数
- 添加信息失败后不跳转
- 三种无限级分类
- TP常用代码
- 自定义公共函数
- TP模型管理专题
- TP模型管理之添加模型
- sfox_newmodel.sql
- TP模型管理之删除模型
- TP模型管理之编辑模型
- TP模型管理之字段添加
- sfox_newmodel.sql_edit
- layer_hplus.js_edit
- TP模型管理之字段删除
- TP模型管理之字段编辑
- TP模型管理之预览模型
- TP模型管理之公共函数
- layer_hplus.js_修订一
- TP模型管理之预览模型静态页
- 后台内容管理系统
- 分类树显示
- 内容列表显示
- 信息发布
- 编辑信息
- layer_hplus.js
- myJs第一版
- myJs第二版
- myJs第三版
- myJs第四版
- TP5插件用法
- Datatables
- WebUploader
- bootstrap-fileinput
- UEditor
- 简单调用
- 路径问题
- 跨域多图上传
- 跨域单图上传
- UEditor图片跨域上传解决方案
- 定制工具栏图标
- ajaxFileUpload
- LayUI
- 图片上传
- layui分页
- 搜索页
- 搜索优化及删除
- Uploadify
- TP5前端应用
- 静态首页
- 前台首页功能实现
- 自定义标签库
- 前台模板继承应用
- 首页自定义标签改进
- 文章内容页
- 自定义标签改进
- 自定义标签修正
- 图片等比例自动缩放
- 后台权限管理
- 角色管理
- 规则管理
- 权限设置
- 会员管理
- 权限管理
- 前台登录注册功能
- 注册登录
- 阿里大于手机注册
- 阿里大于升级阿里云短信服务
- 自动登录完成
- PHP异位或加密实现自动登陆
- 微信开发
- 分享接口
- 静态页面实现微信分享
- 动态页微信分享
- 页面静态化
- 1-全站静态化前期配置
- 2-链接地址静态化
- TP5常用片段代码
- 加载静态资源路径与常量
- thinkphp5预定义常量
- 删除某文件夹的内容
- 解压插件包
- 异步提交插件
- 其他功能
- 背景音乐
- 手机访问PC网站自动跳转到手机网站代码
- 手机微信音乐MP3播放器
- 后盾之网页背景音乐
- 播放器宽度自适应
- 前台首页数据调用
- 视频列表
- 搜索分页
- H5解决苹果（IOS）不能自动播放音乐
- 清空缓存
- 文件处理常识
- 删除路径下的所有文件夹和文件
- 一键清空缓存
- 评论留言
- 格式化时间
- 替换微博内容的URL地址@用户与表情
- PHP正则理解
- jQuery评论插件
- TP空操作
- TP路由
- 跨域访问
- 设置请其头允许跨域请求
- 模板前台判断手机访问跳转手机网址代码
- PHP遍历一个文件夹下所有文件和子文件夹
- PHP获取视频的第一帧与时长
- TP5数据库
- 链式操作原理
- update替换字段部分内容
- 后台开发
- 后台登录页居中显示
- TP5自带验证码
- JS & JQuery专题
- 二级城市联动菜单
- 模板引擎
- 混合模板编译
- 黄永成TP微博开发
- 消息推送
- memcache安装
- 插件开发
- 插件介绍
- 插件钩子
- 浅谈初步理解钩子
- 插件钩子(hooks)分析
- 插件钩子简单理解
- 控制器调用插件
- 钩子通用处理函数
- 插件基类代码
- 插件测试代码
- 浅谈钩子与插件
- 技术综合
- 常用代码
- PHP
- 56个PHP开发常用代码片段（上）
- 56个PHP 开发常用代码片段（中）
- 56个PHP 开发常用代码片段（下）
- sublime text安装自动补全注释的插件
- 影音视频开发
- 视频
- H5视频直播扫盲
- 音乐
- 语音
- PHP实现语音播报功能
- MUI
- 窗体操作