Three-step implementation widget first opens the prompt "add to my widget"

Keywords: Javascript Session Database

I use Taro framework to develop, so this example also takes Taro code as an example, if you use small program language, uni-app and other frameworks, do not worry, because the principle is the same.

First, understand the design principle.

The key to the problem is "how to judge the first opening". There are two ways:
1. After opening the page, save a flag to session locally.
2. Interact with the server and store a unique identifier to the database after login, such as openId.

Write down at the relevant location: Taro.setStorageSync('flag', true)

Component Code

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>click「Add applets」,Next visit is more convenient ></Text>
          </View>
        </View>
    )
  }
}

export default Tooltip

3. Adding Styles

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

The above components are developed and introduced into the required files.

Scan the code to see the effect

Posted by julius_h on Wed, 02 Oct 2019 19:06:01 -0700