Taro 애플릿에서 h5 페이지 링크를 열고 해결: 페이지를 열 수 없습니다. 및 불만" 피드백

비즈니스 요구사항

Taro 애플릿의 열린 페이지로 H5 점프

해결책

구성 요소 의 도움으로 webViewh5 페이지를 엽니다.

성취하다

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/은 지원되지 않습니다. 애플릿의 오른쪽 상단에 있는 "더보기 -> 피드백 및 불만 사항"에서 개발자에게 문의하십시오.
  

• 솔루션 - WeChat 공용 플랫폼 애플릿에서 비즈니스 도메인 이름 구성
  

  
  세부지침 - 사업자도메인 설정 - 검증파일 확인 실패 시 자가진단 지침