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 (
点击「添加小程序」，下次访问更便捷 >
)
}
}
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）
以上组件开发完成，在需要的文件引入即可。
扫码看下效果
发表评论 (审核通过后显示评论)：