微信公众号分享功能

2019-10-30  本文已影响0人  Stargazes

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>
上一篇 下一篇

猜你喜欢

热点阅读