Uniapp 内嵌H5跳转内嵌小程序页面

已于 2023-08-10 11:15:06 修改
阅读量2.5k 收藏 4
点赞数
分类专栏： Uniapp
于 2021-04-21 14:38:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37792384/article/details/115952370
版权

小程序 H5页面 jweixin-module 页面跳转 参数传递
关键词由CSDN通过智能技术生成

本文章造成的困扰是我没有写清楚，这里统一声明：
本例程只适用于小程序内嵌H5页面，再跳转到本小程序页面。此方法不能跳转到其他小程序，望周知

1. jweixin-module 集成

Alt + c 调出终端输入以下代码

npm i  jweixin-module -S

集成
集成成功 出现如图所示文件夹
集成成功

2.导入全局配置

如图：
全局配置

3.使用
this.$wx.miniProgram.redirectTo({
					url: '/pages/index/index?a=1'
				})

其中:
/pages/index/index 为页面的路径
?a=1为跳转携带的参数，可填写可不填写

完结散花~

不用89k
关注
专栏目录
vue项目H5 跳转微信小程序
S筱潇S四维Smile
03-12 1万+
1. 绑定域名 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 2. 引入JS文件 在需要调用JS接口的页面引入如下JS文件：http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https） 如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https） 备注：支持使用 AMD/CMD 标准模块加载方法加载。 3.
uniapp 小程序嵌套H5开发总结
gyl_sunshine的博客
03-11 9692
项目需求是在uniapp小程序项目中嵌套H5页面，H5返回小程序需要传值给小程序进行通信。 好,百度一查确实可以实现 用的uniapp提供的web-view（https://uniapp.dcloud.io/component/web-view.html#web-view经验证实，做功能之前先看官网， 能少走很多弯路 ）就可以与外部链接通信。 那如何实现呢？ 1.在uniapp小程序项目创建web-view页面 项目代码 <!-- 外链,webview --> <temp...
uniapp 开发 h5 跳转微信小程序
一心只想敲好代码
06-17 1847
uniapp 开发 h5 跳转微信小程序
uniapp app跳小程序详细配置
qq_62787048的博客
07-30 594
uniapp app跳微信小程序，支付
H5（uniapp）跳转至小程序页面
随身笔记
09-13 3850
H5页面拉起小程序并跳转至页面
uniapp webview H5跳转微信小程序
HSJ0170的博客
06-21 1848
uniapp webview H5跳转微信小程序
uniapp项目编译成H5后跳转到微信小程序（支持微信扫码、支付宝扫码）
weixin_51185283的博客
03-09 1737
H5跳转微信小程序
小程序内嵌H5——判断小程序环境的坑
03-29
最后和产品商量之后的决定是：小程序中特有的营销推广的页面，用小程序编写，剩下的黄金流程，内嵌H5解决。 听起来好像很简单，but，没有想象中那么简单。 判断是否在小程序中 这个问题，网上一搜，答案很多，有说用...
uniapp 内嵌h5登录页面实现登录
qq_42173653的博客
01-08 8340
需求：内嵌pc端登录页面，实现uniapp登录 前提：pc端登录页面，登录成功之后会自动重定向到指定的pc端页面并加上鉴权成功的code // 举例 // www.maomin.com/login PC端登录页面 // www.maomin.com/loginSuccess?code=XXXX // 登录成功以后自动跳转 思路： 1、在pc端处理，在uniapp成功登录之后跳转到www.maomin.com/loginSuccessApp?code=xxxx,此时pc端代码如下： documen
【小程序】如何在内嵌h5的小程序里面跳转到别的小程序的页面？
qq_38212421的博客
09-01 5018
支付宝小程序内嵌H5页面，然后在里面有两个点击事件是跳转到别的小程序的不同页面的方法 <view> <web-view id="web-view-1" src="这里是地址" onMessage="jumpXCX"></web-view> </view> 这里是嵌套部分，传递到h5页面用的是onMessage，参考官方文档 然后看到小程序里面的js部分 // 接收来自H5的消息 jumpXCX(e) { console.log(e); .
支付宝小程序web-view组件内嵌的H5再跳转至小程序其他页面
ybyshezhang的博客
01-18 4073
支付宝小程序内web-view组件嵌套的H5页面中进入小程序的某个页面 需求：支付宝的小程序内一个web-view组件嵌套了我的H5页面，然后我进入了这个H5页面，现在我要从这个H5页面再跳转至这个小程序的其他页面 在小程序里跳转H5，本质上是由小程序自身提供的一个叫做web-view组件实现的 对于小程序来说，提供的组件只是小程序的一部分。虽然也类似“浏览器”，但是并不提供大部分浏览器的一些功能，而且更受到小程序的一些限制。 我试了N种办法 因为我把问题想复杂了 其实 my.navigateTo 加 ur
实现uniapp h5 网页跳转微信小程序
最新发布
泪耳的博客
08-28 422
本文仅仅简单介绍了uniapp h5 网页跳转微信小程序的开发环境下的方法。
uniapp开发的跳转到小程序
qq_31432773的博客
03-10 3915
在调用这个API之前，请确保你已经遵循了微信小程序的相关指导和要求，并且已经获取了相应的权限。如果是其他平台的小程序，请查阅对应平台的开发文档，因为不同平台的API调用可能会有所不同。确保在调用这个API之前，已经在uniapp的manifest.json中配置了相应的权限，并且appid是正确的。在uniapp中拉起小程序，可以使用官方提供的API。
uni-app开发的H5页面跳转到指定的小程序
可可爱爱的你吖的博客
09-15 8239
uni-app写的H5页面，其中在最后的一个页面中需要点击跳转到指定的小程序中，百度了一下都是没有找到uni-app的适合版本。 1.在项目的根目录下，建个文件夹，将微信的weixin-js-sdk文件放进去，在要用的页面中引进来 引进来后就可以使用了。 我想要的结果是这样的，一个图片可以直接点击，然后跳转到相应的小程序中，但是我直接在这里面写是不生效的，不知道是不是图片找不到，还是wx-open-launch-weapp标签找不到。 <wx-open-launch-weapp> &lt
uni-app h5跳转微信小程序
qq_38372917的博客
01-26 4591
uni-app h5跳转微信小程序 首先npm下载jweixin-module npm install jweixin-module --save 在即将使用此功能的页面引入 var jweixin = require('jweixin-module') 根据微信的开发文档写入以下代码 微信官方文档 <template> <view class="content"> <!-- 样式类的话貌似只能在style的内联样式或行内样式才生效 -
uni-app发布的h5跳转到小程序
yiyunfei798689793的博客
06-22 2289
1、uni小程序跳转到uipapp发布的h5 2、uipapp发布的h5 跳转到uni小程序跳转到 （1) 在pages.json同意目录内新增一个html模板页面 如template.h5.html， 引入调起小程序的jsuni.webview.1.5.2、js jweixin-1.4.0.js 修改h5中文件头width=device-width, user-scalable=no 等 将当前的uni-app小程序...
uniapp h5跳转微信小程序（wx-open-launch-weapp）
热门推荐
qq_53590046的博客
01-04 1万+
h5使用wx-open-launch-weapp标签跳转微信小程序
uniappH5页面跳转小程序
New个对象喝咖啡
11-08 2165
官方文档： https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html，必须是认证公众号。 前端安装模块 npm i weixin-js-sdk main.js 添加一行代码 Vue.config.ignoredElements.push('wx-open-launch-weapp') 前端代码 <template> <view class="page"> <
uniapp微信公众号（h5）端跳转微信小程序
章小鱼的博客
06-06 3064
uniapp H5端微信公众号跳转微信小程序
微信小程序内嵌h5页面接受数据并请求
09-12
要在微信小程序中嵌入H5页面，并在H5页面中接收数据并请求，您可以使用以下步骤： 1. 在微信小程序中创建一个web-view组件，它允许您在小程序中显示H5页面。可以使用以下代码创建web-view组件： ```html <web-view src="{{url}}" bindmessage="onMessage"></web-view> ``` 其中，`src`属性用于指定要加载的H5页面的URL地址，`bindmessage`属性用于监听来自H5页面的消息。 2. 在H5页面中，您可以使用`postMessage`方法将数据发送回小程序。例如，您可以使用以下代码将数据发送回小程序： ```javascript var data = {foo: 'bar'}; window.parent.postMessage(data, '*'); ``` 其中，`data`是要发送的数据，`window.parent.postMessage`方法用于将数据发送回小程序。 3. 在微信小程序中，您可以使用`onMessage`方法来监听来自H5页面的消息，并在接收到消息后执行必要的操作。例如，您可以使用以下代码来监听来自H5页面的消息： ```javascript onMessage: function(event) { var data = event.detail.data; // 处理接收到的数据 } ``` 其中，`event.detail.data`表示从H5页面发送的数据。 4. 如果您需要在H5页面中向服务器发送请求并获取响应，可以使用标准的AJAX请求。例如，您可以使用以下代码向服务器发送POST请求： ```javascript var xhr = new XMLHttpRequest(); xhr.open('POST', '/path/to/api'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { var response = JSON.parse(xhr.responseText); // 处理响应数据 } else { console.error(xhr.statusText); } } }; xhr.send(JSON.stringify(data)); ``` 其中，`/path/to/api`是您要访问的API的URL地址，`data`是您要发送的数据。在收到响应后，您可以使用`JSON.parse`方法将响应数据转换为JavaScript对象，并执行必要的操作。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值