Taro小程序中打开h5页面链接 - 并解决：无法打开该页面 - 不支持打开 https://www.baidu.com/，请在“小程序右上角更多-＞反馈与投诉”中和开发者反馈

业务需求

Taro 小程序中h5跳转打开页面

解决方案

借助 webView 组件打开h5页面

实现

1. 使用 WebView 组件创建浏览h5的页面

@/pages/webView/webView.js 文件

import Taro, { Component } from '@tarojs/taro'
import { WebView } from '@tarojs/components'
class WebviewDetail extends Component {
  config = {
    navigationBarTitleText: ''
  }
  componentDidMount() {
  }
  render() {
    return (
      <WebView src={decodeURIComponent(this.$router.params.targetUrl)}></WebView>
    )
  }
}
export default WebviewDetail

Taro 中 webView 组件

2. app.js 中配置h5页面路径

29 行 主要代码

/* eslint-disable react/sort-comp */
/* eslint-disable import/first */
import '@tarojs/async-await'
import Taro, { Component } from '@tarojs/taro'
import { Provider } from '@tarojs/redux'
import websocket from './utils/websocket'
import * as websocketActions from '@actions/websocket'
import chat from './utils/chat'
import sitemap from './sitemap.json'
import Index from './pages/index'
import './utils/config'
import '@utils/indexConfig'
import configStore from './store'
import 'taro-ui/dist/style/index.scss'
import './app.scss'

if (process.env.TARO_ENV !== 'alipay') {
  require('@tarojs/async-await')
}

const store = configStore()

class App extends Component {
  config = {
    pages: [
      'pages/index/index',
      'pages/index/history/history',
      'pages/index/history/search',
      'pages/webView/webView', // 【主要代码】
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black',
    },
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
      }
    },
    "plugins": {
      "WechatSI": {
        ...
      }
    },
    "sitemapLocation": sitemap,
    "navigateToMiniProgramAppIdList": [],
  }
  componentDidMount () {
    chat.registerUpdateManagerCallback();

    websocket.setSocketTaskId(0);
    websocket.checkNetWork();//初始化连接,检查网络状态
    websocket.clearSocketTimer();
    chat.showMsg()
    websocket.heartBeatTask();
    websocket.registerRecordManagerCallback();//语音
  }
  componentDidShow () {
    if(!Taro.getStorageSync('hasWelcome')){
      Taro.setStorage({ key:'hasWelcome',data:global.indexData.hasWelcome })
    }
  }
  componentDidHide () {
  }

  componentWillUnmount(){
    store.dispatch(websocketActions.dispatchIsLoginUpload(false));
  }

  componentCatchError () {}

  componentDidCatchError () {}

  // 在 App 类中的 render() 函数没有实际作用
  // 请勿修改此函数
  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }
}

Taro.render(<App />, document.getElementById('app'))

3. 实现跳转

Taro.navigateTo({
  url: '../webView/webView?targetUrl=' + encodeURIComponent(e.href), // e.href 为要跳转的h5地址，如 https://www.baidu.com/
})

4. 遇到的问题

• 无法打开该页面 - 不支持打开 https://www.baidu.com/，请在“小程序右上角更多->反馈与投诉”中和开发者反馈
  

• 解决 - 在微信公众平台 小程序进行业务域名配置
  

  
  具体指引 - 业务域名设置–校验文件检查失败自查指引