web前端入门到实战：3步实现小程序第一次打开提示“添加到我的小

本文例子也以Taro代码为示例，如果你用小程序语言、uni-app等框架也不用担心，因为原理是一样的。

一、理解设计原理

问题的关键在于“如何判断第一次打开”，有两种方法：
1、打开页面后本地存一个flag到session；
2、和服务器交互，在登录后存一个唯一标识到数据库，如openId。

在相关位置写下：Taro.setStorageSync('flag', true)

二、组件代码

Tooltip.jsX

import Taro, { Component } from '@tarojs/taro'
import './tooltip.css'

class Tooltip extends Component {
  constructor(props) {
    super(props);
    this.state = {
        isShowTip: true
    }
  }
  componentWillMount() {
    setTimeout(() => {
      this.setState({
        isShowTip: false
      })
    }, 3000);
  }

  render() {
    const { isAdd } = this.state;
    return (
      <View className={!Taro.getStorageSync('flag') && isShowTip ? 'tooltip-box' : 'box-hide'}>
          <View className='arrow'></View>
          <View className='tooltip'>
            <Text>点击「添加小程序」，下次访问更便捷 ></Text>
          </View>
        </View>
    )
  }
}

export default Tooltip
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

三、添加样式

tooltip.css

.tooltip-box {
  position: fixed;
  top: 0;
  /* left: 0; */
  right: 0;
  z-index: 999;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
  width: 600rpx;
}
// 34b5e2  ff6d01  0193ff  ff0114  54ff01
.arrow {
  width: 0;
  height: 0;
  padding: 0;
  margin: 0;
  margin-right: 120rpx;
  border-width: 20rpx;
  border-style: solid;
  border-color:  transparent transparent #0193ff transparent;
}
.tooltip {
  background-color: #0193ff;
  box-shadow: 0 10rpx 20rpx -10rpx #0193ff;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rpx;
  padding: 0 20rpx;
  margin-right: 40rpx;
}
.tooltip > text {
  color: #FFF;
  font-size: 28rpx;
  font-weight: 400;
}
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

以上组件开发完成，在需要的文件引入即可。

扫码看下效果