share.blade.php 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta
  6. name="viewport"
  7. content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
  8. />
  9. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  10. <title>分享免费阅读</title>
  11. <style>
  12. html,
  13. body {
  14. margin: 0 auto;
  15. padding: 0;
  16. max-width: 450px;
  17. font-size: 100px;
  18. }
  19. p {
  20. margin: 0;
  21. }
  22. .main_box {
  23. font-size: 0;
  24. position: relative;
  25. }
  26. .main_box img {
  27. width: 100%;
  28. }
  29. .bg_wrap {
  30. position: fixed;
  31. top: 0;
  32. bottom: 0;
  33. left: 0;
  34. right: 0;
  35. background: url(/static/img/bg_wrap.png) no-repeat left top / cover;
  36. }
  37. .rel_wrap {
  38. position: relative;
  39. }
  40. .abs_wrap {
  41. position: absolute;
  42. top: 42%;
  43. left: 50%;
  44. transform: translateX(-50%);
  45. width: 88%;
  46. }
  47. .book_name {
  48. font-size: 0.18rem;
  49. color: #fff;
  50. width: 100%;
  51. text-align: center;
  52. margin-bottom: 18%;
  53. }
  54. .user_list {
  55. font-size: 0;
  56. display: flex;
  57. justify-content: space-between;
  58. align-items: center;
  59. }
  60. .user_list img {
  61. width: 0.65rem;
  62. height: 0.65rem;
  63. border-radius: 50%;
  64. }
  65. .d_none {
  66. display: none;
  67. }
  68. </style>
  69. </head>
  70. <body>
  71. <main class="main_box">
  72. <div class="bg_wrap">
  73. <div class="rel_wrap">
  74. <img src="/static/img/bg.png" alt="" />
  75. <div class="abs_wrap">
  76. <p class="book_name">{{$params['book_name']}}</p>
  77. <div class="user_list">
  78. @if(isset($share_bring_users[0]['head_img']))
  79. <img src="{{$share_bring_users[0]['head_img']}}" alt="" />
  80. @else
  81. <img src="/static/img/defalut.png" alt="" />
  82. @endif
  83. @if(isset($share_bring_users[1]['head_img']))
  84. <img src="{{$share_bring_users[1]['head_img']}}" alt="" />
  85. @else
  86. <img src="/static/img/defalut.png" alt="" />
  87. @endif
  88. @if(isset($share_bring_users[2]['head_img']))
  89. <img src="{{$share_bring_users[2]['head_img']}}" alt="" />
  90. @else
  91. <img src="/static/img/defalut.png" alt="" />
  92. @endif
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. </main>
  98. </body>
  99. {{--<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>--}}
  100. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  101. <script>
  102. console.log('222222')
  103. var js_config = {
  104. debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  105. appId: "{{$js_config['appId']}}", // 必填,公众号的唯一标识
  106. timestamp: {{$js_config['timestamp']}}, // 必填,生成签名的时间戳
  107. nonceStr: "{{$js_config['nonceStr']}}", // 必填,生成签名的随机串
  108. signature: "{{$js_config['signature']}}",// 必填,签名
  109. jsApiList: ['onMenuShareQQ', 'onMenuShareWeibo','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQZone']//['{{implode("','",$js_config['jsApiList'])}}'] // 必填,需要使用的JS接口列表
  110. };
  111. var config = {
  112. //json_encode($share_config)
  113. title:"{{$share_config['title']}}",
  114. desc: `{{$share_config['desc']}}`, // 分享描述
  115. link: "{!! $share_config['link'] !!}",// 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  116. imgUrl: "{{$share_config['imgUrl']}}", // 分享图标
  117. };
  118. wx.config(
  119. js_config
  120. );
  121. wx.ready(function () { //需在用户可能点击分享按钮前就先调用
  122. wx.onMenuShareTimeline(
  123. config
  124. )
  125. wx.onMenuShareAppMessage(
  126. config
  127. )
  128. wx.onMenuShareQZone(
  129. config
  130. )
  131. wx.onMenuShareQQ(
  132. config
  133. )
  134. });
  135. </script>
  136. </html>