123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 |
- <!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">{{$params['book_name']}}</p>
- <div class="user_list">
- @if(isset($share_bring_users[0]['head_img']))
- <img src="{{$share_bring_users[0]['head_img']}}" alt="" />
- @else
- <img src="/static/img/defalut.png" alt="" />
- @endif
- @if(isset($share_bring_users[1]['head_img']))
- <img src="{{$share_bring_users[1]['head_img']}}" alt="" />
- @else
- <img src="/static/img/defalut.png" alt="" />
- @endif
- @if(isset($share_bring_users[2]['head_img']))
- <img src="{{$share_bring_users[2]['head_img']}}" alt="" />
- @else
- <img src="/static/img/defalut.png" alt="" />
- @endif
- </div>
- </div>
- </div>
- </div>
- </main>
- </body>
- {{--<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>--}}
- <script src="http://res.wx.qq.com/open/js/jweixin-1.0.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>
|