uni-app之微信小程序web-view显示H5页面

<template>
    <view class="webview">
        <web-view :webview-styles="webviewStyles" :style="webviewStyles" :src="link" @message="onWebMessage"></web-view>
    </view>
</template>

<script>
	import { siteDomain } from '../../config/Config.js'
	export default {
		data() {
			return {
				link: '',
        webviewStyles: {
            progress: false,
            top:uni.getSystemInfoSync().statusBarHeight
        },
        isshare: ''
      }
		},
		onLoad:function(option) {
		  this.isshare = option.isshare
      this.link = option.link
        if (this.link) {
            return
        }
			if (option.hasOwnProperty('url')) {
				let url = decodeURIComponent(option.url)
				url = url.indexOf('http') > -1 ? url : `${siteDomain}${url}`
                let enviromentKey = 'mpweixin'  // 条件编译,默认微信小程序环境
                // #ifdef MP-WEIXIN
                enviromentKey = 'mpweixin'
                // #endif
                // #ifdef MP-ALIPAY
                enviromentKey = 'mpalipay'
                // #endif
                // #ifdef MP-TOUTIAO
                enviromentKey = 'mptoutiao'
                // #endif
                // #ifdef APP-PLUS
                enviromentKey = 'appplus'
                // #endif
                url = `${url}${url.indexOf('?') > -1 ? '&' : '?'}from=${enviromentKey}`
                if(this.$store.state.UserToken) {
                    url = `${url}&dftk=${this.$store.state.UserToken}`
                }
                url = `${url}&t=${Date.now()}`
                this.link = url
				// console.log(this.link)
            }
		},

    // onShareTimeline() {},
    // #ifdef APP-PLUS
    onReady() {
    const systemInfo = uni.getSystemInfoSync()
    if (systemInfo.platform !== 'ios') {
            const currentWebview = this.$mp.page.$getAppWebview()
            const wv = currentWebview.children()[0]
            const statusBarHeight = systemInfo.statusBarHeight
            setTimeout(function() {
                wv.setStyle({ top:statusBarHeight, height: plus.screen.resolutionHeight - statusBarHeight })
            }, 500);
        }
    },
    // #endif
    methods: {
        onWebMessage(e) {
            // console.log(e)
            if (e.detail && e.detail.data && e.detail.data[0] === "navigateBack") {
                // console.log("navigateBack")
                const currentWebview = this.$mp.page.$getAppWebview()
                const wv = currentWebview.children()[0]
                wv.canBack(e => {
                    // console.log("e.canBack", e.canBack)
                    if (e.canBack === 0 || e.canBack === false) {
                        uni.navigateBack()
                    }
                })
            }
        }
    }
	}
</script>

跳转方法:

onBrandTabClicked(index) {
      tools.matchWebRouteAndGo(this.brandFloors[index].url)
}


/**
 * 解析h5版页面配置地址跳转到小程序页面
 * @param url
 */
const matchWebRouteAndGo = (url) => {
  // /country/z190601113433
  // /list?type=2&value=2&name=母婴儿童
  // /special?id=z200808010539
  // /specialcomplex/OE45GBR22NJ461VT
  // /getcoupon?link=pBiam2
  if (!url || url.length < 1) {
    return
  }
  let pregMatch = url.match(/\/country\/([0-9A-Za-z]+)$/)
  if (pregMatch) {
    return uni.navigateTo({url: `/pages/country/index?code=${pregMatch[1]}`})
  }
  pregMatch = url.match(/\/specialcomplex\/([0-9A-Za-z]+)$/)
  if (pregMatch) {
    console.log(pregMatch)
    //return uni.navigateTo({url: `/pages/marketing/specialcomplex/index?code=${pregMatch[1]}`})
    return uni.navigateTo({url: `/pages/web/web?url=${pregMatch[0]}`})
  }
  pregMatch = url.match(/\/special\?id=([0-9A-Za-z]+)$/)
  if (pregMatch) {
    return uni.navigateTo({url: `/pages/marketing/special/index?code=${pregMatch[1]}`})
  }
  pregMatch = url.match(/\/list\?(.+)$/)
  if (pregMatch) {
    let temp = decodeURI(pregMatch[1])
    return uni.navigateTo({url: `/pages/list/list?${temp}`})
  }
  pregMatch = url.match(/\/getcoupon\?(.+)$/)
  if (pregMatch) {
    console.log(pregMatch)
    let temp = decodeURI(pregMatch[1])
    return uni.navigateTo({url: `/pages/marketing/getcoupon/index?${temp}`})
  }
  pregMatch = url.match(/\/brandhall(.+)$/)
  if (pregMatch) {
    let temp = encodeURIComponent(url)
    return uni.navigateTo({url: `/pages/web/web?url=${temp}`})
  }
  pregMatch = url.match(/\/activity(.+)$/)
  if (pregMatch) {
    let temp = encodeURIComponent(url)
    return uni.navigateTo({url: `/pages/web/web?url=${temp}`})
  }
  pregMatch = url.match(/\/help(.+)$/)
  if (pregMatch) {
    let temp = encodeURIComponent(url)
    return uni.navigateTo({url: `/pages/web/web?url=${temp}`})
  }
  pregMatch = url.match(/\/cate(.+)$/)
  if (pregMatch) {
    return uni.navigateTo({url: `/pages/cate/cate${pregMatch[1]}`})
  }
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值