【PHP+微信开发】JS-SDK + php 实现分享朋友/朋友圈,QQ/QQ空间

一、绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

二、引入JS文件

http://res2.wx.qq.com/open/js/jweixin-1.6.0.js

三、通过config接口注入权限验证配置

把需要用到的JS-SDK的接口都放在jsApiList里面

四、示例代码

前端

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>微信分享</title>
        <script type="text/javascript" src="/static/index/js/jquery.js"></script>
        <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    </head>
    <body>
        
        <script type="text/javascript" charset="utf-8">
        wx.config({
            debug: false,
            appId: '{$signPackage.appId}',
            timestamp: {$signPackage.timestamp},
            nonceStr: '{$signPackage.nonceStr}',
            signature: '{$signPackage.signature}',
            jsApiList: [
              // 所有要调用的 API 都要加到这个列表中
              'updateAppMessageShareData', 'updateTimelineShareData'
            ]
          });
          
          // 在这里调用 API
        wx.ready(function () {
            // 分享朋友及qq
            wx.updateAppMessageShareData({ 
                title: '测试分享标题', // 分享标题
                desc: '分享描述', // 分享描述
                link: 'http://test.zizhuyou.site/index/Plantocr/index', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://test.zizhuyou.site/static/index/images/dog.png', // 分享图标
                success: function () {
                  // 设置成功
                  console.log('设置成功');
                  //alert('分享朋友或QQ成功');
                },
                
            });
            
            // 分享朋友圈及QQ空间
            wx.updateTimelineShareData({ 
                title: '测试分享标题', // 分享标题
                link: 'http://test.zizhuyou.site/index/Plantocr/index', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://test.zizhuyou.site/static/index/images/dog.png', // 分享图标
                success: function () {
                  // 设置成功
                  //alert('分享朋友圈及QQ空间成功');
                }
            })
        })
        </script>
    </body>
</html>

后端

<?php
namespace app\index\controller;
use think\Controller;
use app\index\controller\Wechat;

/**
 * 微信功能开发
 */
class Wxopera extends Wechat
{

    /**
     * 微信分享
     */
    public function share(){
        $signPackage = json_decode($this->getSignPackage(),true);
    
        $this->assign('signPackage',$signPackage);
        return $this->fetch();
    }
    
    /**
     * 生成签名
     */
    public function getSignPackage() 
    {

        // 实例化微信操作类
        $wx = new Wechat();

        // 获取 ticket
        $jsapiTicket = $wx->getJsApiTicket();

        // 注意 URL 一定要动态获取,不能 hardcode.
        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        // 当前页面的url
        $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";
        // 对string进行sha1加密
        $signature = sha1($string);

        $signPackage = array(
          "appId"     => $wx->APPID,
          "nonceStr"  => $nonceStr,
          "timestamp" => $timestamp,
          "signature" => $signature
        );
        return json_encode($signPackage); 
    }

    /**
     * 生成签名的随机串
     */
    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;
    }

}

注意:Wechat类是我自己封装的,比如获取access_token,ticket,curl请求这些,代码可以看上一篇文章 PHP 微信开发之生成二维码,并扫码关注微信公众号https://blog.csdn.net/qq_25285531/article/details/130356238

思路说明:

1.公众号配置:JS安全域名、IP白名单

2.获取AccessToken,需要判断过期时间

3.获取JsApiTicket,拿获取到的AccessToken换取JsApiTicket,需要判断过期时间

4.生成签名,需要jsapiTicket+随机字符串+时间戳+当前URL 组合并sha1加密

5.组合微信JSAPI需要的参数:appId、随机字符串、时间戳、签名

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,关于微信分享的问题,我可以给你一些指导。首先,你需要在你的 HTML5 页面中引入微信 JS-SDK,然后在页面加载完成后初始化 JS-SDK。接着,你需要通过 JS-SDK 提供的接口来配置分享的内容和参数,最后调用分享接口即可完成分享。 具体步骤如下: 1. 引入微信 JS-SDK 在 HTML 页面中引入微信 JS-SDK,如下所示: ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 2. 初始化 JS-SDK 在页面加载完成后,初始化 JS-SDK。你需要先通过微信公众平台获取到你的 AppID 和 AppSecret,然后使用这些信息初始化 JS-SDK。示例代码如下: ```javascript wx.config({ debug: false, appId: 'your app id', timestamp: 'your timestamp', nonceStr: 'your nonceStr', signature: 'your signature', jsApiList: [ 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] }); ``` 其中,`appId`、`timestamp`、`nonceStr` 和 `signature` 分别是通过微信公众平台生成的,用于验证你的身份和权限的参数。`jsApiList` 是你需要使用的 JS-SDK 接口列表。 3. 配置分享内容和参数 在初始化 JS-SDK 后,你需要通过 JS-SDK 提供的接口来配置分享的内容和参数。示例代码如下: ```javascript wx.ready(function() { wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); ``` 其中,`onMenuShareAppMessage` 和 `onMenuShareTimeline` 分别是分享给好友和分享朋友圈的接口。你需要提供分享的标题、描述、链接和缩略图等参数。 4. 调用分享接口 最后,在页面中调用分享接口即可完成分享。示例代码如下: ```javascript wx.ready(function() { wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); // 在需要分享的地方调用 shareAppMessage 和 shareTimeline 接口 // 示例代码如下 document.querySelector('#share-btn').addEventListener('click', function() { wx.shareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); document.querySelector('#share-timeline-btn').addEventListener('click', function() { wx.shareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); }); ``` 这样就完成了微信分享功能的实现。需要注意的是,由于微信的安全机制,分享的链接必须是在微信公众平台中配置过的域名,否则可能无法正常分享

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

下页、再停留

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值