zoukankan      html  css  js  c++  java
  • 微信公众号链接处理问题

    最近微信公众号有做一个功能,包含列表(图片,标题,介绍),列表的每一项点进去是详情(是微信公众号里面的一篇文章链接)

    类似有 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)
          })
        }
    }
    

      

  • 相关阅读:
    构建SpringBoot第一个Demo
    SpringBoot简介
    JSJ——主数据类型和引用
    CSS3--动态实现ToolTip效果(实例)
    JavaScript--DOM事件(笔记)
    CSS3--幽灵按钮特效(实例)
    CSS3--实现特殊阴影 (实例)
    深入浅出ExtJS 第七章 弹出窗口
    深入浅出ExtJS 第六章 布局
    深入浅出ExtJS 第五章 树形结构
  • 原文地址:https://www.cnblogs.com/wangdashi/p/11496283.html
Copyright © 2011-2022 走看看