小程序如何跳转到第三方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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐