目次
ビジネスニーズ
H5 ジャンプして Taro アプレットのページを開きます
解決
コンポーネントを使用して
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/ はサポートされていません。アプレットの右上隅にある「詳細 -> フィードバックと苦情」で開発者にお問い合わせください。
-
解決策 - WeChat パブリック プラットフォーム アプレットでビジネス ドメイン名を構成する