小程序嵌入web-view网页后，点击网页中的按钮跳转回小程序

最新推荐文章于 2025-06-27 14:25:25 发布

那些年的笔记

最新推荐文章于 2025-06-27 14:25:25 发布

阅读量2.1k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记小程序文章标签：小程序嵌入web-view网页后，点击网页中的按钮跳转回小程

本文链接：https://blog.youkuaiyun.com/qq_22079371/article/details/83719096

笔记同时被 2 个专栏收录

39 篇文章

订阅专栏

小程序

18 篇文章

订阅专栏

本文档详细介绍了如何在网页中引入微信JS-SDK并设置点击事件，以便于调用微信的功能，如分享、扫一扫等。首先，需要在网页中通过<script>标签引入微信JS文件，然后设置点击事件来触发相应的微信功能。

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

1.首先在网页端引入js

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

2、在网页端点击按钮写如下点击事件

$(".kaiqi").click(function(){

        url: '/pages/Information/Classmates/Classmates?communeTypeID=${communeTypeID}' + '&groupID=${communeGroupID}',
    });

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

那些年的笔记

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序与H5通信：web-view内嵌页交互方案

小程序开发

06-01

2302

微信小程序凭借“无需安装、即点即用”的特性成为移动开发的热门平台，但某些复杂功能（如动态表单、可视化图表）仍需依赖H5的灵活性。微信提供的web-view教会你如何让小程序（宿主）与H5（内嵌页）像“邻居聊天”一样顺畅通信，覆盖单向消息传递、双向数据同步、事件响应等常见场景。本文将按照“概念→原理→实战→场景”的逻辑展开：先通过生活案例理解通信需求，再拆解web-view的通信机制，接着用代码实现双向交互，最后结合实际场景总结最佳实践。web-view组件。

支付宝小程序web-view点击返回遇到的坑

u011442803的博客

03-07

5299

支付宝小程序web-view点击返回遇到的坑前言业务场景解决方法结尾前言最近在和同事做支付宝小程序开发，为了之后在微信小程序上使用，减少开发时间，大部分页面操作都在web-view运行，通过web-view打开网页，因为打开的是一个网页，所以在进行多次跳转时，点击返回操作，页面会回到之前的页面，而有的页面是我们不需要返回的。业务场景页面A跳转到页面B地址列表页面，地址列表可以进行添加、编辑...

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

小程序web-view中网页返回原小程序

静如雪的博客

04-09

7660

第一种就是用navigateTo跳转可以返回第二种参考下文 wx.miniProgram.navigateTo 官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html?search-key=web_view 参考： https://blog.youkuaiyun.com/mytljp/arti...

小程序webview中使用分享功能

淅淅沥沥的博客

01-29

1万+

注意：因为为小程序原生组件，会铺满整个页面，所以不能通过按钮来触发分享，用户只能通过右上角的三个点来主动分享，关键是一般需求都是需要自定义其分享的参数的，包括分享卡片的标题、图片、页面路径，所以h5需要向小程序传递数据，h5内需两个操作： 1 引入微信官方js文件 &lt;script type="text/javascript" src="https://res.wx.qq.com/open/...

排查 WebView 中 touch、click 事件失效：移动端调试过程详解

最新发布

2501_91591841的博客

06-27

960

摘要：本文记录了移动端WebView中点击事件失效的调试过程。通过WebDebugX等工具发现，问题根源是未清除的透明遮罩层阻挡了按钮点击。分析表明状态更新与UI渲染顺序不一致导致遮罩未被移除。同时解决了iOS滚动卡顿问题，发现是缺少触摸滚动样式。文章总结了移动端触摸问题的排查路径：验证事件绑定、检查元素层级、分析状态时序、优化滚动行为、全端回归测试。指出触摸问题的本质是行为不一致，强调需要结合多种工具还原点击路径，验证状态和模拟操作来定位问题。（150字）

vue h5网页点击按钮 -- 跳到微信小程序 wx-open-launch-weapp；onMenuShareAppMessage 分享图片不显示，且方法已废弃

拿回忆下酒

06-10

5613

h5网页点击按钮，唤醒微信小程序是否可以做？可以！！，就是有点限制。通过wx-open-launch-weapp就可以实现，但是限制微信服务号才可以使用。也就是所必须是微信环境下。一、配置、授权这里我就不多说了，总之就是引入sdk、授权等等常规操作。不明白的小伙伴，可以看看我专门写授权的一篇文章h5获取code，授权等问题二、wx.config 假设大家将数据都拿到了，那么需要调用一下wx.config wx.config({ // debug: true, // 开启调试模式

webview底部操作按钮（下一步、我同意等等操作按钮实现步骤）

jzy1136068093的博客

10-09

783

webview撑满屏幕，底部需要操作按钮

1.3、 WebView的ajax或javascript响应

lanxuan1993的博客

05-17

1474

1.设置支持javaScript WebSettings webSettings = wv.getSettings();webSettings.setJavaScriptEnabled(true); 2.如果想查bug设置 wv.setWebContentsDebuggingEnabled(true); 3.webview加请求头 final Map<String, S...

web-view环境下，H5页面打开其他小程序

通往成功之路的一个过客

01-20

1277

然而，在真机调试时出现了一个奇怪的问题：第一次调用该方法可以成功跳转到其他小程序，但第二次调用时却无法跳转。正确的实现方式是先从H5页面跳转回当前小程序，再由当前小程序跳转到目标小程序。生活中总是充满了各种选择，点餐纠结，出行选择，聚餐座位，团队投票结果不明，随机抽签一锤定音等等！在开发过程中，我在小程序中创建了一个专门用于跳转其他小程序的页面。官方文档中提供了示例代码，其使用较为简单，主要需要传入目标小程序的。方法时出现的问题，确保了小程序跳转功能的正常实现。小程序跳转到其他小程序时，调用。

uni-app开发微信小程序 web-view通讯

小混子得得的博客

08-04

1681

h5通讯uni-app微信小程序，web-view页面嵌套h5打开其他小程序。

小程序嵌套h5页面_uni-app 中使用 web-view 微信小程序嵌套H5

weixin_39797693的博客

12-19

3553

uni-app 中使用 web-view 微信小程序嵌套H5由于项目需要，我们的小程序中嵌套了web-view，对于第一次接触uni-app，第一次用web-view的我真的是踩坑无数，屡次站在放弃的边缘，终于在今天搞定了。所以我感觉有必要更新一篇关于uni-app中嵌套web-view的文章，希望下面的文章可以帮助到正在学习的朋友吧。1、uni-app 中为什么要嵌套 web-view ？2、...

微信小程序web-view嵌入h5页面调用微信jssdk接口

qq_45963071的博客

09-09

5932

业务需求：我需要用小程序web-view嵌入h5地图页面，然后点击h5页面导航功能调起小程序内置地图第一步: 现在你的h5项目导入或者链接式导入微信jssdk vue导入: npm install weixin-js-sdk --save 连接式导入： http://res.wx.qq.com/open/js/jweixin-1.6.0.js 然后，在需要的页面配置使用：此接口让后端封装好，直接去调用，注意: 看官网的解释: 确认url是页面完整的url(请在当前页面aler..

微信小程序开放能力：web-view中使用微信JSSDK（注意事项以及样例）

AlaiaCodeingLife

04-21

3455

使用样例： //使用jssdk useJssdk(){ let href= window.location.href.split('#')[0] let that=this $.ajax({ url:'${base}/resources/common/js/getJsSDKConfig', data:{url:h

小程序webview嵌入的H5页面，点击按钮，返回小程序的指定页面

02-23

4484

今天弄了一个活动，首先从小程序进入webview里的H5页面，然后H5页面里有个按钮，点击后需要跳转到小程序的注册页。那么，H5那边该怎么实现呢？因为已经进入小程序环境了，所以实现起来相对单纯的H5跳小程序比较简单

小程序：小程序web-view的h5页面跳回小程序

分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

07-28

1020

首先h5页面跳回小程序，代码是在 h5 里面写的，详情看小程序web-view文档，这里用 vue 来举例。注意！！！这里指的是小程序web-view里的h5网页跳回到小程序，而不是一个 h5 跳转到小程序，如果想要 h5 跳转小程序请看这篇文章代码首先在 index.html 里引入这段 js <div id="app"></div>  <script src="//res.wx.qq.com/open/js/jwe

微信小程序通过web-view跳转到小程序页面

铁柱的博客

02-02

1万+

一、背景博主这边的小程序大部分都使用了web-view，众所周知，使用web-view最大的问题就是和小程序之间进行交互的问题。我这边主要是从web-view跳转回小程序的demo。二、通过web-view跳转到小程序页面 1、微信官方文档微信web-view文档 2、关于web-view页面的用法： Page({ data: { url: '你的we

微信小程序与webview H5交互（内嵌H5跳转原生页面）

weixin_44646763的博客

09-25

1万+

实现微信小程序与webview H5交互的方法

微信小程序—contact-button(客服)