微信JS-SDK项目学习 --实现分享样式控制thinkphp

h5页面在微信内分享没有接入JS-SDK，

上着是没有进行处理的普通分享样式，很丑，只有标题可以控制

接入JS-SDK，之后

准备工作

一.公众号，（认证过的）

如果你的工作号是个人的就不会有分享的权限需要认证通过。所以大家要注意

二.官方文档。（在公众号内—》开发-》开发者具-》开发文档）

文档对我们程序太重要一定要把文档吃透

1.查看文档

认真查看文档

介绍几个好用的工具

能够监测获取token，获取加密算法，的准确性。

2.我的总结

第一步绑定域名，没有遇到问题

第二步引入js，    没有遇到问题

第三步通过config接口注入权限验证配置（这一步看文档介绍的有点简单）

第四步ready接口处理成功验证---里面可以进行分享，等操作

 流程是：1.获取token（后端做的事情）

                2.获取ticket（后端做的事情）

                3.拿到权限签名信息（后端拿到信息之后需要返回给进行config操作）

                4.前段在ready进行分享

3.报错总结

invalid url domain

{ "errMsg": "config:invalid url domain" }

检查自己前段代码这个时候只有前段会出问题

 var url = encodeURIComponent(window.location.href.split('#')[0]);

 /*    获取当前页面url，传递给服务器端完成签名，此处是最大的坑一定要对url进行encodeURIComponent()， 因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。 */
      

4.我的代码

         后台代码

<?php
namespace Boke\Controller;

use Think\Controller;

class WxshareController extends Controller
{
	// 获取token
	public function getAccessToken(){
	  	$appid = '*****************'; //Appid
	  	$secret = '******************'; //唯一凭证密钥
	  	$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$appid}&secret={$secret}";
	   	$data = $this->curl_get_https($url);
	   	$token = json_decode($data,true);
	   	S('token',$token['access_token'],7100);7100秒后过期
	   	echo $token['access_token'];
	}
	// 获取ticket
	public function getjsapi_ticket()
	{
		$token = S('token');
		if ($token) {
			$accessToken= $token;
		}else{
			$this->getAccessToken();
			$accessToken = S('token');
		}
        $url="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$accessToken}&type=jsapi";
        $res = $this->curl_get_https($url);
        $ticket = json_decode($res,true);
       	S('ticket',$ticket['ticket'],7100); 
       	echo $ticket['ticket'];
	}
	public function  curl_get_https($url){
	    $curl = curl_init(); // 启动一个CURL会话
	    curl_setopt($curl, CURLOPT_URL, $url);
	    curl_setopt($curl, CURLOPT_HEADER, 0);
	    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
	    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false); // 跳过证书检查
	    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);  // 从证书中检查SSL加密算法是否存在
	    $tmpInfo = curl_exec($curl);     //返回api的json对象
	    //关闭URL请求
	    curl_close($curl);
	    return $tmpInfo;    //返回json对象
	}

	public function get_config(){
		$ticket = S('ticket');
		if ($ticket) {
			$jsapiTicket = S('ticket');
		}else{

			$this->getjsapi_ticket();
			$jsapiTicket = S('ticket');
		}
		$ticket = 'HoagFKDcsGMVCIY2vOjf9k3L6rEJUnekMXTOBv9I0_GX5WCIu--gBvN7cPgRPVysEuzallSRyVqNhXz1jnDc_A';
	    $url = urldecode(I('post.url')); //    把ajax发送过来的url进行解码！！！此处是坑
	    $timestamp =  time();//    时间戳
	    $nonceStr = $this -> createNonceStr(16);//    随机串
	    $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
	    $signature = sha1($string);//    签名
	    //在这也可以将 分享标题，分享描述，缩略图地址等一起返回 （不过我不建议）   
	    $config['appId'] = "wx90a82e4bfdd97405";
	    $config['timestamp'] = $timestamp;
	    $config['nonceStr'] = $nonceStr;
	    $config['signature'] = $signature;
	    $config['url'] = $url;
	    $this -> ajaxReturn($config);    
	    // echo $jsapiTicket;
	}    
	// 获取随机串，
	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;
	}
    
}

前段代码 改地方，可以直接封装起来，调用更加方便。

var link = "";                //用来接收返回的url

	    $(document).ready(function(){
	        ajaxconfig();
	    });
	    
	    function ajaxconfig(){
	        /*    获取当前页面url，传递给服务器端完成签名，此处是最大的坑一定要对url进行encodeURIComponent()，
	         *    因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
	         */
	        var url = encodeURIComponent(window.location.href.split('#')[0]);
	        var eventinfo = {
	            url:url,
	        };
	    
	        $.ajax({
	            type: "post",
	            url: 'https://cyclv.com/boke/index.php/Boke/Wxshare/get_config',     //    服务器端url
	            data : eventinfo,
	            dataType: 'json',
	            success: function(obj){
	            	console.log(obj)
	                // 注入权限验证配置
	                wx.config({
	                    // debug : 'false',                 //实现阶段开启debug//测试模式
	                    appId : obj.appId,             //必填，公众号的唯一标识
	                    timestamp : obj.timestamp,   //必填，生成签名的时间戳
	                    nonceStr : obj.nonceStr,     //必填，生成签名的随机串
	                    signature : obj.signature,     //必填，签名
	                    jsApiList : [                 //必填，需要使用的JS接口列表，所有JS接口列表见官方文档
	                        'onMenuShareTimeline',
	                        'onMenuShareAppMessage'
	                        
	                    ]
	                }); 
	                link = obj.url;                    //    获取成功签名返回的url
	            }
	        })

	        wx.ready(function () {
		    	// alert('success');
		    	console.log('链接地址',url)
		        wx.onMenuShareTimeline({
		            title: '沙发超人-专业服务星级酒店沙发家居翻新',
		            link: link,
		            imgUrl: 'https://cyclv.com/superman/img/banner.png',// 自定义图标
		            trigger: function (res) {
		                // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回.
		                //alert('click shared');
		            },
		            success: function (res) {
		                //alert('shared success');
		                //some thing you should do
		            },
		            cancel: function (res) {
		                //alert('shared cancle');
		            },
		            fail: function (res) {
		                //alert(JSON.stringify(res));
		            }
		        });
		        //分享给好友
		        wx.onMenuShareAppMessage({
		            title: '沙发超人-专业服务星级酒店沙发家居翻新', // 分享标题
		            desc: '技术好：我们是厂家，更加的专业；价格优：厂家派遣工人，统一服务价；免保修，保质期内，免费上门维修', // 分享描述
		            link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
		            imgUrl: 'https://cyclv.com/superman/img/banner.png', // 自定义图标
		            success: function () {
		                // 用户确认分享后执行的回调函数
		            },
		            cancel: function () {
		                // 用户取消分享后执行的回调函数
		            }
		        });
		        wx.error(function (res) {
		            alert(res.errMsg);
		        });
		    });
	    }