小程序和H5页面互相跳转的实现

需求体现：

在小程序里面，实现小程序和H5页面互相跳转。

1. 实现H5页面跳转小程序

小程序里面加载H5页面，需要嵌在web-view里面，注意：一个项目只能有一个。 例如：在小程序里面打开百度首页，在小程序项目里面src/pages/新建一个webview的文件夹，含有wxml/wxss/json/js

wxml：

<web-view src="{{url}}"></web-view>

js：在onLoad里面获取到url这个参数，然后赋值给data，这样在wxml里面就能取到url的值。

Page({
    data: {
        url: '',
    },
    onLoad: function (param) {
        this.setData({
            url: decodeURIComponent(param.url),
        })
    }
});

json/wxss可以是空文件
在小程序的页面跳转到H5页面的写法

wx.navigateTo({
  url: '../webview/index?url=https://www.baidu.com/'
});

2. H5页面返回小程序

从H5页面返回小程序页面，需要使用微信SDK提供的跳转方法。

window.wx.miniProgram.navigateTo({
    url: `/page/account/index`,
});

使用微信的SDK方法，需要先发送签名验证wx.config

3. 小程序和H5互跳注意事项

[问题描述]：wx.miniProgram.navigateTo中url无法跳转问题
[问题解决]：app.json中配置的tabBar与wx.navigateTo中的url引用相同页面导致

首先pages/account/index这个路径在app.json已经存在，也就是当前从H5页面window.wx.miniProgram.navigateTo(url)的url已经和app.json的一样。此时是不能通过这个方式跳转，而是要改成window.wx.miniProgram.reLaunch(url)

总结：如果url在app.json已定义，则使用reLaunch跳转，如果没有，则使用miniProgram.navigateTo(url)