微信web开发自定义分享

Posted 2020-10-04 加菲猫and大白

php后台部分-微信类

 

 

/*********微信自定义分享 开始********/

/**
* 获取微信自定已分享配置参数包
* @author ganyuanjiang <[e-mail]>
* @createtime 2017-08-05 14:21:04
* @return array 配置参数包
*/
public function getSignPackage() {
　　$jsapiTicket = $this->getJsApiTicket();

　　// 注意 URL 一定要动态获取，不能 hardcode.
　　$protocol = (!empty($_SERVER[\'HTTPS\']) && $_SERVER[\'HTTPS\'] !== \'off\' || $_SERVER[\'SERVER_PORT\'] == 443) ? "https://" : "http://";
　　$url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

　　$timestamp = time();
　　$nonceStr = $this->createNonceStr();

　　// 这里参数的顺序要按照 key 值 ASCII 码升序排序
　　$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";

　　$signature = sha1($string);

　　$signPackage = array(
　　　　"appId" => $this->appid,
　　　　"nonceStr" => $nonceStr,
　　　　"timestamp" => $timestamp,
　　　　"url" => $url,
　　　　"signature" => $signature,
　　　　"rawString" => $string
　　);
　　return $signPackage; 
}

/**
* 微信自定义分享随机字符串
* @author ganyuanjiang <[e-mail]>
* @createtime 2017-08-05 14:22:15
* @param length int 随机字符串长度
* @return str string 随机字符串
*/
private function createNonceStr($length = 16) {
　　$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
　　$str = "";
for ($i = 0; $i < $length; $i++) {
　　$str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
}
　　return $str;
}

/**
* 微信自定义分享获取jsapiticket
* @author ganyuanjiang <[e-mail]>
* @createtime 2017-08-05 14:23:30
* @return jsapi_ticket string 微信jsapi调用凭证
*/
private function getJsApiTicket() {
　　// jsapi_ticket 应该全局存储与更新，以下代码以写入到文件中做示例

　　$data = json_decode(file_get_contents("jsapi_ticket.json"));
if ($data->expire_time < time()) {
　　$access_token = $this->access_token(false);
　　// 如果是企业号用以下 URL 获取 ticket
　　// $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=".$access_token[\'data\'];
　　$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=".$access_token[\'data\'];
　　$res = json_decode(https_get($url));
　　$ticket = $res->ticket;
if ($ticket) {
　　$data->expire_time = time() + 7200;
　　$data->jsapi_ticket = $ticket;
　　$fp = fopen("jsapi_ticket.json", "w");
　　fwrite($fp, json_encode($data));
　　fclose($fp);
}
} else {
　　$ticket = $data->jsapi_ticket;
}

　　return $ticket;
}
/*********微信自定义分享 结束********/

 

php后台部分-控制器

use util\\WeChat as WeChatModel;
use app\\admin\\model\\Attachment as AttachmentModel;
use app\\crm\\model\\Help as HelpModel;

/**
* 初始化方法
* @author ganyuanjiang <[e-mail]>
* @time 2017-07-26 11:04:56
* 
*/
protected function _initialize()
{

　　$this->WeChat = new WeChatModel();
　　//微信统一分享
　　$this->shareInfo();

}

 

/**
* 客分享注册信息
* @author ganyuanjiang <[e-mail]>
* @createtime 2017-07-29 13:28:35 
*/ 
private function shareInfo(){
　　//查询推荐规则介绍
　　$map[\'key\'] = \'share_intro\';
　　$share_intro = HelpModel::where($map)->find();
　　if(!$share_intro){
　　　　return $this->error("分享规则介绍不存在");
　　}
　　//通过图片编号查询图片地址
　　$map_img[\'id\'] = $share_intro[\'image\'];
　　$path = AttachmentModel::where($map_img)->value(\'path\');
　　$share_intro[\'image\'] = empty($path)?\'\':$this->request->domain().PUBLIC_PATH.$path;
　　//分享页　　
　　$share_intro[\'url\'] = $this->request->root(true).\'/\'.$this->request->module().\'/publics/welcome.html\';
　　//微信分享自定义参数

　　$signPackage = $this->WeChat->getSignPackage();
　　$signPackage[\'redirect_uri\'] = urlencode(config(\'crm_config.user_accesstoken_uri\'));
　　$signPackage[\'encrypt_key\'] = config(\'crm_config.encrypt_key\');
　　//模板渲染
　　$this->assign(\'signPackage\',$signPackage);
　　$this->assign(\'share_intro\',$share_intro);//分享规则介绍
}

 

 

html页面部分

首先引入微信js文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script type="text/javascript">

var uid= $.cookie("uid") == "undefined"?0:$.cookie("uid");


/**分享信息初始化 开始**/
if(uid!=undefined && uid!=0){
wx.config({
　　debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
　　appId: \'{$signPackage.appId}\', // 必填，公众号的唯一标识
　　timestamp: {$signPackage.timestamp}, // 必填，生成签名的时间戳
　　nonceStr: \'{$signPackage.nonceStr}\', // 必填，生成签名的随机串
　　signature: \'{$signPackage.signature}\',// 必填，签名，见附录1
jsApiList: [
　　\'checkJsApi\', //判断当前客户端版本是否支持指定JS接口
　　\'onMenuShareTimeline\', //分享给好友
　　\'onMenuShareAppMessage\', //分享到朋友圈
　　\'onMenuShareQQ\', //分享到QQ
　　\'onMenuShareQZone\', //分享到QQ
　　] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
　　//处理成功验证
wx.ready(function(){
　　//处理失败验证
wx.error(function(res){
　　alert(res.errMsg); //打印错误消息。及把 debug:false,设置为debug:ture就可以直接在网页上看到弹出的错误提示
});
//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
wx.onMenuShareTimeline({
　　title: \'{$share_intro.name}\', // 分享标题
　　link: \'{$share_intro.url}?state=\'+uid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 //
　　imgUrl: \'{$share_intro.image}\', // 分享图标
　　trigger: function (res) {
　　// 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回.
　　//alert(\'click shared\');
},
success: function () { 
　　// 用户确认分享后执行的回调函数
},
cancel: function () { 
　　// 用户取消分享后执行的回调函数
},fail: function (res) {
　　//alert(JSON.stringify(res));
}
});
//获取“分享给朋友”按钮点击状态及自定义分享内容接口
wx.onMenuShareAppMessage({
　　title: \'{$share_intro.name}\', // 分享标题
　　desc: \'{$share_intro.intro}\', // 分享描述
　　link: \'{$share_intro.url}?state=\'+uid, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
　　imgUrl: \'{$share_intro.image}\', // 分享图标
　　type: \'\', // 分享类型,music、video或link，不填默认为link
　　dataUrl: \'\', // 如果type是music或video，则要提供数据链接，默认为空
success: function () { 
　　// 用户确认分享后执行的回调函数
},
cancel: function () { 
　　// 用户取消分享后执行的回调函数
}
});
//获取“分享到QQ”按钮点击状态及自定义分享内容接口
wx.onMenuShareQQ({
　　title: \'{$share_intro.name}\', // 分享标题
　　desc: \'{$share_intro.intro}\', // 分享描述
　　link: \'{$share_intro.url}?state=\'+uid, // 分享链接
　　imgUrl: \'{$share_intro.image}\', // 分享图标
　　success: function () { 
　　　　// 用户确认分享后执行的回调函数
　　},
　　cancel: function () { 
　　// 用户取消分享后执行的回调函数
　　}
});
　　//获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
wx.onMenuShareQZone({
　　title: \'{$share_intro.name}\', // 分享标题
　　desc: \'{$share_intro.intro}\', // 分享描述
　　link: \'{$share_intro.url}?state=\'+uid, // 分享链接
　　imgUrl: \'{$share_intro.image}\', // 分享图标
　　success: function () { 
　　// 用户确认分享后执行的回调函数
　　},
　　cancel: function () { 
　　// 用户取消分享后执行的回调函数　　
　　}
});
wx.error(function (res) {
　　alert(res.errMsg);
　});
});

}
/**分享信息初始化 结束**/
</script>

 

 

注意：另外说明一点微信分享的链接的域名必须与js安全域名一致 不能将微信授权或其它域名当做分享链接,若这样做微信内分享到朋友圈和分享到朋友无法读取自定义内容 仅qq和qq空间可以读取 
解决办法 定义一个中转链接,此链接在js安全域名下 或者自定义一个js安全域名下的页面 然后跳转到授权链接