微信内置浏览器，提示跳转外部浏览器

源码+素材

技术栈

uniapp + Vue2

效果

实现

H5 不提示、微信内置浏览器提示

• JS window.navigator.userAgent 判断

<view class="top-tip" v-if="isWeichatBrowser">
	<text class="op65">点击右上角按钮，然后在弹出的菜单中，点击在浏览器中打开，即可安装</text>
	<image src="./分享箭头.png" mode="scaleToFill"></image>
</view>

data() {
    
    
	return {
    
    
		isWeichatBrowser: false,
	}
},
onLoad() {
    
    
	let result = /MicroMessenger/i.test(window.navigator.userAgent)
	if (result) {
    
    
		this.isWeichatBrowser = true
	}
}

顶部提示的动画弹出

• CSS 动画 animation

.top-tip {
    
    
	height: 80px;
	background-color: rgb(52, 52, 52);
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	/*CSS 动画 animation*/
	animation: loading 1s linear;
	position: relative;
	font-size: 12px;
	padding:0 60px 0 20px;
	image{
    
    
		position: absolute;
		right: 0;
		top:10%;
		width: 50px;
		height: 40px;
		z-index: 99;
	}
}
@keyframes loading {
    
    
	0% {
    
    
		height: 0;
	}
	
	25% {
    
    
		height: 16px;
	}
	
	50% {
    
    
		height: 32px;
	}
	
	75% {
    
    
		height: 48px;
	}
	
	100% {
    
    
		height: 80px;
	}
}