微信小程序内嵌网页之实践-webview

最新推荐文章于 2025-10-15 15:15:56 发布
原创 最新推荐文章于 2025-10-15 15:15:56 发布 · 1.6k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #webview

本文探讨了在微信小程序中加载非关联公众号文章的方法，尝试使用webview和iframe技术进行实现，但遇到了限制问题。

最近碰到一个需求，需要在微信小程序里加在非关联公众号的文章内容，并且修改部分文章内容。

在pc端这个很容易实现，可以通过Chrome extention实现，而在微信小程序中，能快速想到的就是webview加载网页。

由于webview只能直接打开关联公众号的文章，于是想到了在webview所在网页中嵌入一个iframe，用来加载非关联公众号的文章。

然后发现百度是可以打开的。点击switch按钮，切换iframe的链接为公众号文章，却显示不出来了。

通过调试发现有个错误

在网上找到相关的解释：

好吧，各位大兄dei，有没有其他的解决办法，跪求！！！

图文全程手把手教你微信小程序WebView逆向抓包和调试全过程和方法
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
03-17 2991
ADB（Android Debug Bridge）是安卓的调试工具，可以让电脑与手机进行通信，必要时还能直接获取调试信息。先启用安装ADB并连接手机用远程调试刷新 WebView 抓取数据这样，就能轻松搞定小程序 WebView 的抓包分析了，有了这个方法，基本上微信小程序里的网页请求都能一网打尽！
【微信小程序】其他组件-web-view内嵌
墨夶的博客
11-25 2736
web-view组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。这意味着在一个页面中只能存在一个web-view组件，并且它会覆盖页面上的其他组件。web-view组件的使用需要在小程序管理后台配置业务域名，确保加载的网页地址属于已配置的合法域名。web-view组件为微信小程序提供了一种便捷的方式来嵌入外部网页，使得开发者可以充分利用已有的 H5 资源，减少重复开发的工作量。通过合理配置属性和方法，可以实现网页与小程序之间的高效互动，提升用户体验。希望本文能帮助你在微信小程序开发中更好地使用。
微信小程序（内嵌网页分享功能）
07-30
微信小程序（内嵌网页分享功能） 使用webview加载的原web网页调用小程序分享
Hbuilder MUI 页面跳转刷新
优快云 分享刚编的总结
11-11 861
页面A跳转到页面B，B页面修改数据后再跳回A页面，刷新A页面数据 我这里用到的是vue渲染获取数据，页面A跳转到页面B，但是有个问题 就是B页面执行成功以后跳转回A页面的话A页面并不刷新，数据不能够及时更新 用户体验感比较差。 后来我在社区中找到了解决办法 将此办法引入到我的代码中 完美解决 var wobj = plus.webview.getWebviewById("xx"); wobj.reload(true); ...
微信小程序开发实战指南（三）-- Webview访问总结
最新发布
dazhong2012的专栏
10-15 1749
微信小程序开发中，业务域名配置和Webview使用存在严格限制。业务域名必须使用HTTPS协议且完成ICP备案，个人账号不支持web-view组件。配置需通过小程序后台验证文件，最多可配置200个域名。访问微信公众号文章时，传统方法受限，应使用wx.openOfficialAccountArticle API。开发中需注意H5通信、性能优化和安全问题，如预加载策略、缓存管理和敏感信息保护。常见问题包括校验文件访问和备案生效延迟等，建议采用官方方案并做好兼容性处理。
微信小程序调试webview_使用 Appium 测试微信小程序 Webview
weixin_39614657的博客
12-20 256
你好，我在测试微信小程序，微信webview:WebView in com.tencent.mm (57.0.2987.132)，报错信息是：unable to discover open pages，是什么原因信息如下：Appium server all ready2018-04-25 14:06:38,783 - [ - INFO - platformName: Android2018-04-...
微信小程序web-view页面调试
qq_43563070的博客
04-15 3653
今天刚接触小程序嵌套h5页面，折腾了一小会，h5页面获取到小程序的参数怎么总是打印不出来，怎么调试？？？？ 后面终于知道，在h5的页面右击一下（如果右击一下不出来，先单击一下，再右击就出来了），就会弹出调试的按钮，不细心还真的很难发现，那个按钮在哪里，如下图： ...
精选资源
微信小程序内嵌网页web-view开发教程
03-29
为了便于开发者灵活配置小程序，微信小程序开放了内嵌网页能力。这意味着小程序的内容不再局限于pages和large，我们可以借助内嵌网页丰富小程序的内容。下面附上详细的开发教程（含 视频操作以及注意事项）  一、...
微信小程序web-view源码（内嵌网页分享功能）.zip
08-29
微信小程序是一种轻量级的应用开发平台，允许开发者在微信内部构建功能丰富的应用，而`web-view`组件是其中的关键组成部分，它使得小程序能够内嵌HTML网页，提供了与Web页面交互的可能性。本压缩包中的源码着重展示...
微信小程序webview实现长按点击识别二维码功能示例
10-17
9. **微信JS-SDK的使用限制**: 需要注意的是，微信JS-SDK的调用必须在微信环境中，这意味着你的网页需要在微信内置浏览器或者微信小程序的webview中运行。 10. **注意安全**: 使用微信JS-SDK时，一定要确保所有敏感...
小程序webview支付
03-22
我们项目已在公众号上线，目前开发小程序，目标是直接采用web-view，不需要再开发一次，但是小程序的web-view不支持微信支付，只能通过跳回小程序调用小程序支付的API,我写了demo
webview 个人小程序_关于微信小程序webview的使用
weixin_39757265的博客
12-20 791
小程序微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了，本文主要还是体验了下web-view的功能。web-view详解有了这个组件之后，小程序可以很好的嵌入一些页面，可以环境小程序size告急的问题，同样也使开发更加便捷，毕竟小程序开发者基本都对前端开发较为了解。...
微信小程序下web-view和浏览器下的iframe详解
weixin_51958960的博客
08-28 6412
3、可通过window.addEventListener("message" 传参。3、web-view向微信小程序传惨可通过特定的时机传参。一、微信小程序web-view通信及使用。2、可通过url问号拼接形式传参。iframe链接下的js接参代码。1、可通过css自定义样式大小。二、iframe使用。
微信小程序嵌套iframe_微信小程序内嵌网页web-view
weixin_33096511的博客
02-05 7060
web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。客户端 6.7.2 版本开始，navigationStyle: custom 对 组件无效属性名类型默认值说明srcStringwebview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。bindmessageEventHandler网页向...
微信小程序嵌入 H5 页面（webview）基本用法和父子传参数说明
talentT的博客
03-29 1万+
最近实现一个功能需要在小程序嵌入其它系统内部的一个页面（用vue写的H5页面），但小程序是无法使用iframe的，所以最终选择小程序官方的webview实现，本文对基本用法和父子传参进行说明
原生微信小程序开发使用web-view的流程和问题
yuansusu_的博客
04-25 3085
最近在使用原生微信小程序开发，因为不是很熟悉，踩了不少坑，将自己碰到的问题发表一下，主要是以后开发可以参考一下。主要是小程序中的 web-view 的显示和交互问题，以及在小程序后台管理的配置。
【微信小程序】webview内嵌H5中回调小程序原生方法实现GET请求获取的文件流预览功能
qq_35170037的博客
02-19 1168
*解决方案：**在webview中引入微信所需要的的SDK，目的是和微信小程序进行互动，将下面代码直接扔进H5的index.html中。参考微信的原生方法**wx.getFileSystemManager().readFile()**将文件读取到临时文件夹中产生临时路径。微信小程序的主体内容使用了标签将H5的页面内容展示，H5中有页面存放了下载的路径。pages/upload/page页面处理方式，在onload方法完成对小程序中webview页面参数的赋值，这里使用的是。进行文件的的下载，然后通过。
实现微信小程序web-view内嵌H5中的下载功能(大文件切片下载)
热门推荐
weixin_55846296的博客
04-28 1万+
微信小程序的开发框架是uniapp，使用uniapp脚手架搭建，其中有页面是展示另一个小程序，在这个页面主体内容使用了标签将H5的页面内容展示，H5中有页面存放了下载的路径。点击下载按钮下载文件，或者预览文件让用户手动保存。
微信小程序webview内嵌micro-app
09-05
虽然给定的引用未直接涉及微信小程序webview内嵌micro-app的相关信息，但从技术通用角度可以提供一些实现方法和注意事项。 ### 实现方法 - **环境准备**：需要有微信开发者工具，创建微信小程序项目，并且要确保micro - app已经开发完成，能够独立运行。 - **webview引入**：在小程序的wxml文件中使用`<web - view>`组件，该组件用于承载网页内容。示例代码如下： ```xml <!-- 在小程序的wxml文件中 --> <web-view src="{{microAppUrl}}"></web-view> ``` - **数据通信**：通过`postMessage`方法进行小程序与micro - app之间的数据通信。在小程序中可以监听`message`事件接收消息，在micro - app中可以调用`window.postMessage`发送消息。示例代码： ```javascript // 小程序js文件中监听消息 Page({ onLoad: function () { this.webViewContext = this.selectComponent('#webviewId'); this.webViewContext.onMessage((res) => { console.log('收到micro - app消息:', res.data); }); }, sendMessageToMicroApp: function () { this.webViewContext.postMessage({ data: '来自小程序的消息' }); } }) // micro - app中发送消息 window.postMessage({ data: '来自micro - app的消息' }, '*'); ``` ### 注意事项 - **域名配置**：需要在小程序管理后台配置合法的域名，web - view 中只能加载配置过的域名下的网页，否则无法加载micro - app。 - **数据安全**：在进行数据通信时，要对传递的数据进行严格的验证和过滤，防止恶意攻击，如 XSS 攻击等。 - **兼容性问题**：不同版本的微信开发者工具和微信客户端可能存在兼容性问题，需要进行充分的测试，确保在不同环境下都能正常运行。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值