当前位置：首页 > news >正文

小程序跳转到h5页面

news 来源：原创 2025/6/10 13:20:26

本组件使用useState、WebView、Taro的钩子，以及taro-hooks中的useRouter。组件内部使用了useRouter获取路由信息，从存储中获取openId和TOKEN，然后通过useReady生命周期钩子设置URL。分享功能部分使用useShareAppMessage处理，构建分享的路径和标题。最后，拼接URL参数并返回WebView组件。

代码实现

import { useState } from 'react';
import { WebView } from '@tarojs/components';
import Taro, { useReady, useShareAppMessage } from '@tarojs/taro';
import { useRouter } from 'taro-hooks';

const WebViewPage = () => {
  const [routerInfo] = useRouter();
  // v2.4.4 新增openid 后端在php支付用
  const openId = Taro.getStorageSync('openId');
  const cookies = Taro.getStorageSync(TOKEN);
  const { params, path } = routerInfo;
  const { title } = params;
  const [readyUrl, setReadyUrl] = useState('');

  useReady(() => {
    const realUrl = Taro?.getCurrentInstance()?.router?.params?.url;
    setReadyUrl(realUrl || '');
  });

  useShareAppMessage(({ webViewUrl }) => {
    const url = new URL(webViewUrl as string);

    const searchParams = new URLSearchParams(url.search);

    searchParams.delete('cuid');
    searchParams.delete('customersalt');
    searchParams.delete('open_id');

    url.search = searchParams.toString();

    const sharedSearchParams = new URLSearchParams();

    sharedSearchParams.append('url', decodeURIComponent(url.href));
    title && sharedSearchParams.append('title', decodeURIComponent(title));

    return {
      title: title || 'title',
      path: `/${path}?${sharedSearchParams.toString()}`
    };
  });

  const decodeUrl = decodeURIComponent(readyUrl || '');
  const qMark = decodeUrl.indexOf('?') > -1 ? '' : '?';

  const src = `${decodeUrl}${qMark}&source=yl_mini_program&customersalt=${encodeURIComponent(
    cookies || ''
  )}&cuid=${encodeURIComponent(cookies || '')}&open_id=${openId}`;

  if (readyUrl?.trim?.()) {
    return <WebView src={src} />;
  }
};
export default WebViewPage;

使用

//使用 encodeURIComponent 确保特殊字符安全传输
 <View
      onClick={() => {
          Taro.navigateTo({
            url: `/pages/webview/webview?url=${encodeURIComponent('目标h5的页面地址：')}`
          });
      }}
    >
    </View>