小程序如何跳转到第三方H5页面

需求:

用户提供了他们的H5地址,希望在我们的小程序平台上开个口子,能够直接跳转到他们的H5页面

问题:

我们的小程序其实是一个壳,所有的业务都写在H5页面中,然后通过web-view将我们的应用嵌入到小程序之中
如果实现这一需求,需要的条件是:
- H5与小程序壳通信,告诉小程序要做一个跳转
- 小程序里面并不能想跳哪里就跳哪里,需要遵守微信小程序的规则
- 现有的规则:
  1. 小程序可以跳转到任意小程序,利用wx.navigateToMiniProgram方法,只需要appId和跳转路径参数即可
  2. 小程序跳转到H5,
    1. 首先限制了个人和海外的小程序,
    2. 然后还需要配置第三方H5的业务域名,
    3. 再将校验文件放到对应根域名服务器下
    4. 使用web-view组件嵌入

代码解决过程:

新建一个小程序页面,并在app.js下配置路由
js中的逻辑只有一个,获取跳转到的第三方H5的地址及参数
wxml中嵌入web-view
点击用户留在我们平台的口子,获取到对应的第三方H5地址,然后带上地址参数通知小程序让它跳转到小程序out/out页面,就ok了

注:因为涉及不同平台之间通信的问题,很简单的问题也变得复杂起来,这也是没办法的事情,每个平台都有它的规则,没搞过可能真的不知道咋处理,搞完之后发现也就那样!

参考文章: https://blog.csdn.net/qq_32113629/article/details/79483213

小程序如何跳转到第三方H5页面相关推荐

php支付宝红包跳转接口,支付宝小程序API 跳转支付宝应用或页面
my.ap.navigateToAlipayPage 版本需求:基础库 1.10.0 或更高版本:支付宝客户端 10.1.32 或更高版本 ,若支付宝客户端版本较低,建议做兼容处理. 小程序中跳转到 ...
vue 返回上一页传参_H5页面与微信小程序相互跳转并传参(web-view)
H5页面用vue2.全家桶写的. 一.vue代码编写vue中路由的编写 1)vue init webpack test 2)/src/router/index.js中引入路由组件 import Ind ...
支付宝小程序跳转第三方H5页面
支付宝小程序跳转第三方H5页面基础API跳转 web-view my.ap.openURL web-view 和 my.ap.openURL 两者比较 my.ap.navigateToAlipayP ...
微信小程序跳转到第三方H5网页
我开发过程中有小程序跳转到网页的需求,下面分享一下我的实现过程: 使用官方文档web-view组件:web-view 1.首先得通过微信公众平台配置业务域名,配置业务域名需要将校验文件上传到网站服务器 ...
微信小程序跳过第三方的_微信小程序可以跳转第三方页面吗
随着互联网的发展,小程序定制开发的需求也是越来越多了.客户在寻问小程序开发的时候,小程序跳转外部链接是他们比较关心的问题之一.下面我们将小程序跳转外部链接的规则汇总整理,希望用户对小程序的跳转规则有更 ...
php跳转app,小程序支持跳转app么
小程序支持跳转app. 此功能需要用户主动触发才能打开 APP,所以不由 API 来调用,需要用 open-type 的值设置为 launchApp 的 button 组件的点击来触发. 示例: 小程 ...
小程序webview跳转页面后没有返回按钮完美解决方案
随着小程序越来越火爆,使一个产品如果只有公众号H5页面和APP显得不怎么完美,总感觉不搭上小程序这趟流量车,就会少了点什么,心里别扭地很.在此驱动下,我所在公司也决定赶紧上车. 但是,如果要按照小程序 ...
iOS App跟小程序之间跳转
移动应用拉起小程序是指用户可以通过接入该功能的第三方移动应用(APP)跳转至某一微信小程序的指定页面,完成服务后跳回至原移动应用(APP). App和小程序互相跳转: 1)App主动发起小程序卡片分享 ...
android 代码等待一秒,【报Bug】安卓微信旧版本7.0.2 ，支付完成，等待几秒后，再点击完成回到小程序，跳转不了页面。...
详细问题描述微信旧版本7.0.2 ,支付完成,等待几秒后,再点击完成回到小程序,跳转不了页面. (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你 ...

小程序如何跳转到第三方H5页面

小程序如何跳转到第三方H5页面

需求:

问题:

代码解决过程:

小程序如何跳转到第三方H5页面相关推荐

最新文章

热门文章