小程序跳到h5页面_[笔记]实现小程序和H5页面之间互相跳转

一、背景

需求背景是这样的，在小程序里面，点击查看用户签订的协议，跳转到协议详情页，刚好协议详情页在另一个H5项目的已经有，所以就想直接跳转过去，避免再开发小程序版本的协议详情页

二、小程序跳转H5页面

小程序里面运行H5页面，需要嵌在web-view里面，注意：一个项目只能有一个。

Demo:在小程序里面打开百度网页

在小程序项目里面src/pages/新建一个webview的文件夹，含有wxml/wxss/json/js

wxml：

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

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/'

});

这样就成功实现从小程序跳转到H5页面。

三、H5页面返回小程序

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

window.