本组件使用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 确保特殊字符安全传输<ViewonClick={() => {Taro.navigateTo({url: `/pages/webview/webview?url=${encodeURIComponent('目标h5的页面地址：')}`});}}></View>
总结
-
动态网页加载：支持外部 URL 传入
-
身份认证透传：自动附加登录态参数
-
安全分享机制：生成去敏化的分享链接
-
多平台适配：通过 Taro 实现跨小程序平台运行
适用于需要在小程序中嵌入 H5 页面且要求保持登录态的业务场景，如：医疗问诊、电商支付等需要网页与原生混合开发的场景。
