nanhuashi_h5/src/App.vue

<template>
  <div id="app">
    <!-- <van-nav-bar
      title="南华云灯会"
      left-arrow
      :border="false"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    /> -->
    <page-slide indexPagePath="/login">
      <router-view
        class="pageContent"
        :style="{ height: isshow ? 'calc(100vh - 65px)' : '100vh' }"
      />
    </page-slide>
    <tabbar v-show="isshow" />
  </div>
</template>

<script>
import pageSlide from '@/components/page-slide'
import tabbar from '@/components/tabbar/index.vue'
import jsonp from 'jsonp'
import wx from 'weixin-js-sdk'
export default {
  name: 'App',
  components: {
    pageSlide,
    tabbar
  },
  created() {
    let token = this.getUrlParams("token")
    if (token) {
      this.$store.commit('home/setToken', token)
    }
    window.onhashchange = () => {
      console.log('监听到了hash地址的变化', location.hash)
      // location.hash方法用于获取哈希地址
      switch (location.hash) {
        case '#/home':
          this.comName = 'Home'
          break
        case '#/movie':
          this.comName = 'Movie'
          break
        case '#/about':
          this.comName = 'About'
          break
      }
    }
  },
  computed: {
    isshow() {
      return this.$route.meta.showHeader
    }
  },
  mounted() {
    this.wxShare()
  },
  methods: {
    async getWinxinCodeFun(huiyi_id){//获得微信code
            var self=this;
            if(this.getQuery("code")){
                // 拿到code值
                self.code=tools.getQuery("code");
                //把微信打乱的url地址静默修复
                var changeUrl=`${window.location.protocol}//${window.location.host}${window.location.pathname}${window.location.hash}${window.location.search}`;
                window.history.pushState({},0, changeUrl);

                WXAPI.wxLogin(self.code).then((sucData)=>{//调用后台的微信登录方法
                    self.commonLoginFun(sucData);//调用登录成功后的公共方法
                })
                return;
            }
            var appId = 'wxc09c15943347c4a4';//后端接口获取appid什么的
            var url=encodeURIComponent(window.location.href);
            var getCodeUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${url}&response_type=code&scope=snsapi_base&state=1#wechat_redirect`;
            window.location.href = getCodeUrl;
        },
    getQuery(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
          return unescape(r[2]);
      }
      return null;
    },
    getUrlParams(name) {
      let url =  window.location.href
        // 通过 ? 分割获取后面的参数字符串
        let urlStr = url.split('?') && url.split('?')[1]
        // 创建空对象存储参数
      let obj = {};
        // 再通过 & 将每一个参数单独分割出来
      let paramsArr = urlStr && urlStr.split('&') || []
      for(let i = 0,len = paramsArr.length;i < len;i++){
            // 再通过 = 将每一个参数分割为 key:value 的形式
        let arr = paramsArr[i].split('=')
        obj[arr[0]] = arr[1];
      }
      return obj && obj[name]
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onClickRight() {},
    wxShare() {
      let url = window.location.href.split('#')[0]
      if (window.location.ancestorOrigins) {
        url = window.location.ancestorOrigins[0]
      }
      jsonp(
        'https://www.4dage.com/wechat/jssdk/share/?uri=' +
          window.escape(url) +
          '&name=厦门四维时代微信公众号',
        'success_jsonp',
        function (err, data) {
          if (err) {
            console.err(err)
          } else {
            console.log(wx)
            wx.config({
              debug: false, // 开启调试模式
              appId: data.appId,
              timestamp: data.timestamp,
              nonceStr: data.nonceStr,
              signature: data.signature,
              jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo',
                'hideMenuItems',
                'showMenuItems',
                'hideAllNonBaseMenuItem',
                'showAllNonBaseMenuItem',
                'translateVoice',
                'startRecord',
                'stopRecord',
                'onRecordEnd',
                'playVoice',
                'pauseVoice',
                'stopVoice',
                'uploadVoice',
                'downloadVoice'
              ]
            })
          }
          wx.error(function (err) {
            console.log(err,'err')
          })
          wx.ready(function () {
            var shareData = {
              title: '四维看看', //  标题
              desc: '可将线下场景自动转为线上四维场景。好用不贵，全球百万用户首选', //  描述
              link: window.location.href, //  分享的URL，必须和当前打开的网页的URL是一样的
              imgUrl: 'https://4dkk.4dage.com/FDKKIMG/icon/kankan_icon180.png', //  缩略图地址
              success: function () {},
              cancel: function () {}
            }
            wx.onMenuShareAppMessage(shareData)
            wx.onMenuShareTimeline(shareData)
            wx.onMenuShareQQ(shareData)
            wx.onMenuShareQZone(shareData)
          })
        }
      )
    }
  }
}
</script>

<style>
#app {
  width: 100%;
  height: 100%;
  /* padding-top: 46px; */
  position: relative;
}
.pageContent {
  /* padding-top: 46px; */
  position: relative;
}
.van-nav-bar {
  position: absolute;
  width: 100%;
  border: none !important;
  background: none !important;
}
.van-nav-bar__title,
.van-nav-bar .van-icon {
  color: #fff;
}
.showImgbase64{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  position: absolute;
  z-index: 11;
}
.van-image__img{
  width: auto;
  height: auto;
}
</style>