業(yè)務(wù)需求

Taro 小程序中h5跳轉(zhuǎn)打開(kāi)頁(yè)面

解決方案

借助 webView 組件打開(kāi)h5頁(yè)面

實(shí)現(xiàn)

1. 使用 WebView 組件創(chuàng)建瀏覽h5的頁(yè)面

@/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頁(yè)面路徑

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": "你的位置信息將用于小程序位置接口的效果展示" // 高速公路行駛持續(xù)后臺(tái)定位
      }
    },
    "plugins": {
      "WechatSI": {
        ...
      }
    },
    "sitemapLocation": sitemap,
    "navigateToMiniProgramAppIdList": [],
  }
  componentDidMount () {
    chat.registerUpdateManagerCallback();

    websocket.setSocketTaskId(0);
    websocket.checkNetWork();//初始化連接,檢查網(wǎng)絡(luò)狀態(tài)
    websocket.clearSocketTimer();
    chat.showMsg()
    websocket.heartBeatTask();
    websocket.registerRecordManagerCallback();//語(yǔ)音
  }
  componentDidShow () {
    if(!Taro.getStorageSync('hasWelcome')){
      Taro.setStorage({ key:'hasWelcome',data:global.indexData.hasWelcome })
    }
  }
  componentDidHide () {
  }

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

  componentCatchError () {}

  componentDidCatchError () {}

  // 在 App 類(lèi)中的 render() 函數(shù)沒(méi)有實(shí)際作用
  // 請(qǐng)勿修改此函數(shù)
  render () {
    return (
      <Provider store={store}>
        <Index />
      </Provider>
    )
  }
}

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

3. 實(shí)現(xiàn)跳轉(zhuǎn)

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

4. 遇到的問(wèn)題

• 無(wú)法打開(kāi)該頁(yè)面 - 不支持打開(kāi) https://www.baidu.com/，請(qǐng)?jiān)凇靶〕绦蛴疑辖歉?>反饋與投訴”中和開(kāi)發(fā)者反饋
  

• 解決 - 在微信公眾平臺(tái) 小程序進(jìn)行業(yè)務(wù)域名配置
  

  
  具體指引 - 業(yè)務(wù)域名設(shè)置–校驗(yàn)文件檢查失敗自查指引文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-701033.html

到了這里，關(guān)于小程序 - Taro小程序中打開(kāi)h5頁(yè)面鏈接 - 并解決：無(wú)法打開(kāi)該頁(yè)面 - 不支持打開(kāi) https://www.baidu.com/，請(qǐng)?jiān)凇靶〕绦蛴疑辖歉?＞反饋與投訴”中和開(kāi)發(fā)者反饋的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！