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

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

需求:

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

问题:

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

代码解决过程:

  1. 新建一个小程序页面,并在app.js下配置路由在这里插入图片描述

  2. js中的逻辑只有一个,获取跳转到的第三方H5的地址及参数在这里插入图片描述

  3. wxml中嵌入web-view在这里插入图片描述

  4. 点击用户留在我们平台的口子,获取到对应的第三方H5地址,然后带上地址参数通知小程序让它跳转到小程序out/out页面,就ok了在这里插入图片描述

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值