微信分享(二) (ThinkPHP5.1.38 分享)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/liuyingwei19880206/article/details/102748500

1. 下载微信分享需要用的sdk

https://pan.baidu.com/s/1XnX6qHht7_dR5SbMnH72Ow
我是将文件夹的文件放在了/extend/org/ 

一共三个文件(修改过jssdk 中的)

修改的第一处:

修改的第二处:

修改第三处:

个人(jssdk 存放地址)

2. 微信config 配置

   微信公众平台的appid 和sercet  /app.php 文件

"wxShare" =>[
    "appId"=>"wx890******912734",
    "appSercet"=>'898e5********8a09bb75203',
],

3. 创建控制器 (控制器文件)

<?php
namespace app\index\controller;
use think\Controller;
use think\facade\Config;
use think\Request;
class WxShare extends Controller
{
    public function index()
    {

        $jssdkObj = new \org\Jssdk(Config::get("wxShare")['appId'],Config::get("wxShare")['appSercet']);
        $res = $jssdkObj->getSignPackage();
        $appId = $res['appId'];
        $timestamp = $res['timestamp'];
        $nonceStr = $res['nonceStr'];
        $signature = $res['signature'];
        $this->assign(
            array(
                "appId"=>$appId,
                "timestamp"=>$timestamp,
                "nonceStr"=>$nonceStr,
                "signature"=>$signature,
            )
        );
        return $this->fetch("index/index");
    }

    public function wxShare(Request $request)
    {
        $jssdkObj = new \org\Jssdk(Config::get("wxShare")['appId'],Config::get("wxShare")['appSercet']);
        $res = $jssdkObj->getSignPackage();
        $appId = $res['appId'];
        $timestamp = $res['timestamp'];
        $nonceStr = $res['nonceStr'];
        $signature = $res['signature'];
        $data = (
            array(
                "appId"=>$appId,
                "timestamp"=>$timestamp,
                "nonceStr"=>$nonceStr,
                "signature"=>$signature,
            )
        );
        return json(['code'=>0,"message"=>"ok","data"=>$data]);
    }
}

4. 页面

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>分享demo</title>
    <meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
    <meta name="viewport" media="(device-height: 568px)" content="initial-scale=1.0,user-scalable=no,maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
</head>
<script  src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<body >
<p>
    <h2>分享demo</h2>
</p>
<a style="color:blue;margin-top: 30px;text-align: center" href="https://www.canbit.com/m/register?redirect=https%3A%2F%2Fwww.canbit.com%2F" target="_blank">去注册</a>
<script>
    $(function() {
        //微信分享
        $.ajax({
            "url":"",  //接口地址 你公众号设置的js 安全域名
            "type":"post",
            "dataType":"json",
            "data":{"url": window.location.href},
            "success":function(data){
                console.log(1+data);
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                    appId: data.data.appId, // 必填,公众号的唯一标识
                    timestamp: data.data.timestamp, // 必填,生成签名的时间戳
                    nonceStr: data.data.nonceStr, // 必填,生成签名的随机串
                    signature: data.data.signature,// 必填,签名,见附录1
                    jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
                });
                wx.ready(function(){
                    var imgurl = 'http://wechat.xuanxuankeji.com/share.jpg';
                    var title = '自定义title';
                    var desc = '自定义描述';
                    var url="http://wechat.xuanxuankeji.com";
                    wx.onMenuShareTimeline({
                        title: title, // 分享标题
                        desc: desc, // 分享描述
                        link: url, // 分享链接
                        imgUrl: imgurl, // 分享图标
                        success: function () {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });
                    wx.onMenuShareAppMessage({
                        title: title, // 分享标题
                        desc: desc, // 分享描述
                        link: url, // 分享链接
                        imgUrl: imgurl, // 分享图标
                        type: '', // 分享类型,music、video或link,不填默认为link
                        dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
                        success: function () {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });
                    wx.onMenuShareQQ({
                        title: title, // 分享标题
                        desc: desc, // 分享描述
                        link: url, // 分享链接
                        imgUrl: imgurl, // 分享图标
                        success: function () {
                            // 用户确认分享后执行的回调函数
                        },
                        cancel: function () {
                            // 用户取消分享后执行的回调函数
                        }
                    });
                });
            }
        });
    });

    function wxstart(data,url){
        console.log(222);
        var url = url;  //分享的文章地址
        var appId = data.appId;
        var timestamp = data.timestamp;
        var nonceStr = data.nonceStr;
        var signature = data.signature;
    }

</script>
</body>
</html>

5. 分享后的效果图(微信)

猜你喜欢

转载自blog.csdn.net/liuyingwei19880206/article/details/102748500