微信H5中遇到的问题Vue（二）
一、微信公众号文章链接转富文本在公众号页面上展示
链接格式：
https://mp.weixin.qq.com/s/XO6z6CCM1zpODpKcoecX7Q
取链接的方式：
然后产品想把这东西放到公众号网页里面，但是，它是会有问题的，当然有人会考虑用iframe标签，但这种方法并不可行，大家可以试试
1.交给后端解析
但是解析出来的文章可能会有这个属性visibility: hidden;这时候就需要我们在css加一句:
1 * {-webkit-touch-callout: none;visibility: visible !important;}
2.前端自行解决
1 function getUrl(URL) { 2 let http = (window.location.protocol === 'http:' ? 'http:' : 'https:'); 3 //调用跨域API 4 let realurl = http + '//cors-anywhere.herokuapp.com/' + URL; 5 axios.get(realurl).then((response) => { 6 // console.log(response) 7 let html = response.data; 8 html = html.replace(/data-src/g, "src") 9 .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/g, '') 10 .replace(/https/g, 'http'); 11 //let html_src = 'data:text/html;charset=utf-8,' + html; 12 let html_src = html; 13 $('#a').html(html) 14 // console.log(html_src); 15 }, (err) => { 16 console.log(err); 17 }); 18 } 19 //调用getUrl方法，url为微信公众号文章链接 20 var url = "https://mp.weixin.qq.com/s/Uitrf3KUdmylJhBpBF98_Q"; 21 getUrl(url);
其实就是发ajax，跟第一种比起来速度要慢一点，其实原理一样，但是一般公司自己的后端服务器解析要稍微快一点。
3.最后要加一句
在html的head里面要加一句代码：
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">不加的话解析出来微信公众号文章里面的图片不能正常加载
二、时间格式（兼容IOS）
安卓和IOS上的时间格式是不一样的
1 static countDown(e) { 2 // ios时间格式转化 3 if (e) { 4 e = e.replace(/-/g, '/').substring(0, e.length - 2) 5 } 6 let times = e 7 var nowtime = new Date(), //获取当前时间 8 endtime = new Date(times); //定义结束时间 9 var lefttime = endtime.getTime() - nowtime.getTime(), //距离结束时间的毫秒数 10 leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数 11 lefth = Math.floor(lefttime / (1000 * 60 * 60) % 24), //计算小时数 12 leftm = Math.floor(lefttime / (1000 * 60) % 60), //计算分钟数 13 lefts = Math.floor(lefttime / 1000 % 60); //计算秒数 14 // console.log(lefthArr,leftmArr,leftsArr,'时间') 15 return { leftd, lefth, leftm, lefts } 16 }
三、基于vue的移动端商城的产品列表实现记录滚动条位置
首先这是触底加载，触底加载比较简单，就监听滚动条的位置，然后做一下判断就ok了，当然我这里其实可以优化的，比如加防抖节流。（mounted）
1 let _this = this; 2 window.onscroll = function () { 3 //变量scrollTop是滚动条滚动时，距离顶部的距离 4 var scrollTop = 5 document.documentElement.scrollTop || document.body.scrollTop; 6 //变量windowHeight是可视区的高度 7 var windowHeight = 8 document.documentElement.clientHeight || document.body.clientHeight; 9 //变量scrollHeight是滚动条的总高度 10 var scrollHeight = 11 document.documentElement.scrollHeight || document.body.scrollHeight; 12 //滚动条到底部的条件 13 14 // 这里实时保存滚动条位置 15 _this.gallery_scroll = document.documentElement.scrollTop; 16 17 if (scrollTop + windowHeight >= scrollHeight - 1500) { 18 //到了这个就可以进行业务逻辑加载后台数据了 19 // _this.footerText = "我是有底线的"; 20 // console.log("到了底部"); 21 22 if (_this.list.length < _this.total && _this.isLoding) { 23 _this.setIsLoding(); 24 setTimeout(() => { 25 // 加载数据 26 _this.storeGetIndexListPage(); 27 }, 200); 28 } 29 } 30 };
记录滚动条位置
1 // 这里实时保存滚动条位置 2 _this.gallery_scroll = document.documentElement.scrollTop;
获取并保存到的滚动条位置，在跳转的时候进行本地存储
1 // 跳转详情 2 gotoInfo(i) { 3 let that = this; 4 // 这里我们把滚动条位置存进localstorage,其实也可以存进vuex里面，但是我们做微信分享的时候，为了兼容ios做了重定向，就考虑太多了，其实都可以 5 localStorage.setItem("gallery_scroll", this.gallery_scroll); 6 7 this.$router.push({ 8 path: "/info", 9 query: { 10 id: that.list[i].id, 11 }, 12 }); 13 },
返回后获得跳转前滚动条位置并且设置
1 if (localStorage.getItem("gallery_scroll")) { 2 document.documentElement.scrollTop = ~~localStorage.getItem( 3 "gallery_scroll" 4 ); 5 } else { 6 this.setParams(); 7 this.setlodingStatic(true); 8 setTimeout(() => { 9 this.storeGetIndexListPage(); 10 }, 300); 11 }
数据也要进行持久化存储，我是存在vuex里面的，当然和滚动条位置同理，也可以存本地，
上面这一步进行了判断，本地是否存有滚动条位置，以此来判断是否重新加载数据。
在App.vue的生命周期里，对它进行销毁
1 destroyed() { 2 localStorage.removeItem("gallery_scroll"); 3 }
