微信公众号文章跨域展示

帮朋友做了个整站，更新新闻的时候他用不惯我写的后台，老是发微信公众号，让我帮忙发到网站上，我觉得太麻烦了，就写了个调用的方法。

微信公众号自带保护，不让跨域访问。
只能用http://cors-anywhere.herokuapp.com/跨域访问接口。

http://cors-anywhere.herokuapp.com/+公众号文章地址就可以得到文章的源代码，加以正则匹配就可以得到文章的标题，正文。

匹配标题： /<h2 class=\"rich_media_title\" id=\"activity-name\">([\s\S]*)<\/h2>/ig
匹配正文： /js_content\">([\s\S]*?)<\/div>/ig

最后需要做的是把图片的路径用正则替换一下，因为公众号采取的是lazy-load，只有浏览到了才会加载，result.replace(/data-src="/g,'src="http://img01.store.sogou.com/net/a/04/link?appid=100520029&url=')。

其中替换后sogou部分的网址是加载图片的API，不加这个的话，同样会提示禁止站外加载图片。

效果如下：
https://codepen.io/2bt/full/joBKJg

（2021年更新）
前端的方法API总是失效，现在改用本地PHP进行Curl访问图片，再封装内容给到前端。

源码如下，需要自己调整一下正则和输出的样式：

<?php
class WxCrawler
{//微信内容div正则private $wxContentDiv = '/<div class="rich_media_content " id="js_content" style="visibility: hidden;">(.*?)<\/div>/s';//微信图片样式private $imageStyle = 'style="width: 100% !important;height: auto !important;visibility: visible !important;"';/*** 爬取内容* @param  $url* @return false|string* @author bignerd* @since  2016-08-16T10:13:58+0800*/private function _get($url){$context = stream_context_create(array('http'=> array('header'=>'Connection：close')));return file_get_contents($url,false,$context);}public function crawByUrl($url){$content = $this->_get($url);$basicInfo = $this->articleBasicInfo($content);list($content_html, $content_text) = $this->contentHandle($content);return array_merge($basicInfo,['content_html' => $content_html,'content_text' => $content_text]);}/*** 处理微信文章源码，提取文章主体，处理图片链接* @author bignerd* @since  2016-08-16T15:59:27+0800* @param  $content 抓取的微信文章源码* @return [带图html文本，无图html文本]*/private function contentHandle($content){$content_html_pattern = $this->wxContentDiv;preg_match_all($content_html_pattern, $content, $html_matchs);if(empty(array_filter($html_matchs))) {return http_response_code(404);exit();}$content_html = $html_matchs[0][0];//去除掉hidden隐藏$content_html = str_replace('style="visibility: hidden;"','',$content_html);//过滤掉iframe$content_html = preg_replace('/<iframe(.*?)<\/iframe>/','',$content_html);$path = 'article/';/** @var  带图片html文本 */$content_html = preg_replace_callback('/data-src="(.*?)"/', function($matches) use ($path){return 'src="https://img-blog.csdnimg.cn/2022010705000841016.png'.$this->getImg($matches[1]).'" '.$this->imageStyle;}, $content_html);//添加微信样式$content_html = '<div style="max-width: 50%;margin-left: auto;margin-right: auto;transform: scale(1.5);transform-origin: top;">'.$content_html. '</div>';/** @var  无图html文本 */$content_text = preg_replace('/<img.*?>/s','',$content_html);return [$content_html,$content_text];}/*** 获取文章的基本信息* @author bignerd* @since  2016-08-16T17:16:32+0800* @param  $content 文章详情源码* @return $basicInfo*/private function articleBasicInfo($content){//待获取item$item = ['ct' => 'date',//发布时间'msg_title' => 'title',//标题'msg_desc' => 'digest',//描述'msg_link' => 'content_url',//文章链接'msg_cdn_url' => 'cover',//封面图片链接'nickname' => 'wechatname',//公众号名称];$basicInfo = ['author' => '','copyright_stat' => '',];foreach ($item as $k => $v) {if($k == 'msg_title')$pattern = '/ var '.$k.' = (.*?)\.html\(false\);/s';else$pattern = '/ var '.$k.' = "(.*?)";/s';preg_match_all($pattern,$content,$matches);if(array_key_exists(1, $matches) && !empty($matches[1][0])){$basicInfo[$v] = $this->htmlTransform($matches[1][0]);}else{$basicInfo[$v] = '';}}return $basicInfo;}/*** 特殊字符转换* @author bignerd* @since  2016-08-16T17:30:52+0800* @param  $string* @return $string*/private function htmlTransform($string){$string = str_replace('&quot;','"',$string);$string = str_replace('&amp;','&',$string);$string = str_replace('amp;','',$string);$string = str_replace('&lt;','<',$string);$string = str_replace('&gt;','>',$string);$string = str_replace('&nbsp;',' ',$string);$string = str_replace("\\", '',$string);return $string;}/*** @param $url* @return string*/private function getImg($url){$refer = "http://www.qq.com/";$opt = ['http'=>['header'=>"Referer: " . $refer,"Connection:" => "close"]];$context = stream_context_create($opt);//接受数据流$file_contents = file_get_contents($url,false, $context);$imageSteam =  Imagecreatefromstring($file_contents);$path = 'article/';//if(!file_exists($path))//mkdir($path,0777,true);//$fileName = time().rand(0,99999) . '.jpg';//生成新图片//imagejpeg($imageSteam, $path . $fileName);return base64_encode($file_contents);}
}ini_set('default_socket_timeout', 1);$url = $_GET['url'];
$crawler = new WxCrawler();
$content = $crawler->crawByUrl($url);echo json_encode($content);
?>

使用JS调用 axios.get('crawler.php?url=<?=$rs['url']?>')

微信公众号文章跨域展示相关推荐

pc端引入微信公众号文章
最近做了一个小需求,结果坑特别多..... 需求是这样的,要给公司内部做一个微信公众号广告投票系统,整个项目就不多赘述了,有个小功能,要求是这样的: 点击某条记录后的"投票"按钮, ...
iframe显示微信公众号文章
最近在做一个案例页面,主要结构就是列表和内容,还有固定的头部和底部(方便查看价格及购买),因为之前的案例详情页是很多的固定页面,这样不太方便维护,现在其他同事需要展示不同的案例,所以就从新整理了一下这 ...
iframe嵌套微信公众号文章
<iframe style="min-height:100vh;width:100%;border-width: 0;" id="iFrame" widt ...
微信公众号文章保存到本地
网页版微信公众号的文章url是临时链接,如果你想过段时间再查看该篇文章就会发现链接过期,因此在爬取到文章后非常有必要把网页保存下来. 保存网页的时候,我们希望把图片.js.css等文件同时保存,使得h ...
python write非法字符报错_Python爬虫实现的微信公众号文章下载器
平时爱逛知乎,收藏了不少别人推荐的数据分析.机器学习相关的微信公众号(这里就不列举了,以免硬广嫌疑).但是在手机微信上一页页的翻阅历史文章浏览,很不方便,电脑端微信也不方便. 所以我就想有什么方法能否 ...
c语言编程微信公众号图片直播,如何以图片的形式在微信公众号文章中添加小程序...
如何以图片的形式在微信公众号文章中添加小程序微信公众号中想要将自己的小程序也放进去,宣传宣传,该怎么添加?下面百分网小编带大家一起来看看详细操作教程,感兴趣的朋友一起学习吧!!!想了解更多相关信息请 ...
嵌套页面h5怎么调起手机文件_让微信公众号文章排版像网页h5一样高大上
做过微信公众号文章排版的同学都知道,微信自己的排版工具只能排些简单的图文混合.遇到这种同况时,很多同学会考虑用第三方编辑器或直接用他们的模板,然后稍微改改便直接发布. 没有我想要的排版样式怎么办,可以 ...
关于微信公众号文章编辑器不能直接编辑html样式的处理方法
1.微信的后台是不支持html编辑的:你可以先在其他的编辑器里面编辑好了以后,复制到微信编辑器里面:这样既可以保持原来的格式,还可以自由设置自己的喜欢的格式. 比如我有一大大大大大大大大大大大段话,不 ...
Python 爬取微信公众号文章和评论 (有源码)
关注我,一个仍存梦想的屌丝程序员,每天为你分享高质量编程博客. follow us for dream 关注我回复 "微信爬虫" 获取源代码背景说明感觉微信公众号算得是比较难爬 ...

微信公众号文章跨域展示

微信公众号文章跨域展示相关推荐

最新文章

热门文章