<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
  />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>分享免费阅读</title>
  <style>
    html,
    body {
      margin: 0 auto;
      padding: 0;
      max-width: 450px;
      font-size: 100px;
    }

    p {
      margin: 0;
    }

    .main_box {
      font-size: 0;
      position: relative;
    }

    .main_box img {
      width: 100%;
    }

    .bg_wrap {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: url(/static/img/bg_wrap.png) no-repeat left top / cover;
    }

    .rel_wrap {
      position: relative;
    }

    .abs_wrap {
      position: absolute;
      top: 42%;
      left: 50%;
      transform: translateX(-50%);
      width: 88%;
    }

    .book_name {
      font-size: 0.18rem;
      color: #fff;
      width: 100%;
      text-align: center;
      margin-bottom: 18%;
    }

    .user_list {
      font-size: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .user_list img {
      width: 0.65rem;
      height: 0.65rem;
      border-radius: 50%;
    }

    .d_none {
      display: none;
    }
  </style>
</head>

<body>
<main class="main_box">
  <div class="bg_wrap">
    <div class="rel_wrap">
      <img src="/static/img/bg.png" alt="" />
      <div class="abs_wrap">
        <p class="book_name">《清明时节雨纷纷》</p>
        <div class="user_list">
          <img src="/static/img/defalut.png" alt="" />
          <img src="/static/img/defalut.png" alt="" />
          <img src="/static/img/defalut.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</main>
</body>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
    console.log('222222')
    var js_config = {
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: "{{$js_config['appId']}}", // 必填，公众号的唯一标识
        timestamp: {{$js_config['timestamp']}}, // 必填，生成签名的时间戳
        nonceStr: "{{$js_config['nonceStr']}}", // 必填，生成签名的随机串
        signature: "{{$js_config['signature']}}",// 必填，签名
        jsApiList: ['onMenuShareQQ', 'onMenuShareWeibo','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQZone']//['{{implode("','",$js_config['jsApiList'])}}'] // 必填，需要使用的JS接口列表
    };
    var config = {
      //json_encode($share_config)
        title:"{{$share_config['title']}}",
        desc: "{{$share_config['desc']}}", // 分享描述
        link: "{!! $share_config['link'] !!}",// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: "{{$share_config['imgUrl']}}", // 分享图标

    };
    wx.config(
        js_config
    );
    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用

        wx.onMenuShareTimeline(
            config
        )
        wx.onMenuShareAppMessage(
            config
        )
        wx.onMenuShareQZone(
            config
        )
        wx.onMenuShareQQ(
            config
        )

    });

</script>
</html>
