uniapp开发的H5嵌套在uniapp开发的小程序中，如何从H5跳回小程序

最新推荐文章于 2024-05-22 18:00:57 发布
最新推荐文章于 2024-05-22 18:00:57 发布
阅读量3.8k 收藏 3
点赞数 1
分类专栏： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/World_Mei/article/details/106997886
版权

一、引用依赖的文件
在 web-view 加载的 HTML 中调用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK。

<!-- 微信 JS-SDK  -->  
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
<!
最低0.47元/天 解锁文章
World_Mei
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
基于UniAPP的小程序跨端开发02
04-07
在本节中，我们将深入探讨基于UniAPP的小程序跨端开发，这是一项高效且灵活的技术，使得开发者可以构建一次代码，运行多平台。UniAPP是一个开源的框架，它允许开发者用Vue.js语法来开发微信、支付宝、百度、QQ等多...
uniapp、微信小程序 省市县
03-17
在微信小程序中处理“省市区县”也有类似的方法： 1. 数据获取：微信小程序提供了`wx.request`接口来发起网络请求，从服务器获取省市区县数据。同时，微信开放平台提供了官方的地址库，开发者可以直接调用接口获取...
uniapp外链h5网页带参数，并返回App
zhaowenxue的博客
02-19 1759
1.首先我这里能从外部返回是因为我的项目中外链的H5网页我有原代码 2.在说从uniapp项目中进入外链，首先点击事件，先进入一个新的vue页面 3.参数添加如下，链接使用web-view这个标签，不懂可以到uniapp官网查看 4.从网页返回，直接在网页添加返回键a标签，使用如下几种方法即可 ...
uniapp APP端使用web-view加载一个H5页面，跳转回APP指定页面
bilibid的博客
12-29 4377
最近app项目中需要对接 海外stripe 支付根据官方文档调试支付成功后，回调是跳转线上地址的链接，返回app需要一步步返回。由此产生需求h5返回app任意页面。 H5页面中需要引入uni.webView.js 详情
uniapp_内嵌H5
最新发布
分享程序相关知识
05-22 494
使用uniapp开发微信小程序，实现内嵌H5的功能。
从h5页面跳转回小程序页面 失败
Hero_rong的博客
03-13 3273
场景： 在小程序里嵌套h5页面，然后从h5跳转回小程序，jwexin-1.3.2.js 也引入了，然后打印 wx 也可以打印出来，但是页面就是不跳转！ 方法： navigateTo， redirecTo 只能打开非 tabBar页面！ 所以当你发现跳转失败的时候，就要检查是不是tabBar页面 1.在 html 页面引入 js 2.在需要跳转回小程序的页面 添加window.wx...
uniapp 小程序内嵌H5链接返回到小程序页面
qq_16704959的博客
08-17 897
1、使用 weixin-js-sdk，特别注意的是，在vue项目中之前安装过weixin-js-sdk的，一定要要跟新，但是好像只可以更新到1.6.0版本，而微信要求最低版本是1.6.4，不过不影响使用。 安装weixin-js-sdk： cnpm installweixin-js-sdk --save <template> <div> <button class="wx-btn" @click="jump">跳转小程序</button&g...
uniapp 微信小程序内嵌H5页面跳转到微信小程序页面
风行u
06-09 1167
1.在项目中安装微信sdk npm install weixin-js-sdk
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
10-18
总结来说，`wx.chooseImage` API 提供了微信小程序中图片选择的核心功能，通过合理配置参数和处理回调，可以实现用户从相册选取或拍照上传图片的交互体验，进一步丰富了小程序的功能性。开发者应当根据实际需求，...
uniapp 2023新年送祝福微信小程序源码 支持流量主
01-08
uniapp允许开发者使用一套代码库，构建iOS、Android、H5、微信小程序、支付宝小程序等多个平台的应用。这个框架极大地方便了开发者，减少了跨平台开发的复杂性。 2023新年送祝福微信小程序源码是本次讨论的重点。...
纯uniapp代码开发实现登录实例
10-15
uni-app是一个基于Vue.js的多端开发框架，允许开发者编写一次代码，应用于H5、微信小程序、支付宝小程序、百度小程序等多个平台。下面，我们将逐一分析关键文件的作用，并提供关于登录功能实现的相关知识点。 1. **...
uniapp的h5跳转到uniapp页面 调配wenview.js
m0_59638694的博客
10-18 514
h5项目本页的dom点击事件跳转到 uniapp 页面， https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js 里面所有方法复制下来形成webview.js 然后引入 然后给dom加入方法 然后跳转路由 uniappjsbridgeready.webview.navigateto 给url："/pages/xxxxx/xxxxx" ...
uniapp 电商app 退出app功能实现
yehaocheng520的博客
10-12 2071
几乎所有的app都是有底部tab栏的，在tab页面中如果点击手机上的返回按键，都要退出app。这个退出app是app退出到后台运行，而不是退出当前账号。 为了兼容安卓与IOS，退出功能代码如下： // #ifdef APP-PLUS if (plus.os.name.toLowerCase() === 'android') { plus.runtime.quit(); }else{ const threadClass = plus.ios.importClass("NSThread"); c
H5唤起 uniapp 版的app 端
艾米的猫儿的博客
08-31 6795
vue H5唤起本地的 app，很好用
Uni-app的webview，H5页面在微信小程序中webview再跳回小程序的解决方案
u010696334的博客
07-16 4003
场景： 微信小程序：uni-app开发 H5:uni-app开发 小程序其中一个场景需要使用webview嵌入H5，待H5里的业务处理完成再跳转回小程序 遇到的问题： webview无法跳转回小程序，并提示Error:[]，这个不友好的提示其实并看不出问题的，代码都是使用微信官方提供的方式，困扰了很久才得以解决 解决方案： 声明一点，webview引用jssdk是不需要配置的wx.config的 第一步，在uni-app手动写一个母板html,这个放到根目录就可以，我不记得官方是否提到过如何
如何Uniapp中嵌入H5，并且在H5中跳转到APP的指定页面
热门推荐
qq_45325916的博客
04-04 1万+
有一个需求是，在app中嵌入一个H5页面，H5是一个网络页面，不在app项目里，APP可以打开H5页面，实现单点登录，并且在H5 页面中打开APP指定的页面。在uniapp中，有一个web-view组件，这就相当于一个浏览器组件，可以用来承载网页的容器，会自动铺满整个页面。src是H5的地址，可以是任何网址，与APP的地址什么的没有关系，也可以是www.baidu.com。这个方法是跳转到APP的指定页面，url就是APP页面的路径，在APP项目中目录结构如下。在这里我们提取出关键的代码。
在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯
weixin_52177681的博客
09-07 2005
uni-app的web-view组件，支持加载远程网页，在app环境下，还支持加载本地HTML页面。在web-view加载页面中，会涉及wx、plus、uni等对象的使用。本文会详述在webview里的uni对象的使用方式，以及和vue页面的通讯方式。HBuilderX 1.0.0 版本开始，uni-app 支持在 web-view 中调用 uni 的 API。
微信小程序(路由)几种页面的跳转方式
望天吼
01-02 1668
wx.switchTab(Object object) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 wx.reLaunch(Object object) 关闭所有页面，打开到应用内的某个页面 wx.redirectTo(Object object) 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 wx.navigateTo(Object obje...
跨平台应用开发进阶(十七) ：uni-app 内嵌 H5 应用并实现双端通信
IT全栈 华强工作室
05-27 9055
uni-app应用开发过程中，需要应用内嵌H5页面，H5分为html、Vue两种。现如今，各大APP平台都拥有属于自己的小程序体系，各种各样的应用都可直接内嵌在APP中实现一站式体验。使用uniapp开发的APP如何实现这样的功能呢？答案就是内嵌web-view。
用uniapp写的h5嵌套在小程序里
06-10
UniApp可以将H5页面打包成小程序，也可以将小程序打包成H5页面，因此可以通过以下步骤将UniApp中的H5页面嵌套在小程序中： 1. 在UniApp中创建一个H5页面，例如在pages目录下新建一个名为h5的目录，在该目录下创建一个名为index.vue的文件。 2. 在index.vue文件中编写H5页面的代码。 3. 在小程序中使用web-view组件嵌套UniApp的H5页面，设置web-view的src属性为H5页面的链接。 4. 在小程序中设置web-view的referrer-policy属性为origin-when-cross-origin，以允许H5页面访问小程序的接口。 下面是一个示例代码： 在UniApp中创建H5页面： ``` <template> <div> <p>Hello, World!</p> </div> </template> <script> export default { name: 'H5Page' } </script> <style scoped> p { color: red; } </style> ``` 在小程序中嵌套H5页面： ``` <web-view src="https://example.com/h5" referrer-policy="origin-when-cross-origin"></web-view> ``` 注意，这里的src属性应该是H5页面的链接，例如这里是https://example.com/h5，而不是小程序的链接。同时，由于小程序的限制，H5页面中可能无法直接调用小程序的接口，因此需要设置referrer-policy属性为origin-when-cross-origin以允许H5页面访问小程序的接口。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值