Table of contents
Business needs
H5 jump to open page in Taro applet
solution
webViewOpen the h5 page with the help of the component
accomplish
1. Use the WebView component to create a page for viewing h5
@/pages/webView/webView.jsdocument
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.jsConfigure the h5 page path in
29 lines of main code
/* 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. Realize the jump
Taro.navigateTo({
url: '../webView/webView?targetUrl=' + encodeURIComponent(e.href), // e.href 为要跳转的h5地址，如 https://www.baidu.com/
})
4. Problems encountered
-
Unable to open this page - https://www.baidu.com/ is not supported, please contact the developer in "More -> Feedback and Complaint" in the upper right corner of the applet
-
Solution - configure the business domain name in the WeChat public platform applet
