业务需求
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
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/,请在“小程序右上角更多->反馈与投诉”中和开发者反馈
-
解决 - 在微信公众平台 小程序进行业务域名配置