h5页面与小程序页面互相跳转

小程序跳转h5页面

  • 一个home页 /pages/home/home
    • 一个含有点击事件的元素:
    • <button type="primary" bind:tap="toWebView">点击跳转h5页面</button>
    • toWebView(){ wx.navigateTo({ url: '/pages/webview/webview' }) }
  • 一个webView页 /pages/webview/webview
    • 放上web-view标签
    • <web-view src="要跳转的h5页面地址“></web-view>
    • 注意1:web-view里的地址只能是https协议的,不能是http
    • 注意2:这个地址必须在微信公众平台的业务域名中配置(只有企业级小程序才能够配置业务域名),业务域名配置方式如下,管理–>开发管理–>开发设置–>往下滑找到业务域名
      在这里插入图片描述

h5页面跳回小程序

  • 在h5项目中引入JS-SDK ,我的是vue2项目,直接在index.html的head中引入
  • <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  • 在需要返回到小程序的页面加一个元素,点击返回,正常情况下都能顺利返回到小程序首页
  • 在返回的点击事件中调用wx.miniProgram.navigateTo({url:'pages/index/index'})

h5跳回小程序——试过的其他无效方式

  • wx.navigateBack({ delta: 1 });
  • 这种方式在微信开发者工具中能正常跳转,手机上测试也能正常返回,但是客户那里的这个h5页面跳回他们自己的小程序无效;
  • wx.closeWindow()
  • 适用于从公众号进入这个h5的小程序,关闭后回到公众号页面;

小程序内部跳转另一个小程序

  • 这种方式在h5页面使用是无效的
wx.navigateToMiniProgram({
  appId: '', // 另一个小程序的appid
  path: 'page/index/index?id=123',  // 要跳转的页面路径
  extraData: {  // 要传给目标小程序的数据
    foo: 'bar'
  },
  // 要打开的小程序版本  develop:开发版  trial:体验版 release:正式版
  envVersion: 'develop',
  success(res) {
    // 打开成功
  }
})

web-view内支持的跳转方式

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值