share.blade.php 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  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>
  89. console.log('222222')
  90. var js_config = {
  91. debug: "{{$js_config['debug']}}", // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  92. appId: "{{$js_config['appId']}}", // 必填,公众号的唯一标识
  93. timestamp: {{$js_config['timestamp']}}, // 必填,生成签名的时间戳
  94. nonceStr: "{{$js_config['nonceStr']}}", // 必填,生成签名的随机串
  95. signature: "{{$js_config['signature']}}",// 必填,签名
  96. jsApiList: [{{implode(',',$js_config['jsApiList'])}}] // 必填,需要使用的JS接口列表
  97. };
  98. var config = {
  99. //json_encode($share_config)
  100. title:"{{$share_config['title']}}",
  101. desc: "{{$share_config['desc']}}", // 分享描述
  102. link: "{{$share_config['link']}}",// 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  103. imgUrl: "{{$share_config['imgUrl']}}", // 分享图标
  104. };
  105. wx.config(
  106. js_config
  107. );
  108. wx.ready(function () { //需在用户可能点击分享按钮前就先调用
  109. wx.updateAppMessageShareData(
  110. config
  111. )
  112. wx.updateTimelineShareData(
  113. config
  114. )
  115. });
  116. </script>
  117. </html>