博客
关于我
H5网页跳转到非调用H5的小程序页面
阅读量:513 次
发布时间:2019-03-07

本文共 920 字,大约阅读时间需要 3 分钟。

一、需求描述

这两天遇到一个需求,用uni-app开发了一个小程序(小程序-A)与H5端(**H5-A **)共用的功能。

  • 这个功能需要在另外的一个小程序(小程序-B)通过webview的方式调用
  • 并且还有一个H5(H5-B)也需要通过 iframe 或者 location.href 的方式去调用显示

二、需要解决的问题

需求里面有这样的需求,这个页面里面有两个按钮,按钮一点击后跳转到对应端的首页,即 小程序-A 点击跳转 小程序-A 的首页;H5-A 点击跳转 H5-A 的首页;小程序-B 点击跳转 小程序-B 的首页;H5-B 点击跳转 H5-B 的首页。

按钮二点击后跳转对应平台相反的端,即 小程序-A 点击跳转 小程序-B 的首页;H5-A 点击跳转 H5-B 的首页;小程序-B 点击跳转 小程序-A 的首页;H5-B 点击跳转 H5-A 的首页。

存在的问题:

小程序-A、H5-A、H5-B实现起来都没有问题,但在小程序-B中使用不了。

原因:

因为在 小程序-B 实际是访问的 H5-A 的页面。这个H5里面通过js可以跳回到 小程序-B 本身的首页里(因为本身就是在这个小程序中去访问的),但是无法跳转到 小程序-A 的首页 (其原理其实相当于没有在小程序中访问,但需要直接在H5中跳转到对应的小程序)。

三、怎么解决

查了一下文档,微信官方前段时间正好发布了一个 网页开放标签

但是,现在这个标签支持的环境是微信环境,注意,外部浏览器不支持。其实这个标签主要用于公众号的开发。

实际解决方法:

小程序-B 里面新建一个空白页,作为中转页面。原理即:小程序-B 中访问了一个H5的页面,点击按钮后跳回 小程序-B 的中转页面并立即使用 uni.navigateToMiniProgram 打开 小程序-A 的首页

扩展:

使用中转页的方式,会打开一个空白页面,用户体验并不是很好。但这也是比较好的解决方法了,因为官方没有提供这样的解决方式。

还有一种解决方式:点击按钮后将 小程序-A 的小程序码显示出来,提供保存扫描,扫描后打开小程序。

参考:

文章仅为本人学习过程的一个记录,仅供参考,如有问题,欢迎指出!

转载地址:http://vtajz.baihongyu.com/

你可能感兴趣的文章
netty——bytebuf的创建、内存分配与池化、组成、扩容规则、写入读取、内存回收、零拷贝
查看>>
netty——Channl的常用方法、ChannelFuture、CloseFuture
查看>>
netty——Future和Promise的使用 线程间的通信
查看>>
netty——Handler和pipeline
查看>>
Vue输出HTML
查看>>
netty——黏包半包的解决方案、滑动窗口的概念
查看>>
Netty中Http客户端、服务端的编解码器
查看>>
Netty中使用WebSocket实现服务端与客户端的长连接通信发送消息
查看>>
Netty中实现多客户端连接与通信-以实现聊天室群聊功能为例(附代码下载)
查看>>
Netty中的组件是怎么交互的?
查看>>
Netty中集成Protobuf实现Java对象数据传递
查看>>
netty之 定长数据流处理数据粘包问题
查看>>
Netty事件注册机制深入解析
查看>>
netty代理
查看>>
Netty入门使用
查看>>
netty入门,入门代码执行流程,netty主要组件的理解
查看>>
Netty原理分析及实战(一)-同步阻塞模型(BIO)
查看>>
Netty原理分析及实战(三)-高可用服务端搭建
查看>>
Netty原理分析及实战(二)-同步非阻塞模型(NIO)
查看>>
Netty原理分析及实战(四)-客户端与服务端双向通信
查看>>