uni-app的添加小程序demo

刚好博主创业的小程序需要到这个功能，你们要的直接copy代码吧

先看效果

组件目录    /components/tipsBox.vue 

<template>
	<view class="tips-box" @click="close" v-if="tipBox">
		<text class="txt">点击「添加小程序」，防止丢失</text>
		<view class="close" >X</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tipBox:true
			}
		},
		mounted() {
			let m = this;
		},
		methods: {
			close(){
				let m=this;
				//博主微信小程序名：程序员实用资源，点个收藏呗
				m.tipBox=!m.tipBox
			}
		}
	}
</script>

<style lang="scss">
	.tips-box{
		position:fixed;
		top:20rpx;
		right:10px;
		background:rgba(64,158,255,0.7);
		padding:10rpx 20rpx 20rpx;
		border-radius: 10rpx;
		z-index: 9999;
		&:after{
			content: "";position: absolute;
			display: block;
			width: 0;
			height: 0;
			top:-44rpx;;
			right:95rpx;
			border-style: solid;
			border-width: 22rpx;
			border-color:  transparent transparent rgba(64,158,255,0.7) transparent;
		}
		.txt{
			color:#fff;
			font-size:12px;
			display: inline-block;
			vertical-align: middle;
		}
		.close{
			color:#fff;
			margin:0 0 0 5px;
			display: inline-block;
			vertical-align: middle;
			font-size:12px;
		}
	}
</style>

 引入的地方

 template部分

<tipsBox></tipsBox>

script部分，我就贴出来需要的部分

import tipsBox from "@/components/tipsBox.vue";//顶部关注
	
	export default {
		components:{
			tipsBox
		},

博文原创，且看，且点赞