微信小程序如何自定义新用户引导页

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38194393/article/details/89495786
根据不同的需求，现在出现了给小程序添加新用户引导页面。
设计流程：指引用户点击右上角，将本小程序添加到我的小程序。点击“去试试”后不再显示。前提是新用户或者首次打开。
设计图：

实现步骤：
1》思路：在小程序首页生命周期函数中，加入条件判断。在用户点击【记住了，我去试试】事件上增加缓存信息。
2》用这个缓存在用户每次打开小程序的时候来判断是否显示
页面的代码：

<view class='page-cont'>
<view class='top'>
<image src='{{cdnPath}}img/firstOpen/topjiantou.png'></image>
<view class='p_one'>添加友途车服小程序，解决更多养车问题</view>
</view>
<view class='cont'>
<view class='cont-p'>
<view class='text'><text>1</text></view><view>点击右上角</view>
<image src='{{cdnPath}}img/firstOpen/more@2x.png'></image>
</view>
<view class='cont-p'>
<view class='text'><text>2</text></view><view>点击“添加我的小程序”</view>
</view>
<view class='cont-p'>
<view class='text'><text>3</text></view><view>回到微信首页下拉聊天列表，</view>
</view>
<view class='cont-p-lib'>
<view class='text' style='opacity:0;'><text>3</text></view><view>从“我的小程序”里打开“友途车服VIP”</view>
</view>
<view class='cont-p-three'>
<image src='{{cdnPath}}img/firstOpen/jiantou.png'></image>
<view class='right' style='background:url({{cdnPath}}img/firstOpen/bg.png) no-repeat center; background-size: 100% 100%;'>
<view class='left-p'>
<view class='title'>我的小程序</view>
<image src='{{cdnPath}}img/firstOpen/logo@2x.png'></image>友途车服VIP</view>
<view class='left-p'>
<view class='title' style='opacity:0;'>我的小程序</view>
<view style='color:#4C4C4E;27px;height:27px;border-radius:50%;background:#4C4C4E;'></view>小程序</view>
</view>
</view>
</view>
<view class='bottom' bindtap='closeThis'>记住了 我去试试</view>
</view>

样式代码：

.page-cont,.shadow-box{
position: fixed;
 100%;
height: 100%;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background-color: rgba(22, 23, 24, 0.5);
}
.page-cont .top{
100%;
display:flex;
flex-direction: column;
}
.page-cont .top image{
32px;
height:41px;
margin:4% 0 4% 77%;
}
.page-cont .top .p_one{
float:right;
80%;
font-size:28rpx;
line-height:72rpx;
color:#fff;
background:#27C084;
text-align:center;
border-radius:34rpx;
margin: 0 0 0 15%;
}
.page-cont .cont{
100%;
margin-top:30rpx;
display:flex;
flex-direction:column;
}
.page-cont .cont .cont-p{
80%;
margin-left:5%;
margin-top:30rpx;
display:flex;
color:#fff;
font-size:30rpx;
line-height:72rpx;
}
.page-cont .cont .cont-p .text{
color:#fff;
font-size:30rpx;
line-height:40rpx;
40rpx;
height:40rpx;
text-align:center;
border-radius:50%;
background:#27C084;
margin-right:20rpx;
margin-top:16rpx;
display:flex;
flex-direction:column;
}
.page-cont .cont .cont-p image{
41px;
height:28px;
margin:8rpx 0 0 20rpx;
border:1px dashed #fff;
}
.page-cont .cont .cont-p-lib{
90%;
margin-left:5%;
display:flex;
color:#fff;
font-size:30rpx;
}
.page-cont .cont .cont-p-lib .text{
color:#fff;
font-size:30rpx;
line-height:40rpx;
40rpx;
height:40rpx;
text-align:center;
border-radius:50%;
background:#27C084;
margin-right:20rpx;
margin-top:16rpx;
display:flex;
flex-direction:column;
}
.page-cont .cont .cont-p-three{
80%;
margin-left:10%;
margin-top:30rpx;
display:flex;
align-items: center;
color:#fff;
font-size:30rpx;
line-height:72rpx;
}
.page-cont .cont .cont-p-three image{
41px;
height:32px;
margin-right:20rpx;
}
.cont-p-three .right{
120px;
height:79px;
border:1px dashed #fff;
display:flex;
text-align:center;
}
.cont-p-three .right{
font-size:18rpx;
line-height:46rpx;
color:#FFF;
}
.cont-p-three .right .left-p{
display:flex;
flex-direction: column;
flex:1;
text-align:center;
align-items:center;
}
.cont-p-three .right .left-p image{
27px;
height:27px;
}
.page-cont .bottom{
60%;
font-size:30rpx;
line-height:72rpx;
text-align:center;
border-radius:44rpx;
border:1px solid #fff;
margin:10% auto 0 auto;
color:#fff;
}

　　

JS中的主要代码：

data:{
isTiptrue: true,
},
onLoad: function (query) {
let firstOpen = wx.getStorageSync("loadOpen")
console.log("是否首次打开本页面==",firstOpen)
if (firstOpen == undefined || firstOpen == '') { //根据缓存周期决定是否显示新手引导
this.setData({
isTiptrue: true,
})
} else {
this.setData({
isTiptrue: false,
})
}
},
closeThis(e){
wx.setStorage({
key: 'loadOpen',
data: 'OpenTwo'
})
this.setData({
isTiptrue:false
})
},

版权声明：本文为CSDN博主「沉默的小猴子」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38194393/article/details/89495786