Mother-s-Day/share.html at master · zhangdichn/Mother-s-Day · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>创客贴母亲节</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <link rel="stylesheet" type="text/css" href="./css/share.css">
  <link rel="stylesheet" type="text/css" href="./css/reset.css">
</head>
<body>
<video
        id="myvideo"
        src="https://pub.cdn.oss.chuangkit.com/video/mothers_day_960_540.mp4"
        controls="controls"
        width="100%"
>
  您的浏览器不支持 video 标签。
</video>
<section class="first-section"></section>
<section class="second-section"></section>
<div id="share-button">分享给朋友</div>
<div class="modal">
  <div class="share-tip-container">
    <span class="pointer-icon">👆</span>
    <p class="share-tip">点击这里分享</p>
  </div>
</div>
<!--引入jQuery-->
<script src="./libs/jquery-1.12.4.min.js"></script>
<script>
  $(document).ready(function(){
    // 绑定页面的resize事件以在变化时更新html的font-size
    $(window).resize(setFontSize);
  });
  // 设置html的font-size
  function setFontSize() {
    document.getElementsByTagName('html')[0].style.fontSize = (window.innerWidth / 375) * 100 + 'px';
  }
  document.addEventListener('touchstart',touch, false);
  document.addEventListener('touchmove',touch, false);
  document.addEventListener('touchend',touch, false);

  function touch (event){
    var event = event || window.event;

    switch(event.type){
      case "touchstart":
        window.touchX =  event.touches[0].clientX;
        break;
      case "touchend":
        if((event.changedTouches[0].clientX - window.touchX) > 30) {
          window.location.href = 'question.html';
          console.log('后退');
        }
        break;
    }
  }
$(".share-button").click(function () {
  $(".modal").css("display","block");
});
</script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
  wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: '', // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [
        'onMenuShareTimeline'
    ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  });
  wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
    // config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。
    // 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
    wx.checkJsApi({
      jsApiList: ['onMenuShareTimeline'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
      success: function(res) {
        console.log(JSON.stringify(res));
        // 以键值对的形式返回，可用的api值true，不可用为false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
      }
    });
    // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
    document.querySelector('#share-button').onclick = function () {
      wx.onMenuShareTimeline({
        title: '互联网之子',
        link: 'http://movie.douban.com/subject/25785114/',
        imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
        trigger: function (res) {
          // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
          alert('用户点击分享到朋友圈');
        },
        success: function (res) {
          alert('已分享');
        },
        cancel: function (res) {
          alert('已取消');
        },
        fail: function (res) {
          alert(JSON.stringify(res));
        }
      });
      alert('已注册获取“分享到朋友圈”状态事件');
    };
  });
  wx.error(function (res) {
    alert(res.errMsg);
  });
</script>
</body>
</html>