微信小程序web-view，小程序页面和html交互

最新推荐文章于 2025-04-03 20:45:00 发布

hush_Pc

最新推荐文章于 2025-04-03 20:45:00 发布

阅读量1.6k

点赞数 1

文章标签：小程序 java js vue javascript

本文链接：https://blog.youkuaiyun.com/weixin_42715209/article/details/113035742

版权

本文详细介绍了微信小程序通过web-view加载HTML页面的交互方式，包括小程序向HTML页面传参以及HTML页面向小程序回传数据的实现步骤，并提供了实际操作的截图示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序中通过web-view加载html页面前提条件：

1、必须申请认证企业账号，配置业务域名
2、必须发好调用的html页面服务
3、同时服务必须是https的服务

微信开发者工具开发调试可以取消https校验和业务域名的校验。

调试取消https校验和业务域名的校验

一、小程序页面向html页面传参数

1、在发好https的页面服务上面直接拼接
?serial=fa5329afeb5e51cca760c0ed82a7451f&testParam1=1&testParam2=2

<web-view src="http://localhost:9889/gisaddrsel/singleAddrLocate/addressLocate_test.html?serial=fa5329afeb5e51cca760c0ed82a7451f&testPara

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hush_Pc

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【微信小程序】5步轻松掌握微信小程序web-view组件，你学会了吗？

java专栏

11-27

2427

通过以上详细的介绍，相信你已经对微信小程序中的web-view组件有了全面的了解。web-view组件虽然功能强大，但只要掌握了这些基础知识和技巧，你就能轻松应对各种开发任务，开发出功能强大的网页嵌入应用。希望你能轻松掌握这些技能，成为微信小程序开发的高手！🌟🚀下次见，祝你开发愉快！👋🎉。

2021-02-02微信小程序 web-view 和 小程序页面交互

fghfghhgjgj的博客

02-02

489

微信小程序 web-view 和 小程序页面可以交换信息。比如，web-view页面可以返回微信小程序页面。在test.html页面中这样写 <body> <button onclick="reLaunch()">跳转到 f 页面</button> <button onclick="navigateTo()">navigateTo到 register页面</button> </body> js 中这样写 <

2 条评论您还未登录，请先登录后发表或查看评论

简单小程序：登录页面（html）

A15535286714的博客

09-26

431

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录页面</title> <style> /*盒子样式*/ #box{ width: 350px; //宽 height: 450px; //高 border: 1p

uni webview给html传参

weixin_43868443的博客

09-28

784

通过storage实现参数的传递和接受 uni传递参数： <template> <view> <web-view :src="url"></web-view> </view> </template> <script> export default { data() { return { url: "/hybrid/html/ydbg/yw/yw_contment.html", }; }

微信小程序web-view的那些事（持续更新）

热门推荐

Gochan_Tao的博客

05-16

2万+

小程序 web-view 如何给外链接的 h5 页面传递参数和值最近做项目的时候发现这种方法还是比较方便的。类似小程序页面之间的传值形式，举个例子： <web-view src="{{url}}?id={{id}}&token={{token}}&member={{member}}&paused={{paused}}" ></web-view>...

小程序、前端页面

02-06

基本实现功能 1，品牌筛选点击显示隐藏功能 2，实现输入框、图片大小适配功能 3，实现列表页过多返回顶部功能

微信小程序webview与h5通过postMessage实现实时通讯的实现

10-16

主要介绍了微信小程序webview与h5通过postMessage实现实时通讯的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

小程序跨页面交互的作用与方法详解

11-29

去年年末，微信小程序的分包大小已经到达了 12M 大小,一方面说明小程序的确逐步为开发者放开更大的权限，另一方面也说明了对于某些小程序 8M 的大小已经不够用了。我个人今年也是在开发一个 to B 小程序应用。这里列举一些跨页面交互的场景。对于 B 端应用的业务需求来说，小程序开发的复杂度相对比网页开发要复杂一些。一个是双线程的处理机制问题，另一个是页面栈之间交互问题。注: 笔者目前只需要开发微信小程序，为了在小程序页面中可以使用 properties behaviors observers 等新功能，已经使用 Component 构造器来构造页面。具体可以参考微信小程序 Componen

webview传递参数给html,uniapp与webview之间的相互传值

weixin_36215736的博客

06-25

2541

1.uni-app 如何发送数据到 H5？其实很接单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参例如在 uni-app 中：export default {data() {return {url:‘/hybrid/html/local.html?data=‘};},onLoad(data) {//这里对要传入到webview中的参数进行encodeURICompone...

界面交互~触摸反馈

weixin_30295091的博客

07-03

313

通常页面会摆放一些button按钮或者view区域，用户触摸按钮之后会触发下一步的操作。这种情况下，我们要对触摸这个行为给予用户一些响应。如图4-17所示，当我们手指触摸了button文字所在的cell区域时，对应的区域底色变成浅灰色，这样用户就可以知道小程序是有及时响应他的这次触摸操作，用户就不会很迷惑。图4-17 触摸区域底色变成灰色响应用户的触摸操作 小程序的view容器组件和...

初试--小程序页面交互

weixin_45625673的博客

11-22

234

bindtap事件：点击 button 按钮的时候，希望界面显示 "Hello World"，于是在 button 上声明一个属性: bindtap ，在 JS 里声明 clickMe 方法来响应点击操作：调用API： wx.showToast(Object object)显示消息提示框 wx.scanCode(Object object)调起客户端扫码界面进行扫码 wx.sh...

HTML制作登陆小程序（1.0）

wlp1484735615的博客

01-12

622

html登陆小程序

HTML制作登陆小程序（2.0）

wlp1484735615的博客

01-19

504

html

微信小程序web-view交互示例教程

web-view是一个可以用来承载网页的容器组件，它允许开发者将一个完整的网页嵌入到微信小程序页面中。通过web-view组件，可以实现小程序和网页之间的数据交换，以及实现小程序对网页内元素的控制。 #### web-view的...