zhengxy
/
h5Pages


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265
							<!DOCTYPE html>
<html lang="zh" style="font-size: 365.867px;">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="IE=8">
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-control" content="no-cache">
  <meta http-equiv="Cache" content="no-cache">
  <link rel="stylesheet" type="text/css" href="./static/public_css.css">
  <script type="text/javascript" src="./static/public.js"></script>
  <script type="text/javascript" src="./static/nanoid.js"></script>
  <script type="text/javascript" src="./static/jquery-2.1.0.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.js"></script> -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.9/vue.min.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <title></title>
  <style>
    .container {
      background-color: #000;
      min-height: 100vh;
      box-sizing: border-box;
      position: relative;
    }

    .container .tips-wrap {
      position: fixed;
      bottom: 50vh;
      width: 100%;
      z-index: 100;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container .tips-wrap .tips {
      background-color: rgba(40, 40, 40, 0.8);
      color: aliceblue;
      font-size: 0.13rem;
      padding: 0.1rem;
      border-radius: 0.08rem;
    }

    .container .video-wrap {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>

<body>
  <div id="app" class="container">
    <!-- S toast提示语 -->
    <div class="tips-wrap" v-show="isShowMsg">
      <span class="tips">{{ msg }}</span>
    </div>
    <!-- E toast提示语 -->

    <div class="video-wrap">
      <video v-if="videoUrl" ref="videoRef" x5-playsinline="true" playsinline="true" webkit-playsinline="true"
        x-webkit-airplay="true" x5-video-orientation="portraint" :src="videoUrl" muted autoplay controls
        controlslist="nodownload" style="width:100%;height:auto;object-fit: fill;">
      </video>
    </div>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data() {
        return {
          isShowMsg: false,
          msg: '',
          videoUrl: '',
          shareInfo: {
            title: '',
            link: '',
            desc: '',
            imgUrl: '',
          },
        }
      },
      watch: {
        isShowMsg(isShow) {
          if (isShow) {
            setTimeout(() => {
              this.isShowMsg = false;
            }, 2000);
          }
        },
      },
      mounted() {
        console.log('mounted => ',)
        this.handleSetSign()
      },
      methods: {
        handleSetSign() {
          const _this = this
          $.ajax({
            url: "http://tbkadmin.wenxingshuju.com/getSignPackage",
            type: "GET",
            dataType: 'json',
            data: {},
            success: (res) => {
              console.log('res => ', res)
              wx.config({
                debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。true为调用开启
                appId: res.appId,//appid// 必填，公众号的唯一标识
                timestamp: res.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.nonceStr,// 必填，生成签名的随机串
                signature: res.signature,// 必填，签名，
                jsApiList: [
                  'updateAppMessageShareData',//朋友圈
                  'updateTimelineShareData',//微信朋友
                ]
              });
              _this.handleGetPageInfo()
            },
            error: (err) => {
              console.log('err => ', err)
            }
          });
        },

        handleGetPageInfo() {
          const _this = this
          $.ajax({
            url: "http://tbkadmin.wenxingshuju.com/getShareContent",
            type: "GET",
            dataType: 'json',
            data: {},
            success: (res) => {
              console.log('res => ', res)
              _this.videoUrl = res.videoUrl
              _this.shareInfo.title = res.title
              _this.shareInfo.link = res.link
              _this.shareInfo.desc = res.desc
              _this.shareInfo.imgUrl = res.imgUrl
              _this.handleSetPageTitle(res.title)
              _this.handleSetWxShare()
            },
            error: (err) => {
              console.log('err => ', err)
            }
          });
        },

        handleSetWxShare() {
          const { title, link, desc, imgUrl } = this.shareInfo
          const _this = this
          wx.ready(function () {
            // 分享到朋友圈
            wx.updateTimelineShareData({
              title: title, // 分享标题
              link: link, // 分享链接
              desc: desc, // 分享描述
              imgUrl: imgUrl, // 分享图标的URL
              success: function () {
                // 设置成功
                console.log('分享到朋友圈成功 => title ', title);
                console.log('分享到朋友圈成功 => link ', link);
                console.log('分享到朋友圈成功 => desc ', desc);
                console.log('分享到朋友圈成功 => imgUrl ', imgUrl);
              },
              cancel: function (err) {
                // 设置失败
                console.log('分享到朋友圈失败');
                _this.handleShowToastMsg(err)
              }
            });

            // 分享给朋友
            wx.updateAppMessageShareData({
              title: title, // 分享标题
              desc: desc, // 分享描述
              link: link, // 分享链接
              imgUrl: imgUrl, // 分享图标的URL
              success: function () {
                // 设置成功
                console.log('分享给朋友成功 => title ', title);
                console.log('分享给朋友成功 => desc ', desc);
                console.log('分享给朋友成功 => link ', link);
                console.log('分享给朋友成功 => imgUrl ', imgUrl);
              },
              cancel: function (err) {
                // 设置失败
                console.log('分享给朋友失败');
                _this.handleShowToastMsg(err)
              }
            });
          });
          wx.error(function (error) {
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
            console.log("wx.error", error);
          });
        },


        // toast提示
        handleShowToastMsg(msg) {
          this.msg = msg
          this.isShowMsg = true
        },
        // 设置title
        handleSetPageTitle(title) {
          document.title = title
        },

        doPlay() {
          try {
            const _this = this
            WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
              const videoHtml = _this.$refs.videoRef
              videoHtml.play();
            });
          } catch (error) {
            console.log(error)
          }
        },
        handleSetIosAutoPlay() {
          try {
            if (WeixinJSBridge) {
              doPlay();
            } else {
              document.addEventListener(
                "WeixinJSBridgeReady",
                function () {
                  doPlay();
                },
                false
              );
            }
          } catch (error) {
            console.log(error)
          }
        },
        handleSetAndroidAutoPlay() {
          const ua = navigator.userAgent;
          const isAndroid = ua.indexOf("Android") > -1 || ua.indexOf("Linux") > -1;
          const isWeixin = ua.indexOf("MicroMessenger") > 0;
          const _this = this
          if (isAndroid && isWeixin) {
            document.addEventListener(
              "touchstart",
              function () {
                const videoHtml = _this.$refs.videoRef
                videoHtml.play();
              },
              false
            );
          }
        },
      },
    })
  </script>
</body>

</html>