微信小程序的webview可以嵌套H5页面，有时候需要在H5页面调用微信小程序内的api，然后传值给H5页面；

以H5跳转微信小程序其他页面为例

/**
* redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
* navigateTo 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
* navigateBack 关闭当前页面，返回上一页面或多级页面
* switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
* reLaunch  关闭所有页面，打开到应用内的某个页面
*/

H5跳转微信小程序页面并传参

方法1.

接入

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

使用

<script>
let button=document.getElementById('button')
button.onClick(()=>{
     wx.miniProgram.redirectTo({
        url: "/pages/index/index?id=1", // id:所需参数
        success: (res) => {
          console.log(res); // 页面跳转成功
        },
        fail: (err) => {
          console.log(err); // 页面跳转失败
        },
      });
})
</script>

方法二：

接入

npm install weixin-js-sdk --save

使用

//页面引入sdk
import wx from "weixin-js-sdk";

wx.miniProgram.redirectTo({
        url: "/pages/index/index?id=1", // id:所需参数
        success: (res) => {
          console.log(res); // 页面跳转成功的回调函数
        },
        fail: (err) => {
          console.log(err); // 页面跳转失败的回调函数
        },
      });

微信小程序页面接收参数

微信小程序 index.js

onLoad(options){
    console.log(options.id)
}