微信公众号嵌套html,VUE项目嵌入微信公众号文章URL

VUE项目嵌入微信公众号文章URL

因项目需求需要引入微信公众号的文章页面，使用iframe标签引入会导致微信公众号的css和js引用发送跨域报错

解决思路

1：在后端直接请求微信公众号的文章URL，执行css和js后的HTML返回到前端

2：前端直接v-html显示到页面上即可

后端代码

引入包：

net.sourceforge.htmlunit

htmlunit

2.45.0

Java代码：

@GetMapping("news")

public String mpWeiXin(){

//微信文章的URL地址

String newsUrl = "";

WebClient webClient = new WebClient(BrowserVersion.CHROME);//新建一个模拟谷歌Chrome浏览器的浏览器客户端对象

webClient.getOptions().setThrowExceptionOnScriptError(false);//当JS执行出错的时候是否抛出异常, 这里选择不需要

webClient.getOptions().setThrowExceptionOnFailingStatusCode(false);//当HTTP的状态非200时是否抛出异常, 这里选择不需要

webClient.getOptions().setActiveXNative(false);

webClient.getOptions().setCssEnabled(true);//是否启用CSS, 因为需要展现页面, 所以需要启用

webClient.getOptions().setJavaScriptEnabled(true); //很重要，启用JS

webClient.setAjaxController(new NicelyResynchronizingAjaxController());//很重要，设置支持AJAX

HtmlPage page = null;

try {

page = webClient.getPage(newsUrl);//加载网页

} catch (Exception e) {

e.printStackTrace();

}finally {

webClient.close();

}

webClient.waitForBackgroundJavaScript(30000);//异步JS执行需要耗时,所以这里线程要阻塞30秒,等待异步JS执行结束

String pageXml = page.asXml();//直接将加载完成的页面转换成xml格式的字符串

pageXml = pageXml.replaceAll("\"/mp","\"http://mp.weixin.qq.com/mp");//给微信页面内相对路径的请求设置域名

return pageXml;

}

VUE前端代码：

教程到这里就结束了，如果在使用中微信页面中的图片直接变成

便在index.html中增加一段head，记得清理缓存。

微信公众号嵌套html,VUE项目嵌入微信公众号文章URL相关推荐

php微信公众号支付vue,vue项目使用微信公众号支付总结及遇到的坑
微信公众号支付 1. 使用jssdk调用微信支付,具体查看开发文档: 使用的vuex,在mutations中 wechatPay (state, data) { state.payObject = d ...
vue项目做微信分享功能
vue项目做微信分享功能安装sdk npm install weixin-js-sdk --save 方法 1.新建js文件wxapi.js 2.在wxapi.js中引入sdk以及配置一些基本信息( ...
VUE项目引入微信JSSDK 实现微信自定义分享
VUE项目引入微信JSSDK 实现自定义分享前端vue.后端php 问题:后端获取config参数所需的url 需要和请求自定义分享页面url一致一.微信公众号后台添加 js安全域名(白名单) 二 ...
微信/企业微信-本地（MAC）VUE项目调用JS-SDK，开发测试环境搭建
调用微信SDK前置条件根据官方文档,前端在使用微信的接口前要先进行配置,配置信息得从后端获取,后端在计算signature时需要前端传入当前页面的URL,开发者要在公众平台设置JS SDK安全域名, ...
UNI-APP/VUE 项目集成微信SDK /微信开放标签教程和避坑指南（下）——微信开放标签篇
UNI-APP/VUE 项目集成微信开放标签教程和避坑指南文章同步发布于
UNI-APP/VUE 项目集成微信SDK /微信开放标签教程和避坑指南
UNI-APP/VUE 项目集成微信SDK教程和避坑指南文章同步发布于
vue项目引入微信sdk报错记录
前言 vue项目引入微信sdk $ npm install weixin-js-sdk --save 运行报错如下: npm install weixin-js-sdk --save下载失败显示未配置 ...
Vue项目对接微信公众号踩坑日记
之前做项目都是pc端的,还是第一次做移动端项目,而且上来就要接入app 和微信公众号两个平台,最终查阅多方文档,耗费几周时间还是完成了项目,这篇文章也算是记录一下自己的完成思路以及一些想法,希望能帮到 ...
微信公众号菜单html5,Vue.js 实现微信公众号菜单编辑器功能(一)
学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下具体样式代码查看项目github 创建一个vue实例 var app = new Vue({ el: '#app ...
微信PC版访问本地vue项目页面调试及访问空白问题
1.安装微信旧版本2.6 链接:https://pan.baidu.com/s/15no5HCjxydYBa4YB_nvo1g 提取码:pntg 2. 微信引入devtool包第 1 步:查看微信 ...

微信公众号嵌套html,VUE项目嵌入微信公众号文章URL

微信公众号嵌套html,VUE项目嵌入微信公众号文章URL相关推荐

最新文章

热门文章