小步伐与H5页面相互跳转

业务场景：A小步伐在做业务时需要到B网站去做授权签条约，签完条约后需要从B网站回到A小步伐
1、在A小步伐端，利用web-view标签进行网页跳转。web-view标签中尚有其他属性可参照：微信官方文档web-view

1. index.wxml
2. <view>
3.     <web-view src="{{url}}"></web-view>
4. </view>
6. index.js
7. onLoad: function (options) {
8.    
9.     this.setData({
10.           url: 'xxxxx?token=' + token,// 可在url后携带所需的参数
11.     });
12.    
13.   },

复制代码

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

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

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。