share.blade.php 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  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">《清明时节雨纷纷》</p>
  77. <div class="user_list">
  78. <img src="/static/img/defalut.png" alt="" />
  79. <img src="/static/img/defalut.png" alt="" />
  80. <img src="/static/img/defalut.png" alt="" />
  81. </div>
  82. </div>
  83. </div>
  84. </div>
  85. </main>
  86. </body>
  87. {{--<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>--}}
  88. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  89. <script>
  90. console.log('222222')
  91. var js_config = {
  92. debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  93. appId: "{{$js_config['appId']}}", // 必填,公众号的唯一标识
  94. timestamp: {{$js_config['timestamp']}}, // 必填,生成签名的时间戳
  95. nonceStr: "{{$js_config['nonceStr']}}", // 必填,生成签名的随机串
  96. signature: "{{$js_config['signature']}}",// 必填,签名
  97. jsApiList: ['onMenuShareQQ', 'onMenuShareWeibo','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQZone']//['{{implode("','",$js_config['jsApiList'])}}'] // 必填,需要使用的JS接口列表
  98. };
  99. var config = {
  100. //json_encode($share_config)
  101. title:"{{$share_config['title']}}",
  102. desc: "{{$share_config['desc']}}", // 分享描述
  103. link: "{!! $share_config['link'] !!}",// 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  104. imgUrl: "{{$share_config['imgUrl']}}", // 分享图标
  105. };
  106. wx.config(
  107. js_config
  108. );
  109. wx.ready(function () { //需在用户可能点击分享按钮前就先调用
  110. wx.onMenuShareTimeline(
  111. config
  112. )
  113. wx.onMenuShareAppMessage(
  114. config
  115. )
  116. wx.onMenuShareQZone(
  117. config
  118. )
  119. wx.onMenuShareQQ(
  120. config
  121. )
  122. });
  123. </script>
  124. </html>