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

业务场景：A小程序在做业务时需要到B网站去做授权签合同，签完合同后需要从B网站回到A小程序

1、在A小程序端，使用web-view标签进行网页跳转。web-view标签中还有其他属性可参照：微信官方文档web-view

index.wxml
<view>
    <web-view src="{{url}}"></web-view>
</view>
 
index.js
onLoad: function (options) {
    
    this.setData({
          url: 'xxxxx?token=' + token,// 可在url后携带所需的参数
    });
    
  },

2、在B网站的H5端，引用jssdk，可使用sdk中提供的接口完成从H5页面回到小程序的任意页面。除了下面列举的方法，可打开上方的官方文档，还有一些其他方法可以使用。

// <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> 引用相关js即可使用下方方法
 
// javascript
// 回到小程序的任意页面，但不能是tabBar定义的页面
wx.miniProgram.navigateTo({url: '/path/to/page'}) 
 
// 此方法只能回到tabBar定义的页面，其他页面无法用该方法实现跳转
wx.miniProgram.switchTab({url: '/path/to/page'})
 
// 此方法是H5向小程序跳转时携带参数
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })

3、在开发阶段，使用微信开发者工具进行开发版联调时，可打开不校验业务域名的校验，实现跳转完成联调。使用体验版小程序时，可点击右上角三个点，选择打开调试模式即可，这样就不校验业务域名了。

4、上线时需要在微信公众平台配置业务域名，即跳转url的访问域名。首先配置的域名一定是生产访问的域名，不可带有端口号，其次下载的校验文件要放到B网站域名的根目录下，若有问题可根据“具体指引”的链接进行排查。

5、注意事项（开发中踩过的坑）：

第一、上面提到的B网站往A小程序跳转的方法仅限于双方互相跳转，如果B网站单方面需要往A小程序跳的话，这种方法就不适用，而是需要在H5端配置需要跳转的小程序的信息（wx.config）,这种跳转要复杂一些，在这里不作说明。

第二、A小程序首先访问了B网站，B网站又跳转了C网站，如果只加B网站的域名，那么生产上也是有问题的，也需要配置C网站的业务域名才能访问。（若B网站通过代理，可以不配置C网站的域名也可成功访问，但是这部分本人做的，所以不清楚~~~）

第三、使用web-view标签跳转的网页也还属于小程序范围内，所以可以对H5页面进行调试。

在微信开发在工具可点击左下角“打开webview调试页”按钮进行调试，在真机调试或体验版下，可打开调试模式看到H5端的console 日志。

下方在文档中的注意事项一定注意！！！