Taro开发小程序如何跳转H5页面及踩过的深坑_taro开发h5页面跳转问题

小程序

1. groupTask.js

这个页面是跳转页面。

        import Taro, { Component } from '@tarojs/taro'
        import { WebView, View } from '@tarojs/components'
        import webViewRouterConfig from '@/publicity/common/webViewRouterConfig'

        class Index extends Component {
          config = {
            navigationBarTitleText: '转发消息'
          }

          constructor () {
            super(...arguments)
          }
          
          render() {
            return (
              <View>
              // 跳转链接后面需要拼接h5所需要的参数，h5需要从地址栏中解构参数
                <WebView 
                  src={`${webViewRouterConfig.getWebViewRouter('groupTask')}&role=guide`}
                />
              </View>
            )
          }
        }

        export default Index 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2. webViewRouterConfig.js

这个是跳转的配置页面，封装出来的一个公共的页面，需要把代码中路径填写到WebViewRouterConfig中。下面的跳转的函数，她根据你在项目中配置的环境，去找到不同的h5路径。

        import Taro from '@tarojs/taro'
        import { getSessionId } from '@/utils/login'

        const WebViewRouterConfig = {
          groupTask: {
            url: '/groupTask',
            title: '转发消息
          },
        }

        export default {
          getWebViewRouter (routerName) {
            if (!routerName && !WebViewRouterConfig[routerName]) throw new Error('设置webview路径参数错误')
            const curRouteConfig = WebViewRouterConfig[routerName]
            return `${process.env.CARE_H5_URL}${
              curRouteConfig.url
            }?JSESSIONID=${getSessionId()}&t=${new Date().getTime()}&uuids=${Taro.sensors.getAnonymousID()}`
          }, 
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3. 配置项

这里是项目中的h5地址的配置项。

    module.exports = {
    env: {
     CARE_H5_URL: '"https://xxxxx/# "'
    }
    }
1
2
3
4
5
6

2. H5

1. route.js

    module.exports = [
      // 企微群发任务
      {
        path: '/groupTask',
        component: './groupTask/index',
        title: '企微群发'
        // Routes: ['./routes/isWechat.js'],  只能在微信环境打开

      }, {
        path: '/groupTask/detail',
        component: './groupTask/detail/index',
        title: '企微群发',
      },

    ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2. groupTask.js

    // 从地址栏中取值
  const [role, set_role] = useState(props.history.location.query.role)
1
2

3.特别注意

小程序如果需要跳转别的系统的h5页面（外链），需要对方配合在域名根目录下添加业务域名校验文件，如果对方不能添加，则正式环境不可以跳转对方的页面。
1