最近微信公众号有做一个功能,包含列表(图片,标题,介绍),列表的每一项点进去是详情(是微信公众号里面的一篇文章链接)
类似有 https://mp.weixin.qq.com 前缀的,然后调试时,手机端打开无法显示,这是微信的机制,所以需要进行转化,
可以利用 http://cors-anywhere.herokuapp.com 这个网址做一个跨域请求处理,就是将我需要的微信文章地址,转换成HTML代码返回
<div class="container"> <iframe v-if="isOutUrl" class="iframe" :src="activityUrl" frameborder="0" scrolling="auto"></iframe> <div v-else v-html="activityUrl"></div> </div>
import axios from 'axios'
export default { data() { return { activityId: this.$route.query.activityId, activityUrl: '', isOutUrl: false, activityInfo: {} } }, mounted() { this._getActivityUrl() }, methods: { _getActivityUrl() { getActivityUrl(this.activityId).then(res => { this.activityInfo = res.datas; let url = res.datas.activityUrl let head = url.slice(0, 24); // 是微信公众号文章 if (head == 'https://mp.weixin.qq.com') { this.getURL(url); } else {// 是其它网址直接使用 this.isOutUrl = true this.activityUrl = url; } }) }, getURL(url) { let http = (window.location.protocol === 'http:' ? 'http:' : 'https:'); let realurl = http + '//cors-anywhere.herokuapp.com/' + url; axios.get(realurl).then(res=>{ this.activityUrl = res.data; },rej=>{ console.log(rej) }) } }