拿到微信公众号文章链接转富文本在公众号页面上展示（我也不知道这是啥莫名其妙的需求，不过做的时候确实不怎么好做）

---

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

这个需求我拿到的时候也很蒙蔽，因为链接是这样的
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">

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

---

总结

这就是整个流程，其实就是解析出来然后加meta使图片能正常显示，在css加一句visibility: visible !important;控制显示，反正我当时做的时候出的问题大概就这些了，希望大家喜欢，喜欢就点个关注吧！