三步實現小程序第一次打開提示「添加到個人小程序」

我是用Taro框架開發，因此本文例子也以Taro代碼爲示例，若是你用小程序語言、uni-app等框架也不用擔憂，由於原理是同樣的。

1、理解設計原理

問題的關鍵在於「如何判斷第一次打開」，有兩種方法：
一、打開頁面後本地存一個flag到session；
二、和服務器交互，在登陸後存一個惟一標識到數據庫，如openId。

在相關位置寫下：Taro.setStorageSync('flag', true)

2、組件代碼

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

3、添加樣式

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;
}

以上組件開發完成，在須要的文件引入便可。

掃碼看下效果