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内支持的跳转方式