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 
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()}`
          }, 
        }
3. 配置项

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


    module.exports = {
    env: {
     CARE_H5_URL: '"https://xxxxx/# "'
    }
    }

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: '企微群发',
      },

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

3.特别注意

小程序如果需要跳转别的系统的h5页面(外链),需要对方配合在域名根目录下添加业务域名校验文件,如果对方不能添加,则正式环境不可以跳转对方的页面。
  • 10
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值