Taro小程序中web-view组件实现H5页面跳转与通信详解

  async componentDidMount() {
    const router = getCurrentInstance().router;
    const params = router.params;
   
    let url = params.weburl;
    // 对url进行参数处理 ，可以增加需要传递给H5的token等其他参数

    this.setState({
      url: url, // 获取其他小程序页面 请求跳转的地址
    });
  }  


  render() {
    const { url } = this.state;

    return (
    <WebView
        src={decodeURIComponent(url)} // H5地址  加上域名的全链路地址
        onMessage={(res) => {
          this.setPostMessage(res.detail.data); // 存储H5传回来的数据 可以存到公共区域 方便使用
        }}
      />
    );
  }
 

const token=''; // 自行获取token
const weburl='' ;// 自行定义地址
Taro.navigateTo({
    url: `/subPages/webView/index?weburl=${weburl}&token=${token}` ,
});

const toWebFun = (type = 'navigateTo') => {
  return function (url, isRequireToken) {
    const params = queryToObj(url); // 
    const token = Taro.getStorageSync(ConstantList.TOKEN); // 
    const host = Config.HOST_H5; // H5固定域名
    const TaroNavigate = type === 'redirectTo' ? Taro.redirectTo : Taro.navigateTo;
    let path = '';
    let tokenKey = '?token=';
    let ismini = '?ismini=1'; // 个人定义代表小程序内打开H5 方便区分

    // 带有https链接情况 就不使用host固定域名
    if (url.includes('https://')) {
      path = `/subPages/webView/index?weburl=${encodeURIComponent(
        `${url}${url.indexOf('?') > -1 ? '&token=' : '?token='}${token}&ismini=1`,
      )}`;
      TaroNavigate({
        url: path,
      });
      return;
    }
    // 如果连接本身带有?后面参数 则不要覆盖 而是追加 
    if (url.indexOf('?') !== -1) {
      tokenKey = '&token=';
      ismini = '&ismini=1';
    }
    if (isRequireToken) { // 是否需要登录的页面
      if (token) {
        path = `/subPages/webView/index?weburl=${encodeURIComponent(`${host}#${url + tokenKey + token}${ismini}`)} `;
      } else {
// 需要登录 有没有token的情况 先跳转登录 然后 带上url登陆后继续执行跳转操作 又会继续执行toWebFun 函数
        Taro.navigateTo({
          url: `/subPages/login/index?redirectTo=${url}`,
        });
        return;
      }
    } else {
// 无需token
      path = `/subPages/webView/index?weburl=${encodeURIComponent(`${host}#${url}${ismini}`)}`;
    }
    TaroNavigate({
      url: path,
    });
  };
};

export const navigateToWeb = toWebFun();

// H5与小程序交互的方式

// 返回小程序首页
wx.miniProgram.navigateTo({url: '/pages/home/index'})

// 给小程序传递参数
wx.miniProgram.postMessage({ data: 'foo' })
// 给小程序传递复杂参数
wx.miniProgram.postMessage({ data: {foo: 'bar'} }) 

// 小程序web-view 存储H5传回来的数据
// onMessage={(res) => {
//    this.setPostMessage(res.detail.data); // 存储H5传回来的数据
// }}

// 获取当前环境
wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })  
 
// 小程序下的H5 去小程序的虚拟订单页
wx.miniProgram.navigateTo({url:`/subPages/virtualOrderList/virtualOrderList?type=coupon`});