美文网首页
微信公众号分享功能

微信公众号分享功能

作者: Stargazes | 来源:发表于2019-10-30 11:05 被阅读0次

    1.composer 引入 easyWeChat架包 composer require overtrue/wechat:~4.0 -vvv (文档地址 https://www.easywechat.com/docs/4.1/basic-services/jssdk
    )

    1. 控制器实例化 操作类 并返回数据
        public function index()
        {
            //公众号配置信息
            $config = [
                'app_id' => env('WECHAT_OFFICIAL_ACCOUNT_APPID'),
                'secret' => env('WECHAT_OFFICIAL_ACCOUNT_SECRET'),
                'response_type' => 'array',
            ];
    
            $app = Factory::officialAccount($config);
    
            $result = $app->jssdk->buildConfig([],false,false, $json = true);//获取分享所需参数
    
            $result = json_decode($result,true);
            /**
             * 分享返回的参数
             */
            $nonceStr = $result['nonceStr'];
            $timestamp = $result['timestamp'];
            $url = $result['url'];
            $signature = $result['signature'];
    
            return view('test',compact('nonceStr','timestamp','url','signature')); //传递到页面上
    
        }
    

    3.页面js处理

    <script type="text/javascript">
            wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                    appId: 'wx85194f720bdcd83a', // 必填,公众号的唯一标识
                    timestamp:"{{$timestamp}}" , // 必填,生成签名的时间戳
                    nonceStr: "{{$nonceStr}}", // 必填,生成签名的随机串
                    signature: "{{$signature}}",// 必填,签名
                    jsApiList: ['updateAppMessageShareData']// 必填,需要使用的JS接口列表
            });
    
            wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
                wx.updateAppMessageShareData({ 
                    title: '测试', // 分享标题
                    desc: '测试描写', // 分享描述
                    link: "{{$url}}", // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1573007888&di=13ec4f4fc50f4f52a82755a7a72eed7e&imgtype=jpg&er=1&src=http%3A%2F%2Fgss0.baidu.com%2F-Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fd1a20cf431adcbef6df30761a0af2edda2cc9f95.jpg', // 分享图标
                success: function () {
                // 设置成功
                }
      })
    });
    </script>
    

    相关文章

      网友评论

          本文标题:微信公众号分享功能

          本文链接:https://www.haomeiwen.com/subject/mohovctx.html