博客
关于我
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/

你可能感兴趣的文章
Nginx反向代理是什么意思?如何配置Nginx反向代理?
查看>>
nginx反向代理解决跨域问题,使本地调试更方便
查看>>
Nginx反向代理配置
查看>>
Nginx启动SSL功能,并进行功能优化,你看这个就足够了
查看>>
nginx启动脚本
查看>>
Nginx在Windows上和Linux上(Docker启动)分别配置基本身份认证示例
查看>>
Nginx在Windows下载安装启动与配置前后端请求代理
查看>>
Nginx多域名,多证书,多服务配置,实用版
查看>>
Nginx学习总结(14)——Nginx配置参数详细说明与整理
查看>>
Nginx安装与常见命令
查看>>
Nginx安装及配置详解
查看>>
Nginx实战经验分享:从小白到专家的成长历程!
查看>>
Nginx实现反向代理负载均衡
查看>>
nginx实现负载均衡
查看>>
nginx开机启动脚本
查看>>
nginx异常:the “ssl“ parameter requires ngx_http_ssl_module in /usr/local/nginx/conf
查看>>
nginx总结及使用Docker创建nginx教程
查看>>
nginx报错:the “ssl“ parameter requires ngx_http_ssl_module in /usr/local/nginx/conf/nginx.conf:128
查看>>
nginx报错:the “ssl“ parameter requires ngx_http_ssl_module in usrlocalnginxconfnginx.conf128
查看>>
nginx日志分割并定期删除
查看>>