微信H5中遇到的问题Vue（二）

一、微信公众号文章链接转富文本在公众号页面上展示

链接格式：
https://mp.weixin.qq.com/s/XO6z6CCM1zpODpKcoecX7Q

取链接的方式：

 

 

 

然后产品想把这东西放到公众号网页里面，但是，它是会有问题的，当然有人会考虑用iframe标签，但这种方法并不可行，大家可以试试

1.交给后端解析

但是解析出来的文章可能会有这个属性visibility: hidden;这时候就需要我们在css加一句:

 * {-webkit-touch-callout: none;visibility: visible !important;} 

2.前端自行解决

 function getUrl(URL) {
     let http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
      //调用跨域API
      let realurl = http + '//cors-anywhere.herokuapp.com/' + URL;
      axios.get(realurl).then((response) => {
          // console.log(response)
          let html = response.data;
          html = html.replace(/data-src/g, "src")
              .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/g, '')
              .replace(/https/g, 'http');
          //let html_src = 'data:text/html;charset=utf-8,' + html;
          let html_src = html;
          $('#a').html(html)
          // console.log(html_src);
      }, (err) => {
          console.log(err);
      });
  }
  //调用getUrl方法，url为微信公众号文章链接
  var url = "https://mp.weixin.qq.com/s/Uitrf3KUdmylJhBpBF98_Q";
  getUrl(url);

其实就是发ajax，跟第一种比起来速度要慢一点，其实原理一样，但是一般公司自己的后端服务器解析要稍微快一点。

3.最后要加一句

在html的head里面要加一句代码：

 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

不加的话解析出来微信公众号文章里面的图片不能正常加载

二、时间格式（兼容IOS）

安卓和IOS上的时间格式是不一样的

 static countDown(e) {
        // ios时间格式转化
        if (e) {
            e = e.replace(/-/g, '/').substring(0, e.length - 2)
        }
        let times = e
        var nowtime = new Date(),  //获取当前时间
            endtime = new Date(times);  //定义结束时间
        var lefttime = endtime.getTime() - nowtime.getTime(),  //距离结束时间的毫秒数
            leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)),  //计算天数
            lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24),  //计算小时数
            leftm = Math.floor(lefttime / (1000 * 60) % 60),  //计算分钟数
            lefts = Math.floor(lefttime / 1000 % 60);  //计算秒数
        // console.log(lefthArr,leftmArr,leftsArr,'时间')
        return { leftd, lefth, leftm, lefts }
    }

三、基于vue的移动端商城的产品列表实现记录滚动条位置

首先这是触底加载，触底加载比较简单，就监听滚动条的位置，然后做一下判断就ok了，当然我这里其实可以优化的，比如加防抖节流。（mounted）

 

let _this = this;
    window.onscroll = function () {
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      //变量windowHeight是可视区的高度
      var windowHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      //变量scrollHeight是滚动条的总高度
      var scrollHeight =
        document.documentElement.scrollHeight || document.body.scrollHeight;
      //滚动条到底部的条件
      
      // 这里实时保存滚动条位置
      _this.gallery_scroll = document.documentElement.scrollTop;
      
      if (scrollTop + windowHeight >= scrollHeight - 1500) {
        //到了这个就可以进行业务逻辑加载后台数据了
        // _this.footerText = "我是有底线的";
        // console.log("到了底部");

        if (_this.list.length < _this.total && _this.isLoding) {
          _this.setIsLoding();
          setTimeout(() => {
            // 加载数据
            _this.storeGetIndexListPage();
          }, 200);
        }
      }
    };

 

记录滚动条位置

 // 这里实时保存滚动条位置 2 _this.gallery_scroll = document.documentElement.scrollTop; 

获取并保存到的滚动条位置，在跳转的时候进行本地存储

// 跳转详情
    gotoInfo(i) {
      let that = this;
      // 这里我们把滚动条位置存进localstorage,其实也可以存进vuex里面，但是我们做微信分享的时候，为了兼容ios做了重定向，就考虑太多了，其实都可以
      localStorage.setItem("gallery_scroll", this.gallery_scroll);
      
      this.$router.push({
        path: "/info",
        query: {
          id: that.list[i].id,
        },
      });
    },

返回后获得跳转前滚动条位置并且设置

 

if (localStorage.getItem("gallery_scroll")) {
     document.documentElement.scrollTop = ~~localStorage.getItem(
        "gallery_scroll"
      );
    } else {
      this.setParams();
      this.setlodingStatic(true);
      setTimeout(() => {
        this.storeGetIndexListPage();
      }, 300);
    }

 

数据也要进行持久化存储，我是存在vuex里面的，当然和滚动条位置同理，也可以存本地，
上面这一步进行了判断，本地是否存有滚动条位置，以此来判断是否重新加载数据。

在App.vue的生命周期里，对它进行销毁

 destroyed() { 2 localStorage.removeItem("gallery_scroll"); 3 }