<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]}`})
}
}