微信自定义分享

第一步:登录公众号,进入公众号设置 -> 选中功能设置,找到页面下面的 js接口安全域名

微信自定义分享

点击 js接口安全域名下载红框的txt文件,并将文件复制到你下面填写的域名的根目录下,先上传再点击保存,文件上传的地方不对点击保存会报错,保存成功就代表第一步已经完成。
微信自定义分享

第二步:进入微信公众号,开发 -> 基本配置 ,可以看到 AppID 和 AppSecret 的值,并设置 IP白名单,如图:

微信自定义分享
注意:上图 AppID 和 AppSecret 的值一定要获取到并保存起来, IP 也一定要设置

1:先获取 access_token 的值,并将 access_token 值保存到数据库的,也可以利用缓存等,看个人习惯;

//获取微信签名所需的access_token
    public function getAccessToken() {
        //查询数据表里面的值
        $info = D('WxToken')->find();
        if($info['expires_in'] < time()){
            //获取token的值
            $url_token = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=第二步获取的AppID的值&secret=第二步获取的AppSecret的值';
            $tmp = $this->CURLSend($url_token); //json格式
            $obj = json_decode($tmp);
            if($obj->access_token != null){
                $data['access_token'] = $obj->access_token;
                $data['expires_in'] = time() + $obj->expires_in;
                if($info['id']){
                    $res = D('WxToken')->where('id='.$info['id'])->save($data);
                }else{
                    $res = D('WxToken')->add($data);
                }
                if($res){
                    $data_new = $obj->access_token;
                }else{
                    $data_new = 'error';
                }
                return $data_new;
            }else return 'error';
        }else return $info['access_token'];
    }

2:获取微信签名所需的 jsapi_ticket

//获取微信签名所需的 ticket
    public function getTicket(){
        $token = $this->getAccessToken();
        $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$token&type=jsapi";
        $tmp = $this->CURLSend($url); //json格式
        $obj = json_decode($tmp);
        return $obj->ticket;
    }
    
    private function CURLSend($url) {
      $curl = curl_init();
      curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
      curl_setopt($curl, CURLOPT_TIMEOUT, 500);
      curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
      curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
      curl_setopt($curl, CURLOPT_URL, $url);
      $res = curl_exec($curl);
      curl_close($curl);
      return $res;
    }

3:获取微信签名及分享配置信息

//整理数据并获取微信签名
    public function generateSign(){
        $noncestr  = uniqid();
        $timestamp = time();
        $url       = 'http://' . $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];
        $ticket    = $this->getTicket();
        if ($ticket) {
            $str = 'jsapi_ticket='.$ticket.'&noncestr='.$noncestr.'×tamp='.$timestamp.'&url='.$url;
            $signature = sha1($str);
            $data['noncestr'] = $noncestr;
            $data['timestamp'] = $timestamp;
            $data['signature'] = $signature;
            $data['appId'] = 第二步获取的AppID的值;
            $data['link'] = $url;
            return $data;
        }
    }

4:赋值给模板

public function index(){
    $this->assign('wxdata',$this->generateSign());
}

说明:PHP代码已完成下面是 js 代码

<!--引入微信官网给的 jssdk 包-->
<script type="" src="https://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

6:接下来就是配置文件了

<script>
    //设置配置文件
    wx.config({
            debug: false,       //调试模式是否开启,开启则在PC端控制台console里面打印,在手机端就是弹出状态吗
            appId: "{$wxdata['appId']}",     
            timestamp: "{$wxdata['timestamp']}",   
            nonceStr: "{$wxdata['noncestr']}",    
            signature: "{$wxdata['signature']}",  
            jsApiList: [
                'onMenuShareTimeline',       //分享到朋友圈
                'onMenuShareAppMessage',    //分享给朋友
                'onMenuShareQQ',           //分享给QQ好友
                'onMenuShareQZone'        //分享到QQ空间
            ]
        });
        //调用接口
        wx.ready(function(){
            //掉用分享给朋友的接口,这里只做分享给朋友,分享到其他地方以此类推
            wx.onMenuShareAppMessage({
                title: '你要分享的标题', // 分享标题
                desc: '分享的内容描述', // 分享描述
                link: "当前页面的地址", // 分享链接,注意:该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: "分享要展示的图片", // 分享图标
                success: function (res) {
                    alert('分享成功')
                }
            });
             // 分享到朋友圈
            wx.onMenuShareTimeline({
                title: wxShareTitle, // 分享标题
                link: wxShareLink, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: wxShareLogo, // 分享图标
                success: function () {
                    // 设置成功
                }
            });
        });
</script>

相关推荐