微信SDK网页分享

微信官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#111

步骤一：绑定域名

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

image.png

步骤二：引入JS文件

步骤三：编写html需分享页面js代码

    function getjssdkconfig() {
        var shareLinkUlr = location.href.split("#")[0]; // 获取当前的url 去掉 # 之后的部分
        shareLinkUlr = shareLinkUlr.replace(/\&/g, '%26'); // 将 & 替换成 %26
        //需要调用的微信接口类型，详细请看微信官方文档，如下是分享至朋友或朋友圈接口
        var apis="onMenuShareTimeline,onMenuShareAppMessage";
        //debug=true可以用来调试错误，开发时用
        var debug=false;
        var json=false;
        var link=shareLinkUlr;
        var data = "apis="+apis+"&debug="+debug+"&json="+json+"&url="+link; // 拼接 get 参数
        $.ajax({
            type:'get',
            //填写后台接口地址，获取数据
            url:'https://www.summer.kim/api/jssdkconfig?'+data,
            success:function (data) {
                configJsSDKAndDoSomething(JSON.parse(data));
            }
        });
    }

    function configJsSDKAndDoSomething(config){
        // var ticket =sessionStorage.getItem('ticket');
        wx.config(config);
        wx.ready(function() {
            // 其他的一些操作
            var options = {
                title: '大耳朵图图', // 分享标题
                link: 'http://www.summer.kim', //分享的链接
                imgUrl: 'http://www.summer.kim/index/images/text02.jpg', // 分享图标
                desc: '情不知所起，一往而深！', // 分享描述
                success: function () {
                    console.info('分享成功！');
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    console.info('取消分享！');
                    // 用户取消分享后执行的回调函数
                }
            };
        wx.onMenuShareTimeline(options); // 分享到朋友圈
        wx.onMenuShareAppMessage(options); // 分享给朋友
    });

    $(document).ready(function() {
        getjssdkconfig();
    })

步骤四：后台安装easywechat拓展包

easywechat官方网站：https://www.easywechat.com/

1、使用composer安装

//Laravel < 5.8
composer require "overtrue/laravel-wechat:~4.0"

//Laravel >= 5.8
composer require "overtrue/laravel-wechat:~5.0"

2、配置
在 config/app.php 注册 ServiceProvider 和 Facade (Laravel 5.5 + 无需手动注册)

'providers' => [
    // ...
    Overtrue\LaravelWeChat\ServiceProvider::class,
],
'aliases' => [
    // ...
    'EasyWeChat' => Overtrue\LaravelWeChat\Facade::class,
],

3、创建配置文件：

php artisan vendor:publish --provider="Overtrue\LaravelWeChat\ServiceProvider"

4、修改应用根目录下的 config/wechat.php 中对应的参数即可。

5、每个模块基本都支持多账号，默认为 default。

步骤五：在对应接口方法下编写如下代码获取数据

引入

use EasyWeChat\Factory;

方法代码

// 获取jssdk配置
public function getJSSDKConfig(Request $request)
{
    // dump(explode(',',$request->get('apis')));
    $arr = explode(',',$request->get('apis'));
    $debug = $request->get('debug') ==='true' ? true : false;
    $json = $request->get('json') ==='true' ? true : false;
    $url =$request->get('url');
    //dump($request->get('url'));
    // check
    if(!$url){
        return response()->json(['status'=>false,'msg'=>'params error','data'=>'']);
    }
    $config = [
         'app_id' => $this->appid,
         'secret' => $this->secret,
         'token' => 'aOWp1rex6vMbwMSFOzBVVOHRGZ5RyV5A',
         //'response_type' => 'array',
         //...
    ];
    $app = Factory::officialAccount($config);
    //$app = app('wechat.official_account');
    $app->jssdk->setUrl($url);
    $config = $app->jssdk->buildConfig($arr,$debug,$json,$url);
    return response($config);
}